홈페이지나 블로그가 늦게 뜨는 이유, SiteTimer로 로딩속도 점검해 보자

■ 이야기 목차

• 내 블로그는 왜 이렇게 느릴까?
• 사이트타이머로 사이트를 점검해보자
• 사이트타이머의 그래프 보는 방법
• 국내 몇몇 사이트 테스트

■ 내 블로그는 왜 이렇게 느릴까?

블로그나 홈페이지는 단순한 텍스트와 이미지 만이 아닌 동영상, 플래시, 각종 스크립트 등으로 풍성한 모습을 보여주려 한다. 이 때 각각의 요소들이 얼마나 로딩 시간을 잡아먹는 지는 잊고 별 생각없이 주렁주렁 다는 경우가 있다. 결국 그런 것들로 인해서 웹페이지가 뜨는 데 시간이 오래 걸리는 것이다.

일반적으로 방문자는 웹페이지가 열리는 데 5초 정도를 기다린다고 한다. 즉 5초가 넘어가는 사이트는 더이상 머무르지 않고 떠난다는 것이다. 그런데 이런 것을 아는 지 모르는 지, 광고 스크립트나 각종 위젯 등을 주렁주렁 달아서 페이지 뜨는 데 수십초가 걸리는 블로그를 종종 볼 수가 있다. 하지만, 어떤 것 때문에 느려지는지 알 기가 쉽지 않다. 그렇다고 다 떼어버리고 초기 상태로 사용하는 것은 너무 썰렁하고...

■ 사이트타이머로 사이트를 점검해보자

이럴 때 유용한 서비스가 사이트타이머(SiteTimer)다. 사이트타이머는 웹페이지의 각 요소들이 로딩되는 데 걸리는 시간을 그래프로 보여주어 해당 사이트를 점검할 수 있도록 도아주는 서비스다.

이용법은 아주 간단하다. 사이트타이머에서 원하는 사이트나 웹페이지의 주소를 입력하면 해당 페이지의 모든 요소를 목록으로 보여주고 각각 접속해서 모두 다운로드되는 데 까지를 색깔로 구분하여 표시한다. 그래프의 최하단을 보면 총 시간이 얼마나 걸리는 지를 알 수 있다.

■ 사이트타이머의 그래프 보는 방법

- 노란색 : 해당 요소를 로딩하기 위해 접속하고 반응까지 걸리는 시간.
- 초록색 : 반응이 오고 로딩을 시작하는 데까지 걸리는 시간.
- 파란색 : 로딩이 완료되는 데 까지 걸리는 시간.
- 그래프가 나오지 않은 요소 : 로딩이 되지 않은 요소로써 빨간색으로 표시된다.

테스트해 보면 알겠지만 대부분 요소는 짧은 초록색 만 표시가 된다. 그렇지 않고 노란색이 길게 나오면 서버가 느려서 반응까지 오래걸리는 것이고, 파란색이 길게 나오면 해당 요소의 용량이 크거나 전송속도가 느린 것이다. 

★ 참고 사항 ★

첫째, 네이버나 다음과 같은 국내 포털의 블로그 서비스는 몇겹의 프레임으로 실제 포스트를 감싸고 있어서 제대로 시간 체크가 되지 않는다. 이것은 해당 블로그의 도메인을 사용하거나 개인 도메인을 사용하거나 마찬가지다. 혹시라도 체크했는데 아주 우수한 시간이 나온다고 좋아할 일이 아니라는 것!

둘째, 사이트타이머는 외국 사이트이기 때문에 국내에서 접속하는 속도보다는 많이 느리게 나온다.

셋째, 빨간색으로 표시되는 것을 꼭 살펴보자, 정말 링크가 깨진 파일일 수 있다.

■ 국내 몇몇 사이트 테스트

내 블로그 하츠의꿈을 테스트해보니 모두 로딩되는 데 까지 무려 50초 정도가 걸린다. 참고 사항에 말한 것처럼 외국에서 접속하는 것이니 이보다는 빠르겠지만 그래도 만만치 않은 로딩 속도다. 요소도 엄청나게 많다. 그리고, 상단의 빗방울 맺힌 이미지, 몇개의 자바스크립트 파일과 스타일쉬트 파일의 로딩이 오래 걸렸다. 만약 이 테스트를 해서 엄청난

몇몇 국내 사이트를 테스트해 보았다. (현재시간 03시 50분)

- 다음 : 29초, html 파일이 엄청 크다.
- 네이버 : 14초, 역시 페이지가 작으니 로딩도 빠르다. 스크림트로 로딩하는 것은 제외됐다.
- 디씨인사이드 : 49초, 이미지 갯수가 엄청 많다.
- 지마켓 : 29초, 대부분 컨텐츠를 스크립트로 불러와서 체크 안되는 것이 많다.
- 티스토리 : 17초, 요소 개수가 몇개되지 않는다. 깔끔하다는 것~

블로그나 홈페이지를 운영하신다면 테스트를 해 볼 것을 권한다. 또한, 관심이 있는 사이트도 확인해 보면 의외의 결과를 알 수도 있다. 결과화면에 이미지/플래시/자바스크립트 등의 주소가 몽땅 나오는 것도 어떤 면에서는 도움이 될 수도~^^