FP vs FCP vs FMP vs LCP

FCP(First Contentful Paint) #

• 브라우저가 처음으로 DOM의 일부분을 렌더링한 시점을 측정한다.

FMP(First Meaningful Paint) #

• 페이지의 주요 콘텐츠가 사용자에게 표시되는 시점을 측정한다.
  • Above-The-Fold 콘텐츠
• 브라우저마다 세부 구현이 달라 비권장된다.

LCP(Largest Contentful Paint) #

• 뷰포트에서 가장 큰 요소가 스크린에 렌더링되는 시점을 측정한다.

LCP 최적화 #

• TTFB(Time To First Byte)을 개선한다.
  • 서버 최적화
  • CDN으로 라우팅
  • asset 캐시
  • 페이지 캐시
• 렌더링 차단 JavaScript 및 CSS

Related #

• CSR vs SSR vs SSG

References #

• First Meaningful Paint (web.dev)
• First Contentful Paint (web.dev)
• Largest Contentful Paint (web.dev)