블로그 성능을 최적화 하여 로딩 속도를 빠르게 하는 것이 중요한 이유는, 길고 긴 로딩 시간을 기다려주는 방문자는 없기 때문입니다.

저 역시도 그래요. 어떤 사이트에 들어갔는데, 사이트가 로딩을 하는 건지, 컴퓨터가 다운이 된 건지 한참 동안 반응이 없다면, 그 웹사이트나 블로그 창을 닫아 버립니다. 요즘 들어 제 블로그에 들어왔을 때 창을 자꾸 닫아 버리고 싶더군요. 저야 제 블로그니까 좀 느려도, 최적화가 안되어 있어도 참고 쓸 수 있지만, 다른 사람들이 방문했다면, 느려서 속이 터질 것이란 생각이 들었어요. 어떻게 하면 블로그를 최적화해서 속도를 빠르게 만들 수 있을까요? 몇 가지 방법을 알아보도록 하겠습니다.

by 月風

블로그 속도 최적화

최적화 이전-'블로그 속도 최적화'
최적화를 하기 전 블로그의 속도

구글 웹마스터 도구에서 블로그 성능 측정을 해보니,
전세계의 웹사이트들 중에 무려 83%가 제 블로그보다 빠르군요.
그렇다면 제 블로그에 방문하는 분들은 한번 와보고는 다시 찾지 않게 될 확률이 높습니다.
평소에 즐겨 찾는 다른 사이트 보다 '느려 터진' 블로그로 인식이 될 테니까요.
그럼 단계별로 블로그 성능을 최적화해서 속도를 올려보겠습니다.


메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정

메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정

포스트(위젯이 많음) 기본적인 최적화 후의 속도 측정-'블로그 속도 최적화'
포스트(위젯이 많음) 기본적인 최적화 후의 속도 측정

-'블로그 속도 최적화'
포스트(위젯이 많음) 기본적인 최적화 후의 속도 측정

기본적인 속도 최적화를 하는 방법은 간단합니다.
CSS는 위에 위치하게, Javascript는 아래에 위치하도록 합니다.
script tag 의 defer속성과 async속성을 잘 이용하면 큰 효과를 볼 수 있어요.
CSS와 Javascript는 압축하여 사용 합니다. (css compressor, javascript compressor와 같은 도구가 있습니다.)
이미지 용량을 줄입니다. (Smushit, RIOT과 같은 도구가 있습니다.)
img 태그를 사용할 땐 width와 height를 이용하여 이미지 크기를 지정 합니다.
이것으로 약간의 속도 개선이 이루어졌지만, 체감상으로는 큰 차이를 못느꼈어요.
그래서 블로그 성능 저하의 가장 큰 원인인 위젯을 정리했습니다.


메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정

메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정

