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

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

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 : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!

설정 화면 - 메모리 최적화 도구 CleanMem (optimize memory CleanMem)
설정 화면 - 메모리 최적화 도구 CleanMem

컴퓨터가 날이 갈수록 버벅거립니다. 왜 메모리 점유율이 항상 80% 이상인건지..
'램을 업그레이드 하는 방법 밖에 없나?'
소프트 웨어로 메모리 점유율을 떨어뜨릴 수 있는 방법이 있습니다!
무료 메모리 최적화 도구 CleanMem!
이 도구를 사용하기 전에는 브라우저와 몇 개의 프로그램을 실행하면 메모리 점유율이 80% 이상이었는데,
메모리 최적화 도구인 CleanMem을 사용하고 나서 50% 이하를 유지하고 있어요.
정말 아름다운 메모리 점유율 관리 도구입니다.^^
사용법도 참 간단해요.
우선 소프트웨어를 설치하거나, 무설치 버젼을 받아 압축을 풉니다.
거기서 환경 설정 실행 파일을 더블 클릭하면 설치를 할 수 있어요.
마법사 형식으로 설정을 하는데, 저는 기본 설정으로 4 단계까지 갔습니다.


예약 작업에 추가 - 메모리 최적화 도구 CleanMem (optimize memory CleanMem)
예약 작업에 추가 - 메모리 최적화 도구 CleanMem

설정 4단계에서 예약작업에 CleanMem설치하기를 눌러 설치를 하면,
끝입니다.
아주 간단하죠?


예약 작업 사용자 정의 - 메모리 최적화 도구 CleanMem (optimize memory CleanMem)
예약 작업 사용자 정의 - 메모리 최적화 도구 CleanMem


기본 설정은 15분에 한번 메모리 최적화를 실행 하게 되어있어요.
예약 작업 관리자에서 설정을 변경 하실 수 있습니다.



실행 주기 사용자 정의 - 메모리 최적화 도구 CleanMem (optimize memory CleanMem)
실행 주기 사용자 정의 - 메모리 최적화 도구 CleanMem

저는 메모리 최적화 주기를 10분에 한번으로 변경 했습니다.
기한은 무기한(Indefinitely)로 설정해 주시면 되요.
좀 더 자주 최적화를 하고 싶다면, 5분 혹은 1분으로 설정하셔도 됩니다.
전 10분에 한번 정도면 충분하더라고요.

메모리 최적화 도구 CleanMem으로 메모리 점유율을 낮추세요~! :D

메모리 최적화 도구 CleanMem 다운로드



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!