현재 유지/보수 중인 서비스의 performace를 체크한 결과 LCP에서 큰 font 용량으로 인한 딜레이를 최소화하기 위해 정리하고 개선한 기록입니다.
(해당 프로젝트에 투입된지는 두 달가량된 상태입니다.)

문제점

최근 공부하게 된 LCP를 개선해보고 싶어 현재 서비스 중인 프로젝트의 lighthouse 체크해 본 결과입니다. 대부분 양호한 편이었지만 LCP가 느린 상태였고 주요한 원인은 용량이 큰 woff형식의 폰트였습니다.

웹 폰트가 렌더링되는 과정과 이를 최적화 방법

폰트를 렌더링하는 과정

CSSOM을 생성하는 과정에서 외부 웹 폰트 링크가 다운로드 완료될 때까지 브라우저는 해당 자원의 콘텐츠 렌더링을 차단하게 됩니다.

웹 폰트 사용법

CSS의 @font-face 규칙을 사용해 적용합니다. @font-face 규칙에는 두 가지 세부 속성이 있습니다.

• font-family: 사용할 폰트의 이름을 지정
• src: 폰트 파일의 경로와 폰트의 형식을 지정. url에 경로 설정, format에 폰트 파일의 형식 설정

폰트 최적화 방법

1. 폰트 용량 줄이기

WOFF 2.0 형식

woff2 형식은 woff 형식의 30-50% 압축된 형식이며 IE를 제외한 모든 브라우저에서 지원하고 있습니다.

서브셋 폰트

서브셋 폰트는 노란색으로 표시된 글자와 같이 실생활에서 거의 사용되지 않는 글자를 폰트 파일에서 제거한 폰트입니다.

2. preload 옵션으로 먼저 로딩하기

<link rel="preload" href="./nanumGothic.woff2" as="font" type="font/woff2" crossorigin="anonymous">  

preload 옵션을 사용하면 CSS 파일보다 먼저 웹 폰트 파일의 다운로드를 시작합니다. preload 옵션으로 다운로드하는 리소스가 많아지면 첫 렌더링 시간이 길어지므로 중요도가 높은 리소스만 지정하는 것이 좋습니다.

프로젝트에 적용되어 있던 코드와 소스 변경

현재 프로젝트에서 이미 preload로 로딩되고 있었기에 woff 용량을 줄이는 것이 개선할 수 있는 방법이라고 생각하고 Pretendard의 subset 폰트를 검색해 pretendard github를 찾았고 코드를 변경해보았습니다.

이전 코드

 <link
    rel="preload"
    href="https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff"
    as="font"
    crossOrigin="anonymous"
 />

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
    format('woff');
  font-weight: 400;
  font-style: normal;
}

변경 코드

 <link
   rel="stylesheet"
   as="style"
   crossOrigin="anonymous"
   href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-dynamic-subset.css"
 />

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-dynamic-subset.css');

결과

파일 형식이 woff2로 변경되어 이전과 달리 enormous network payloads가 사라지고 LCP 또한 개선되어 performance가 향상된 것을 확인할 수 있었습니다.

참고자료

https://d2.naver.com/helloworld/4969726
https://wit.nts-corp.com/2017/02/13/4258
https://velog.io/@ken1204/%EC%9B%B9-%ED%8F%B0%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B0%80%EC%9D%B4%EB%93%9C
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf