[Web Font] 웹 폰트를 사용하여 페이지 로딩 속도 개선

프로젝트를 마무리 짓고, 여러 사람들의 피드백을 받던 도중 사이트 속도 개선이 필요할 것 같다는 얘기를 듣게 되었다.

 

문제가 무엇일까 화면을 뜯어보던 중, 4.7mb 달하는 폰트가 눈에 가장 먼저 들어오게 되었다. 요즘 시대에 4.7mb가 무슨 문제일까 생각할 수도 있겠지만 매 번 페이지를 들어갈 때마다 4.7mb를 다운로드하고 있는 그 상황을 경험한다면 유쾌할 수 없을 거라고 생각한다.

 

현재 폰트를 불러오는 방식은 로컬 스토리지에 폰트를 저장하고 불러오고 있었다. 프로젝트 내부에 폴더를 만들고 폰트를 저장하여 불러오는 형식이었다.

현재

@font-face {
  font-family: 'beanpoleM';
  src: local('beanpoleM'),
  url('../fonts/beanpoleM.otf') format('opentype');
}

@font-face {
  font-family: 'NotoSansKR';
  src: local('NotoSansKR-Regular'), url('../fonts/NotoSansKR-Regular.otf') format('opentype');
}

해결

위와 같이 저장되어 있는 폰트를 삭제하고, 웹 폰트에서 바로 불러오는 방법을 사용해보려고 한다.

 

왜냐하면 웹 폰트의 경우, 다운로드한 폰트 파일을 캐시에 저장하고, 다음에 웹 페이지에서 해당 폰트를 사용할 때는 서버에서 폰트 파일을 다운로드하는 것이 아니라 캐시된 폰트 파일을 사용하게 되므로 웹 페이지의 로딩 속도를 빠르게 할 수 있기 때문이다.

 

기존 CSS와 파일을 삭제한 후, 새롭게 웹폰트에서 불러오는 CSS를 작성하였다.

@font-face {
  font-family: 'beanpoleM';
  font-weight: 500;
  font-style: normal;
  src: url('https://cdn.jsdelivr.net/gh/webfontworld/ssf/BeanPoleMedium.eot');
  src: url('https://cdn.jsdelivr.net/gh/webfontworld/ssf/BeanPoleMedium.eot?#iefix') format('embedded-opentype'),
  url('https://cdn.jsdelivr.net/gh/webfontworld/ssf/BeanPoleMedium.woff2') format('woff2'),
  url('https://cdn.jsdelivr.net/gh/webfontworld/ssf/BeanPoleMedium.woff') format('woff'),
  url('https://cdn.jsdelivr.net/gh/webfontworld/ssf/BeanPoleMedium.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

첫 번째 새로 고침

CSS를 수정하고 바로 새로고침을 눌러보니, disk cache로 변경되고, Time 역시 1/4에서 1/20까지 줄어든 것을 볼 수 있었다. 하지만 여기서 끝이 아니라 다시 한번 새로고침을 누르게 되면

두 번째 새로고침

memory cache로 변화하면서 time이 0에 수렴하는 것을 확인할 수 있다.

 

결론

294kb 8ms, 4.7mb 74ms가 소요되었던 용량과 시간을 0ms로 단축 시킬 수 있었다.