폰트 : 렌더링 차단 소스 제거하기

1️⃣ 문제 상황

성능 최적화를 하기 위해서 lighthouse에서 검사를 하고 있었다. 나머지는 대부분이 LCP 관련 문제라서 다 해결을 했지만, 나머지 하나 : 폰트에 관한 렌더링 차단 소스였다. 처음에 폰트를 사용하는데 어쩔 수 없는 성능 포기인건가 생각을 했지만 찾아본 결과 해결책이 있었다.

2️⃣ 문제 이유

이상적인 단계 :
Request -> Build DOM -> Build CSSOM -> First Paint -> Paint Text

위 단계처럼 DOM을 빌드한 뒤에 CSSOM을 빌드해야 되는데, css가 font를 필요하다는걸 알고 CSSOM을 빌드하기전에 폰트를 GET하고 응답을 받은 후에 CSSOM을 빌드할 수 있게 된다.
이렇게 중간에 추가되는 과정을 렌더링 차단 리소스라고 하는 것 같다. 이 과정을 없애는 해결책을 알아보자

3️⃣ 해결 방법

먼저 폰트를 가져오는데 2가지 방식이 있다.

• <link> : 병렬방식으로 처리를 한다. rel(가져올 문서와의 관계
  )과 href(가져올 문서의 경로)를 써줘야한다.
• @import : 직렬방식으로 처리를 한다. css파일에 쉽게 import시켜서 쉽긴 하지만 직렬방식이라 성능저하가 있다.

위 정보를 보면 일단 link를 쓰는게 현명한 거 같다. 하지만 여기서 끝이 아니다. 그냥 link 태그를 쓰면 병렬방식으로 해도 CSSOM이 빌드되기 전에 응답을 받아야 하는 것은 똑같아서 더해줘야 하는게 있다.

<link rel="stylesheet preload" as="style" href="" />

rel에 preload를 더해주는 것이다. 이렇게 하면 CSS파일을 다운받기 전에 위 link자원을 먼저 다운 받아서 렌더링 자체도 더 빨리 끝나기 때문에 렌더링 차단 시간도 더 줄어든다고 한다.

4️⃣ 결과

위 방법을 적용하고 성능이 96점에서 99~100점을 도달할 수 있었다.