블로그 페이지가 늦게 열리면 방문자가 보지도 않고 나가는 경우가 있으니까 블로그 로딩 속도는 블로거에게는 아주 중요한 항목 중의 하나에요.

내 블로그가 어느 정도로 빨리 열리는 지를 알아보고 싶을 때 사용할 수 있는 사이트인 Google PageSpeed Insights를 소개합니다. 측정을 하면 문제점을 알려주고, 개선할 수 있는 여러가지 방법들도 알려줍니다.

매번 글을 올릴때마다 해야하는 것도 있지만 스킨에서 한 번만 수정해놓으면 되는 것들이 대다수니까 꼭 적용해보시기 바래요.

Google PageSpeed Insights

구글에서 제공하는 속도 측정 사이트 Google PageSpeed Insights 입니다. 일반적으로 웹페이지 속도 측정 사이트라고 하면 로딩 시간을 측정해서 10초, 20초 이렇게 보여주는데요. 이곳은 시간을 측정하는 것이 아니라 속도를 빠르게하는 기술이 적용되어 있는 지를 측정해서 점수로 환산해주는 사이트에요.

Google PageSpeed Insights

일단 사이트에 접속한 다음 블로그 주소를 입력하세요.

 

"ANALYZE"버튼을 누르면 몇 초 후에 결과를 보여줘요. 

 

제일 윗줄에 100점 만점으로 환산한 점수를 보여주고, 아래에는 속도를 빠르게할 수 있는 방법들을 알려줍니다. 저는 83점 나왔네요.

왼쪽메뉴에서 해당 항목을 클릭하면 자세한 설명이 나와요.

자바스크립트 파싱 지연은 블로그를 로딩할 때, 자바스크립트를 로딩하는 동안 다른 것들을 불러드리는 걸 멈추기때문에 페이지가 보여지는 속도가 느려지는 걸 말해요. 꼭 필요한 경우가 아니라면 자바스크립트의 위치를 페이지 하단으로 옮겨서 페이지가 다 보이고 난 다음에 자바스크립트 파일을 불러올 수 있게 바꿔주면 됩니다.

CSS 파일은 html 소스에서 head에 넣고 javascript는 </body>위에 넣으면 어느 정도는 해결됩니다.

CSS 스프라이트로 이미지 통합은 이미지를 개별 파일로 하나씩 사용하는 것이 아니라 하나로 합쳐서 사용하는 건데요. css에 대해서 어느 정도 알고 있어야 사용할 수 있어요.

자바스크립트 축소, CSS 축소, HTML 축소는 줄바꿈이나 빈 칸 등으로 생기는 소스의 공백을 없애서 용량을 줄이는 겁니다.

조정된 이미지 제공은 원래 이미지의 크기가 100x100인데, 웹페이지에서는 50x50으로 보이게 하는 것처럼 이미지의 원래 크기가 아닌 다른 크기로 보이게 하는 걸 말해요. 웹페이지에서 원래 크기인 100x100으로 보여지게 하거나 아예 이미지 자체를 50x50으로 크기를 바꿔서 올리서 해결해야 합니다.

이미지 최적화는 화질은 그대로 두고, 용량만 줄여서 업로드 하는 것으로 이미지의 주소를 클릭하면 용량을 줄인 이미지를 다운 받을 수 있어요.

 

블로거가 할 수 없는 것도 있어요. 티스토리에서 자동으로 불러오는 js, css는 수정하거나 위치를 조절할 수 없으니까요. 애드센스도 빼버리면 상관없는데 이걸 포기하는 건 좀 어렵지요. 위젯이나 페이스북 플러그인 같은 것도 바꿀 수 없지요.

블로그가 할 수 있는 걸 다 한다면 70점 후반에서 80점 초반의 점수가 나오는 것 같네요. 이것 저것 다 떼버려도 90점은 안 넘더라고요.

가능하면 웹페이지를 빨리 보여주는 것이 더 많은 방문자를 모으는데도 효과적이고, 이왕 온 방문자에게 좀 더 좋은 모습을 보여줄 수 있는 방법이니까 꼭 적용해보세요.

함께 보면 좋은 글

애드센스 최적화 배치 도움되는 곳
애드센스 수익 향상 팁 - A/B 테스트
애드센스를 본문 상단 오른쪽에 넣기
본문 검색창 설치로 블로그 페이지뷰 늘리기
이탈률, 반송률, 종료율이란? 이탈률 낮추는 방법