웹 사이트의 접속 속도 측정과 개선

사용자가 접속하는 웹사이트의 속도를 확인하는 것은

쾌적한 웹 사이트 이용에 기본이 되는 요소임이 틀림없다.

이에 사이트 관리자는 웹사이트의 빠른 접속속도를 지원하기 위해서 다양한 시도를 하며

이를 하기 위해서는 정확한 속도가 측정이 되어야 한다.

 http://www.w3.org/TR/navigation-timing/ 를 참고하면

 javascript API  performance 객체를 활용하면 정확한 측정이 가능하다

현재는 IE9, Chrome, FF에서만 지원한다. 


performance.time 객체에 대한 내용은 다음과 같다. 

이를 해석하자면.

전체 페이지가 로딩되는데 걸리는 시간은 loadEventEnd - navigationStart 

네트워크가 지연이 일어나는 시간이 얼마인지 알고싶다면 : reponseEnd - fetchStart

이전에 한번 방문했던 페이지를 로딩하는데 걸리는 시간은 loadEventEnd - responseEnd

가 되겠다.


로딩이 끝난시점에 loadEventEnd 값이 입력되므로

간략하게 script로 짜본다면

<script type="text/javascript">

function getPerformance(){ 

 alert(performance.timing.loadEventEnd - performance.timing.navigationStart);

}

setTimeout("getPerformance()",1000);
</script>

가 될수 있다. 이렇게 하면 millisecond 단위로 시간이 나온다.

이를 서버에 전송하게 한다면 각 사용자별 로딩 타임을 기록할 수도 있을것 같다.

단, 아직 지원 브라우저에 제한이 있음을 기억하자.

모바일용은 아이폰만 해봤는데 안된다.. ;; 지원해줘 좀..

웹 사이트 스피드에 대한 개선 방안은 

https://developers.google.com/pagespeed/

에서 테스팅 해보면 좋다.

 

참고 : http://www.w3.org/TR/navigation-timing/
http://www.html5rocks.com/en/tutorials/webperformance/basics/
http://nol2soft.com/2011/10/16/navigation-timing%EC%9C%BC%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%93%9C-%EC%86%8D%EB%8F%84-%EC%B8%A1%EC%A0%95%ED%95%98%EA%B8%B0/