중요 렌더링 경로

핵심 렌더링 경로는 브라우저가 페이지를 수신한 후 화면에 콘텐츠를 표시하기까지 완료해야 하는 일련의 단계입니다. 여기에는 마크업을 문서 구조로 파싱하고, 스타일시트를 스타일 구조로 파싱하고, 이 둘을 렌더링 트리로 결합하고, 레이아웃을 계산하고, 최종 결과를 화면에 표시하는 과정이 포함됩니다. 핵심 렌더링 경로를 이해하면 일부 리소스는 콘텐츠가 처음 표시되는 데 시간이 걸리고 다른 리소스는 그렇지 않은 이유를 설명할 수 있습니다.

스타일시트는 의도적으로 렌더링을 차단하도록 설계되었으며, 이는 결함이 아니라 의도적인 설계입니다. 스타일이 적용되기 전에 브라우저가 화면을 렌더링하면 스타일이 적용되지 않은 콘텐츠가 표시된 후 레이아웃이 다시 조정되는데, 이는 잠깐의 지연보다 훨씬 더 심각한 문제를 야기합니다. 따라서 문서 헤더에서 참조되는 모든 스타일시트는 페이지가 표시되기 전에 다운로드 및 처리되어야 하므로, 스타일시트의 개수, 크기 및 전송 속도가 페이지 표시 시점을 직접적으로 결정합니다.

스크립트는 별도의 표시가 없는 한 파서 블록킹을 수행하며, 이는 지연의 주요 원인 중 하나입니다. 파싱 중에 동기 스크립트를 만나면 해당 스크립트가 다운로드되어 실행될 때까지 문서 생성이 중단됩니다. 이는 스크립트가 문서를 수정할 수 있기 때문입니다. 스크립트를 지연 실행(deferred)으로 표시하면 파싱이 계속 진행되어 문서 생성이 완료된 후에 실행되고, 비동기 실행(asynchronous)으로 표시하면 스크립트가 도착하는 즉시 실행됩니다. 각 스크립트에 적합한 속성을 선택하는 것은 가장 저렴하게 개선할 수 있는 방법 중 하나입니다.

경로를 단축한다는 것은 왕복 횟수와 각 단계에서 필요한 작업량을 모두 줄이는 것을 의미합니다. 초기 뷰포트에 필요한 스타일을 인라인으로 처리하면 차단 요청이 완전히 제거되고 나머지는 차단 없이 로드됩니다. 첫 번째 렌더링에 필요하지 않은 스크립트를 지연시키고, 리소스를 최소화 및 압축하며, 작업 시작 전에 완전한 왕복을 추가하는 리디렉션을 제거하면 첫 번째 화면 표시까지의 경과 시간을 줄일 수 있습니다.

리소스 힌트를 사용하면 브라우저가 리소스를 발견하기 전에 작업을 시작할 수 있습니다. 사전 로딩은 스타일시트에서 참조되는 글꼴이나 CSS를 통해 적용된 히어로 이미지처럼 문서 후반부에서 발견된 리소스가 필요하다고 선언하여 즉시 다운로드를 시작하도록 합니다. 사전 연결은 타사 소스에 대한 연결을 미리 설정하여 중요한 순간에 연결 및 협상 오버헤드를 제거합니다. 이러한 기능은 선택적으로 사용하면 도움이 되지만, 무분별하게 사용하면 대역폭을 놓고 경쟁하여 상황을 악화시킬 수 있습니다.

글꼴은 경로상에 위치하고 나중에야 발견되기 때문에 특별한 주의를 기울여야 합니다. 스타일시트에서 참조되는 웹 글꼴은 해당 스타일시트가 처리될 때까지 다운로드를 시작할 수 없으며, 표시 전략에 따라 글꼴이 도착할 때까지 텍스트가 보이지 않을 수 있습니다. 화면 상단에 사용되는 글꼴을 미리 로드하고, 대체 텍스트를 즉시 표시하는 표시 전략을 선택하고, 리플로우를 줄이기 위해 대체 텍스트의 메트릭을 일치시키면 이러한 문제를 해결할 수 있습니다.

클라이언트 측 렌더링은 처리 경로를 상당히 확장시키기 때문에 의도적인 완화 조치가 필요합니다. 초기 문서에 콘텐츠가 없고 모든 것을 JavaScript로 구성해야 하는 경우, 경로에는 번들 다운로드, 구문 분석 및 실행, 그리고 데이터 가져오기 과정이 모두 포함되어야 비로소 화면에 콘텐츠가 표시됩니다. 서버 측 렌더링 또는 정적 생성은 초기 경로에 의미 있는 콘텐츠를 반환하므로, 이는 최적화라기보다는 구조적인 해결책입니다.

페이지 구성 및 제공 방식에 따라 경로가 결정되므로 개선을 위해서는 일반적으로 구성 변경보다는 템플릿 및 빌드 변경이 필요합니다. 실제로 이러한 분석은 다음 영역에 속합니다. 웹 성능 업무의 경우, 구현은 다음을 통해 이루어집니다. 방열판 열 관리용사이트의 렌더링 방식이 근본적인 제약 조건인 경우, 논의는 단순히 설정을 조정하는 작업이 아니라 페이지가 어떻게 생성되는지에 대한 아키텍처적인 논의로 바뀝니다.