이번 글은 블로그나 홈페이지를 운영하시는 분에게 해당하는 글입니다.
블로그나 홈페이지를 운영하는 분이라면 오늘 소개해 드릴 Pingdom 사이트에서 제공하는 웹 서비스에 대해 이미 알고 있는 분이 많으실 겁니다.
따라서 그런 분들은 이 글을 읽으실 필요가 없습니다.
이제 막 블로그를 꾸려가기 시작하는 새내기 블로거를 위한 글이라고 해두죠. ^^

블로그나 홈페이지를 운영하다 보면 이런 저런 플러그인이나 위젯을 주렁주렁 많이 달게 됩니다. 특히 의욕적으로 블로그를 운영하기 시작하는 초창기에는 괜찮다 싶은 위젯이나 서비스가 눈에 보이면 어떻게든 내 블로그에 적용하려고 하는 경향이 강한 것으로 압니다.

별 탈 없이 무사히 자신의 블로그에 적용되면 다행입니다만, 문제는 에러가 발생하거나 제대로 동작하지 않는 경우도 심심찮게 있다는 겁니다. 더군다나 에러가 적용 후 바로 나타나면 그 즉시 해당 위젯을 제거해 버리면 끝입니다.
하지만, 항상 그렇지 않다는 게 문제입니다. 처음 몇 일, 혹은 몇 달 문제없이 잘 동작하다가 어느 순간 에러가 생기거나 제대로 동작을 하지 않는 일도 많습니다.

만약 이러한 상황에 봉착하게 되었을 때 블로거로서 경력이 좀 되면 대충 눈치로 이 부분이 문제구나 하고 감이 오는 경우[각주:1]도 있습니다. 그러나 그렇지 않은 경우가 더 많죠.

알 수 없는 이유 때문에 페이지 로딩 속도가 느리거나 아니면 블로그 웹페이지가 이상하게 로딩이 된다든지, 혹은 어느 로딩과정 이후로는 진행이 안 된다거나 하는 문제가 생깁니다.
많은 분들이 블로그 스킨 만지다 한번 정도는 낭패를 겪어본 경험이 있을 것으로 짐작합니다. 예를 들어, 사이드바가 사라졌다든지, 아니면 엉뚱한 데 붙어 놀고 있는 것[각주:2]처럼 말이지요.

이런 경우 블로그 스킨이나 HTML 코드에 대해 잘 알고 있다면 어떻게든 해결해 나가는 게 가능하지만, 그렇지 않은 경우 난감할 수 밖에 없습니다.


Pingdom Tools - Full page test



어느 날 내 블로그에 접속해 보니 이상하게 평소보다 페이지 뜨는 데 시간이 많이 걸린다. 무슨 문제가 있는 것 같다. 그런데 ㅈㄸ 아무리 봐도 뭐가 문젠지 모르겠다. 며칠 전 좋다고 붙인 위젯이 말썽인가? 아니면 스킨에 추가한 스크립트가?

이거 제 얘기입니다. -_-;

지금은 예전처럼 새로운 위젯이나 웹서비스만 보이면 미친 놈처럼 달려가 코드 따와서 아무데나 철썩 가져다 붙이는 일은 줄었습니다만, 지 버릇 개 주나요? 덜하다는 거죠. ㅎㅎ

아무튼 위 박스와 같은 상황에 직면했을 때 내 블로그 어떤 곳에서 문제가 생겨 로딩이 느려지는 것인지만 알아도 문제의 90%는 해결한 거라 생각합니다.

☞ 팁:

새로운 위젯을 달거나 스킨을 수정하기 전에는 반드시 티스토리 자체에서 제공하는 테이터 백업이나 스킨 저장을 미리 꼭 해두는 습관을 들이시는 게 혹 있을지 모르는 난감한 상황을 피해갈 수 있는 열쇠입니다.

이럴 때 알아두면 요긴하게 써먹을 수 있는 곳이 Pingdom에서 제공해 주는 Full page test라는 서비스입니다.

  Full page test                                          
