블로그 속도 개선 - 압축하기

iTIPs/티스토리 2014. 7. 16. 23:53

당연한 소리지만, 블로그 속도는 왜 빠를수록 좋을까요?

방문자가 내 블로그를 방문했는데 이것저것 로딩하느라 버벅거리고 느리면 블로그 내에서 다음 페이지를 탐색할까요?

그렇습니다. 블로그 속도 개선은 이탈률을 조금이라도 줄이는데 목적이 있습니다.

지난번에는 disqus플러그인 로딩시점을 조절하는 방식으로 속도개선을 해봤는데요,

이번 포스트에서는 블로그 로딩속도 개선을 위해서 방문자가 내려받는 소스의 크기를 줄이는 방법을 알아보겠습니다.

티스토리에서 관리자가 압축할 수 있는 부분은

등이 있습니다.

압축을 통해 조금이나마 다운받아야하는 소스의 크기를 줄일 수 있고, 로딩속도의 향상으로 이어집니다.

그러나 압축을 하게되면, 수정의 편의성과는 거리가 멀어지게됩니다.

따라서 어느정도 스킨이 안정화 되어서 한동안 수정할 일이 없으신 분들만 적용하시고,

적용 전에는 반드시 스킨을 저장해놓으시기 바랍니다. - 수정할 때 불러와서 수정하시고 다시 압축하면 되겠죠?

HTML / CSS압축

2. HTML/CSS 수정에서 skin.html의 내용을 전체 선택해서 위의 사이트에 붙여넣습니다.

3. 오른쪽에 Show Options를 클릭해 옵션을 열고 위 사진처럼 체크를 해주세요.(티스토리는 주석또한 인식하기 때문에 주석을 살리기 위한 옵션이 들어있습니다.)

4. 아래쪽에 초록색 Compress를 누르면 결과물이 나옵니다.

5. 결과물을 전체 복사해서 다시 skin.html에 붙여넣어 교체해줍니다.

6. 마찬가지 방법으로 style.css도 압축해줍니다. (You have selected x/html, however your code looks like CSS.라는 경고문이 나올텐데, Change눌러주시면 됩니다.)

스킨에서 HTML,CSS를 압축했으면, 이제는 실질적으로 블로그 로딩에 큰영향을 끼치는 이미지압축에 대해 알아보겠습니다.

고해상도의 이미지는 블로그 페이지 로딩속도를 늦추는 주범입니다.

사진 블로그라면 이야기가 달라지지만, 블로그에 업로드되는 이미지 대부분은 확대가 불필요합니다.

따라서 이미지는 실제 표시되는 크기 이상이 될 필요가 없는것입니다.

또한 확대하지 않아도 되는 이미지를 업로드하는 것이 방문자의 불편을 줄일 수 있기 때문에 이탈률을 줄이는데 중요합니다.

이미지압축은 품질을 낮추는 방법도 있고, 해상도를 낮출 수 있는 방법도 있지만, 그중에서 쉽게 적용할 수 있는 해상도 압축에대해 알아봅시다.

글을 작성하며 이미지를 업로드할 때 조금만 주의해주시면 됩니다.

이미지를 업로드할 때, 상단의 '크기'를 눌러 크기를 조절해줍니다.

적절한 크기는 하단의 '원본크기'를 눌렀을 때, 확대하지 않고 볼 수 있을 정도면 됩니다.

(클릭시 원본 사진 보기 옵션도 꼭 필요한 경우가 아니면 해제합니다.)

HTML/CSS,이미지 압축을 하기 전과 후의 속도를 아래 사이트를 통해 비교해봅시다.

블로그 주소를 입력하고 Time it!을 누르면 로딩 속도를 기본값으로 5초간격으로 5회 측정하게됩니다.

(애드센스가 포함된 블로그는 반복 횟수를 너무 많이 잡지마세요. 수익에 악영향을 끼칩니다.)

'iTIPs/티스토리' 관련 글 more

Posted by 뭐하라