웹 개발 스킬을 한단계 높여주는 프론트엔드 성능 최적화 - 0

2년전에 책을 구입하고 실습과 함께 진행해야해서 미뤄두었다가 추석때 시간을 내서 읽기 시작하였다. 정리하며 읽어보자.

 

머리말에 인상깊은 말들이 있는데

• 웹 성능의 향상이 사용자를 서비스에 머무르게 하여 서비스의 성공을 가져온다.
• 실력의 차이를 만드는 프론트엔드 개발자의 디테일
  • 웹 개발에 어느정도 익숙한 개발자라면 원하는 기능을 구현하는 데 큰 어려움이 없을 것이다. 하지만 한 끗 차이를 만드는 건, 정확한 기능 구현을 넘어 사용자 경험까지 생각하는 섬세함이다. 콘텐츠 사이즈 최적화, 컴포넌트 지연로딩과 사전로딩, 병목코드 최적화, 캐시 최적화 등 더 향상된 로딩 성능과 렌더링 성능으로 경쟁력을 높여보자.
• 구글의 주장하는 핵심은 “성능이 저하되면 사용자가 떠나고 매출이 감소한다”
• 웹 성능을 결정하는 요소는 크게 로딩 성능과 렌더링 성능으로 나눌 수 있다.
  • 로딩 성능은 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할때의 성능을 말한다.
  • 렌더링 성능은 다운로드한 리소스를 가지고 화면을 그릴 때의 성능을 말한다. 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러운 정도가 달라진다. 렌더링 성능을 개선하는 방법은 다양하고 서비스의 유형에 따라서도 다르다. 그래서 자신의 서비스에 필요한 최적화 기법을 적용하려면 브라우저의 동작 원리나 사용하는 프레임워크의 라이프 사이클 등 웹 개발의 기본 지식을 이해하고 있어야한다.
• 1장 (블로그)
  • webpack-bundle-analyzer를 이용한 번들 파일 분석
  • 이미지 CDN을 통한 이미지 사이즈의 최적화
  • 코드 분할과 컴포넌트 지연 로딩
  • 텍스트 압축기법
  • 병목 코드 분석과 최적화
• 2장 (모달과 사용자 인터렉션)
  • 브라우저 렌더링 과정
  • css 애니메이션 최적화
  • 컴포넌트 지연로딩
  • 컴포넌트 사전 로딩
  • 이미지 사전 로딩
• 3장 (4개 페이지로 이루어진 동영상 재생, 웹폰트)
  • 개발자 도구의 coverage 이용한 분석
  • 이미지 지연 로딩
  • 이미지 포멧 종류
  • 이미지 사이즈 최적화
  • 동영상 포멧 종류
  • 동영상 사이즈 최적화
  • 폰트 최적화
  • 캐시 최적화
  • 불필요한 css 제거
• 4장 (이미지 갤러리 서비스 최적화, 카테고리 필터링, 모달 표시)
  • React Developer Tools 활용
  • react lifecycle 분석
  • 이미지 지연로딩
  • layout shift 피하기
  • redux의 useSelector 렌더링 최적화
  • 메모이제이션을 활용한 최적화
  • 병목 함수 로직 개선

 

들어가기전 목차와 인상깊었던 말을 정리하고 다음 장에서는 본격적으로 시작하자.