Chrome의 웹 도구로 사용자 환경을 개선할 기회를 찾습니다.
게시일: 2021년 5월 11일
오늘은 사이트의 웹 바이탈을 개선하는 방법을 파악하는 데 도움이 되는 Lighthouse, PageSpeed, DevTools의 새로운 도구 기능을 살펴봅니다.
도구에 관해 다시 한번 말씀드리자면 Lighthouse는 웹페이지 품질을 개선하기 위한 오픈소스 자동화 도구입니다. Chrome DevTools 디버깅 도구 모음에서 찾을 수 있으며 공개 웹페이지 또는 인증이 필요한 웹페이지에서 실행할 수 있습니다. PageSpeed Insights, CI, WebPageTest에서도 Lighthouse를 확인할 수 있습니다.
Lighthouse 7.x에는 사용자 환경 측정항목에 영향을 미치는 UI 부분 (예: 레이아웃 전환에 기여하는 노드)을 더 쉽게 시각적으로 검사할 수 있는 요소 스크린샷과 같은 새로운 기능이 포함되어 있습니다.
또한 PageSpeed Insights에서 요소 스크린샷을 지원하여 페이지의 일회성 성능 실행에서 문제를 더 쉽게 파악할 수 있도록 했습니다.
Core Web Vitals 측정
Lighthouse는 최대 콘텐츠 렌더링 시간, 누적 레이아웃 이동, 총 차단 시간 (최초 입력 반응 시간의 실험실 프록시)을 비롯한 Core Web Vitals 측정항목을 합성적으로 측정할 수 있습니다. 이러한 측정항목은 로드, 레이아웃 안정성, 상호작용 준비 상태를 반영합니다. 코어 웹 바이탈의 미래에서 강조 표시된 콘텐츠가 포함된 첫 페인트와 같은 다른 측정항목도 있습니다.
Lighthouse 보고서의 '측정항목' 섹션에는 이러한 측정항목의 실험실 버전이 포함되어 있습니다. 이 보고서를 통해 사용자 환경 중에서 주의를 기울여야 하는 부분을 요약하여 확인할 수 있습니다.
Chrome UX 보고서 또는 RUM에 있는 것과 같은 필드 측정항목에는 이러한 제한사항이 없으며 실제 사용자의 경험을 반영하므로 실험실 데이터를 보완하는 데 유용합니다. 현장 데이터는 실험실에서 얻을 수 있는 진단 정보를 제공할 수 없으므로 두 가지를 함께 사용해야 합니다.
웹 바이탈을 개선할 수 있는 부분 파악
최대 콘텐츠 렌더링 시간 요소 식별
LCP는 로드 환경이 얼마나 빠르게 느껴지는지를 측정하는 지표입니다. 페이지 로드 중에 기본 콘텐츠 또는 '가장 큰' 콘텐츠가 로드되어 사용자에게 표시되는 지점을 표시합니다.
Lighthouse에는 최대 콘텐츠 렌더링 시간이 가장 긴 요소를 식별하는 '최대 콘텐츠 렌더링 시간 요소' 감사가 있습니다. 요소 위로 마우스를 가져가면 기본 브라우저 창에서 요소가 강조표시됩니다.
이 요소가 이미지인 경우 이 정보는 이 이미지의 로드를 최적화하는 데 유용한 힌트가 됩니다. Lighthouse에는 이미지를 더 효과적으로 압축하거나 크기를 조절하거나 더 최적화된 최신 이미지 형식으로 전송할 수 있는지 파악하는 데 도움이 되는 여러 이미지 최적화 감사가 포함되어 있습니다.
또한 한 번의 클릭으로 빨간색 직사각형으로 LCP 요소를 빠르게 식별하는 데 도움이 되는 Annie Sullivan의 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 이미지로 플래그가 지정된 이미지는 폭포식 구조 깊이가 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 트레이스 Lighthouse 읽기에 이를 보고하여 애니메이션이 컴포지팅되지 않은 요소와 그 이유를 나열할 수 있습니다. 조합되지 않은 애니메이션 피하기 감사에서 확인할 수 있습니다.
첫 입력 지연 / 총 차단 시간 / 긴 작업 디버그
첫 입력은 사용자가 페이지와 처음 상호작용한 시점 (예: 링크를 클릭하거나, 버튼을 탭하거나, 자바스크립트로 작동하는 맞춤 컨트롤을 사용하는 경우 등)부터 브라우저가 실제로 해당 상호작용에 대한 응답으로 이벤트 핸들러 처리를 시작할 수 있는 시점까지의 시간을 측정합니다. 긴 JavaScript 작업은 이 측정항목과 이 측정항목의 프록시인 총 차단 시간에 영향을 줄 수 있습니다.
Lighthouse에는 기본 스레드에서 가장 긴 작업을 나열하는 긴 기본 스레드 작업 피하기 감사가 포함되어 있습니다. 입력 지연을 가장 많이 유발하는 작업을 찾을 때 유용합니다. 왼쪽 열에는 긴 기본 스레드 작업을 담당하는 스크립트의 URL이 표시됩니다.
오른쪽에는 이러한 작업의 기간이 표시됩니다. 참고로 장기 작업은 50밀리초 이상 실행되는 작업입니다. 이는 프레임 속도 또는 입력 지연 시간에 영향을 미칠 만큼 충분히 오래 기본 스레드를 차단하는 것으로 간주됩니다.
모니터링을 위해 서드 파티 서비스를 고려하는 경우 이러한 비용을 시각화하기 위해 Calibre에 있는 기본 스레드 실행 타임라인 시각화도 매우 좋습니다. 이 시각화는 상호작용에 영향을 미치는 긴 작업에 기여하는 상위 작업과 하위 작업을 모두 강조 표시합니다.
네트워크 요청을 차단하여 Lighthouse에서 전/후 영향을 확인합니다.
Chrome DevTools는 네트워크 요청 차단을 지원하여 개별 리소스가 삭제되거나 사용 불가 상태가 되는 경우의 영향을 확인할 수 있습니다. 이는 개별 스크립트(예: 서드 파티 삽입 또는 추적기)가 총 차단 시간(TBT) 및 Time to Interactive(TTI)와 같은 측정항목에 미치는 영향을 파악하는 데 도움이 될 수 있습니다.
네트워크 요청 차단은 Lighthouse에서도 작동합니다. 사이트의 Lighthouse 보고서를 빠르게 살펴보겠습니다. Perf 점수는 63/100이고 TBT는 400ms입니다. 코드를 살펴본 결과 이 사이트는 Chrome에서 불필요한 Intersection Observer polyfill을 로드하는 것으로 확인되었습니다. 차단해 보겠습니다.
DevTools Network 패널에서 스크립트를 마우스 오른쪽 버튼으로 클릭하고 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의 새로운 기능을 참고하세요.