Performance
Performance 항목에서는 웹 성능을 측정한다.
- 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지,
- 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지,
- 화면에 불안정한 요소는 없는지 등을 확인한다.
Opportunities
Google Lighthouse가 이 페이지가 더 빠를 수 있는 리스트를 제안하는 것
구글 라이트하우스 공식문서 opportunities 항목 17가지
- Eliminate render-blocking resources
- Properly size images
- Defer offscreen images
- Minify CSS
- Minify JavaScript
- Remove unused CSS
- Efficiently encode images
- Serve images in modern formats
- Enable text compression
- your webpage load performance.
- Preconnect to required origins
- Reduce server response times (TTFB)
- Avoid multiple page redirects
- speed and how to avoid them.
- Preload key requests
- Use video formats for animated content
- Reduce the impact of third-party code
- Avoid non-composited animations
- Lazy load third-party resources with facades
출처: https://developer.chrome.com/en/docs/lighthouse/performance/
항목이 많으니 3개만 알아보자.
사용하지 않는 JavaScript 줄이기
사용하지 않는 JavaScript를 줄이면 렌더링 차단 동작을 줄여 페이지 로드 속도를 높이고 방문자의 페이지 경험을 개선할 수 있다.
사용하지 않는 자바스크립트
사용하지 않는 JavaScript는 브라우저 실행 시간을 불필요하게 늘려 페이지 로드 속도를 늦춘다.
사용하지 않는 자바스크립트의 종류
1) 중요하지 않은 자바스크립트
- 스크롤 없이 볼 수 있는 콘텐츠에는 필요하지 않지만 페이지 또는 다른 페이지의 다른 곳에서 계속 사용할 수 있는 JavaScript이다.
2) 죽은 자바스크립트
- 더 이상 사용되지 않는 코드(이전 버전 사이트의 잔재가 포함되거나 더 이상 참조되지 않는 다른 모듈에서 가져온 것일 수 있으며 테스트의 일부로 사용되었다.(즉, 일시적으로 사용됨)
사용하지 않는 JavaScript를 줄이는 방법
1) 코드 분할
- 코드 분할을 통해 번들 JavaScript를 중요한 JavaScript와 중요하지 않은 JavaScript로 분리한다.
- 이렇게 하면 중요한 JavaScript만 먼저 로드되므로 렌더링 차단 동작을 줄일 수 있다.
- 그런 다음 페이지에 필요하지 않은 중요하지 않은 JavaScript를 제거할 수 있다.
2) 죽은 코드 제거
- 죽은 JavaScript 코드를 제거하기 위해 트리 쉐이킹 으로 알려진 프로세스를 활용할 수 있다.
- 트리 쉐이킹에 대해 자세히 알아보려면 이 문서를 읽으면 된다.
트리 쉐이킹은 데드 코드 제거를 위해 JavaScript 컨텍스트에서 일반적으로 사용되는 용어이다.
3) 죽은 수입 코드 제거
- 널리 사용되는 라이브러리를 가져온 후 사용하지 않는 코드를 자동으로 제거하는 데 도움이 되는 플러그인을 사용한다.
- 이 플러그인에 대한 자세한 내용을 보려면 여기를 클릭하면 된다.
가장 큰 콘텐츠가 있는 페인트 이미지 미리 로드
LCP 이미지를 미리 로드하면 페이지 로드 초기에 페이지가 시각적으로 완성되어 페이지 콘텐츠가 더 빠르게 로드되고 있음을 방문자에게 알릴 수 있다.
LCP
뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정하며, 이를 이용해 주요 콘텐츠가 유저에게 보이는 시간까지를 가늠할 수 있다.
가장 큰 콘텐츠가 있는 페인트 이미지를 미리 로드하는 방법
HTML 헤더의 링크 태그를 사용하여 미리 로드할 수 있다.
<head>HTML에 다음 코드를 추가한다.
<link rel = "preload" href = "/path/to/image.jpg" as = "이미지" >다음과 같이 더 빠른 이미지 로드를 위해 반응형 이미지와 함께 사용할 수도 있 다.
<link rel="preload">
<link rel = "preload" as = "image" href = "/path/to/image.jpg"
imagesrcset = "image_400px.jpg 400w, image_800px.jpg 800w, image_1600px.jpg 1600w"
이미지 크기 = "50vw" />사용하지 않는 CSS 제거
레이아웃과 방문자의 장치에 따라 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요하지 않은 CSS 규칙을 로드하면 측정 및 인식 측면에서 페이지 성능에 큰 영향을 미칠 수 있으며,전반적으로 사용하지 않는 CSS의 양을 줄이면 브라우저 실행 시간 과 소비되는 대역폭이 줄어들어 페이지 로딩 속도가 빨라진다.
사용하지 않는 CSS 유형
1) 중요하지 않은 CSS
- 이는 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 사용되지 않지만 다른 페이지나 스크롤 없이 볼 수 있는 콘텐츠 스타일 지정에는 계속 사용될 수 있는 CSS 규칙이다.
2) 죽은 CSS 규칙
- 죽은 CSS 규칙은 더 이상 전혀 사용되지 않는 스타일을 말하며, 이전 버전 사이트의 잔재이거나 테스트 및/또는 임시 사용의 일부일 수 있다.
사용하지 않는 CSS 줄이는 방법
1) 중요하지 않은 CSS 규칙의 경우
a) 중요한 CSS 인라인
- 페이지의 HTML에서 직접 중요한 CSS를 인라인하는 것을 고려한다.
b) 코드 분할 CSS
- 코드 분할을 통해 중요하지 않은 CSS를 분리하면 중요한 CSS만 먼저 로드되고 나머지 중요하지 않은 CSS는 나중에 로드될 수 있으므로 렌더링 차단 동작을 줄일 수 있다.
2) 죽은 CSS 규칙의 경우
- 유사하거나 중복된 규칙에 대한 감사를 고려하여 CSS 공간을 더 줄인다.
- 죽은 CSS를 제거하는 방법 자세히 알 수 있다.
3) WordPress(또는 다른 CMS) 사용자의 경우
- WordPress(또는 다른 CMS) 플러그인을 사용하여 이를 달성하는 데 도움이 될 수 있다.
- ex) WP Rocket 에는 CSS 제공 최적화 옵션이 있으며 여기에는 사용하지 않는 CSS 감소 기능도 포함되어 있다.
