┖ ⍟ IT 여행

티스토리 웹폰트 최적화 및 로딩속도 개선 방법

티스토리 블로그는 물론이고 웹사이트 운영에 로딩속도 개선은 사이트 운영에 중요한 요소를 차지한다. 

기술적 베이스를 가지지 않고 사이트를 운영하는 것에 깊은 고민을 하지 않은 사람들은 로딩속도 개선에 대해 중요함을 모른다.

이것을 모르고 디지털 마케팅 (키워드, 배너 광고 마케팅), 이메일 마케팅만 하면 사이트가 잘 운영된다는 착각을 한다. 무식하면 용감하다는 말이 괜히 나오는 말이 아니다.

 

사이트가 느린데, SEO 작업이 안되어서 사이트가 검색에 상위노출이 안되는데,

마케팅이 다 무슨 소용이라는 말인가?

 

그만큼 로딩속도 개선은 중요하다.

 

▼ 티스토리 로딩속도 개선에 대한 꿀팁 궁금하면 ▼

  → 티스토리 로딩속도 향상 프로젝트 (기초편)

  → 티스토리 로딩속도 향상 및 개선방법 4가지 (관리자 세팅 노하우)

  → 티스토리 성능 개선 (저 처럼 시간 낭비하지마세요)

  → 사이트 이미지 속도 개선 webP에 대해서


<목차>

1. 로딩 속도 개선의 중요성

2. 티스토리 구글 웹폰트 삭제

3. 파비콘 및 아이콘 웹링크 삭제   

 

1. 로딩 속도 개선의 중요성

사용자라 사이트를 방문해서 사이트가 3초 내에 로딩되지 않으면 방문자는 30% 이탈하고 5초 이상 걸리면 80% 이탈한다는 연구결과가 있습니다. 

그만큼 사이트 로딩속도가 중요하다 보니, 

구글에서는 원활한 네트워크 환경을 운영하고 질 좋은 사이트는 검색결과 상단에 노출될 수 있도록 

구글에서는 페이지스피드 인사이트 (PageSpeed Insight) 툴을 제공하여 블로그 및 사이트 운영자들에게 직접 사이트 속도를 측정하고 개선할 수 있는 가이드를 제공하고 있습니다. 

 

또한 검색엔진최적화(SEO)은 콘텐츠/마케팅 SEO 그리고 테크니컬 SEO로 크게 2가지로 구분됩니다. 

그중에 테크니컬 SEO 부분에 이 로딩속도는 큰 부분을 차지하고 있습니다. 

 

그리고 많은 분들이 애드고시라고 불리는 구글 애드센스에 대한 엄격한? 기준을 통과하고 구글 광고를 달기 시작하면 사이트의 속도는 약 1.5~2배로 느려지는 현상이 발생되어, 구글 광고와 로딩속도 개선은 많은 분들에게 영원한 숙제와도 같습니다. 

 

그럼 티스토리 로딩속도 개선 중에 난이도가 높다고 여겨지는 웹폰트 그리고 웹링크 경량화에 대하여 이어서 알려드리겠습니다. 

 

 2. 티스토리 구글 웹폰트 삭제

<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700&amp;subset=korean">

▲ 티스토리 스킨편집 → HTML 편집에 들어간 후 상단  <head> </head> 사이를 확인해보면 확인해 보면 티스토리도 구글의 폰트를 다운로드하여 사용 중인 것을 확인할 수 있습니다. 예전에 preload 기법을 사용하여, 계속 사용했지만, 많은 고민끝에 필요없다는 결정을 하게 되었습니다. 

 

해당 부분을 삭제하면 글자가 깨질까 블로그에 문제가 생길까 쉽게 삭제하지 못하는 분들이 많습니다. 

많은 사이트 로딩속도 체크 툴을 활용하여 점검을 해보면 구글 웹폰트를 가져오는 부분이 로딩속도를 저하하는 요소로 지적되는 것을 확인하실 수 있으실 겁니다. 

 

구글 웹폰트를 사용하는 문자열만 다운 받고 나머지는 다운을 받지 않는 등 방법도 있지만, 

제일 좋은건 아예 다운을 받지 않고 삭제하는 것이라고 생각되기 때문에, 해당 부분을 삭제하는 것을 권장드립니다. 
다만 저는 웹폰트 보다 로딩속도 개선이 더 중요하다고 판단되었고,

만약 속도보다 웹폰트(글자체) 를  더 중요하게 생각하시는 분이 있다면 그래도 살려두시길 바랍니다. 

 

그리고 참고로 저는 오디세이 스킨을 사용 중이고, 삭제 후 현재까지 아무 문제없이 블로그를 운영하고 있습니다. (향후 문제가 생긴다면 댓글에 남겨 놓겠습니다.)

 

 3. 파비콘 및 아이콘 웹링크 삭제

<link rel="shortcut icon" href="https://seoul-nba.tistory.com/favicon.ico" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

▲ HTML에서 <head> </head> 사이를 확인해보면 위에서 권장드린 구글 웹폰트 바로 위에 파비콘과 XEICON* 부분도 웹링크가 걸려 다운을 받고 있습니다. 이 부분도 사실상 필요가 없다고 생각되어 삭제조치를 하였습니다. 

 

* 참고로 xeicon은 사용자들에게 무료로 다양한 아이콘을 사용할 수 있도록 제공해주는 사이트입니다. 그런데 생각보다 실제로 활용하는 분들도 없는 거 같고, 정말 필요한 이미지 및 아이콘은 [스킨편집] →[파일업로드]에 본인이 사용할 이미지를 업로드해서 사용하면 되므로 저는 과감히 삭제하였습니다. 

 

그리고 사실 저는 파비곤을 사용하고 있지만, 해당 부분을 삭제하여도 아무런 문제가 없었습니다. 
(이 부분도 향후 문제가 생긴다면 댓글이 남겨놓도록 하겠습니다) 

 

저의 작은 지식이 도움이 되었기를 바랍니다.

 

오늘도 행복한 하루 되세요!

loading