구글의 PageSpeed Insights로 내 블로그 개선점을 찾아보자

내 블로그는 몇 점?

티스토리 블로그에 애드센스를 달아 놓은 분들이 많습니다.

 

제 블로그 역시 수익을 위해 애드센스 광고 창을 붙여 놓은 상태인데요, 얼마전부터 애드센스 계정으로 로그인하면 오른쪽 하단에 스코어 카드가 표시됩니다.

 

이 스코어 카드는 구글 애드센스가 사용자의 사이트에 제안을 하는 것입니다.

 

구글이 분석하기에 이런 부분이 부족한 것 같으니 신경써서 개선해 보는게 어떻냐는 제안인데요,

 

저는 그 중에 '사이트 상태'를 눈여겨 봤습니다.

제 블로그 페이지 중 광고 요청수가 많은 페이지(인기가 많은 페이지)를 나열한 것인데요, 나열된 제 블로그 페이지 중 하나를 클릭하니 Google Developers 창이 새로 뜨고 잠시 기다리라는 메시지가 표시됩니다.

 

잠시 분석 시간이 지난 후 해당 페이지의 분석 결과가 표시됩니다. 분석 PageSpeed 점수 100점 만점에 89점을 받았군요.

사실 HTML 전문가가 아닌 제가 필요할 때마다 주먹구구식으로 블로그 스킨과 페이지를 수정해 왔는데, 그래도 생각보다는 높은 점수를 받았습니다.

 

애드센스 사용자가 아니더라도, 심지어 구글 계정이 없는 사람도, 구글 Developers의 PageSpeed 페이지로 들어가면 분석 서비스를 이용할 수 있습니다.

구글 PageSpeed가 제안한 사항들

구글 Page Speed가 제시한 제 블로그 페이지의 점수 아래쪽에는 개선을 위한 제안 사항들이 정리되어 있었습니다.

우선 순위가 높은 것은 (H)로 표시되어 있었는데, 일단 (H) 항목 중 [서버 응답 속도 향상]은 티스토리에 얹혀 사는(?) 사용자가 할 수 있는 일이 아니었습니다.

 

[페이로드 최소화] 항목의 이미지 최적화는, 블로그에 사용자가 올린 이미지를 압축하여 용량을 줄이면 속도 향상에 도움이 된다는 얘기였습니다.

기본적인 내용이기도 하면서 직접 시도해볼 수 있는 항목인 듯 싶었는데, 이 역시 티스토리에 다음 포토 업로더를 이용해 이미지를 올리는 과정에서 제가 애써 줄인 이미지 용량이 다시 늘어나더군요.

구글 PageSpeed Insights 가 제안한 모든 사항을 적용할 수 있는 것은 아니다.

 

이제 (H)항목 중 남은 것은 [CSS 스프라이트로 이미지 통합] 이라는 항목인데, 이름이 대단히 거창해보입니다.

CSS 스프라이트가 뭔가하고 인터넷을 검색했더니 블로그 스킨에 사용된 작은 이미지 조각들을 하나의 파일로 합쳐 응답 속도 향상을 꾀한다는 개념이군요.

 

여러개의 작은 이미지 파일 여러개가 있을 경우 이미지 파일 마다 HTTP 요청이 들어가게 되는데, 이런 여러개의 이미지 파일을 하나로 합쳐놓으면 한번의 HTTP 요청만 하게 되는 것으로, 마치 하드디스크도 작은 파일 여러 개를 읽고 쓰는 속도보다 하나의 큰 덩어리 파일을 읽고 쓰는 속도가 월등히 빠른 것과 마찬가지 개념입니다.

작은 이미지 파일들, 많기도 하다

 

일단 CSS 스프라이트의 개념 파악은 되었고, 실행에 옮길 단계인데요, CSS 스프라이트를 적용하는 방법은 HTML이나 CSS 문법을 좀 알아야하는 과정입니다.

