모바일 속도 개선 웹 폰트 적용 해제-변경

모바일 사이트 속도 개선을 위한 여러 방법과 적용된 구글 웹폰트를 적용 해제, 대체 폰트 지정, 원본 주석 처리하는 방법에 대한 설명입니다. 애드센스 경고로부터 페이지 스피드를 고민하며 얻은 경험을 공유하고자 작성하였습니다.

 

애드센스 경고

 

애드센스에서 "운영 중이신 사이트 중 하나 이상이 더 나은 광고 표준(Better Ads Standard)에 위배되는 광고 경험을 포함하는 것으로 확인되어 경고 상태가 되었습니다."라고 하며 구글 서치 콘솔에서 확인하여 개선할 것을 요청하였습니다.

 

상당히 놀랐는데 모바일 환경의 속도 개선 "CLS 문제, LCP문제"에 관한 개선을 권고하는 내용 같습니다. 서치 콘솔에서 확인을 해보니 "PageSpeed Insights"를 이용하여 속도를 측정하고는 점수를 주는데 기분이 좋지 않군요.

 

서치 콘솔 ▶ 실험 ▶ 페이지 경험 ▶ 코어 웹 바이탈 ▶ "상세정보"에서 개선이 필요한 url을 클릭하여 확인

 

페이지 스피드

PageSpeed Insights

• 분석 시간에 따라 점수가 차이 납니다.
• 유명 사이트의 분석 값도 좋지 않습니다.(네이버 등, 모바일 10점 아래)
• 개선 사항을 알려주지만 이해하기가 어렵습니다.
• 위의 모바일 "44"점은 "티스토리"가 아닌 "블로그 스폿"의 점수입니다.
• 어제 새벽에 실시한 분석에서는 94점이 나왔고, 데스크톱은 100점이었습니다.
• 서치 콘솔의 개선이 필요한 url이 100개가 넘었지만 웹폰트 아래 개선 후 "0"이 되었습니다.

 

 

전문가의 의견

전문가의 의견은 "티스토리에 무료로 임대해서 쓰는 유저로서 할 수 있는 일은 별로 없으며 구글의 경고는 AI가 자동으로 보내는 개선사항이기 때문에 신경 쓰지 않아도 된다."였습니다.

 

구글 SEO

구글 입장에서 본다면, 예를 들어 이미지 압축 "WebP"를 만들어 무료로 배포하는 이유는 인터넷 트래픽을 줄여 최종적으로 광고 수익을 더 많이 얻기 위함이라면, 모바일 속도가 느린 사이트에 SEO를 불리하게 적용할 이유는 충분해 보입니다.

 

티스토리 속도 개선

1. 모바일 웹 설정

가장 확실한 개선 방법은 "모바일 웹 설정"의 티스토리 모바일 웹 자동 연결을 "사용합니다."로 변경하는 것입니다. 티스토리 유저들이 속도 개선에 대한 글을 쓴 내용들을 살펴보면 이 방법이 가장 확실한 방법 같습니다.

 

• 단점이 모바일 사용자가 페이지를 클릭했을 때 광고가 송출되지 않는 문제가 있습니다.
• 개선되었다는 공지가 있지만 최후까지 적용을 미루어 보려고 합니다.

 

2. 플러그인 정리

불필요한 플러그인을 모다 해제했습니다. 홈에 뜨는 글도 최소화, 글자 수도 줄이고, 목록 수도 줄이고 프로필 사진과 이미지도 삭제했습니다.

 

3. 웹 폰트 적용변경(제외)

제일 먼저 추천되는 권고 사항이 사용하지 않는 웹폰트를 적용 해제하라입니다. 북클럽 기준 구글 웹폰트 두 가지가 자동으로 로딩되는데 제외했습니다. 구글 검색을 해보니 적용방법은 많이 있지만 정확한 제외 방법은 찾지 못했으며 알아낸 정보를 통해 직접 해보기로 했습니다.

 

a. 기본 방법은

• 수정할 메뉴를 "주석" 처리하여 혹시 오류 발생 시 바로 복구가 가능하게 합니다.
• 대체할 글자체는 "돋음"체와 "Malgun Gothic"체입니다.

 

웹폰트 적용변경

 

• 티스토리 설정 ▶ 스킨 편집 ▶ Html 편집 ▶ CSS ▶3가지 수정 후 ▶ 적용

북클럽 스킨 기준
[ /* 내용 */ ] 프로그램은 "내용"을 무시하고 그냥 지나감.
1. @impot url....이라고 웹폰트를 불러오는 명령어 앞에 "/* "를 입력 3줄 아래 css'); 뒤에 " */"입력
2. font -family : 를 아래에 복사하고 원본 주석 처리. 글자체를 '돋음'과 'Malgun Gothic'으로 변경
3. h1의 font -family : 를 아래에 복사하고 원본 주석 처리. 글자체를 'Malgun Gothic'으로 변경

font -family의 글자체를 여러 개 넣는 이유는 첫 번째 글자체가 적용 안되면 두 번째, 세리프 글자체는 이것으로 설정하는 방식이라 합니다.

• CSS파일 원본은 : 티스토리 설정 ▶ 스킨 변경 ▶ 보관, 다운로드, 편집에서 다운로드

 

4. 이미지 압축

이미지는 최대한 압축하여 jpg를 사용하지만 "WebP"로 변경했더니 50% 정도로 파일이 줄어들어 고민 중입니다. 아직 지원하지 않는 사이트나 앱이 있다고 해서 좀 더 검색해 본 다음 변경할 생각입니다.

 

5. 스크립터 압축

HTML과 CSS를 압축해 주는 사이트를 통해 압축하여 적용하는 방법이 있습니다. 몇 분은 큰 효과가 있으며, 몇 분은 별 효과가 없다고 하는데 순정에서 얼마나 많이 수정을 했고 중복 스크립터가 있는지에 따라 효과가 다른 걸까요? 저는 이 부분은 다음 기회에 해보겠습니다.

 

6. 스킨 변경 주의

스킨 변경에 주의하세요. 순정 스킨에서 몇 가지를 변경 적용했는데 조만간 시간이 생기면 순정으로 되돌릴 생각입니다.  주석처리로 변경하는 게 좋은 방식인데 경험이 부족하다 보니 이것도 어떤 부작용이 있을지 잘 모르겠으며 변경에 주의하시기 바랍니다.

 

페이지 모바일 속도 개선을 위한 웹 폰트 적용 해제-변경 방법입니다.

 

 

- 추천글 1

카카오 맵에서 GPX 파일 만드는 방법

- 추천글 2

 

글로벌 스포티파이 인기 차트 50

- 추천글 3

 

음악 저작권과 글자 폰트 저작권 판결참조