DCL과 FCP가 SEO에 미치는 영향은? | 웹 성능 메트릭
DCL과 FCP는 모두 Google이 웹페이지의 성능을 평가하는 데 사용하는 중요한 측정 항목입니다. 이러한 메트릭은 단순히 페이지의 총 로드 시간 또는 첫 번째 바이트까지의 시간(TTFB)을 측정하는 것보다 더 심층적입니다.
학습 목표
이 글을 읽은 후에 다음을 할 수 있습니다:
- DCL 및 FCP의 정의
- 브라우저에서 문서 개체 모델(DOM)을 사용하는 방법 이해하기
- SEO가 이러한 성능 메트릭에 따라 어떻게 영향을 받는지 설명
글 링크 복사
DCL이란?
DOMContentLoaded의 약자인 DCL은 중요한 웹 페이지 성능 메트릭입니다. DCL은 브라우저가 클라이언트 측 스크립팅을 구현할 준비가 된 시점을 측정합니다. 보다 기술적인 용어로, DCL은 웹 페이지를 로드하는 과정에서 문서 개체 모델(DOM)이 브라우저에 의해 조립되고 JavaScript 실행을 방해하는 스타일시트가 없는 시간입니다. (이러한 용어를 이해하는 데 도움이 필요하면 아래의 '웹 페이지 작동 방식에 대한 간략한 참고 사항'을 참조하세요.)
문서 개체 모델(DOM)이란?
DOM은 문서 개체 모델을 나타내는 약어입니다. 문서 개체 모델은 연구 논문의 개요와 다르지 않게 요점과 하위 요점이 있는 웹 페이지의 구조를 표현한 것입니다. DOM은 페이지 자체를 루트로 사용하여 페이지의 다른 HTML 요소로 분기되는 트리라고 생각하면 됩니다.
DOMContentLoaded는 브라우저가 수신한 HTML 코드에서 이 페이지의 모델을 생성했음을 의미합니다. 이는 또한 스크립트를 수행하고 동적 콘텐츠를 표시할 준비가 되었음을 의미합니다.
FCP란?
최초 콘텐츠풀 페인트(FCP)는 또 하나의 중요한 성능 지표입니다. FCP는 DOM의 첫 번째 콘텐츠가 렌더링되는 시점, 즉 첫 번째 HTML 요소가 표시되는 시점을 측정합니다. 텍스트, 이미지, 사용자가 웹 페이지의 일부로 인식할 수 있는 항목 등이 모두 FCP가 될 수 있습니다. 최초 콘텐츠풀 페인트는 페이지의 요소가 렌더링되는 시기를 측정하는 최초 페인트(FP)와는 다릅니다.
'첫 번째' 발생을 측정하는 몇 가지 다른 성능 메트릭이 있습니다. 예를 들어, 첫 번째 바이트 시간(TTFB)은 웹 서버의 첫 번째 바이트가 브라우저에 도달하는 시점을 측정합니다. 그러나 FCP는 사용자가 페이지가 성공적으로 로드되기 시작하는 것을 볼 수 있는 첫 번째 지점을 측정합니다. 웹 성능에 대한 사용자의 인식은 사용자가 웹 사이트에 계속 참여하도록 하는 데 중요하므로 TTFB는 사용자의 관점에서 거의 관련이 없습니다.
DCL과 FCP는 SEO에 어떤 영향을 미칠까요?
웹 사이트 속도는 탄탄한 검색 엔진 최적화(SEO) 전략의 중요한 부분입니다. 성능은 Google 검색 엔진 순위에서 특히 중요한 요소입니다. DCL과 FCP는 Google이 성능 평가에서 강조하는 두 가지 측정 항목이며 Google PageSpeed Insights는 개발자가 이를 측정하는 데 도움이 됩니다. (Google은 이 두 가지 성능 메트릭이 검색 순위에 얼마나 많은 영향을 미치는지 정확하게 공유하지는 않지만, 확실히 고려하기는 합니다.)
개발자는 사이트에 대한 이러한 성능 메트릭을 개선하기 위해 여러 단계를 수행할 수 있습니다.캐싱을 이용하고 CDN을 활용하는 것은 DCL 및 FCP 시간을 개선하기 위한 두 가지 필수 단계입니다.
Cloudflare에서는 DCL 및 FCP를 어떻게 향상할까요?
Cloudflare CDN은 HTTP 요청이 훨씬 더 빠르게 응답되도록 전 세계 위치에서 콘텐츠를 캐싱하여 웹 사이트 속도를 크게 높입니다.그 결과로 브라우저에서는 페이지 HTML을 더 빨리 수신하여 이 두 메트릭을 모두 개선합니다.
웹 페이지 작동 방식에 대한 간략한 참고 사항
웹 페이지는 HTML 코드, CSS 코드, 자바 스크립트 코드의 조합으로 구성됩니다. 브라우저에서 웹 페이지를 요청하면 관련 웹 서버에서는 브라우저가 별도로 요청해야 하는 모든 CSS, JavaScript, 기타 자산 목록이 포함된 HTML 파일을 보냅니다.
- 하이퍼텍스트 마크업 언어(HTML)는 콘텐츠를 표시하고 다른 자산을 요청하는 방법에 대한 브라우저 지침을 제공하는 코드입니다.
- 캐스케이딩 스타일 시트(CSS)는 HTML 콘텐츠가 표시되는 방식과 웹 페이지의 레이아웃 방식에 대한 추가 지침을 제공하는 코드입니다.
- JavaScript는 HTML 콘텐츠를 가져와서 특정 조건이 충족되면 변경할 수 있는 프로그래밍 언어입니다. 또한 JavaScript는 3D 렌더링, 게임, 기타 기술적으로 복잡한 활동 등 훨씬 더 복잡한 작업에 사용할 수 있습니다.
HTML 파일에는 페이지에 표시되는 콘텐츠, 해당 콘텐츠를 표시하는 방법에 대한 지침, 다른 소스에서 이미지와 같은 다른 콘텐츠를 로드하기 위한 지침 등이 포함되어 있습니다. HTML 파일은 CSS 파일(스타일 시트) 및 추가 지침이 있는 JavaScript 라이브러리에 연결됩니다. 그런 다음 브라우저는 해당 코드를 가져와 해석하고 결과 웹 페이지를 표시합니다.
대부분의 브라우저에서는 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 드롭 다운 메뉴에서 '페이지 소스 보기'를 선택하여 브라우저가 해석하는 HTML 파일을 볼 수 있습니다. 그러면 HTML 파일이 새 탭에서 열립니다. 파일의 텍스트는 거의 항상 '<!DOCTYPE html>'로 시작됩니다.