codinghatso

LCP(Largest Contentful Paint) 개선해보기콘텐츠가 포함된 최대 페인트 (LCP)는 Lighthouse 보고서의 성능 섹션에서 추적하는 측정항목 중 하나입니다.각 측정항목은 페이지 로드 속도의 일부 측면을 포착합니다.Lighthouse는 LCP를 초 단위로 표시합니다.가장 큰 콘텐츠 요소가 화면에 렌더링되는 시점을 측정한 것 입니다.LCP를 개선하는 방법LCP가 이미지인 경우 타이밍은 4개의 하위 부분으로 나눌 수 있습니다. 가장 오래 걸리는 하위 부분을 알면 LCP를 최적화하는 데 도움이 됩니다. Lighthouse는 '최대 콘텐츠 페인트 요소' 진단에서 하위 요소 분석과 함께 LCP 요소를 표시합니다. 첫 바이트까지의 시간 TTFB로드 지연로드 시간렌더링 지연위처럼 LCP를 최적화..

Lighthouse로 Local환경의 브라우저에서 테스트한 결과입니다.배포된 서비스와 Local에서의 성능차이가 생각보다 많이 차이 나는 것 같습니다. 제가 만든 서비스만 그런 건지 대부분의 서비스가 그런 건지 아직은 잘 모르겠지만 최적화하는 방향성을 더 최악의 결과를 보여준 Local에서 개선하고 배포하게 된다면 유의미한 성능 개선이 될 것 같다고 판단했습니다.

Lighthouse로 vercel로 배포된 서비스를 브라우저에서 테스트한 결과입니다.