<aside> ⚠️ FCP는 SEO뿐만 아니라 많은 곳에 영향을 끼칩니다.

</aside>

SEO와 FCP는 어떤 관계인가요?

검색엔진 알고리즘을 빈번히 업데이트하지만 모든 변경사항을 공개하지 않습니다.

하지만 웹 사이트의 속도는 SEO 평가지표 중 중요한 요소입니다.

웹사이트 검색엔진 최적화 유지관리

DCL과 FCP가 SEO에 미치는 영향

저는 구글에서 제공하는 PageSpeed Insights를 통해 개별 페이지의 성능테스트 했고, 그 측정항목 중 FCP(First Contentful Paint)가 낮은 점수를 받고 있었습니다

문제점

FCP최적화 진행 전

FCP최적화 진행 전

특히 FCP 타임에 문제가 있었고, render-blocking resources 에서 많은 시간이 지연됐습니다

Render-blocking resources의 원인

FCP를 줄이기 위해 가장 중점으로 확인한 요소입니다.

웹 브라우저는 HTML을 parsing하면서 DOM 구조를 만듭니다.

출처: https://haragoo30.medium.com/웹-성능-최적화-기초-1e107b44eb46

출처: https://haragoo30.medium.com/웹-성능-최적화-기초-1e107b44eb46

위 설명을 렌더링 엔진의 작동원리와 함께 이해한다면,

  1. HTML 파서는 script 요소를 만나면 DOM 생성을 중지하고 JS 엔진에 권한을 넘김
  2. JS가 끝나면 다시 HTML 파서(브라우저 렌더링 엔진)로 권한을 넘기고, 중지되었던 시점부터 DOM 생성을 진행합니다.