Chrome의 웹 도구를 사용하여 사용자 환경을 개선할 기회를 찾습니다.
게시일: 2021년 5월 11일
오늘은 Lighthouse, PageSpeed, DevTools의 새로운 도구 기능을 다루어 사이트가 Web Vitals를 개선할 수 있는 방법을 파악하는 데 도움을 드리겠습니다.
도구에 대해 다시 설명하자면 Lighthouse는 웹페이지 품질을 개선하는 데 사용할 수 있는 자동화된 오픈소스 도구입니다. Chrome DevTools 디버깅 도구 모음에서 찾을 수 있으며 공개 웹페이지 또는 인증이 필요한 웹페이지에서 실행할 수 있습니다. Lighthouse는 PageSpeed Insights, CI, WebPageTest에서도 찾을 수 있습니다.
Lighthouse 7.x에는 사용자 환경 측정항목에 영향을 미치는 UI 부분 (예: 레이아웃 변경에 기여하는 노드)을 더 쉽게 시각적으로 검사할 수 있는 요소 스크린샷과 같은 새로운 기능이 포함되어 있습니다.
또한 PageSpeed Insights에서 요소 스크린샷을 지원하여 일회성 페이지 성능 실행에서 문제를 더 쉽게 발견할 수 있습니다.
Core Web Vitals 측정
Lighthouse는 최대 콘텐츠 페인트, 누적 레이아웃 이동, 총 차단 시간(첫 입력 지연의 실험실 프록시)을 포함한 Core Web Vitals 측정항목을 종합적으로 측정할 수 있습니다. 이러한 측정항목은 로드, 레이아웃 안정성, 상호작용 준비 상태를 반영합니다. Core Web Vitals의 미래에서 강조된 첫 콘텐츠 페인트와 같은 다른 측정항목도 있습니다.
Lighthouse 보고서의 '측정항목' 섹션에는 이러한 측정항목의 실험실 버전이 포함되어 있습니다. 이를 사용자 환경에서 주의가 필요한 측면을 요약한 뷰로 사용할 수 있습니다.
Chrome UX 보고서 또는 RUM에서 찾을 수 있는 것과 같은 필드 측정항목에는 이러한 제한사항이 없으며 실제 사용자의 경험을 반영하므로 실험실 데이터를 보완하는 데 유용합니다. 필드 데이터는 실험실에서 얻을 수 있는 진단 정보를 제공할 수 없으므로 두 가지가 함께 사용됩니다.
Web Vitals를 개선할 수 있는 부분 파악
최대 콘텐츠 페인트 요소 식별
LCP는 인지된 로드 환경을 측정하는 지표입니다. 페이지 로드 중에 기본 또는 '가장 큰' 콘텐츠가 로드되어 사용자에게 표시되는 시점을 표시합니다.
Lighthouse에는 어떤 요소가 최대 콘텐츠 페인트인지 식별하는 '최대 콘텐츠 페인트 요소' 감사 기능이 있습니다. 요소 위로 마우스를 가져가면 기본 브라우저 창에서 해당 요소가 강조 표시됩니다.
이 요소가 이미지인 경우 이 정보는 이 이미지의 로드를 최적화하는 데 유용한 힌트입니다. Lighthouse에는 이미지를 더 잘 압축하거나, 크기를 조절하거나, 더 최적화된 최신 이미지 형식으로 전송할 수 있는지 파악하는 데 도움이 되는 여러 이미지 최적화 감사 기능이 포함되어 있습니다.
또한 애니 설리번의 LCP 북마크릿을 사용하면 클릭 한 번으로 빨간색 직사각형으로 LCP 요소를 빠르게 식별할 수 있습니다.
늦게 발견된 이미지를 미리 로드하여 LCP 개선
최대 콘텐츠 페인트를 개선하려면 브라우저에서 중요한 히어로 이미지를 늦게 발견하는 경우 이를 미리 로드하세요. 이미지를 검색하기 전에 JavaScript 번들을 로드해야 하는 경우 지연 검색이 발생할 수 있습니다.
LCP 이미지 미리 로드에 관해 자주 묻는 질문이 몇 가지 있으며, 이에 대해서도 간단히 다루는 것이 좋습니다.
반응형 이미지를 미리 로드할 수 있나요? 예.
아래와 같이 srcset 및 sizes를 사용하여 지정된 반응형 히어로 이미지가 있다고 가정해 보겠습니다.
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
link 속성에 추가된 imagesrcset 및 imagesizes 속성 덕분에 srcset 및 sizes에서 사용하는 것과 동일한 이미지 선택 로직을 사용하여 반응형 이미지를 미리 로드할 수 있습니다.
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
LCP 이미지가 CSS 배경을 통해 정의된 경우에도 감사에서 미리 로드 기회를 강조 표시하나요? 예.
CSS 배경 또는 <img>를 통해 LCP 이미지로 플래그가 지정된 이미지는 Waterfall 깊이가 3 이상에서 발견되면 후보가 됩니다.
화면 밖 이미지 지연 로드 및 LCP에 대한 지연 로드 방지
초기 사용자 환경에 중요하지 않은 오프스크린 이미지는 지연 로드할 수 있습니다. 이는 사용자가 이미지 근처로 스크롤할 때까지 이미지 다운로드를 지연시키는 기법으로, 중요한 애셋의 네트워크 경합을 줄이고 경우에 따라 LCP를 개선할 수 있습니다. '오프스크린 이미지 지연' 감사를 통해 이 문제를 해결할 수 있습니다.
최대 콘텐츠 페인트 이미지와 같이 스크롤 없이 볼 수 있는 중요한 이미지는 지연 로드해서는 안 됩니다. 이렇게 하면 LCP 이미지 로드가 지연될 수 있습니다. Lighthouse는 '최대 콘텐츠 페인트 이미지가 지연 로드되었습니다' 감사를 통해 LCP 이미지가 잘못 지연 로드되는 경우 이를 강조 표시합니다.
CLS 기여도 파악
누적 레이아웃 이동은 시각적 안정성을 측정하는 지표입니다. 페이지 콘텐츠가 시각적으로 얼마나 이동하는지를 정량화합니다 Lighthouse에는 CLS를 디버깅하기 위한 '대규모 레이아웃 변경 방지'라는 감사가 있습니다.
이 감사에서는 페이지의 레이아웃 변경에 가장 큰 영향을 미치는 DOM 요소를 강조 표시합니다. 왼쪽의 요소 열에는 이러한 DOM 요소의 목록이 표시되고 오른쪽에는 전체 CLS 기여도가 표시됩니다.
새로운 Lighthouse 요소 스크린샷 기능 덕분에 감사에 언급된 주요 요소를 시각적으로 미리 볼 수 있을 뿐만 아니라 클릭하여 확대하여 더 선명하게 볼 수 있습니다.
로드 후 CLS의 경우 어떤 요소가 CLS에 가장 많이 기여했는지 직사각형으로 지속적으로 시각화하는 것이 유용할 수 있습니다. 이 기능은 SpeedCurve의 Core Web Vitals 대시보드와 같은 서드 파티 도구에서 찾을 수 있으며, 저는 Defaced의 Layout Shift GIF Generator를 사용하여 다음을 수행합니다.
사이트 전체의 레이아웃 변경 문제를 확인하려면 Search Console의 Core Web Vitals 보고서를 활용하는 것이 좋습니다. 이렇게 하면 사이트에서 CLS가 높은 페이지 유형을 확인할 수 있습니다 (이 경우 시간을 투자해야 하는 템플릿 부분을 자체적으로 식별하는 데 도움이 됨).
크기가 없는 이미지에서 CLS 식별
크기가 없는 이미지로 인해 발생하는 누적 레이아웃 이동을 제한하려면 이미지 및 동영상 요소에 너비 및 높이 크기 속성을 포함하세요. 이 접근 방식을 사용하면 이미지가 로드되는 동안 브라우저가 문서에 올바른 크기의 공간을 할당할 수 있습니다.
이미지 크기와 가로세로 비율을 고려하는 것의 중요성에 관한 자세한 내용은 이미지의 높이와 너비 설정이 다시 중요해짐을 참고하세요.
광고에서 CLS 식별
Lighthouse용 게시자 광고를 사용하면 페이지에서 광고의 로드 환경을 개선할 수 있는 기회를 찾을 수 있습니다. 여기에는 사용자가 페이지를 사용할 수 있는 시점을 지연시킬 수 있는 레이아웃 변경 및 긴 작업에 대한 기여도가 포함됩니다. Lighthouse에서는 커뮤니티 플러그인을 통해 이를 사용 설정할 수 있습니다.
광고는 웹에서 레이아웃 변경에 가장 큰 영향을 미치는 요소 중 하나입니다. 다음 사항을 준수해야 합니다.
- 표시 영역 상단 근처에 고정 광고가 아닌 광고를 배치할 때 주의하기
- 광고 슬롯에 가능한 가장 큰 크기를 예약하여 레이아웃 변경 방지
합성 작업을 거치지 않은 애니메이션 지양
합성 작업을 거치지 않은 애니메이션은 무거운 JavaScript 작업으로 인해 기본 스레드가 사용 중인 경우 저사양 기기에서 품질이 나쁘게 표시될 수 있습니다. 이러한 애니메이션은 레이아웃 변경을 유발할 수 있습니다.
Chrome은 애니메이션을 합성할 수 없음을 발견하면 이를 DevTools trace Lighthouse 읽기에 보고하여 애니메이션이 있는 어떤 요소가 어떤 이유로 합성되지 않았는지 나열할 수 있도록 합니다. 합성되지 않은 애니메이션 방지 감사에서 확인할 수 있습니다.
첫 입력 지연/총 차단 시간/긴 작업 디버그
최초 입력은 사용자가 페이지와 처음 상호작용할 때 (예: 링크를 클릭하거나 버튼을 탭하거나 맞춤 자바스크립트 기반 컨트롤을 사용할 때)부터 브라우저가 실제로 해당 상호작용에 대한 응답으로 이벤트 핸들러를 처리하기 시작할 때까지의 시간을 측정합니다. 긴 JavaScript 작업은 이 측정항목과 이 측정항목의 프록시인 총 차단 시간에 영향을 미칠 수 있습니다.
Lighthouse에는 기본 스레드에서 가장 긴 작업을 나열하는 긴 기본 스레드 작업 방지 감사가 포함되어 있습니다. 이는 입력 지연을 가장 많이 유발하는 작업을 식별하는 데 도움이 될 수 있습니다. 왼쪽 열에는 긴 기본 스레드 작업을 담당하는 스크립트의 URL이 표시됩니다.
오른쪽에는 이러한 태스크의 기간이 표시됩니다. 참고로 긴 작업은 50밀리초보다 오래 실행되는 작업입니다. 이는 프레임 속도나 입력 지연 시간에 영향을 미칠 만큼 충분히 오랫동안 기본 스레드를 차단하는 것으로 간주됩니다.
모니터링을 위해 서드 파티 서비스를 고려하는 경우, 이러한 비용을 시각화하기 위해 Calibre가 제공하는 기본 스레드 실행 타임라인 시각화도 매우 유용합니다. 이 시각화는 상호작용에 영향을 미치는 긴 작업에 기여하는 상위 작업과 하위 작업을 모두 강조 표시합니다.
네트워크 요청을 차단하여 Lighthouse에서 전후 영향을 확인합니다.
Chrome DevTools는 네트워크 요청 차단을 지원하여 개별 리소스가 삭제되거나 사용 불가능해지는 경우의 영향을 확인할 수 있습니다. 이는 개별 스크립트 (예: 서드 파티 삽입 또는 추적기)가 총 차단 시간 (TBT) 및 상호작용까지의 시간과 같은 측정항목에 미치는 비용을 이해하는 데 도움이 될 수 있습니다.
네트워크 요청 차단은 Lighthouse에서도 작동합니다. 사이트의 Lighthouse 보고서를 간단히 살펴보겠습니다. 성능 점수는 63/100이고 TBT는 400ms입니다. 코드를 살펴보면 이 사이트가 Chrome에서 Intersection Observer 폴리필을 로드하는데, 이는 필요하지 않습니다. 차단해 보겠습니다.
DevTools 네트워크 패널에서 스크립트를 마우스 오른쪽 버튼으로 클릭하고 Block Request URL를 클릭하여 차단할 수 있습니다. 여기서는 Intersection Observer 폴리필에 대해 이 작업을 수행합니다.
다음으로 Lighthouse를 다시 실행할 수 있습니다. 이번에는 총 차단 시간 (400ms => 300ms)과 마찬가지로 성능 점수가 개선 (70/100)된 것을 확인할 수 있습니다.
비용이 많이 드는 서드 파티 삽입을 퍼사드로 대체하기
동영상, 소셜 미디어 게시물 또는 위젯을 페이지에 삽입하기 위해 서드 파티 리소스를 사용하는 것이 일반적입니다. 기본적으로 대부분의 삽입은 즉시 로드되며 사용자 환경에 부정적인 영향을 미치는 비용이 많이 드는 페이로드가 포함될 수 있습니다. 서드 파티가 중요하지 않은 경우 (예: 사용자가 스크롤해야 볼 수 있는 경우) 이는 낭비입니다.
이러한 위젯의 성능을 개선하는 한 가지 패턴은 사용자 상호작용 시 지연 로드하는 것입니다. 이렇게 하려면 위젯의 가벼운 미리보기 (파사드)를 렌더링하고 사용자가 상호작용하는 경우에만 정식 버전을 로드하면 됩니다. Lighthouse에는 YouTube 동영상 삽입과 같이 퍼사드로 지연 로드할 수 있는 서드 파티 리소스를 추천하는 감사가 있습니다.
Lighthouse는 기본 스레드를 250ms 넘게 차단하는 서드 파티 코드를 강조표시합니다. 이렇게 하면 렌더링하는 항목을 보려면 스크롤해야 하는 경우 지연하거나 지연 로드하는 것이 더 나을 수 있는 모든 종류의 서드 파티 스크립트 (Google에서 작성한 스크립트 포함)가 노출될 수 있습니다.
Core Web Vitals를 넘어
최신 버전의 Lighthouse 및 PageSpeed Insights는 Core Web Vitals를 강조하는 것 외에도 소스 지도를 사용 설정한 경우 JavaScript가 많은 웹 애플리케이션의 로드 속도를 개선하기 위해 따를 수 있는 구체적인 안내를 제공합니다.
여기에는 사용자 환경에 필요하지 않을 수 있는 폴리필 및 중복에 대한 의존도를 줄이는 등 페이지에서 JavaScript 비용을 줄이기 위한 점점 더 많은 감사 모음이 포함됩니다.
Core Web Vitals 도구에 관한 자세한 내용은 Lighthouse팀 트위터 계정과 DevTools의 새로운 기능을 참고하세요.