저는 인터넷 검색에서 CSS 스프라이트 개념 및 적용 방법을 잘 설명한 포스팅을 찾았고, 이 포스팅을 참고로 제 블로그의 작은 이미지 조각들을 하나의 이미지로 만들었습니다.

네이버에서 제공하는 N-MET을 이용, CSS 스프라이트 이미지를 만들었다

 

작은 이미지 조각들을 하나의 이미지로 만들고 나서, 티스토리 관리자의 HTML/CSS 편집 메뉴에서 이를 적용했습니다.

'적용했습니다'라는 짧은 한마디로 마무리짓지만, 꽤 고된 작업입니다.

아울러, 티스토리 스킨을 수정하는 작업을 하기 전에는 반드시 스킨을 미리 백업해 두고 작업을 하기 바랍니다.

CSS 스프라이트를 적용하려면 HTML과 CSS에 대한 약간의 이해가 필요

블로그 스킨에서 고아가 된 이미지 경로 수정하기

구글 PageSpped Insights가 제시한 개선사항 중에는 [잘못된 요청 사용 안함] 이라는 항목이 있었습니다.

뭔가하고 자세한 내용을 들여다 봤더니 제 블로그 스킨에 적용한 이미지 중 두 개가 없다는 내용이었는데요,

 

티스토리 관리자의 HTML/CSS 편집에 들어가 봤더니 실제로는 없는 이미지가 스킨에는 불러져 있었습니다.

아마도 블로그 스킨을 수정하는 과정에서 이미지 파일만 삭제하고 정작 스킨에는 그대로 남겨둔 것으로 보입니다.

 

이렇게 사라진 이미지 파일을 요청하게 되면, 전체 속도에 영향을 미칠 수 밖에 없겠죠.

구글 PageSpeed Insights가 지적한 이미지 파일 두 개를 스킨에서 모두 삭제했습니다.

구글 PageSpeed Insights의 제안 사항을 적용 후

간만에 티스토리 스킨을 건드리는 꽤 고된 작업 후, 구글 PageSpeed Insights의 점수를 다시 확인해보니 92~93점 정도를 받았습니다.

기존 88~89점보다 살짝 오른 정도지만, 놓치고 있던 부분을 잡은 것 같아 꽤 뿌듯하네요.

 

블로그 스킨을 정리하는 김에 스킨 곳곳에 방치해두었던 불필요한 이미지나 위젯, 자바스크립트들도 떼어내는 등 간만에 집수리를 깨끗이 하고나니 기분탓인지는 모르겠지만, 블로그를 불러오는 체감 속도도 좀 빨라진 느낌입니다. 

 

구글 PageSpeed Insights에서 제 블로그만 주구장창 확인하다가, 포털 주소를 넣으면 어떨까? 아무래도 쟁쟁한 웹전문가들의 작품이니만큼 완벽하겠지? 싶어 다음, 네이버, 구글의 주소를 넣어봤습니다.

결과는 다음 92점, 네이버 94점, 그리고 구글은 99점이네요. 팔이 안으로 굽는다는 느낌이 살짝 들었지만 꽤 재미있는 결과였습니다.

 

관련글

• 2013/07/03 - 개편된 다음뷰, 프로필 커버 사진 사이즈 쉽게 맞추는 방법!
• 2013/05/09 - 티스토리 이미지에 나만의 도장, 워터마크 간편하게 찍는 법
• 2013/04/16 - 인터넷익스플로러에서만 안보이는 티스토리 파비콘, 보이게 설정하는 법
• 2013/04/12 - 블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?
• 2013/03/05 - 모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법
• 2012/06/25 - 어도비가 내 블로그를 체크해준다 - Adobe BrowserLab
• 2012/06/22 - 깔끔한 내 블로그, 다른 브라우저에선 깨질 수 있다?
• 2012/06/11 - 내 포스팅의 HTML 소스는 왜 이리 지저분할까?
• 2012/06/09 - 티스토리 이미지와 글 간격을 줄이려면?
• 2012/06/05 - 티스토리 각주 글꼴 색상 설정하려면?