[티스토리 애드센스 수익 올리기 ] 티스토리 속도 개선 1: 웹폰트 제거

티스토리 애드센스 수익 올리기를 찾다 티스토리 속도를 개선해야 광고가 로딩 없이 빨리 뜨고 그러면 애드센스 수익이 자동으로 올라간다는 글을 발견했다. 그래서 티스토리 속도 확인과 티스토리 속도에 악영향을 미치는 웹폰트를 제거했다.

 

 

티스토리 속도 확인

티스토리의 로딩 속도 확인은 아래 pagespeed insights 사이트에 들어가서 티스토리 블로그 주소를 검색하면 된다. 아래 사이트에서는 모바일과 데스크탑 속도를 확인과 개선해야 할 사항들을 알려준다.

 

 

https://pagespeed.web.dev/

 

 

 

 

 

 

 

 

티스토리 모바일 속도 확인

 

데스크탑은 87점으로 양호한 결과가 나왔지만, 모바일은 17로 점수가 많이 낮았다. 내 티스토리 블로그들은 모바일 유입이 70%/ 데스크톱 유입이 30%로 모바일 유입이 압도적으로 높다. 그래서 애드센스 광고도 데스크톱보다는 모바일 수익이 더 높은데, 속도가 낮다 보니 광고 로딩 시간이 걸리고... 그러다 보면 자연스럽게 애드센스 광고 수익에 안 좋은 영향을 끼칠 수 있다.

 

 

 

티스토리 애드센스 수익 올리기

티스토리 속도 개선 페이지에서는 어떤 점을 개선해야 하는지 알려주는데... 봐도 무슨말인지 이해가 안 됐다. 나한테 시급 한 건 차세대 형식을 사용해 이미지 제공하기/ 렌더링 차단 리소스 제거하기/ 사용하지 않는 자바 스크립트 줄이기/ 효율적으로 이미지 인코딩 하기/ 오픈 스크린 이미지 지연하기/ 초기 서버 응답 시간 단축 순으로 속도 개선이 필요했다.

 

 

검색으로 찾는데는 한계가 있어, 우선 '렌더링 차단 리소스 제거하기' 먼저 개선하기로 했다. 한꺼번에 너무 많이 하면 내가 감당하지 못할 것 같아 렌더링 차단 리소스 중 웹폰트를 제거하기로 했다.

 

 

 

 

 

 

 

티스토리 웹폰트 제거하기 : 렌더링 차단 리소스 제거

 

블로그 관리 -> 꾸미기-> 스킨편집 -> html 편집 -> css클릭

구글 서치 어드바이저에 등록을 할때와 똑같이 스킨 편집 html을 누르고 거기서 상단 메뉴 CSS를 선택한다는 점이 다르다.

 

.

티스토리 웹폱트 제거하기

22번 /*wdb font load*/ 아래칸과  26번 /*type selector reset*/ 아래에 있는 font-family에 빨간색으로 밑줄 쳐진 <!-- 와  --> 추가.

- 시작부분 : <!--

- 끝부분 : -->

* 번호는 페이지 너비에 따라 달라질 수도 있으니 대략적인 참고만 해주세요.

 

 

 

 

티스토리 웹폱트 제거하기

 

57번 font-family 에도 시작/ 끝부분에 <!-- / --> 추가

 

티스토리 웹폱트 제거하기

 

128번 font-family 에도 시작/ 끝부분에 추가

 

렌더링 차단 리소스 제거

<!--내용--> 삽입은 총 4번을 하고, 그중 세 번은 font-family 부분에 삽입하는 것으로 컨트롤 + F 로 'font-family' 검색 후 시작과 끝부분에 <!--내용-->을 추가해도 된다.

 

 

티스토리 웹폰트 제거 후

 

티스토리 웹폰트만 제거하고 속도를 측정했는데, 17 -> 32로 생각보다 크게 향상했다.

 

 

렌더링 차단 리소스 제거 후

웹폰트를 제거하고 렌더링 차단 리소스가 4.34s -> 2.37s 로 개선사항 2위에서 5위로 순위가 변동됐다. 웹폰트 변경 후 속도가 개선되었지만, 이상하게 차세대 형식을 사용해 이미지 제공하기는 0.11s 가 늘어 5.49 -> 6s로 속도가 더 늘어지게 나왔다.

 

 

웹폰트를 제거하고 속도가 느려진 부분도 있지만, 전반적인 속도만 보자면 웹폰트를 제거하고 나서 속도가 향상돼 제거를 하는 게 티스토리 속도 개선에 더 긍정적인 영향을 미치는 것 같다. 

 

 

 

 

 

 

티스토리 애드센스 광고 로딩 시간을 줄여 광고 수익을 올리고 싶은 사람들이라면 티스토리 속도 측정 후 렌더링 차단 리소스 속도가 안 좋게 나온다면 웹폰트 제거로 티스토리 속도 향상을 하는 게 좋을 것 같다.

 

↓ 티스토리 손쉬운 속도 향상/ 광소 설정 후기 ↓

티스토리 미넴스킨 후기 속도올리기 광고설정 최적화 Good