PageSpeed Insights에서 웹 페이지를 테스트해 보면 보통 모바일은 점수가 낮게, PC는 높게 나오는 경우가 많다. 사실 PageSpeed Insights에서 나오는 점수가 낮더라도 실제 체감상 특별히 느리다고 느껴지지 않는 경우가 많아 테스트할 때만 고민하고 이후로는 신경을 잘 안 쓰게 되는 부분이기는 하다. 겸사겸사 나무위키 페이지를 테스트해 보니 성능 50점대, 접근성 70점대, 권장사항 100점, 검색엔진 최적화 80점대가 나온다. 나무위키를 쓰면서 답답하다고 느낀 적은 없었던 것 같다.
아무리 그렇다고는 해도 좋은 게 좋은 거라고, 문제가 되고 있는 부분을 개선하고 싶은 마음은 굴뚝같다. 다만 무엇을 어떻게 하는 게 좋은지 명확하지 않은 경우가 많아 여러 가지를 시도해 보게 된다. 캐시 플러그인을 교체해 보고, 객체 캐시도 걸고, HTML･CSS･JS를 축소하는 옵션을 걸어보기도 하고, Lazy Load를 이미지와 JS에 걸어 놓기도 하고, 사진 이미지를 최대한 압축하고 축소시켜 업로드하기도 하는 등 나름대로 이것저것 시도는 많이 해 보았지만 마음에 들 만큼의 가시적인 성과는 없었다.
그러던 중, 오랜만에 PageSpeed Insights를 돌려서 살펴보고 있는데 Google Fonts가 생각보다 큰 영향을 끼치고 있음을 알 수 있었다. 사실 예전부터 눈에 띈 부분이긴 했지만 폰트를 안 쓸 수는 없기 때문에 그 정도의 지연은 어쩔 수 없이 감당해야 하는 부분으로 인지하고 있었다. 이와 더불어 구글 폰트(API)를 웹상에서 끌어다 쓰면 GDPR 위반 소지가 있다는 뉴스와 함께 실제 독일의 판례도 있어서 이번 기회에 폰트를 서버에 저장해 사용하는 방법으로 변경해 보았다.
로컬 폰트 사용법은 내용이 길어 워드프레스 로컬 폰트(글꼴) 추가해 사용하기 링크로 대체하고, 여기에서는 로컬 폰트 적용 전후 PageSpeed Insights 점수 변화에 대해서만 소개해 본다.
사용 환경
- 워드프레스 6.4.3
- 워드프레스 테마: GeneratePress 3.4.0 (무료 버전)
- 웹 호스팅 서비스: 클라우드웨이즈(Cloudways) DigitalOcean(Singapore) 2GB 상품
폰트를 서버에 저장하여 로컬 폰트로 호스팅 하는 방법을 적용해 보니 생각보다 웹 페이지 성능 개선이 컸다.
물론, 예전에 무턱대고 큰 이미지를 많이 첨부한 포스트는 이미지 로딩에 가장 큰 부하가 걸리기 때문에 폰트 개선만으로는 점수 상향이 크지는 않았다. 이런 글들은 이미지를 줄여주는 것이 근본적인 대책이 되겠지만 무작정 이미지를 더 압축하거나 사이즈를 줄일 수 없는 경우도 많다. 이 경우 Lazy Load를 적용하면 모든 이미지를 한 번에 로딩하는 것이 아니라 화면에 나타나는 이미지만 로딩시키는 식으로 부하를 줄일 수 있어 어느 정도 점수 상향이 가능하다. a3 Lazy Load 플러그인을 사용해 보고 있는데 무료임에도 불구하고 Threshold를 비롯해 다양한 옵션이 제공되고 있어 꽤 유용한 느낌.
나의 경우만 봐도 포스트마다 성격이 다르고, 결국 사람마다 사용 환경이 다를 수밖에 없어 단순히 로컬 폰트를 이용하는 것만으로 성능 개선이 이루어질 수는 없겠지만, PageSpeed Insights의 진단 결과에서 Google Fonts의 지분이 크게 나온 다면 시도해 볼만한 것 같다.
구글 웹 폰트(API)를 끌어다 쓴 경우
로컬 폰트로 호스팅 한 경우
