[Korean FE Article] 렌더링 지연을 개선해 LCP 점수 향상하기

글 링크: https://velog.io/@superlipbalm/lcp-render-delay

소개

구글의 오픈 소스 도구인 Lighthouse를 이용해 페이지 성능을 측정하고 개선할 수 있다는 점을 대부분 알고 계실 겁니다. 이 글에서는 Lighthouse의 성능 점수 항목중 하나인 Largest Contentful Paint(LCP)를 향상 시키는 방법을 자세히 다루고 있습니다.

제목에서 드러나듯 LCP의 하위 항목 중 렌더링 지연(Render Delay)를 개선하는 것을 중점적으로 다루고 있는데요. 렌더링 지연이 무엇인지, 그리고 지연이 발생하는 대표적인 원인들을 자세히 설명하고 어떻게 개선할 수 있는지 설명합니다.

만약 LCP 점수를 개선하고 싶지만 어떤 부분을 개선하면 좋을지 막막하거나, 렌더링 지연으로 좋은 LCP 점수를 받지 못하고 있으시다면 이 글이 도움이 되시리라 생각됩니다.

목차

• 렌더링 지연(Render Delay)이란 무엇인가요?

• 렌더링 지연의 원인은 무엇일까요?

  • 렌더링 차단 요청

  • 콘텐츠를 숨기는 CSS

  • 큰 콘텐츠 리렌더링

• 실제 사용자 모니터링을 통한 렌더링 지연 개선

• 결론