2023년 09월 19일
브라우저 로딩 초기 단계에서 HTML 파싱이 일어날 때 CSS 또는 자바스크립트로 인해 파싱이 중단될 수 있다. 이렇게 파싱이 중단되는 상황을 HTML 파싱이 블록되었다라고 표현하며, 블록 상태의 원인이 되는 리소스를 블록 리소스(Block resource) 라고 부른다.
블록 리소스는 브라우저 로딩 단계 중 페인트 과정을 지연시키므로, 블록 리소스가 HTML 파싱을 막는 상황이 발생하지 않도록 해야 한다. 구글에서는 **주요 렌더링 경로(Critical Rendering Path**)를 최적화하면 페인팅을 빠르게 하고 로딩 속도를 개선할 수 있다고 설명한다.
로딩 속도를 개선하는 방법을 찾기 위해서는 어떤 기준으로 로딩 속도가 느린지를 판별해야 한다. 성능 지표의 측정 기준은 크게 브라우저와 사용자 기준으로 나눌 수 있다.
브라우저 기준의 성능 측정은 전통적인 성능 측정 방식으로 브라우저에서 발생하는 이벤트를 사용하는 것이다. 웹 페이지가 로딩될 때 DOMContentLoaded, load 이벤트가 발생하는데 각 이벤트가 발생하는 시점으로 성능을 측정하는 것이다.
아래 이미지는 내비게이션 타이밍(Navigation Timing) 모델로, 이 모델에서 DOMContentlLoaded 이벤트(파란색 표시), load 이벤트(빨간색 표시) 발생 시점이 빠를수록, 그리고 두 이벤트 발생 구간의 폭이 좁을수록 성능이 좋다고 말한다.
로딩 과정에서 DOMContentLoaded, load 이벤트가 발생하는 구체적인 시점은 다음과 같다.
그리고 이 두 이벤트가 발생하는 시점은 네비게이션 타이밍 API를 사용하거나 크롬 개발자 도구를 통해 확인할 수 있다.