티스토리 블로그 로딩 속도 최적화 : html, css, 이미지

티스토리 블로그의 최적화중 페이지 로딩 속도 최적화에 관하여 알아보도록 하겠습니다.

블로그 최적화중 로딩 속도의 최적화는 기본중의 기본이라고 말할 수 있습니다. 아무리 컨텐츠 내용이 훌륭하고 알차다고 하더라도 보는 입장에서 클릭했는데 페이지가 보여지는 데 오랜 시간이 걸린다면 고 퀄리티의 글은 읽혀보지도 못한채로 사장되고 말것입니다.

더불어 그러한 블로그 유입자들의 들락날락하는 패턴이 반복된다면 블로그 지수에 있어서도 좋지 못한 점수를 받을 것은 뻔한 일입니다.

블로그 로딩 속도 최적화는 3가지 부분에서 이루어져야 합니다.

 

html 소스의 압축, css 소스의 압축, 이미지 파일 최적화의 3가지입니다.

물론 가장 큰 영향을 주는 것은 아마도 스킨자체를 가벼운 스킨으로 바꾸는 것이겠지만, 일단 스킨을 선택하고 나면 할 수 있는 방법은 위에서 말씀드린 3가지 방법입니다.

 

 

1. html 압축

티스토리의 html 편집에 들어가서 작업하기전 htm이나 css는 백업을 해두는 것이 좋을 듯 합니다. 메모장 파일로 전체선택(Ctrl+A), 복사(Ctrl+C), 붙여넣기(Ctrl+V)한 후에 저장해 두면 됩니다.

 

백업이 완료되었으면 html 소스코드를 압축하기 위해 티스토리 편집으로 이동해야 합니다.

티스토리 블로그 설정의 Html 편집에 들어간 뒤에 오른쪽의 html 코드 전체를 복사합니다.

다음으로 아래의 사이트로 들어간 뒤 붙여넣기 합니다.

 

http://htmlcompressor.com/compressor/

 

compress 버튼을 누르면 압축본을 보여주는데 전체 복사합니다.

 

 

압축 결과물이 출력되면 이 역시 전체선택후 복사한 뒤, 다시 티스토리 블로그의 html 편집창에서 전체선택후 붙여넣기로 소스코드를 압축물로 교체해 줍니다.

 

2. css 압축

1번 항목의 방법과 동일합니다.

티스토리 html 편집에서 css탭의 내용을 전체복사해오는 것과, 압축 페이지에서 code type을 css로 바꿔주는 것만 다릅니다.

 

 

변환되어 나온 압축본 css 코드도 1번 항목과 동일한 방법으로 티스토리 css 탭에서 전체 붙여넣기한 뒤 저장합니다.

 

3. 이미지를 가볍게

블로그 포스팅에 사용되는 이미지는 화질을 좋게 하면서도 최대한 가볍게 만들어야 합니다.

자신의 블로그가 사진이나 이미지 퀄리티에 중점을 두는 블로그가 아니라면 삽입되는 이미지들은 최소한의 숫자와 최대한의 가벼움을 유지하는 것이 좋습니다.

이미지 최적화에 관하여는 예전에 포스팅했던 pym 프로그램 리뷰로 대체합니다.

 

블로그 이미지, 그림 파일 축소 및 최적화 툴 - Pym