주요 렌더링 경로 측정

Ilya Grigorik
Ilya Grigorik
X 홈페이지

게시일: 2014년 3월 31일

모든 탄탄한 성능 전략은 훌륭한 측정과 계측을 바탕으로 합니다. 측정할 수 없는 사항을 최적화할 수 없습니다. 이 가이드에서는 CRP 성능을 측정하는 다양한 접근 방식을 설명합니다.

  • Lighthouse 접근방식에서는 일련의 자동화된 테스트를 페이지에 실행한 다음, 페이지의 CRP 성능에 대한 보고서를 생성합니다. 이 접근 방식 CRP 성능에 대한 간단하고 기본적이고 개략적인 개요를 제공합니다. 브라우저에서 로드한 특정 페이지를 테스트하여 반복하고 성능을 개선할 수 있습니다.
  • Navigation Timing API 접근방식에서는 RUM(실시간 사용자 모니터링) 측정항목을 캡처합니다. 이름에서 알 수 있듯이 이러한 측정항목은 실제 사용자로부터 수집됩니다. 사이트에 대한 정확한 보고서를 다양한 환경에서 사용자가 경험한 실제 CRP 성능을 기기의 종류와 네트워크 상태를 살펴봤습니다.

일반적으로 좋은 접근 방식은 Lighthouse를 사용하여 명확한 CRP를 식별하는 것입니다. 최적화 기회에 대해 알아보고, 이를 통해 코드를 Navigation Timing API는 앱의 실제 성능을 모니터링합니다.

Lighthouse로 페이지 감사

Lighthouse는 웹 앱 감사 도구로, 통합 보고서에 페이지의 결과를 표시합니다. Lighthouse를 Chrome 확장 프로그램이나 NPM 모듈로 실행할 수 있으며, 이는 Lighthouse와 지속적 통합 시스템을 통합하는 데 유용합니다.

시작하려면 Lighthouse로 웹 앱 감사를 참고하세요.

Lighthouse를 Chrome 확장 프로그램으로 실행하면 페이지의 CRP 결과는 다음 스크린샷과 같이 표시됩니다.

Lighthouse의 CRP 감사

이 감사의 자세한 내용은 주요 요청 체인을 참고하세요. 있습니다.

Navigation Timing API와 내보낸 기타 브라우저 이벤트의 조합입니다. 실제 CRP를 캡처하고 기록할 수 있습니다. 확인할 수 있습니다.

Navigation Timing

이전 다이어그램의 각 레이블은 로드되는 각각의 모든 페이지에 대해 브라우저가 추적하는 고해상도 타임스탬프에 해당합니다. 실제로 이 특정 사례에서는 서로 다른 모든 타임스탬프의 일부만 보여줍니다. 지금은 모든 네트워크 관련 타임스탬프를 건너뛰지만, 향후 강의에서 이에 관해 다시 살펴보겠습니다.

그렇다면 이러한 타임스탬프는 무엇을 의미할까요?

  • domLoading: 전체 프로세스의 시작 타임스탬프입니다. 브라우저가 HTML의 처음 수신된 바이트의 파싱을 시작하려고 합니다 문서를 참조하세요.
  • domInteractive: 브라우저가 파싱을 완료한 시점을 표시합니다. 모든 HTML 및 DOM 생성 작업이 완료되었습니다.
  • domContentLoaded: DOM이 준비되고 자바스크립트 실행을 차단하는 스타일시트가 없는 시점을 표시합니다. 즉, 이제 (잠재적으로) 렌더링 트리를 생성할 수 있습니다.
    • 많은 JavaScript 프레임워크가 자체 로직을 실행하기 전에 이 이벤트를 기다립니다. 따라서 브라우저는 EventStart 및 EventEnd 타임스탬프를 캡처하여 이 실행에 걸린 시간을 추적할 수 있습니다.
  • domComplete: 이름에서 알 수 있듯이 모든 처리가 완료되고 다운로드 완료까지 걸리는 시간을 단축할 수 있으며 로딩 스피너의 회전이 멈춘 것입니다.
  • loadEvent: 각 페이지 로드의 최종 단계로, 브라우저가 추가 애플리케이션 로직을 트리거할 수 있는 onload 이벤트를 발생시킵니다.

HTML 사양은 이벤트가 발생하는 시기, 충족해야 하는 조건, 기타 중요한 고려사항 등 각 이벤트에 대한 특정 조건을 규정합니다. 여기서는 주요 렌더링 경로와 관련된 몇 가지 주요 이정표를 중점적으로 살펴보겠습니다.

  • domInteractive는 DOM이 준비된 시점을 표시합니다.
  • domContentLoaded는 일반적으로 DOM과 CSSOM이 모두 준비된 시점을 표시합니다.
    • JavaScript를 차단하는 파서가 없으면 domInteractive 직후에 DOMContentLoaded가 실행됩니다.
  • domComplete는 페이지 및 해당 하위 리소스가 모두 준비된 시점을 표시합니다.
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

직접 해 보기

앞의 예는 언뜻 보기에는 다소 어렵게 보일 수 있지만 실제로는 매우 간단합니다. Navigation Timing API는 모든 관련 타임스탬프를 캡처하고 개발자 코드는 onload 이벤트가 발생하기를 기다립니다. onload 이벤트는 domInteractive, domContentLoaded, domComplete 이벤트 이후에 발생한다는 사실을 상기하세요. 또한 이 API는 다양한 타임스탬프 간의 차이를 계산합니다.

NavTiming 데모

모든 것이 말한대로 이루어졌으면, 이제 측정할 몇 가지 특정한 마일스톤과 이러한 측정 결과를 출력하기 위한 기본 함수가 만들어졌을 것입니다. 페이지에 이러한 측정항목을 출력하는 대신 코드를 수정하여 이러한 측정항목을 분석 서버로 전송할 수도 있습니다(Google 애널리틱스에서 자동으로 처리). 이는 페이지의 실적을 계속 확인하고 최적화 작업의 이점을 누릴 수 있는 후보 페이지를 식별하는 데 유용한 방법입니다.

DevTools는 어떻게 되나요?

이 문서에서는 Chrome DevTools Network 패널을 사용하여 CRP 개념을 설명하겠지만 DevTools는 CRP에 적합하지 않음 데이터를 분리하는 메커니즘이 내장되어 있지 않기 때문입니다. 핵심 리소스를 제공합니다 Lighthouse 감사를 실행하여 다음을 수행합니다. 이러한 리소스를 식별할 수 있습니다.

의견