Optimizing The Image Element LCP

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 미디어 쿼리와 결합하여 화면 너비에 적합한 이미지를 선택할 수 있습니다. 참고 : 브라우저가 뷰포트 의 너비 또는 이미지 형식 호환성과 같은 장치 특성에 따라 다른 이미지를 로드하도록 허용하는 대신 태그를 사용할 수 있습니다 . 간단히 하기 위해 예제에서는 태그 만 사용합니다 . 태그 의 srcset속성 # 태그 의 srcset속성은 이미지 파일 목록과 고유 너비를 나타냅니다. 브라우저는 이 목록을 사용하여 사용자의 컨텍스트에 가장 적합하다고 생각되는 이미지를 선택합니다. 이렇게 하면 srcset특성이 LCP 이미지 최적화를 향한 첫 번째 단계가 됩니다. 복사 이 이미지 목록을 선언하려면 모바일 우선 접근 방식 을 따르는 것이 좋습니다 . 즉, 먼저 가장 작은 이미지를 src속성과 함께 기본 옵션으로 선언한 다음 속성 내에서 다시 선언한 다음 srcset더 큰 치수 변형을 선언합니다. 모빌 옆에 있는 남자의 일러스트 ( 큰 미리보기 ) 픽셀 로 표현되는 각 이미지 의 고유 너비 는 단위 ( "너비"의 경우)를 사용하여 표시해야 합니다 .ww 복사 위의 예제 는 300, 900 및 1800픽셀의 고유 너비가 있는 쉼표로 구분된 세 개의 이미지( image-300.png, image-900.png및 )를 정의합니다. image-1800.png모바일 우선 접근 방식을 존중하기 위해 및 속성 image-300.png에 정의된 기본 이미지 입니다.srcsrcset 참고 : 속성을 사용할 때 srcset속성을 유지하는 것이 중요 src하므로 브라우저는 기본 이미지가 무엇인지 알고 속성을 지원하지 않는 브라우저에 표시되도록 해야 srcset합니다. 참고 : 고유 너비가 아닌 이미지의 장치 픽셀 비율(DPR)을 선언하여 속성 을 사용할 수도 있습니다 . srcset그러나 이 접근 방식은 여기에서 논의되지 않습니다. 사용자의 컨텍스트를 알고 있는 브라우저는 이제 srcset속성에 선언된 목록에서 로드할 이미지를 선택할 수 있습니다. 일부 이미지가 포함된 큰 폴더 옆에 있는 여성의 그림 중 하나가 강조 표시됨 ( 큰 미리보기 ) 그러나 예기치 않은 결과를 피하기 위해 브라우저가 가장 적합한 이미지를 선택하는 방법을 이해해야 합니다. 속성 내에서 srcset브라우저는 항상 뷰포트 크기에 따라 이미지를 선택합니다 . 이미지 표시 크기를 무시합니다. 결과적으로 CSS 스타일과 미디어 쿼리는 선택에 영향을 미치지 않습니다. 또한 이미지 목록을 정의할 때 모바일 및 태블릿 의 가로 방향 을 염두에 두어야 합니다 . 기본적으로(속성을 지정하지 않고 ) 브라우저는 이미지 가 뷰포트 너비의 100%size 를 차지한다고 가정하여 이미지를 선택합니다 . 브라우저는 장치의 해상도를 알고 있으므로 계산 시 장치 픽셀 비율(DPR)도 조정합니다 . 따라서 LCP 이미지를 최적화하려면 각 DPR에 대한 변형을 정의 해야 합니다 . 이러한 동작을 기반으로 뷰포트 너비에 따라 이미지를 선택하기 위해 브라우저에서 적용되는 기본 공식은 다음과 같습니다. viewportWidth x 100% x DPR 참고 : 목록에 계산과 일치하는 이미지가 없으면 브라우저는 가장 일치하는 이미지를 선택합니다. 동률인 경우 브라우저는 더 큰 이미지를 선택합니다. 이전 코드를 사용한 예제를 통해 브라우저의 동작을 설명하겠습니다. 복사 ???? 라이브 보기: Codepen 데모 1 . 참고 : 브라우저 개발 도구에서 Network > Img각 뷰포트 및 DPR에 따라 브라우저에서 선택한 이미지를 보려면 탭을 엽니다. 이 데모의 이미지는 280px모든 장치에서 고정 너비로 ​​표시됩니다. 그러나 900px와이드 스크린 DPR 1에서 브라우저는 srcset속성 이미지 목록에서 다음과 같은 이미지를 검색합니다. 900px (viewport width) x 100% (viewport width occupied by the image by default) x 1 (DPR) 이 경우 브라우저는 이미지 900px와이드를 찾고 있습니다. 이 예에서 이미지의 표시 너비는 이지만 기본 너비가 인 이미지는 280px어쨌든 900px로드됩니다. 치수가 강조 표시된 cdpn.io의 스크린샷 ( 큰 미리보기 ) 이 예에서 속성 내에서 선언된 이미지가 모든 장치 srcset의 표시 너비에 맞게 조정되지 않았음을 알 수 있습니다.280px 브라우저 viewportWidth x 100% x DPR가 로드할 이미지를 선택하는 공식을 적용하는 동안 더 간단한 공식을 사용하여 srcset속성에 선언된 다양한 이미지를 생성할 수 있습니다. imageRenderedSize x DPR 첫 번째 데모 에서 DPR 1, 2, 3을 고려 하여 다음 세 이미지를 만들고 정의해야 합니다. DPR 1 : 280 x 1=> 이미지 280 pixels폭; DPR 2 : 280 x 2=> 이미지 560 pixels폭; DPR 3 : 280 x 3=> 이미지 840 pixels와이드. 마지막으로 코드를 업데이트합니다. 복사 ???? 라이브 보기: Codepen 데모 2 . 여전히 업데이트된 코드는 아직 모든 장치에 대해 완전히 최적화되지 않았습니다. 실제로 뷰포트가 DPR 2인 랩톱1024px 장치 의 경우 최적의 이미지는 고유 너비 560px( imageRenderedSize x DPR= 280 x 2= 560)여야 합니다. 1024 x 100% x 2그러나 이 코드를 사용하면 브라우저는 의 이미지 , 즉 속성 2048px에 존재하지 않는 의 이미지를 로드하려고 할 것 입니다.srcset sizes속성이 이 문제를 해결하는 데 어떻게 도움이 되는지 살펴보겠습니다 . 태그 의 sizes속성 # 이 sizes속성은 개발자에게 브라우저 동작에 대한 추가 제어를 제공하여 브라우저가 이미지가 뷰포트의 100%를 차지한다고 가정하지 않도록 합니다. 이렇게 하면 최적의 이미지가 로드되고 결과적으로 LCP 메트릭이 최적화됩니다. 복사 참고 : 따라서 sizes이미지가 실제로 뷰포트의 100%를 차지하는 경우 속성이 필요하지 않습니다. 속성 값을 할당하기 sizes위해 다음 접근 방식을 사용하고 결합할 수 있습니다. 예 를 들어 이미지가 반응하는 경우(예: CSS 속성이 백분율로 정의된 경우 ) 뷰포트 너비 의 백분율로 이미지 너비를 정의합니다 .sizes="50vw"width 이미지 너비를 픽셀 로 정의 sizes="500px"합니다. 하나 이상의 미디어 쿼리를 사용하여 브라우저가 다양한 뷰포트에 따라 최상의 이미지를 선택할 수 있도록 합니다 sizes="(min-width: 1024px) 800px, (min-width: 768px) 80vw, 100vw"( 예: 100vw미디어 쿼리가 적용되지 않을 때 기본값임). 코드 예제를 업데이트해 보겠습니다. 복사 참고 : 이미지가 차지하는 뷰포트의 너비를 백분율로 알려면 계산 공식을 적용합니다 (imageRenderedSize / viewportWidth) x 100. 예: (280 / 320) x 100= 뷰포트 너비의 87.5%( 87.5vw). ???? 라이브 보기: Codepen 데모 3 . 이제 세 번째 데모 의 소스 코드를 사용 하여 DPR에 관계없이 브라우저에서 완벽한 이미지를 로드할 수 있습니다. 뷰포트의 디스플레이 너비 ( 280px뷰포트의 320px87.5%). 그리고 480px뷰포트가 최소 768px. 이 단계에서 태그와 태그의 srcset속성 sizes덕분 에 LCP 이미지의 통합이 제대로 이루어졌다면 LCP 리소스 로드 시간 의 최적화 가 최적일 것입니다. 참고 : 여기서는 주로 사용자의 장치에 따라 LCP 이미지 크기를 적절하게 조정하는 데 중점을 두었습니다. LCP 점수와 "리소스 로드 시간" 하위 부분이 실제로 최적이 되려면 최신 이미지 형식 을 사용하여 이미지를 압축하거나 먼 미래의 캐시 만료 헤더를 설정하거나 CDN을 사용하여 네트워크 거리를 줄이는 것도 고려할 수 있습니다. 참고 : LCP 이미지가 잘 최적화되고 태그 내에 잘 통합되더라도 페이지에 JavaScript 파일과 같은 렌더링 차단 리소스가 포함되어 있으면 이것만으로는 충분하지 않습니다. 불필요한 요소 렌더링 지연을 제거하는 방법을 보려면 Philip Walton의 이 강연 을 참조 하십시오. 이제 로딩 시간을 줄여 LCP 점수를 더욱 최적화하는 방법을 살펴보겠습니다. jQuery, Angular, React 및 Vue용으로 기본적으로 구축된 JavaScript UI 라이브러리입니다. 빠르고 현대적인 UI를 구축하기 위한 일관된 API 및 테마. 무료 평가판 시작 LCP 리소스 로드 지연 하위 파트 # 개선 이 섹션에서는 가능한 한 빨리 LCP 이미지를 로드하는 방법을 알아보기 위해 이전에 사용된 코드 예제를 완성할 것입니다. LCP 이미지 요소를 레이지 로드하지 마십시오 . # 사용자가 웹 사이트를 방문하기 위해 인터넷을 탐색할 때 LCP 이미지의 로딩은 기본 레이지 로딩 또는 JavaScript 라이브러리에 의해 적용되는지 여부에 관계없이 레이지 로딩 기술에 의해 지연되는 경우가 많습니다. 그러나 이 로딩 지연 이 LCP 시간 계산에 포함 된다는 점에 유의해야 합니다 . 예를 들어 지연 로딩 JavaScript 라이브러리를 사용하는 경우 최종 이미지를 로드하려면 먼저 스크립트를 로드해야 합니다. 이 추가 단계로 인해 LCP 리소스 로드가 상당히 지연됩니다. 즉, LCP 이미지를 지연 로딩하면 웹 페이지의 LCP 점수에 불이익을 줍니다. 마찬가지로 프로그레시브 로딩 또는 LQIP( Low-Quality Image Placeholder )는 이 글을 쓰는 시점에 Google에서 LCP로 고려하지 않았습니다. 그러나 LQIP에 대한 논의가 진행 중이므로 향후 상황이 바뀔 수 있습니다. 우선 힌트 사용 # 우리는 LCP 이미지가 지연 로드되어서는 안 된다는 것을 방금 보았습니다. 하지만 어떻게 로딩의 우선순위를 정할 수 있을까요? 페이지의 리소스를 관리하기 위해 브라우저는 기본적으로 리소스 유형별로 다른 매개변수 중에서 정의된 우선 순위에 따라 로드 순서를 적용합니다. 이미지는 렌더링 차단 리소스보다 우선 순위가 낮습니다. 더 낮은 우선 순위로 리소스를 가져온다는 의미 외에도 브라우저가 더 중요하고 종종 렌더링을 차단하는 리소스에 집중할 수 있도록 초기에 "낮은" 리소스를 의도적으로 지연시키기 때문에 가져오기가 실제로 지연된다는 의미이기도 합니다. 즉, LCP 이미지 가 지연되지 않고 HTML 문서를 수신하는 즉시 로드할 수 있도록 브라우저의 기본 로드 순서와 영웅 이미지에 대한 동작을 변경해야 합니다 . 이 fetchpriority="high"로딩 우선 순위를 수정할 수 있게 해주는 속성입니다. 복사 코드 예제를 업데이트해 보겠습니다. 태그 에 속성을 추가하기만 하면 브라우저가 자동으로 속성 에 선언된 소스를 기반으로 우선 순위를 지정하기 위한 이미지의 올바른 버전을 결정 합니다.srcset 복사 ???? 최종 데모 보기 . 참고 : 이 fetchpriority속성 은 요소 의 태그 에서도 작동합니다. 현재로서는 주로 Chromium과 호환되지만 2023년 초에는 Firefox에서 지원될 예정 입니다. 그러나 단점 없이 속성을 계속 사용할 수 있습니다. fetchpriority속성을 지원하지 않는 브라우저에서는 속성이 무시됩니다. 데모에서 볼 수 있듯이 태그 src와 srcset속성은 초기 HTML 소스 코드에 있습니다. 이는 브라우저의 사전 로드 스캐너가 LCP 리소스를 검색할 수 있으므로 여기에서 LCP 리소스를 사전 로드할 필요가 없음을 의미합니다. 참고 : 반응형 이미지의 사전 로드는 Safari의 경우와 같이 모든 브라우저에서 지원되지 않습니다 . 지원하지 않는 브라우저가 쓸모 없는 이미지를 요청하지 않도록 요소 에 특성 을 사용하지 않도록 하세요 . 이 항목에 대해 자세히 알아보고 LCP 리소스를 미리 로드해야 하는 경우를 보려면 이 문서 를 읽으십시오.href 320px이 마지막 데모에서 브라우저는 이제 뷰포트가 의 장치 및 뷰포트가 의 장치에 필요한 최적의 이미지를 알 768px수 있을 뿐만 아니라 다른 리소스와 비교하여 로드 우선순위를 지정할 수 있습니다. 따라서 개발자로서 이 문서에 설명된 모든 사항은 웹 사이트의 LCP 점수를 향상시키는 데 도움이 됩니다. LCP 점수가 좋은 모바일 옆에 있는 남자의 그림이 녹색으로 강조 표시됨 ( 큰 미리보기 ) Smashing Magazine으로 광고하기 결론 # 결론적으로 다음은 LCP 이미지를 최적화하는 데 필요한 단계를 요약한 것입니다. 웹 사이트의 페이지 템플릿이 정의되면 공식 에 따라 각 장치 및 각 DPR 에 필요한 모든 이미지를 생성 하고 저장합니다 . 이 단계를 단순화하기 위해 TwicPics API를 사용하여 고품질 원본 이미지에서 다양한 차원의 여러 버전을 생성할 수 있습니다.imageRenderedSize x DPR 태그 srcset속성을 사용하여 1단계에서 정의한 이미지 목록을 포함하고 모바일 우선 접근 방식을 따릅니다( 속성 내에 기본 이미지를 입력해야 함).src 필요에 따라 미디어 쿼리 와 결합된 태그 의 sizes속성을 사용하여 다양한 장치 컨텍스트에 따라 이미지가 차지하는 디스플레이 너비를 브라우저에 알립니다. 이미지가 반응형 이면 수식을 사용하여 너비를 뷰포트 너비 의 백분율로 정의합니다 (imageRenderedSize / viewportWidth) x 100. 이미지가 뷰포트 너비 범위에 대해 고정된 경우 너비를 픽셀 단위 로 정의하기만 하면 됩니다. LCP 점수를 더욱 향상시키려면 속성과 함께 우선 순위 힌트를 사용 fetchpriority="high"하여 LCP 이미지 로드의 우선 순위를 지정하십시오. 그리고 LCP 이미지 리소스를 지연 로드하지 않도록 주의하세요!