[쇼핑몰 구축기] 속도 개선을 위한 구글 폰트 로딩 방지법

앞서 가장 효과적으로 웹폰트를 적용하는 방법에 대해서 살펴 보았습니다. 그러한 방법을 통해서 자신이 원하는 웬폰트 중심으로 콘텐츠가 보여지도록 설정했죠.

그럼에도 불구하고 대부분의 테마나 플러그인은 대부분 구글 웬폰트를 사용하도록 프로그램되어 있다보니 자동으로 구글 웬폰트를 로딩합니다. 이는 불필요하게 속도를 저하시키고 슬데없는 트래픽을 발생시킵니다.

여기에서는 속도와 트래픽에 좋지않은 영향을 미치는 구글 폰트가 로딩되지 못하도록 막는 방법에 대해서 살펴봅니다.

[쇼핑몰 속도 개선] 구글 폰트 로딩 방지법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[쇼핑몰 속도 개선] 구글 폰트 로딩 방지법

워드프레스의 대부부능 테마나 플러그인들은 기본적으로 구글 폰트를 사용하는 것을 전제로 프로그램됩니다. 더우기 워드프레스 자체도 구글 폰트 사용을 당연시하고 구글 폰트 로더를 기본으로 제공하고 있기도 하죠.

그러나 구글 폰트는 구글 서버에서 폰트를 가져오고, JS를 사용하므로 중간에 다른 콘테츠 로딩을 막으면서 속도를 저하시키는 원인이 되기도 합니다.

구글 폰트를 적극적으로 사용한다면 큰 문제는 없지만 구글 웹폰트를 사용하지 않는다면 구글 폰트관련 설정 파일들이 로딩되는 것을 막아 최적화할 필요는 있습니다.

1. 구글 폰트 미적용시에도 설정은 로딩된다.

많은 테마에서는 구글 폰트를 사용하지 않는 옵션을 제공합니다.

그러나 이 옵션을 적용해도 다른 플러그인등에서 구글 폰트를 사용하도록 되어 있어서인지 모르지만 구글 폰트 관련 제반 파일들이 로딩됩니다.

https://fonts.googleapis.com/css?....Code language: PHP (php)

이렇게 구글 폰트 관련 설정 내용들이 로딩되면서 테ㅏ에 따라서 50k ~ 250k정도의 용량을 다운받더군요. 대세에 큰 지장은 없지만 일정정도 속도 지연도 발생합니다.

2. 구글 폰트 로딩을 근본적으로 막기 – 플러그인 이용

그러면 구글 폰트를 사용하지 않을 시 구글 폰트 설정 및 폰트들이 로딩되고 다운받아지는 현상을 어떻게 막을 수 있을까요?

구글링을 통해서 구를폰트 로딩을 막는 다양한 코드들을 테스트해 보았지만 효과가 없었습니다.

또한 구글 폰트 사용을 막아준다는 플러그인들이 몇가지 존재합니다.

아래는 “Disable Google Fonts”라는 키워드로 검색한 구글 폰트관련 플러그인들입니다.
Autoptimize와 Disable Google Fonts와 같은 플러그인들이 보이는군요. 그러나 이중에서 제대로 효과를 내는 것은 딱 하나만 보았습니다.

2.1. Autoptimize 플러그인

Autoptimize 플러그인은 다양한 기능과 함께 CSS 파일들을 묶어 다운할 수 있도록 만들어 서버 요청 회수(request)를 획기적으로 줄여줍니다. 저의 경우 106개 정도의 request가 40여개로 줄더군요, 

그러나 서버 요청 회수(request)를 획기적으로 줄어 들어도 전체 로딩 시간은 별 차이가 없더군요. 조금 아이러니하기는 했습니다.

또한 이 플러그인은 Elementor와 궁합이 맞지 않은 것 같았습니다. 이 플러그인을 적용하면 Elementor로 편집한 화면은 설정이 엉키더군요.

예를 들어 메인 페이지 Link color를 화이트로 설정해 놓았는데 플러그인 적용후에는 블랙으로 바뀌어 버립니다. 그리고 다시 변경하려면 또 디자인이 틀어져 버립니다.

또한 이 플러그인은 구글 폰트 사용을 막아주기는 하지만 구글 폰트관련 설정이 로딩되는 것을 막지는 못하더군요. 그래서 지웠죠.

2.2. Disable Google Fonts

Disable Google Fonts 플러그인은 아준 단순하게 구글 폰트 사용만을 막아줍니다.

사용 자체는 막아주지만 구글 폰트와 관련된 설정이 로딩되는 것을 막지는 못합니다.

그래서 이 플러그인도 삭제될 운명에 처했습니다.

2.3. Remove Google Fonts References

이 Remove Google Fonts References 플러그인은 다소 덜 알려져 있지만 제가 테스트했을 시 확실하게 효과를 보여준 플러그인입니다.

“[워드프레스 Tips] 워드프레스에 설치된 구글웹폰트 제거 방법 – 매뉴얼 제거 또는 플러그인 사용”라는 글에서도 이 플러그인을 추천하고 있더군요.

다만 이 플러그인은 지난 3년간 업데이트가 없었습니다. 이는 조금 불안한 요소로 보입니다.

Remove Google Fonts References 적용 후 속도

Remove Google Fonts References 르 적용 후 전체 로딩 속도가 크게 개선된 것은 아닙니다.

왜냐하면 이전에도 구글 폰트 로딩 용량과 숫자가 많지는 않았기 ㄸ문입니다. 구글 폰트 수가 많고 많은 용량을 다운 받는 경우 효과는 클 것으로 보입니다.

아무튼 Remove Google Fonts References 적용 후 테스트해보니 속도도 괜찮게 나왔고 더우기 그글 폰트와 관련된 설정 파일 로딩도 없어졌습니다.

Web Page Performance Test for puripia.com

3. Content-Security-Policy 활용

Content-Security-Policy를 적용하면 등록된 화이트 리스트(White list)만 로딩되고 작동하기 때문에 등록 화이트 리스트(White list)에서 제외하면 외부의 어떤 소스도 작동할 수 없다는 점을 이용하는 것입니다.

이를 응용하면 구글폰트의 외부 로딩을 원천적으로 막을 수 있습니다.

저의 경우 Content-Security-Policy의 style-src를 아래와 같이 세팅했습니다.

여러 유명회사들이 들어가 있는 이유는 이런 저런 서비스를 이용하다보면 이들 회사것을 알게 모르게 사용하게 때문에 화이트 리스트(White list)에 올려 놓았습니다.

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' 'unsafe-eval' *.google.com *.twitter.com *.facebook.com  *.google-analytics.com *.daumcdn.net *.daum.net *.gstatic.com *.naver.net *.naver.com *.inicis.com ;" always;Code language: PHP (php)