Largest Contentful Paint (or LCP) is a major web performance KPI which is still a new concept for many web developers since it became a ranking factor just recently. In this article, Eloïse Martin provides an overview of the best practices for the integration and optimization of an LCP image.
LCP(Large Contentful Paint)는 주요 웹 성능 KPI로, 최근 랭킹 요소가 된 이래로 많은 웹 개발자들에게 여전히 새로운 개념입니다. 이 기사에서 Eloesse Martin은 LCP 이미지의 통합 및 최적화를 위한 모범 사례에 대한 개요를 제공합니다.
요약 :)
LCP(Largest Contentful Paint) 는 Core Web Vitals의 세 가지 지표 중 하나입니다.
LCP(Largest Contentful Paint) 는 Core Web Vitals의 세 가지 지표 중 하나입니다. 이러한 측정항목은 Google에서 사용자 경험의 품질을 평가하는 데 사용됩니다. LCP는 브라우저가 뷰포트에 주요 콘텐츠를 로드하는 데 걸리는 시간을 측정합니다.
최근 순위 요소가 된 이후로 이 주요 웹 성능 KPI는 여전히 많은 웹 개발자에게 새로운 개념입니다. LCP 요소가 이미지일 때 최적화하기가 특히 까다로워집니다 .
이 문제를 해결하기 위해 LCP 이미지의 통합 및 최적화를 위한 모범 사례에 대한 개요를 제공하겠습니다. 다음 내용을 다루겠습니다.
적절한 LCP 이미지 크기 조정에 초점을 두고 태그를 사용하여 LCP 리소스 로드 시간 하위 부분을 개선하는 방법 .
LCP 이미지를 올바르게 이해하고 통합할 수 있도록 이 태그 및 해당 속성에 대한 브라우저의 동작에 대한 몇 가지 설명 .
LCP 리소스 로드 지연 하위 부분을 개선하는 방법 .
모든 설명은 우리가 반복할 예제로 설명될 것입니다. 기사의 Codepen 데모에 사용된 이미지는 TwicPics 와 통합되어 생성 시간을 절약하고 LCP 메트릭의 최적화 속도를 높일 것입니다.
참고 : 다른 LCP 하위 부분은 "Time to first Byte" 및 "Element render delay"이며 여기서는 다루지 않습니다. 4개의 LCP 하위 부분과 서로의 관계에 대해 자세히 알아보려면 Philip Walton과 Barry Pollard가 작성한 " 가장 큰 콘텐츠 페인트 최적화 " 기사를 읽어 보십시오 .
웹 페이지에서 LCP 요소를 식별하는 방법을 알아보려면 Laurent Cazanove의 이 가이드 를 확인하세요.
점프 후 더! 아래 계속 읽기 ↓
모바일 인터페이스를 위한 터치 디자인을 만나보십시오 . Steven Hoober의 검증된 보편적인 인간 중심 가이드라인으로 모바일 디자인에 대한 새로운 가이드 입니다. 400페이지 , 심도 있는 사용자 연구 및 모범 사례 로 가득 차 있습니다 .
목차 바로가기 ↬
기능 패널
태그 # 의 도움으로 LCP 리소스 로드 시간 개선
여기서 목표는 시각적 품질을 손상시키지 않으면서 LCP 이미지의 로딩 시간을 최대한 줄이는 것입니다. 이 작업을 성공하기 위한 핵심 포인트 중 하나는 브라우저가 이미지의 가장 적합한 버전을 선택하도록 하는 것 입니다.
속성 을 통해 단일 이미지 파일을 선언하는 대신( src모든 장치에서 모든 사용자에게 치수가 동일함) 브라우저가 각 컨텍스트에 가장 적합한 이미지 파일을 선택하도록 해야 합니다. 이 접근 방식을 사용하면 더 작은 장치의 사용자가 더 작은 크기의 이미지를 다운로드할 수 있습니다. 이렇게 하면 이미지가 더 빨리 로드되고 웹사이트에서 더 나은 LCP 점수를 얻을 수 있습니다.
같은 사진이 표시된 모바일, 모니터, iPad의 세 가지 장치를 향해 걸어가는 여성의 삽화가 모니터에 있는 것이 강조 표시됩니다.
( 큰 미리보기 )
이렇게 하려면 태그 srcset와 sizes속성을 사용하여 필요한 정보를 브라우저에 제공해야 합니다.
이 속성은 고유 너비srcset 에 대한 설명과 함께 이미지 파일 목록을 브라우저에 지시합니다 .
이 sizes속성은 이미지의 의도된 표시 너비를 브라우저에 알려줍니다. CSS 미디어 쿼리와 결합하여 화면 너비에 적합한 이미지를 선택할 수 있습니다.
참고 : 브라우저가 뷰포트 의 너비 또는 이미지 형식 호환성과 같은 장치 특성에 따라 다른 이미지를 로드하도록 허용하는