티스토리 속도 개선 방법 (feat. 속도 측정 사이트)

운영하고 있는 티스토리 사이트의 속도가 느리면 구글 사이트 내 나의 글 노출 순위가 후순위로 밀리게 되는데요.

오늘은 티스토리 속도 측정 및 개선 방법에 대해 알려드리도록 하겠습니다.

 

 

---

티스토리 속도 측정 사이트 _ PageSpeed Insights

티스토리 속도 측정은 PageSpeed Insight를 통해 측정할 수 있는데요. 속도 측정 방법은 아래 순서를 참고하시면 됩니다.

 

① PageSpeed Insights 사이트에 접속합니다 (바로가기 : 클릭)

② '웹페이지 URL 입력'란에 내 티스토리 홈페이지 주소를 입력합니다. (예시 : http://본인티스토리주소)

③ 오른쪽 파란색 '분석' 버튼을 클릭합니다. 

④ 스크롤을 내려보면 '성능 문제 진단하기' 바로 밑에 성능이 표시됩니다. (저는 휴대전화 기준으로 38로 나오네요.)

 

PageSpeed Insights 홈페이지 화면

 

 

---

티스토리 속도 개선 방법

해당 개선방법은 북클럽 스킨 기준에서 진행한 방법이니 참고하시길 바랍니다.

 

1) 티스토리 게시글 상단 배경 삭제 (모바일 기준, 약 2~15점 향상 가능)

※ 티스토리 글 상단 배경이 옅은 회색으로 나오면 올바르게 수정된 것이며, 혹시 모르는 실수를 대비해 원본 글은 메모장에 붙여두시길 바랍니다. 

 

① 본인의 티스토리 아무 글에 대해 속도 측정을 미리 해서 성능 점수를 확인합니다.

② 티스토리 관리 페이지를 들어갑니다.

③꾸미기 탭에서 '스킨 편집'을 클릭합니다.

④ 우측 상단쯤에 있는 'html 편집'을 클릭합니다.

⑤ Ctrl + F 누른 후, 오른쪽 ''안에 문구를 복붙 해서 찾습니다. 'url(https://blog.kakaocdn.net/dn/v23u0/btrMyi0bQtG/DJeK2RyRfYpSB3JSoReiKk/img.jpg)'

⑥ 해당 문구를 'none'로 고쳐줍니다.

⑦ ~style="background-image:none"으로 고쳐진 것을 확인하고 오른쪽 상단의 적용 버튼을 클릭합니다.

⑧ 다시 성능 점수를 확인하면 성능 점수가 향상된 것을 확인할 수 있습니다.

 

2) 티스토리 외부 폰트 미사용 (모바일 기준, 약 2~10점 향상 가능)

※ 본인의 티스토리 홈 화면 글씨체가 기본으로 변경되고, 글씨체 굵기가 옅어지면 올바르게 수정된 것이며, 혹시 모르는 실수를 대비해 원본 글은 메모장에 붙여두시길 바랍니다. 

 

① 본인 티스토리 홈페이지에 대해 속도 측정을 미리 해서 성능 점수를 확인합니다.

② 티스토리 관리 페이지를 들어갑니다.

③꾸미기 탭에서 '스킨 편집'을 클릭합니다.

④ 우측 상단쯤에 있는 'html 편집'을 클릭합니다.

⑤ html 편집 창에서 'CSS 편집'으로 이동합니다.

 

⑥ Ctrl + F 누른 후, @import를 복붙 하여 아래 문구를 찾습니다. 이후 아래처럼 /* 를, 뒤에 */를 추가 기입해줍니다.

 /* @import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css'); */

 

⑦ Ctrl + F 누른 후, font-family: 'Apple 를 복붙 하여 아래 문구를 찾습니다. 이후 아래처럼 /* 를, 뒤에 */를 추가 기입해줍니다.

 /* font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; */

 

⑧ Ctrl + F 누른 후, font-family: 'Noto를 복붙 하여 아래 문구를 찾습니다. 이후 아래처럼 /* 를, 뒤에 */를 추가 기입해줍니다.

 /* font-family: 'Noto sans KR', sans-serif; */

 

⑨ Ctrl + F 누른 후, font-family: 'Nanum를 복붙하여 아래 문구를 찾습니다. 이후 아래처럼 /* 를, 뒤에 */를 추가 기입해줍니다.

 /* font-family: 'Nanum Myeongjo; */

 

⑩ 오른쪽 상단의 적용 버튼을 클릭합니다.

⑪ 다시 본인 티스토리 홈페이지 성능 점수를 확인하면 성능 점수가 향상된 것을 확인할 수 있습니다.