Skip to content

FP vs FCP vs FMP vs LCP

Title
FP vs FCP vs FMP vs LCP
Category
Web
Tags
Aliases
FP vs FCP vs FMP vs LCPFP(First Paint) vs FCP(First Contentful Paint) vs FMP(First Meaningful Paint) vs LCP(Largest Contentful Paint)First Paint vs First Contentful Paint vs First Meaningful Paint vs Largest Contentful Paint
Related
Created
2 years ago
Updated
last year

FCP(First Contentful Paint)

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

FMP(First Meaningful Paint)

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

LCP(Largest Contentful Paint)

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

LCP 최적화

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

References

Released under the MIT License.