Good Morning!!

ㄴㅇㄹㄴㅇㄹㅇ

페이지 로딩 속도 측정

고성능 웹 애플리케이션은 훌륭한 사용자 경험(UX)에 대단히 중요합니다.

Navigation Timing으로 페이지 로딩 속도 측정하기

사람들은 빨리 뜨는 웹페이지를 좋아한다. 구글은 실험을 통해 백 밀리 초 정도의 작은 지연도 부정적인 영향을 끼칠 수 있다는 점을 보여주었다. 하지만 웹페이지의 로딩 속도는 어떻게 측정해야 하는가? 그리고 여기서 얘기하는 “페이지 로딩”의 의미는 정확히 무엇인가?

Navigation Timing은 웹의 성능을 정확하게 측정하는 자바스크립트 API이다. Navigation Timing API는 페이지 탐색과 로드 이벤트와 관련한 정확한 타이밍을 자세하게 얻을 방법을 제공한다. 현재 이 API는 Internet Explorer 9, Google Chrome, Firefox에서 사용할 수 있다.

이 글에서는 이 API를 사용해서 타이밍 데이터를 사용하는 방법을 설명한다.

어떻게 사용하는가?

Navigation Timing API는 window.performance 객체의 프로퍼티로 접근한다.

navigation: 사용자가 어떻게 페이지를 탐색했는가 timing: 탐색과 페이지 로드 이벤트에 관한 데이터. 크롬은 자바스크립트 메모리 사용에 대한 데이터를 볼 수 있는 perfomance.memory 프로퍼티도 제공한다.

이 API를 사용해보는 가장 쉬운 방법은 브라우저의 자바스크립트 콘솔에서 window.performance를 살펴보는 것이다.

구글 크롬에서 아무 페이지나 열고

  1. 크롬창에서 오른쪽 위의 “크롬 맞춤설정 및 제어” 메뉴에서 도구 > 자바스크립트 콘솔을 선택한다.(아니면 윈도우나 리눅스에서는 Ctrl-Shift-J로 맥에서는 Command-Option-J로 접근할 수 있다.)
  2. 창 하단의 > 프롬프트에 performance라고 입력하고 엔터를 누른다.
  3. 객체의 프로퍼티(memory, navigation, timing)를 보려면 Performance를 클릭한다.
  4. 세부 속성을 보려면 timing 왼쪽의 화살표를 클릭한다.

자바스크립트 Date보다 더 좋은 방법
예전에는 웹 개발자가 타이밍 매트릭스를 구하려고 자바스크립트 Date 객체를 사용했다. 다음과 같은 코드를 웹페이지 최상단에 두고 간단한 속도 측정을 했을 것이다.

var start = Date.now();

그리고 페이지 하단에는 다음과 같은 코드를 둔다.

console.log(“Page load took “ + (Date.now() — start) + “milliseconds”);

이런 식으로 인라인 자바스크립트를 사용해서 측정한 성능은 다음과 같은 이유로 한계가 있고 신뢰할만하지도 않다.

  • 타이밍관련 코드가 페이지에 있으므로 이 코드가 페이지 로딩에 영향을 주고 시간을 잡아먹는다. (Navigation Timing API는 페이지 로딩 과정에는 영향을 전혀 주지 않고 페이지 로딩이 완료된 후에 타이밍 데이터를 사용할 수 있다.)
  • JavaScript time is not accurate. : 자바스크립트의 시간은 정확하지 않다 .
  • 페이지에 타이밍을 측정하는 코드를 두어도 좋은 상황이 아니라면 사용자가 경험하는 페이지 로딩 속도를 측정할 수 없다.
  • 가장 최악인 것은 Date 객체로는 페이지 로딩을 시작하기 전의 네트워크 지연을 측정할 수 없다는 부분이다.
window.onload = function(){
 setTimeout(function(){
 var t = performance.timing;
 console.log(t.loadEventEnd — t.responseEnd);
 }, 0);
}

활용방법

이 API의 데이터는 여러 이벤트를 조합해서 사용해야 실제적인 의미를 가진다.

  • 네트워크 지연시간 (): responseEnd-fetchStart
  • 서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간: loadEventEnd-responseEnd
  • 탐색과 페이지 로드의 전체 과정: loadEventEnd-navigationStart.

특정 문제를 정확히 짚어내기 위해 이러한 방법으로 데이터를 조합할 수도 있다. 예를 들어 redirectEnd-redirectStart로 리다이렉트에 걸린 시간을 측정할 수 있다.

결론.

Date 객체를 사용해서 타이밍을 측정하는 방법과는 달리 Navigation Timing API는 페이지 로딩에 전혀 영향을 주지 않고 사용할 수 있다.