포스트(위젯이 많음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
포스트(위젯이 많음) 위젯 최적화 후의 속도 측정
포스트(위젯이 많음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
포스트(위젯이 많음) 위젯 최적화 후의 속도 측정

우선 블로그 성능 저하에 아주 크게 영향을 끼친 mixsh버튼을 제거했어요.
하지만 여전히 facebook과 Disqus라는 무거운 위젯이 남아 있군요.
위젯을 몽땅 지워버리자니 허전하고, 

그렇다고 이대로 사용하자니 블로그가 느려서 속터집니다.
어떻게 해야 위젯의 속도를 빠르게 할 수 있을까요?
How To Speed Up Your Website Page Load Performance By Delaying The Load Of JavaScript And Widgets - Part 2에서 그 방법을 아주 잘 설명해 두었습니다.

javascript의 async속성과 defer속성을 잘 활용해서 위젯 속도를 최적화 하는 방법이에요.
위젯 최적화 전과 비교해보니 확실히 속도가 빨라졌죠?^^
블로그의 느린 속도에 속이 터졌던 분들에게, 이 글이 도움이 되었으면 좋겠네요.

아래의 유용한 웹 페이지 성능 분석 도구를 이용하면, 블로그 성능을 분석 할 수 있어요.


Webpagetest

Page Speed

YSlow




by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

저는 블로그에 포스팅일 할 때 파이어폭스 브라우져를 주로 씁니다.
그런데 요즘 들어 글쓰기 버튼을 누르면 파이어폭스가 삼 분은 멈춰 있는 거에요.
'최적화가 잘못 된 건가? 혹시 나도 모르게 아주 느린 속도로 최적화 시킨 건가?'
도대체 원인을 알 수 없었죠.
그래서 설치했던 애드온을 하나씩 껐다 켜 보았습니다.
구글 블로거 글쓰기에서 파이어 폭스가 멈춰 버리게 만드는 애드온!
그 애드온의 이름은 아이러니하게도 '최고 빠른 폭스!(FastestFox - Browse Faster)' 에요.
이럴수가.

브라우징을 빠르고 편리하게 도와 준다는 FastestFox는,
무려 구백 만 명이 다운로드를 한 인기 애드온이에요.
한 명이 백 번씩 받았을 수도 있지만, 그렇다고 쳐도 엄청난 숫자죠?
택스트를 선택해서 우 클릭을 하면,
바로 위키나 구글등에서 검색을 해주는 편리한 기능도 있죠.
하지만 이 애드온 개발자는 구글 블로거 서비스를 이용하지 않나 봅니다.
파이어폭스를 그로기 상태로 만들 정도의 충돌이 일어나는 걸 보면 말이죠.
FastestFox와 구글 블로거의 글쓰기가 만나면,
정말 빠르게 파이어폭스를 쓰러뜨릴 수 있습니다.
전 파이어 폭스가 쓰러지는 걸 원치 않아서 FastestFox를 지워 버렸지요.
혹시나 파이어폭스를 이용하여,
구글 블로거를 이용할 때 저와 같은 문제로 고생 하는 분이 계시다면!

애드온을 모두 끄고 하나씩 켜 보세요.:D



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

압축 결과 - 스타일시트 압축으로 블로그 속도를 빠르게!
압축 결과 - 스타일시트 압축으로 블로그 속도를 빠르게!

클라이언트가 다운로드 해야 할 용량이 클 수록,
블로그 혹은 홈페이지의 로딩 속도는 느려집니다.
비록 약간이긴 하지만 스타일시트(CSS)를 압축하여,
블로그 로딩 속도를 빠르게 할 수 있어요.

순서는 다음과 같습니다.

  1. 블로그 스킨에서 스타일시트(CSS) 코드를 복사한다.
  2. 스타일시트(CSS) 압축기로 압축을 한다.
  3. 압축된 코드를 다시 스킨에 붙여 넣는다.
  4. 스킨 저장 후 블로그에 올린다.
  5. 빨라진 블로그 로딩 속도를 만끽한다.

구글 블로거의 경우를 예로 들면,
/* Content 주석 부분부터, ]]></b:skin>  전까지 부분을 압축하면 됩니다.

스타일 시트(CSS) 압축기는 여러 곳에서 제공하고 있어요.
저는 야후 스타일시트 압축기를 이용했습니다.
어떤 분이 친절하게 온라인에 올려 주셨더라고요.
사용해 보니 압축 잘 됩니다.^^

아래 링크를 클릭하면, 압축기 사이트로 이동합니다.
온라인 야후 스타일시트 압축기 (Online YUI Compressor)



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

최근글 - 최근글 가젯 수정으로 블로그 속도를 빠르게!
최근글 - 최근글 가젯 수정으로 블로그 속도를 빠르게!

텍스트큐브와 블로거의 갑작스러운 통합으로,
작년 말에 구글 블로거로 이전했습니다.
처음 써보는 서비스라, 익숙하지가 않았어요.
우선 급하게 스킨을 좀 손보고, 가젯을 몇개 추가해 놓았죠.
그런데 제 블로그에 접속할 때마다 로딩 시간이 너무 긴 거에요.
'구글 블로거는 원래 느린가?'
그렇게 생각하고 한동안 그냥 지냈죠.
아무래도 의심이 되어 로딩될때 페이지를 유심히 보았더니,
최근글 가젯이 눈에 띄더군요.
다른페이지 다~~ 로딩 되고 한참 후에 나타나는 최근글.
뭔가 이상합니다.

블로거 가젯 추가 - 최근글 가젯 수정으로 블로그 속도를 빠르게!
블로거 가젯 추가 - 최근글 가젯 수정으로 블로그 속도를 빠르게!

구글 블로거의 관리자 모드에서 디자인 페이지는,
스킨을 수정할 수 있는 페이지 입니다.
'페이지 구성요소'에서 손쉽게 가젯을 추가 할 수 있죠.
이곳에서 '가젯 추가'를 눌러 최근글 가젯을 추가 했었어요.
이 가젯이 저의 블로그 속도를 통 플레쉬 홈페이지만큼 느리게 만든 원인 중 하나였던 겁니다.
최근글을 없에자니 허전하고,
블로그 속도는 너무 느리고..
검색을 해 보았더니, 해결책이 나왔습니다.

피드버너 버즈부스트 - 최근글 가젯 수정으로 블로그 속도를 빠르게!
피드버너 버즈부스트 - 최근글 가젯 수정으로 블로그 속도를 빠르게!

바로 피드버너를 이용하는 방법이에요.
피드버너에 로그인후,
Publicize메뉴에서 버즈부스트(BuzzBoost)를 찾을 수 있어요.
버즈부스트 페이지에서 상세 설정을 합니다.
글을 몇개나 보여줄 건지, 내용을 보여줄 건지 등을 말이죠.
그리고 맨 아래에서 Active버튼을 눌러 활성화 시켜주세요.
그럼 버즈부스트를 사용할 수 있게 됩니다.
마지막으로 Use as a widget in에서 Blogger를 선택후 Go! 버튼을 누르면!
피드버너 버즈부스트를 이용한 최근글 가젯이 블로거에 추가됩니다.
확실히 속도가 빨라졌어요.^^

참조글(Reference)
Fast Loading Recent Posts Widget for Blogger



by


Tags : , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.