웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST)

 

 

 

웹 사이트의 성능을 측정해 보았더니 구글 폰트를 다운 받는데 시간이 꽤 걸렸다.

브라우저 렌더링을 할 때, 폰트 다운로드가 끝날때까지 기다렸다가 다음 태그를 읽어와서 그런 것 같았다.

 

참고 블로그를 읽고 속성을 몇가지 수정해주었더니 놀랄만큼 개선 되었다.

최적화라는 게 대단한 기술과 지식을 요하는 거라고 생각했었는데,

약간의 관심을 더 가지고 찾아본다면 누구나 충분히 할수있는 개선점이라는 생각이 들었다.

 

자, 느낀점은 여기까지로 해놓고 얼마나 개선되었는지 확인하러 가보자

 

 

다음은 폰트 최적화를 위한 노력의 과정을 순서대로 담은 포스팅이다 :)

1. 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) - 이론을 먼저 공부해보자

웹 최적화 - 구글 폰트 속도 빠르게 만들기 (번역)

 

2. 구글 폰트 속도 빠르게 만들기 (TEST)  - 이론을 바탕으로 실서비스 사이트를 개선해보자

웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST)

 

---

웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST)

 

index.html

rel 속성을 stylesheet → preload 로 변경하고 as 속성을 font 로 추가해주었다.

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
/>

<link
  rel="preload"
  as="font"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
/>

 

 

테스트 사이트 1 - 원본

2.55초 나 걸린다.

 

테스트 사이트 1 - 결과 

rel="preload" 를 넣었을때, 2.55초   → 340.55ms 로 줄었다.

 

 

 

 

테스트 사이트 2 - 원본

180.35ms 걸린다 

 

테스트 사이트 2 - 결과1

rel="preload" 를 넣었을때,  189.35ms   → 128.58ms 로 줄었다.

 

테스트 사이트 2 - 결과2

rel="preload" + "&display=swap" 을 넣었을때, 141.67ms 걸렸다.

 

 

 

 

 

 

 

 

ref: https://sia.codes/posts/making-google-fonts-faster/