티스토리 웹폰트 로딩을 차단하여 속도를 개선하자

구글에 조금이라도 나의 페이지 및 사이트를 어필하기 위해서는 페이지의 응답속도를 빠르게 해야 한다는 것은 잘 알려진 사실이다. 하지만, 티스토리에서 사용자가 속도 개선을 위해 할 수 있는 부분에는 많은 제약사항이 따르는 것이 사실이다. 오늘은 페이지 속도 개선을 위해 웹폰트 로딩을 차단하는 방법에 대해 알아보도록 한다.

 

내용 요약

• 티스토리의 웹폰트 로딩을 차단하여 성능을 높일 수 있다.
• 성능이 높아지면 구글 상단 배치 가능성이 높아진다.
• '렌더링 차단 리소스 제거하기' 시간 감소
• 웹폰트 로딩 차단하는 방법은 스킨 편집의 CSS 일부 주석 처리하면 된다.

 

응답속도 개선 필수

구글에서 나의 페이지가 조금이라도 상단에 놓이게 하기 위해서는 구글이 요구하는 여러 가지를 만족해야 한다. SEO 관점에서 구글이 요구하는 사항을 만족하는 것은 그렇게 어려운 일은 아니다. 조금의 검색과 노력만으로 충분히 구글이 요구하는 SEO를 만족할 수는 있다. 

하지만, 페이지 및 사이트 속도와 관련된 부분은 티스토리 사용자가 개선할 수 있는 사항이 많지는 않다. 많은 부분이 자바스크립트, CSS 및 티스토리 서버와 관련된 부분과 연관되어 있기 때문에 단순히 티스토리에서 블로그를 개설해서 사용하는 사람들이 통제할 수 있는 부분이 얼마 되지 않는다.

 

페이지속도는 어떻게 측정하나?

티스토리의 페이지 로딩 속도를 확인할 수 있는 사이트로 pagespeed insights가 있다. 

사용방법은 간단하다. 해당 사이트에 접속한 후 측정하고자 하는 페이지의 URL을 입력하면 모바일과 데스크톱 기준으로 각종 성능 등을 확인할 수 있다.

 

페이지속도 측정 결과

아래 그림은 내 사이트의 페이지 속도를 측정해 본 결과이다. 

앞서 모바일과 데스크톱 기준으로 성능 측정이 가능하다고 했는데 아래 그림은 모바일의 결과이다. 보통 모바일이 데스크톱 보다 상대적으로 낮은 점수가 나온다. 낮은 성능에 대해 아래 부분을 보면 여러 가지 개선사항을 설명하고 있다.

 

페이지 속도 측정 결과

 

웹폰트 로딩 차단

왜 웹폰트 로딩을 차단해야 될까?

정답은 위 그림에 나타나 있다. 낮은 성능으로 인해 구글에 좋은 점수를 받을 수 없고, 나의 글이 구글 상단에 올라갈 수가 없다. 따라서, 성능 개선을 위한 노력을 기울여야 한다. 웹폰트 로딩을 차단하면 위 그림의 "렌더링 차단 리소스 제거하기" 부분의 시간을 절감할 수 있다. 

 

웹폰트 로딩 차단하기 위한 방법

티스토리의 스킨 편집을 통해 웹폰트 로딩을 차단할 수 있다.

티스토리 관리자 메뉴 중 꾸미기 > 스킨편집 > html 편집으로 들어간다. 위 탭의 css 탭을 클릭하여 css 관련 부분을 수정하자. 수정해야 되는 부분은 아래 그림과 같다. (왼쪽의 줄번호를 참조하자. 적용 스킨에 따라 줄번호 위치는 조금씩 차이가 있다.)

웹폰트 로딩 차단하기 위한 CSS수정

 

위 그림의 노란색 음영 부분이 주석 처리해야 될 부분이며 주석 처리는 C코드와 동일하게 '/*'로 시작해서  '*/'로 끝내면 된다. (아래 예시 참조)

/* import url('https://fonts.googleapis.com/....') */

 

웹폰트 로딩 차단 결과

앞과 동일하게 page speed Insight에 동일한 페이지 URL을 입력한 후 그 결과를 확인하였다.

 

웹폰트 로딩 전·후 글꼴 변화

아래 그림의 좌측 그림이 웹폰트를 로딩한 상태이고 우측 그림이 웹폰트를 로딩하지 않은 상태이다. 사람마다 호불호가 갈릴 수 있지만 웹폰트를 적용한 페이지가 좀 더 깔끔해 보인다. 자간이 조금 짧고 글씨가 조금 더 시각적으로 보기 좋아 보인다.

 

웹폰트 로딩여부에 따른 비교

 

페이지 성능 개선 결과

웹폰트 로딩을 차단했을 때의 성능은 다음과 같다. 성능점수가 기존 32점에서 7점 개선되어 39점을 부여받았다. 그리고 아래 '렌더링 차단 리소스 제거하기'가 3.79초에서 0.97초로 약 3초 정도 개선되었음을 확인할 수 있다.

 

웹폰트 로딩 차단 시의 성능

 

총평

단순히 웹폰트 로딩을 차단한 것으로 상당히 양호한 결과를 얻을 수 있음을 확인할 수 있다. 앞에서 이야기하였지만 티스토리에서는 블로거가 성능 개선할 수 있는 부분이 많지 않다. 따라서 조금이라도 양호한 성능을 얻기 위해서는 약간은 보기 안 좋을지 모르지만 웹폰트 로딩을 차단하는 것이 바람직한 방법인 것 같다.

 

함께 읽으면 좋은 글

'나 카이스트' 학부모... 누가 피해자인가?

 

GA4에서 사용되는 용어에 대해 알아보자(GA4 용어정리)

 

모바일 세관신고 운영 확대