인프런 '실전 웹 성능 최적화' 강의를 듣고 정리해 봤다.
해야하는 이유
- 사용자가 떠나지 않도록
- FE 개발자로서 경쟁력
웹 성능 결정 요소
- 로딩 성능 (리소스 불러오기)
- 렌더링 성능 (리소스 화면에 그리기)
흐름
분석 -> 최적화 -> 결과 확인
분석 툴
성능 측정시에는 local이 아닌 production
빌드 기준으로 검사한 것을 기준으로 해야한다.
크롬 Network 탭
어떤 리소스를 다운로드 요청했는지, 걸린 시간, 응답등을 확인할 수 있다.
크롬 Performance 탭
페이지가 로드되면서 실행되는 작업들을 타임라인과 차트 형태로 보여줌
- history 보기 : 상단 드롭다운을 활용해 이전 검사 내역도 볼 수 있다.
- system 관련한 작업 안 보기 : 내 코드와 관련 없는 시스템 관련 작업을 안 볼 수 있다.
크롬 Lighthouse 탭
성능 측정
검사할 항목 체크후 Analyze ~
클릭
Metrics
: 성능 측정 결과First Contentful Paint
: 첫 텍스트 or 이미지가 그려질 때까지 걸린 시간Time to Interactive
: 페이지가 완전히 상호작용 가능할 때까지 걸린 시간Speed Index
: 페이지 로딩 중에 컨텐츠가 보여질 때까지 걸린 시간Total Blocking Time
: 사용자 입력을 무시하고 페이지가 블락되어있는 시간,FCP
와TTI
사이에서 페이지가 블락되어 있는 시간의 총 합Largest Contentful Paint
: 가장 큰 텍스트 or 이미지가 그려질 때까지 걸린 시간Cumulative Layout Shift
: 페이지의 전체 수명 동안 발생하는 모든 레이아웃 이동의 총 합
Opportunities
: 로딩 성능Diagnostics
: 렌더링 성능
크롬 Coverage 탭
로딩한 리소스들이 얼마나 사용되고 있는지 확인할 수 있다.
이를 활용해 불필요한 코드를 분석할 수 있다.
webpack-bundle-analyzer
번들된 파일의 각 크기, 정보들을 볼 수 있다.
cra
의 경우 cra-bundle-analyzer
를 활용해 webpack config를 수정하지 않고 사용할 수 있다.
'프론트엔드 > 성능 최적화' 카테고리의 다른 글
로딩 성능 최적화 - 캐시 (0) | 2023.04.28 |
---|---|
로딩 성능 최적화 - 폰트 (0) | 2023.04.28 |
로딩 성능 최적화 - 프리 로딩 (0) | 2023.04.28 |
로딩 성능 최적화 - 코드 스플릿, 레이지 로딩 (0) | 2023.04.28 |
로딩 성능 최적화 - 이미지, 동영상 (0) | 2023.04.25 |