최적화의 필요성
블로그는 로딩 속도가 느리면 이탈률이 증가한다는 여러 통계자료가 있기 때문에 블로그 속도는 중요한 문제다.
개선사항 측정
구글에서 운영하는 pagespeed insights에서 블로그 개선사항을 확인해볼 수 있다.
https://developers.google.com/speed/pagespeed/insights/
그 결과, 데스크톱 80, 모바일 25로 좋지 않은 결과가 나왔다. 여기서의 점수는 실제 속도가 아닌 개선여지에 대한 점수다. 점수가 낮다면 속도는 모르겠지만 일단 개선해야 할 것은 많다는 뜻이다.
개선 결과
개선 결과 데스크톱 95, 모바일 72로 크게 개선되었다.
개선 과정
이미지 파일 수정
블로그 관리 -> 스킨 편집 -> HTML 편집 -> 파일업로드에 올라와있는 이미지 파일들을 압축하여 업로드했다. 파일 용량이 줄어들수록 전송 데이터가 작아지기 때문에 로딩이 빨라진다.
tinypng를 이용하면 간편하게 압축할 수 있다.
플러그인 제거
블로그관리 -> 플러그인에서 사용하지 않는 플러그인들을 제거했다.
불필요한 자바스크립트 제거
스크립트는 속도의 중요 인자다. 가능하면 스크립트를 최대한 줄여야한다.
블로그 관리 -> 스킨 편집 -> HTML 편집에서 <script ~> </script>로 시작하는 불필요한 스크립트를 제거했다.
필요한 지비스크립트 async로 수정
지우지 못한 일부 스크립트를 async로 수정했다. async는 스크립트를 웹페이지와 비동기 하는 것으로 이 스크립트가 완전히 로딩될 때까지 웹페이지가 기다리지 않는다. 즉 이 스크립트가 로딩되지 않더라도 먼저 웹페이지를 띄워버린다. 완전히 준비된 상태에서 웹페이지가 로딩되지 않고 async가 지원되지 않는 스크립트들도 있기 때문에 적용해보고 사용 여부를 결정한다.
수정 전
<script src="./images/load.js"></script>
수정 후
<script async src="./images/load.js"></script>
highlight.js CDN 제거
highlight.js와 같이 데이터를 스크립트 제공 사이트에서 받아오는 기능인 CDN을 지원하는 스크립트들이 있다. 이들을 내 폴더에서 가져오도록 수정한다.
수정 전
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/ocean.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js">
</script>
<script>hljs.initHighlightingOnLoad();</script>
수정 후
<link rel="stylesheet" href="./images/ocean.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
애드센스 광고 줄이기
광고 또한 로딩 저하의 주요 요인이다. 광고 때문에 이탈률이 증가한다면 소탐대실이 될 수 있다.
웹페이지 압축
HTML, CSS를 압축해주는 사이트들이 존재한다. 이는 위에서 했던 과정들보다는 웹사이트의 오류를 초래할 가능성이 높다. 시도한다면 반드시 사전에 백업을 해야 한다.
블로그 관리 -> 스킨 편집 -> HTML 편집의 코드를 전부 복사한 후 아래 사이트에 붙여넣고, 압축한 결과를 내 블로그에 붙여넣는다.
http://htmlcompressor.com/compressor/
이 글에 의견을 남겨주세요.
이 글을 읽을 또 다른 분께 많은 도움이 될 거예요.
최근댓글