서론

소리담 프로젝트가 막바지에 달함에 따라 리팩토링을 위해 lighthouse로 성능 평가를 진행하였다.

초기에는 Render Blocking request가 마음에 걸렸다.
진단 결과에 따라 css가 문제의 원인이라 나왔기 때문에 당연히 내가 구축한 design-system인 soridam-design-system 내에 선언한 globals.css와 본 프로젝트의 globals.css가 유사했고, soridam-design-system 구축시 어차피 본 프로젝트에도 적용할 것이기 때문에 본 프로젝트를 기반으로 tailwindcss 변수를 선언하였다.

초기 문제의 원인이라 생각했던 css 중복 문제

design-system과 본 프로젝트 모두 tailwindCSS를 사용하고 있었기 때문에 css purge를 적용하기로 마음먹었다. purge CSS란 웹 프로젝트에서 사용되지 않는 CSS를 자동으로 제거하여 파일 용량을 줄이고 로딩 속도를 향상시키는 최적화 도구이다.

tailwindcss가 v3에서 v4로 전환 후 tailwind.config.ts의 설정 비율이 줄어들고 있는 추세에서 css purge를 적용하기 위해서는 tailwind.config.ts를 작성해야 했기에 작성하면서도 이게 맞나 싶었으나 적용 이후 자료를 찾던 중 알게되었다. tailwindCSS v4로 전환되면서 기본적으로 css purge가 별도의 설정이 없어도 적용된다는 것이었다.

font 다운로드 속도

초기 랜더링 속도를 개선하기 위해 다른 요소들을 찾던 중 아래와 같은 Network dependency tree를 찾게 되었다.

프로젝트에서 웹 기본 폰트인 Pretendard 글꼴을 적용하기 위해 제공되지 않는 웹이 있을 수 있다하는 gpt의 추천을 받아 woff2형식의 글꼴을 vs code 내에 넣고 tailwindcss로 지정하였으나 로딩에 7~8초 정도의 영향을 줄 것이라고는 생각지 못했다.

조사 후 font subset이란 것을 적용하면 이를 어느정도 개선할 수 있다는 것을 알게 되었다.

Font Subset이란?

font subset에 대해 알아보기 전 web font에 대해 알아보자면
web font는 일반적으로 우리가 아는 글꼴로써
web font를 사용한다면 사용자에게 해당 폰트가 없더라도 개발자 및 웹 디자이너가 디자인한 웹 이미지 그대로 보여줄 수 있게 된다.
다만 web font의 용량 자체가 무거워서 로딩 속도에 영향을 줄 수 있다고 한다.

이에 따라 나온 것이 Font subset이다.
Font subset이란 불필요한 글자를 제거하고 사용할 글자만 남겨둔 font를 말하는 것이다.
이렇게 말하면 와닿지 않으나, 한글에 있어서 중요한 문제가 되는 것이 한글은 자음과 모음으로 구성되어 있어 글자 수가 영어에 비해 상당히 많고, 이에 따라 용량이 커지게 된다.
그러나 실제 사용되는 글자는 한정적으로 '걁'이나 '뷂'같은 글자를 사용할 일은 거의 없기 때문에 이러한 글자를 제거한 것이 font Subset이다.

Font Subset 적용

적용방법은 여러가지가 있다.
onlinefontconverter.com과 같은 웹사이트에서 font를 subset으로 전환하여 사용하거나 요새는 무료로 변환해주는 tool들이 존재하는 것으로 알고 있다.
나는 github에서 Pretendard를 subset으로 전환한 repo를 발견해서 해당 repo의 link태그를 활용하였다.

• github repo: https://github.com/orioncactus/pretendard

결과

실제 적용결과는 어떻게 되었을까?

단순 결과만 놓고 비교했을때 대략 6000ms, 즉 6s정도만 감소하였다.
프로젝트 내 다운로드한 font가 link, 즉 script로 font를 불러오는 것보다 더 빠를 것임에도 load되는 속도가 더 빨라졌다는 것을 통해서
font 자체가 얼마나 무거운지, 로딩되는 속도에 얼마나 영향을 미치는지 알 수 있었다.