사용자는 브라우저를 통해 문서를 요청하고 다운로드하고 이를 파싱하거나 렌더링하는 등의 일련의 과정을 거쳐 완성된 페이지를 확인하게 됩니다. 같은 이유로 사용자 입장에서의 로딩 성능이란 이 일련의 과정에 대한 성능이 됩니다. 철저히 클라이언트 입장에서의 감각이죠. 그렇다면 사용자에게 높은 수준의 로딩 성능을 체험할 수 있도록 해주기 위해서는 무엇을 해야할까요? CDN을 통해 최소한의 네트워크 경로를 통해 리소스를 배포하고 웹 페이지의 구조는 최적화되어야 하며 여러가지 기법들이 사용되어야 합니다. 우리는 이를 위한 일반적인 체크리스트들을 많이들 보게되지만 이게 끝일까요?
모든 최적화는 '측정'에서 출발합니다. 측정되지 않는 것은 불행하게도 추측과 실험의 반복(Iteration)을 통해서 접근할 수 밖에 없습니다. 하지만 로딩 성능를 측정하는 방법은 쉽지 않습니다. 자바스크립트를 이용하여 어느 정도의 추적은 할 수 있지만 이 접근은 근본적으로 자바스크립트가 웹 페이지에서 가지는 생명 주기와 같은 이슈들로 인해 우리를 정확한 측정에서 한발 물러서 있도록 합니다. Navigation Timing은 우리가 해왔던 이러한 일들을 브라우저 측면에서 접근합니다. 정확한 시간을 측정하고 그 시간값을 통해 정확한 최적화 지점을 찾을 수 있도록 합니다.
이 튜토리얼은 브라우저의 네비게이션 과정에 대한 시간 흐름을 측정할 수 있는 Navigation Timing을 다루고 있습니다. 이번 번역은 변정훈(Outsider)님께서 수고해주셨습니다. :)
"Navigation Timing 인터페이스는 일련의 브라우징 과정에 대해 브라우저가 직접 측정한 결과값을 제공합니다. 사용자는 언제나 브라우저를 통해 우리의 웹페이지에 접근하므로 이러한 정확한 측정값은 제대로 된 최적화를 위한 첫걸음을 딛을 수 있도록 해줍니다. 사용자 타이밍과 함께 사용한다면 여러분의 웹페이지가 가지는 성능 상의 약점을 쉽게 파악할 수 있는 강력한 도구가 될 것입니다."
TL;DR;
사람들은 빨리 뜨는 웹페이지를 좋아합니다. 하지만 웹페이지의 로딩 속도는 어떻게 측정해야 하며 "페이지 로딩"의 의미는 정확히 무엇일까요?
Navigation Timing은 웹의 성능을 정확하게 측정하는 자바스크립트 API입니다. Navigation Timing API는 페이지 탐색과 로드 이벤트와 관련한 정확한 타이밍을 자세하게 얻을 방법을 제공합니다. 현재 이 API는 인터넷 익스플로러 9, 크롬, 파이어폭스에서 사용할 수 있습니다.
 |
| [그림] Navigation Timing에 대한 기본 Mark들 |
Date 객체를 사용해서 타이밍을 측정하는 방법과는 달리 Navigation Timing API는 페이지 로딩에 전혀 영향을 주지 않고 사용할 수 있습니다. 그러므로 사내 네트워크에서 개발용 컴퓨터를 사용해서 개발자가 직접 테스트하는 대신 실제 사용자가 겪는 "현실"의 페이지 로딩 지연시간을 측정하는 데 유용하게 사용할 수 있습니다.
Navigation Timing은 개발자가 성능을 이해하고 최적화하도록 유용한 도구를 제공하며 더 나은 정보는 페이지 로드 지연을 이해하는 데 유용하고 이로써 더 효율적인 웹사이트와 인프라, 더 빠른 웹 애플리케이션과 웹을 만들 수 있고 좋은 사용자 경험을 제공할 수 있습니다.
이 튜토리얼은 Navigation Timing API를 사용해서 타이밍 데이터를 사용하는 방법을 설명합니다. 보다 자세한 내용은 튜토리얼을 참고하시기 바랍니다.
번역 링크
- 네비게이션 타이밍을 이용한 페이지 로딩 속도 측정하기
참조 링크
- 사용자 타이밍 API: 웹앱의 이해
- 원문 - User Timing API Understanding your Web App
- 번역 - 사용자 타이밍 API: 웹앱의 이해, Live!
댓글 없음:
댓글 쓰기