김 양의 멋따라 개발따기

22.12.09. LCP(Largest Contentful Paint)와 개선법 본문

TIL

22.12.09. LCP(Largest Contentful Paint)와 개선법

개발따라김양 2022. 12. 9. 12:05

1.  LCP(Largest Contentful Paint)란?

  •  페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간
  • 사용자가 감지하는 로드 속도를 측정할 수 있는 중요한 사용자 중심 메트릭
  • 고려되는 요소 유형
    • <img> 요소
    • <svg> 요소 내부의 <image>
    • <video> 요소(포스터 이미지 사용)
    • url() 함수를 통해 로드된 배경 이미지가 있는 요소(CSS 그라데이션과는 대조적임)
    • 텍스트 노드 또는 기타 인라인 수준 텍스트 하위 요소를 포함하는 블록 수준 요소
  • 요소의 크기 결정 요인
    • 요소의 크기는 일반적으로 뷰포트 내에서 사용자에게 표시되는 크기
    • 요소가 뷰포트 외부로 확장되거나, 요소가 잘리거나,
      보이지 않는       오버플로가 있는 경우 해당 부분은 요소 크기에 포함되지 않음
    • 크기가 조정된 이미지 요소의 경우 가시적 크기 또는 기본 크기 중 더 작은 것이 보고
  • 개선 방법
    • 영향 받는 요인
      • 느린 서버 응답 시간
      • 렌더링 차단 JavaScript 및 CSS
      • 리소스 로드 시간
      • 클라이언트 측 렌더링
    • 느린 서버 응답 시간
      • 서버 최적화
      • 사용자를 가까운 CDN으로 라우팅
        • 콘텐츠 전송 네트워크(CDN)은 여러 위치에 분산된 서버 네트워크
      • 자산 캐시
      • HTML 페이지 캐시 우선 제공
      • 조기에 타사 연결 구축
      • 서명된 교환(SXG) 사용
        • 쉽게 캐시할 수 있는 형식으로 콘텐츠를 제공하여
          더 빠른 사용자 경험을 가능하게 하는 전달 메커니즘
    • 렌더링 차단 JavaScript 및 CSS
      • HTML 파서는 외부 스타일시트( <link rel="stylesheet">) 또는
        동기 JavaScript 태그        (<script src="main.js">)를 만나면 일시 중지
      • css 차단 시간 단축
        • CSS 축소
        • 중요하지 않은 CSS 지연
          • 초기 렌더링에 필요하지 않은 CSS의 경우 
            loadCSS를 사용해 rel="preload" 및 onload를 활용해 비동기식으로 파일을 로드
        • 중요 CSS 즉시 처리
          • 스크롤 없이 볼 수 있는 콘텐츠에 사용되는 중요 경로 CSS를 <head>에 포함해 즉시 처리
      • JavaScript 시간 단축
    • 리소스 로드 시간
      • 이미지 최적화 및 압축
        • 처음부터 이미지를 사용하지 않는 것이 좋습니다. 콘텐츠와 관련이 없는 경우 삭제하세요.
        • 이미지 압축(예: Imagemin 사용)
        • 이미지를 최신 형식(JPEG 2000, JPEG XR 또는 WebP)으로 변환
        • 반응형 이미지 사용
        • 이미지 CDN 사용 고려
      • 중요한 리소스 미리 로드
        • 특정 리소스에 우선순위를 지정해야 하는 경우 <link rel="preload">를 사용해 더 빨리 가져옵니다.
      • 텍스트 파일 압축
        • Gzip 및 Brotli와 같은 압축 알고리즘은 서버와 브라우저 사이에 전송되는 텍스트 파일(HTML, CSS, JavaScript)의 크기를 크게 줄일 수 있습니다. 
      • 네트워크 연결을 기반으로 다양한 자산 제공(적응형 서비스)
        • navigator.connection.effectiveType: 유효 연결 유형
        • navigator.connection.saveData: 데이터 절약 활성화/비활성화
        • navigator.hardwareConcurrency: CPU 코어 수
        • navigator.deviceMemory: 장치 메모리
      • 서비스 작업자를 사용하여 자산 캐시
if (navigator.connection && navigator.connection.effectiveType) {
// 4G보다 연결 속도가 낮다면
  if (navigator.connection.effectiveType === '4g') {
    // Load video
  } else {
    // Load image
  }
}
  • 클라이언트 측 렌더링
    • React,Angular및Vue같은 프레임워크 및 라이브러리를 사용하면
      웹 페이지의 다양한 측면을 완전히 서버가 아닌
      클라이언트에서 처리하는 단일 페이지 애플리케이션을 더 쉽게 구축
    •  클라이언트에서 렌더링되는 사이트를 구축하는 경우
      대규모 JavaScript 번들을 사용한다면 LCP에 미칠 수 있는 영향에 주의
    • 중요 JavaScript 최소화
    • 서버 측 렌더링 사용
      • 최대한 LCP를 개선하기 위해 서버 렌더링 경험을 결합하는 것도 고려
    • 사전 렌더링 사용

 

 

출처 : https://web.dev/optimize-lcp/

 

최대 콘텐츠풀 페인트 최적화

Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 페이지의 메인 콘텐츠가 화면에 모두 렌더링되었을 때를 결정하는 데 사용됩니다. 느린 서버 응답 시간, 리소스 로드 시간, 클라이언트 측 렌더

web.dev

 

저작자표시

'TIL' 카테고리의 다른 글

22.12.09. FID(First Input Delay)와 개선법  (1) 2022.12.09
22.12.09./웹사이트 성능 최적화(Web Vitals)  (1) 2022.12.09
22.12.07./HTTP와 HTTPS  (1) 2022.12.07
22.12.03./CSR과 SSR  (1) 2022.12.03
22.12.02./캐시(Cache)란 무엇인가?  (0) 2022.12.02
'TIL' Related Articles more