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