먼저 Full page test 페이지(http://tools.pingdom.com/fpt/)로 이동합니다.

Pingdom Tools - Full page test
우선 ①의 빈 칸에 자신의 블로그나 홈페이지 URL을 채워 넣습니다.

③의 체크 박스에 체크를 하면 테스트한 사이트의 기록이 저장되어 이후 동일한 사이트를 다시 테스트하였을 때 로딩 타임을 서로 비교해 볼 수 있습니다.

마지막으로 'Test Now'를 클릭합니다.
그러면 아래 그림처럼 각 객체[각주:3]의 로딩 타임이 읽어들이는 순서를 기본으로 표시됩니다.

Pingdom Tools - Full page test

이 화면에서 빨간 타원 안의 'Show link hierarchy'를 클릭하면 읽어들이는 순서대로 정렬된 객체들이 그 객체가 포함되어 있는 곳(예를 들어 CSS 파일)을 기준으로 분류되어 보여집니다. 쉽게 말해서 탐색기의 폴더 구조를 떠올리면 됩니다.

Pingdom Tools - Full page test

어떤 객체가 어디 소속인지 한 눈에 보이시죠? 안 보이시면 클릭해서 큰 그림으로 보세요.


빨간 줄로 보이는 폴더 구조는 보기 쉽게 제가 그린 겁니다. 실제로는 빨간 줄이 없습니다.

Pingdom Tools - Full page test

정렬 방식 선택


①번은 이미 설명드렸고, ②번은 어떤 기준으로 정렬할 것인지 선택할 수 있는 드롭다운 메뉴입니다.
③번은 ②번에서 선택한 정렬 기준을 바탕으로 오름차순, 내림차순을 지정하는 화살표입니다.

입력한 사이트의 테스트가 끝나면 왼쪽 아래 정보가 출력됩니다.


각 항목이 의미하는 바는 간단합니다.
사이트의 총 로딩 타임과 총 객체의 수, 그리고 그 아래 세분하여 각각의 항목이 몇 개나 되는지를 보여줍니다.

그리고 오른쪽 아래에는 테스트한 날짜와 시각, 그리고 로딩 타임이 표시됩니다.
만약 앞서 설명한 Save test라는 체크 박스에 체크를 하였다면 이후 테스트 정보는 계속 저장되어 읽어들이는 시간의 변화를 비교해 볼 수 있습니다.

Pingdom Tools - Full page test

테스트 기록이 한 화면을 넘어가면 오른쪽 아래 빨간 타원 안의 화살표가 활성화됩니다.


Pingdom Tools - Full page test

마지막으로 테스트 화면에서 보이는 막대가 뭘 의미하는지 설명하고 이번 포스트는 마치도록 하겠습니다.

오른쪽 그림에서 보듯이 노란색 부분은 연결되기까지의 시간이며, 초록색 부분은 연결 후 데이터를 읽기 직전까지의 시간이며, 파란 부분은 객체를 읽어오는 시간입니다.

노란색과 초록색 부분이 길게 나타나면 보통 문제가 있다는 걸 의미합니다.
연결이 원활하지 않거나 데이터를 읽어오는데 어떤 걸림돌이 있다는 것으로 해석할 수 있겠죠.
만일 사이트 로딩이 평소와 다르게 느려졌다면 초록색, 특히 노란색이 길게 나타나는 객체를 위주로 하여 주의 깊게 살펴보면 도움이 되실 겁니다.



  * 이 포스트는 blogkorea [블코채널 : 웹, 컴퓨터, it에 관련된 유용한 정보 및 소식] 에 링크 되어있습니다.  

추천 부탁해요~


  1. 삽질의 승리죠. 삽질한다고 무조건 나쁜 것만은 아니란느 거~ ^^ [본문으로]
  2. 전 자주 겪어 봤습니다. 삽질하다 보면 재미있어요. -0-; [본문으로]
  3. CSS, 자바 스크립트, 플래시, frame/iframe, 이미지 등이 모두 포함됩니다. [본문으로]

+ Recent posts