Chrome의 웹 도구로 사용자 환경을 개선할 기회를 찾습니다.
오늘은 웹 바이탈에서 사이트를 개선할 수 있는 방법을 파악하는 데 도움이 되는 Lighthouse, PageSpeed, DevTools의 새로운 도구 기능을 살펴보겠습니다.
도구를 다시 한번 알려드리면 Lighthouse는 웹페이지 품질을 개선할 수 있는 자동화된 오픈소스 도구입니다. 이 도구는 Chrome DevTools 디버깅 도구 모음에서 찾을 수 있으며 공개 웹페이지 또는 인증이 필요한 모든 웹페이지에서 실행할 수 있습니다. Lighthouse는 PageSpeed Insights, CI, WebPageTest에서도 확인할 수 있습니다.
Lighthouse 7.x에는 요소 스크린샷과 같은 새로운 기능이 포함되어 있어 사용자 환경 측정항목에 영향을 미치는 UI 부분을 더 쉽게 시각적으로 검사할 수 있습니다 (예: 레이아웃 변경에 기여하는 노드).
또한 PageSpeed Insights의 요소 스크린샷에 대한 지원이 제공되어 페이지의 일회성 성능 실행 문제를 더 쉽게 발견할 수 있게 되었습니다.
코어 웹 바이탈 측정
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 이미지로 신고된 모든 이미지는 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은 합성할 수 없는 애니메이션을 발견하면 Lighthouse가 읽는 DevTools 트레이스에 보고하여 합성되지 않은 애니메이션이 있는 요소와 그 이유를 나열할 수 있습니다. 비합성 애니메이션 방지 감사에서 이를 확인할 수 있습니다.
첫 입력 지연 / 총 차단 시간 / 긴 작업 디버그
최초 입력은 사용자가 페이지와 처음 상호작용한 시점부터 (예: 사용자가 링크를 클릭하거나, 버튼을 탭하거나, JavaScript 기반 맞춤 컨트롤을 사용할 때) 브라우저가 상호작용에 대한 응답으로 실제로 이벤트 핸들러를 처리할 수 있는 시점까지의 시간을 측정합니다. 긴 JavaScript 작업은 이 측정항목과 이 측정항목의 프록시(총 차단 시간)에 영향을 줄 수 있습니다.
Lighthouse에는 기본 스레드에서 가장 긴 작업을 나열하는 긴 기본 스레드 작업 피하기 감사가 포함되어 있습니다. 이는 입력 지연의 최악의 요인을 식별하는 데 유용할 수 있습니다. 왼쪽 열에는 긴 기본 스레드 작업을 담당하는 스크립트의 URL이 나와 있습니다.
오른쪽에서 이러한 작업의 소요 시간을 확인할 수 있습니다. 참고로 긴 작업은 50밀리초 이상 실행되는 작업입니다 이는 프레임 속도 또는 입력 지연 시간에 영향을 미칠 만큼 충분히 오랫동안 기본 스레드를 차단하는 것으로 간주됩니다.
서드 파티 서비스의 모니터링을 고려하고 있다면 이러한 비용을 시각화하기 위한 기본 스레드 실행 타임라인도 상당히 비슷했습니다. 이 타임라인은 상호작용에 영향을 미치는 장기 작업에 기여하는 상위 작업과 하위 작업을 모두 강조합니다.
Lighthouse에서 이전/이후의 영향을 확인하기 위해 네트워크 요청을 차단하세요.
Chrome DevTools는 네트워크 요청 차단을 지원하여 삭제되거나 사용할 수 없는 개별 리소스의 영향을 확인합니다. 총 차단 시간 (TBT) 및 상호작용까지의 시간 등의 측정항목에 대한 개별 스크립트 (예: 서드 파티 삽입 또는 추적기)의 비용을 이해하는 데 도움이 될 수 있습니다.
네트워크 요청 차단은 Lighthouse에서도 작동합니다. 사이트에 대한 Lighthouse 보고서를 간단하게 살펴보겠습니다 성능 점수는 100점 만점에 63점이며 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에서는 코어 웹 바이탈을 강조하는 것 외에도 소스 맵을 사용 설정한 경우 JavaScript가 많은 웹 애플리케이션의 로드 속도를 개선하기 위해 따를 수 있는 구체적인 지침을 제공합니다.
여기에는 사용자 환경에 필요하지 않을 수 있는 polyfill 및 중복에 대한 의존도를 줄이는 등 페이지의 JavaScript 비용을 줄이기 위한 감사 컬렉션이 증가하고 있습니다.
Core Web Vitals 도구에 관한 자세한 내용은 Lighthouse팀 트위터 계정 및 DevTools의 새로운 기능을 확인하세요.