요즘은 컴퓨터 사양들이 많이 좋아서 웹사이트나 블로그를 둘러볼 때 이전 보다는 훨씬 더 편리해진듯 합니다. 하지만 아직까지 저사양 컴퓨터도 상당수 있을 것이고 특히나 해외에서 국내 사이트나 블로그를 접속하게 된다면 블로그나 사이트의 로딩속도는 아주 중요한 요소가 됩니다.


여기선 블로그에 대해서만 이야기 합니다. 뭐 웹사이트도 마찬가지일 것이라고 보고 생략합니다. 블로그의 로딩 속도를 높이기 위해서는 당연히 글을 쓸 때 텍스트 위주로 쓰고 사진은 가능하면 덜 사용하면 해결 될 것입니다. 그런데 아래에 설명 드리는 내용은 개별 포스팅된 글이 아니라 글 이외의 요소에 대해서 속도 향상을 기할 수 있는 방법에 대한 것입니다.


우선 자신의 블로그 속도가 얼마나 나오는지 그리고 어떻게 향상 시킬 수 있는 지를 알 수 있는 사이트로 이동합니다. 요 사이튼 바로 구글 개발자 도구 페이지입니다.


구글 개발자 사이트로 이동하기(google page speed insigths)(링크)




위의 사이트[블로그 속도 테스트 및 속도 향상을 위한 구글 개발자 도구]로 이동해서 아래의 빈칸에 자신의 블로그 또는 웹사이트 주소를 넣고 테스트해보면 아래와 같이 자세한 설명이 나올 것입니다.

웹사이트 로딩 속도 향상


위의 이미지에서는 짤려서 안 보이지만 제 점수는 100점 만점에 82점 나오네요! 좌측에는 속도 개선을 위한 다양한 방법들을 순위별로 보여주고 있습니다. 빨간색의 High priority가 가장 빨리 조치해야 할 부분이고 그 아래부터 순서대로 우선순위를 보여주고 있습니다. 제거 위의 이미지를 캡쳐하기 전에 티스토리 스킨에 들어가는 이미지를 위의 사이트를 참고해서 수정해 주었더니 속도 향상에 많은 도움이 되었네요!


사실 좌측에 보이는 어려운 부분들은 제가 어떻게 조치할 수 있는 것들이 아닌 것 같아요. 다만 가장 빨리 조치해야 할 "CSS스프라이트로 이미지 통합"은 다음 기회에 해 볼 생각입니다.



Csss 스프라이트로 이미지를 통합하라는 건 아래의 티스토리 관리자 화면에서 볼 수 있는 스킨에 사용된 이미지를 보면 알 수 있습니다.


티스토리 스킨 이미지 파일


스킨에 사용된 이미지파일이 30개도 넘습니다. 이 파일을 단 몇개의 이미지 파일로 그 수를 줄여서 블로그 방문 시 매번 수십 개의 이미지 파일을 다운받지 않고 2~3개의 파일만 다운 받는다면 당연히 속도가 향상 되겠죠? 인터넷에 검색해보니 CSS스프라이트를 만들어주는 프로그램이 있더군요 이 프로그램을 이용하면 수십개의 이미지 파일을 1개 또는 몇 개의 파일로 만들어주고 그에 따른 css 코드를 생성해주는 것 같습니다. 아직 해보질 않아서 정확히는 설명하기 어렵네요!. 아무튼 요건 다음 번에 다루어 보기로 하겠습니다.


위의 내용과는 별도로 사진 블로그가 아니라면 방문자를 위해서 좀 더 저용량의 사진을 사용하는 것도 하나의 방법일 것입니다. 요즘 들어 너무 큰 이미지를 사용하시는 분들을 많이 볼 수 있는데 성질 급한 우리나라사람들은 아마도 조금만 늦게 로딩이 되면 아마 인터넷창을 닫고 다른데로 갈지도 모릅니다.^^:


그럼 모든 분들 즐거운 블로깅 되세요!!


Posted by 정보헌터

댓글을 달아 주세요

  1. 좀좀이 2013.03.06 03:32 신고  댓글주소  수정/삭제  댓글쓰기

    외국에 있을 때 큰 사진이 많은 블로그는 잘 볼 수가 없었어요. 종량제는 둘째치고 일단 제대로 열리지가 않았거든요. 직접 겪으면서 사진을 적당히 리사이징하는 것이 많은 도움이 된다는 것을 깨달았어요^^

  2. 알 수 없는 사용자 2013.03.06 10:37  댓글주소  수정/삭제  댓글쓰기

    저는 국내 블로그는 어차피 다들 인터넷 환경이 좋기 때문에 크게 신경쓰지 않습니다만, 외국어 블로그는 가능한한 텍스트 위주로 구성해서 로딩속도에 신경쓰려고 노력하고 있습니다.
    좋은 정보 감사해요! 즐거운 하루 보내세요!^^