구글 PageSpeed Insights를 이용한 티스토리 블로그 속도 개선하는 방법

이번 포스팅은 티스토리 블로그가 느릴 때 속도를 향상시키는 방법입니다.

구글의 PageSpeed insights를 이용해서 원인을 분석하고, HTML compressor 같은 방법을 이용하면 되요.

 

블로그를 잘 꾸미는 것이 무엇보다 중요하지만,

아무리 잘 꾸며도 사람들이 안들어오면 헛일이겠지요.

포트폴리오 스킨으로 바꾼 후 왠지 블로그 속도가 상당히 느려진것 같았습니다.

(스킨에 사진이 많이 나와서 그런지 ㅎㅎ;)

 

구글 PageSpeed Insights

 

구글 PageSpeed Insights에 들어가서 블로그 주소를 입력하시면

아래와 같이 모바일, 데스크톱 점수가 계산되어 나옵니다.

 

 

스크롤을 내려보시면

 

 

위와 같이 개선사항이 나옵니다.

점수 개선하는 방법

이미지 용량 줄이기

가장 극적인 효과를 보여줍니다.

개선전에는 "차세대 형식을 사용해 이미지 제공하기 : 예상 절감치"가 거의 7초 정도였는데,

개선하고 나니까 -0.15초로 바꼈어요.

아시다시피 윈도우 7, 10 그림판은 기본저장 확장자가 .PNG입니다.

PNG의 장점 : 글자가 거의 뭉개지지 않는다 / 단점 : 용량이 크다

JPG의 장점 : 압축률이 높아 용량이 매우 줄어든다, 사진,그림은 거의 뭉개지지 않는다 / 단점 : 글자는 꽤 뭉개진다.

이렇습니다.

용량이 얼마나 차이나는지 별 관심없었는데, 같은 사진을 PNG와 JPG로 비교해서 보니 엄청나게 차이납니다.

(블로그 사진 몇장으로 실험해보니, PNG가 용량 100MB라고 한다면, JPG는 21~22MB 정도로 거의 5배정도 차이;;)

그림판에서 꼭 "다른이름으로저장 → JPEG그림" 으로 해보시기 바랍니다.

주의! 밑에처럼 "파일명 01.jpg"로 저장하는건 아무 소용없습니다. 전혀 용량이 안줄어들어요 ㅎㅎ

HTML 소스코드 압축하기

HTML compressor 사이트에 들어가서 압축하시면 됩니다.

혹시라도 스킨 오류가 날 가능성이 있으니, 꼭 미리 스킨을 백업해두세요 ㅎㅎ

(스킨백업은 관리자페이지 → 스킨변경 → 사용중인 스킨 보관)

(스킨되살리기는 관리자페이지 → 스킨변경 → 스킨보관함 → 백업해둔것 클릭하고 적용 누르기)

 

 

Code type : x/html

Show Options 눌러서 옵션을 펼치면, 여러 항목이 나옵니다.

다 기본으로 두시고, Never strip quotes (check), Preserve all x/html comments (check), Preserve SSI directives (check)

이 정도 하시면 될것같아요 ㅎㅎ

Never strip quotes 체크시 따옴표를 없애지않고 놔두는건데 당연히 그렇게 해야 되고,

Preserve all x/html comments, Preserve SSI directives 체크시, 주석을 그대로 놔둔다는건데요 ㅎㅎ

주석은 이왕이면 놔둬야 다음에 입맛대로 스킨 수정할때 덜 헷갈리니까요 ㅎㅎ

※ Single line html output 체크시 html 소스코드를 한줄로 쭉 적는다는 건데, 해봤더니 도저히 못알아보겠더군요 ㅠ

이렇게 옵션설정을 끝내고 나면,

티스토리 관리자페이지 → 스킨편집 → html편집 들어가셔서 html 전체 복사해서 HTML compressor 사이트에 붙여넣으세요 ㅎㅎ

몇초 지나서 압축이 완료되면 들고오시면 됩니다 ㅎㅎ

CSS 소스 압축하기

마찬가지로 HTML compressor 사이트에서 할 수 있습니다.

 

 

이번에는 Code type : CSS로 선택하고 하시면 되는데,

CSS 압축을 하니 한줄로 입력을 다 해놔서 영 알아보기가 힘들더군요.

그래서 CSS 압축은 했다가 원상복귀했어요.

HTML, CSS 압축은 큰 효과는 없지만, 해주시면 속도 개선에 도움이 됩니다.

뭐 때문에 느린지 잘 분석하셔서 거기에 맞게 하시면 될것같습니다 ㅎㅎ