티스토리 뷰

프론트엔드

브라우저 렌더링 최적화 - LCP

jfmam 2023. 3. 9. 16:24

덩어리 콘텐츠 빨리그리기 (LCP 최적화)

뷰포트(above page)의 컨텐츠 중 가장 큰 영역을 차지하는 이미지나 텍스트

  • 사용자 중심의 페이지로드 속도를 판단하는 지표로 사용

FCP와 LCP

그렇다면 어떻게 해야 빠르게 파싱하여 LCP를 줄일 수 있을까?

  • css 최적화
  • 이미지최적화

LCP 문제해결 방법

  • 라이브러리 의존 줄이기 → 렌더 차단리소스 줄이기
  • youmightnotneed (https://youmightnotneed.com/date-fns )
    • 해당사이트를 방문하면 사용하지 않는 라이브러리를 제거해서 사용하는법을 알려준다.

웹폰트 preconnect, css preload

<head>
      <link rel="preconnect" href="폰트 주소" />
      <link rel="preload" as="style" href="*.css" onload="this.onload=null; this.rel='stylesheet'" />
</head>
  • preconnect: 미리 연결해서 준비를 해놓고 필요한 내용을 나중에 사용할 수 있게한다.
    • DNS, TCP, TLS 왕복에 필요한 시간을 단축
  • preload: 웹페이지 렌더링을 하는 동시에 css를 다운로드한다.
    • css 파일이 렌더차단을 하지않고 사용할 수있다.
    • 필요한 자원을 병렬 다운로드
    • css뿐만 아니라 이미지 스크립트도 preload 기법으로 병행로딩 가능하다.
    • as를 어떤 건지 꼭 명시한다 -> (style script image)

히어로 이미지 빠르게 로드하기

<head>
      <link rel="preload" as="image" href="이미지 주소" />
</head>

출처

견고한 UI를 설계를 위한 마크업 가이드 by 정찬명

저작자표시

'프론트엔드' 카테고리의 다른 글

브라우저 최적화 -Reflow, Repaint  (0) 2023.03.09
브라우저 렌더링 최적화 - CLS  (0) 2023.03.09
css 최적화를 통한 브라우저 속도 향상 시키기  (0) 2023.03.09