Chrome 웹 도구의 사용자 환경을 개선할 수 있는 기회를 찾습니다.
오늘은 웹 바이탈에서 사이트를 개선하는 방법을 파악하는 데 도움이 되는 Lighthouse, PageSpeed, DevTools의 새로운 도구 기능을 알아봅니다.
도구를 다시 살펴보자면, Lighthouse는 웹페이지 품질을 개선하기 위한 오픈소스 자동화 도구입니다. 이 도구는 Chrome DevTools 디버깅 도구 모음에서 찾을 수 있으며 공개 페이지 또는 인증이 필요한 모든 웹페이지에서 실행할 수 있습니다. Lighthouse는 PageSpeed Insights, CI, WebPageTest에서도 찾을 수 있습니다.
Lighthouse 7.x에는 요소 스크린샷과 같은 새로운 기능이 포함되어 있어 사용자 환경 측정항목에 영향을 미치는 UI 부분 (예: 레이아웃 변경에 기여하는 노드)을 더 쉽게 시각적으로 검사할 수 있습니다.
또한 PageSpeed Insights의 요소 스크린샷 지원 기능이 제공되므로 일회성 성능 페이지 실행과 관련된 문제를 더 쉽게 발견할 수 있습니다.
코어 웹 바이탈 측정
Lighthouse는 최대 콘텐츠 렌더링 시간, 누적 레이아웃 변경, 총 차단 시간 (첫 입력 지연을 위한 실험실 프록시)을 포함한 코어 웹 바이탈 측정항목을 종합적으로 측정할 수 있습니다. 이러한 측정항목은 로드, 레이아웃 안정성, 상호작용 준비 상태를 반영합니다. 미래의 코어 웹 바이탈에서 강조된 콘텐츠가 포함된 첫 페인트와 같은 다른 측정항목도 있습니다.
Lighthouse 보고서의 '측정항목' 섹션에는 이러한 측정항목의 실습 버전이 포함되어 있습니다. 이를 통해 사용자 경험의 어떤 측면에 주의를 기울여야 하는지 요약해서 볼 수 있습니다.
필드 측정항목(예: Chrome UX 보고서 또는 RUM에 있는 측정항목)에는 이러한 제한사항이 없으며 실제 사용자의 환경을 반영하므로 실험실 데이터를 보완하는 중요한 역할을 합니다. 현장 데이터는 실험실에서 얻는 것과 같은 진단 정보를 제공할 수 없으므로 이 둘을 함께 사용합니다.
웹 바이탈에서 개선할 수 있는 부분 파악
최대 콘텐츠 렌더링 시간 요소 식별
LCP는 인지되는 로드 경험의 측정치입니다. 페이지 로드 중 기본 또는 '최대' 콘텐츠가 로드되어 사용자에게 표시되는 지점을 표시합니다.
Lighthouse에는 콘텐츠가 포함된 가장 큰 페인트를 식별하는 '최대 콘텐츠 렌더링 시간 요소' 감사가 있습니다. 요소 위로 마우스를 가져가면 기본 브라우저 창에서 요소가 강조표시됩니다.
이 요소가 이미지인 경우 이 정보를 통해 이미지의 로드를 최적화할 수 있습니다. Lighthouse에는 다양한 이미지 최적화 감사가 포함되어 있어 이미지를 더 잘 압축하거나 크기를 조절하거나 보다 최적화된 최신 이미지 형식으로 제공할 수 있는지 파악할 수 있습니다.
또한 애니 설리반의 LCP 북마크를 사용하면 클릭 한 번으로 빨간색 직사각형으로 LCP 요소를 빠르게 식별할 수 있습니다.
최근에 발견된 이미지를 미리 로드하여 LCP 개선
최대 콘텐츠 렌더링 시간을 개선하려면 브라우저에서 늦게 검색될 때 중요한 히어로 이미지를 미리 로드하세요. 이미지가 검색되기 전에 자바스크립트 번들을 로드해야 하는 경우 지연된 검색이 발생할 수 있습니다.
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 Element 스크린샷 기능 덕분에 감사에 언급된 주요 요소의 시각적 미리보기를 확인할 수 있을 뿐만 아니라 클릭하여 확대/축소하여 더 명확하게 볼 수 있습니다.
로드 후 CLS의 경우 CLS에 가장 많이 기여한 요소가 직사각형으로 지속적으로 시각화하는 가치가 있을 수 있습니다. 이 기능은 SpeedCurve의 Core Web Vitals 대시보드와 같은 서드 파티 도구에서 찾을 수 있는 기능으로, 저는 다음과 같은 용도로 Defaced의 Layout Shift GIF Generator를 사용합니다.
사이트 전체에서 레이아웃 변경 문제를 확인하기 위해 Search Console의 코어 웹 바이탈 보고서를 참고합니다. 이렇게 하면 사이트에서 CLS가 높은 페이지의 유형을 확인할 수 있습니다 (이 경우 시간을 할애해야 하는 템플릿 부분을 자체 식별하는 데 도움이 됨).
크기가 없는 이미지에서 CLS 식별
크기가 없는 이미지로 인해 레이아웃 변경이 발생하는 것을 제한하려면 이미지와 동영상 요소에 너비 및 높이 크기 속성을 포함합니다. 이렇게 하면 이미지가 로드되는 동안 브라우저가 문서에 적절한 공간을 할당할 수 있습니다.
이미지 크기 및 가로세로 비율 고려의 중요성에 관한 도움말은 이미지에 높이와 너비를 다시 설정하는 것이 중요를 참고하세요.
광고에서 CLS 식별
Lighthouse 게시자 광고를 사용하면 레이아웃 변경, 사용자가 페이지를 사용할 수 있게 될 때까지 걸리는 장기 작업 등 페이지의 광고 로드 환경을 개선할 기회를 찾을 수 있습니다. Lighthouse에서는 커뮤니티 플러그인을 통해 사용 설정할 수 있습니다.
광고는 웹에서 레이아웃 변화에 가장 큰 기여를 하는 요소 중 하나라는 점을 기억하세요. 중요 사항:
- 표시 영역 상단 근처에 고정 광고가 아닌 광고를 배치할 때는 주의합니다.
- 광고 슬롯에 최대한 큰 크기를 예약하여 이동을 제거합니다.
합성되지 않은 애니메이션 피하기
합성되지 않은 애니메이션은 자바스크립트 작업이 많은 작업으로 인해 기본 스레드가 계속 사용되는 경우 저사양 기기에서 버벅거림이 발생할 수 있습니다. 이러한 애니메이션은 레이아웃 변경을 유발할 수 있습니다.
Chrome은 합성할 수 없는 애니메이션을 발견하면 이를 DevTools 트레이스 Lighthouse 읽기에 보고하여 합성되지 않은 애니메이션이 있는 요소와 그 이유를 나열할 수 있습니다. 합성되지 않은 애니메이션 방지 감사에서 이를 확인할 수 있습니다.
최초 입력 지연 디버그 / 총 차단 시간 / 긴 작업
첫 입력은 사용자가 페이지와 처음 상호작용 (예: 링크 클릭, 버튼 탭 또는 자바스크립트 기반 컨트롤 사용)한 시점부터 브라우저에서 해당 상호작용에 대한 응답으로 이벤트 핸들러 처리를 실제로 시작할 수 있는 시점까지의 시간을 측정합니다. 긴 자바스크립트 작업은 이 측정항목과 이 측정항목의 프록시인 총 차단 시간에 영향을 미칠 수 있습니다.
Lighthouse에는 기본 스레드에서 가장 긴 작업을 나열하는 긴 기본 스레드 작업 피하기 감사가 포함되어 있습니다. 이는 입력 지연의 최악의 원인을 식별하는 데 도움이 될 수 있습니다. 왼쪽 열에서 긴 기본 스레드 작업을 담당하는 스크립트의 URL을 볼 수 있습니다.
오른쪽에는 작업 지속 시간이 표시됩니다. 참고로 긴 태스크는 50밀리초 이상 실행되는 작업입니다. 이는 프레임 속도나 입력 지연 시간에 영향을 미칠 만큼 충분히 오랫동안 기본 스레드를 차단하는 것으로 간주됩니다.
모니터링을 위해 서드 파티 서비스를 고려하고 있다면 Calibre에서 이러한 비용을 시각화하는 데 사용하는 기본 스레드 실행 타임라인도 상당히 마음에 들어요. Calibre는 상호작용에 영향을 주는 긴 작업에 기여하는 상위 작업과 하위 작업을 모두 강조하여 보여줍니다.
Lighthouse의 이전/이후 영향을 확인하려면 네트워크 요청을 차단하세요.
Chrome DevTools는 삭제되거나 사용할 수 없는 개별 리소스의 영향을 확인하기 위해 네트워크 요청 차단을 지원합니다. 이렇게 하면 개별 스크립트 (예: 서드 파티 삽입 또는 추적기)가 총 차단 시간 (TBT) 및 상호작용까지의 측정항목에 미치는 비용을 이해하는 데 도움이 될 수 있습니다.
네트워크 요청 차단은 Lighthouse에서도 작동합니다. 사이트에 대한 Lighthouse 보고서를 빠르게 살펴보겠습니다. 성능 점수는 63/100점이며 TBT는 400ms입니다. 코드를 자세히 살펴본 결과 이 사이트는 Chrome에서 필요하지 않은 Intersection Observer 폴리필을 로드합니다. 차단하자!
DevTools Network 패널에서 스크립트를 마우스 오른쪽 버튼으로 클릭하고 Block Request URL를 클릭하여 차단할 수 있습니다. 여기서는 Intersection Observer 폴리필에 이 작업을 수행합니다.
다음으로 Lighthouse를 다시 실행할 수 있습니다. 이번에는 총 차단 시간 (400ms => 300ms)이 개선되었으므로 (70/100) 성능 점수가 향상된 것을 확인할 수 있습니다.
비용이 많이 드는 서드 파티 임베딩을 퍼사드로 대체
일반적으로 서드 파티 리소스를 사용하여 동영상, 소셜 미디어 게시물 또는 위젯을 페이지에 삽입합니다. 기본적으로 대부분의 삽입은 즉시 로드되며 사용자 환경에 부정적인 영향을 미치는 값비싼 페이로드를 수반할 수 있습니다. 서드 파티가 중요하지 않은 경우 (예: 사용자가 스크롤해야 볼 수 있는 경우) 낭비입니다.
이러한 위젯의 성능을 개선하는 한 가지 패턴은 사용자 상호작용 시 위젯을 지연 로드하는 것입니다. 이렇게 하려면 위젯의 간단한 미리보기 (퍼사드)를 렌더링하고 사용자가 상호작용하는 경우에만 전체 버전을 로드합니다. Lighthouse에는 YouTube 동영상 삽입과 같이 퍼사드가 있는 지연 로드 가능한 서드 파티 리소스를 추천하는 감사가 있습니다.
참고로 Lighthouse는 250ms 이상 기본 스레드를 차단하는 서드 파티 코드를 강조표시합니다. 이렇게 하면 렌더링하는 내용을 스크롤해서 확인해야 하는 경우 Google에서 만든 스크립트를 비롯하여 모든 종류의 서드 파티 스크립트가 표시될 수 있습니다. 이러한 스크립트는 지연 또는 지연 로드를 지연하는 것이 좋습니다.
코어 웹 바이탈 외
코어 웹 바이탈을 강조하는 것 외에도, 최신 버전의 Lighthouse와 PageSpeed Insights에서는 소스 맵을 사용 설정한 경우 자바스크립트 사용량이 많은 웹 애플리케이션을 얼마나 빠르게 로드할 수 있는지에 관한 구체적인 안내를 제공합니다.
여기에는 사용자 환경에 필요하지 않을 수 있는 폴리필 및 중복에 대한 의존도를 줄이는 등 페이지의 자바스크립트 비용을 줄이기 위한 감사 컬렉션이 증가하고 있습니다.
코어 웹 바이탈 도구에 관한 자세한 내용은 Lighthouse팀 트위터 계정과 DevTools의 새로운 기능을 참고하세요.
Unsplash에 게시된 Mercedes Mehling의 히어로 이미지