이전 블로그에서는 Next/Image를 사용하여 드라마틱한 성능 개선을 이루었다.이번 블로그에서는 드라마틱한 성능 개선은 아니겠지만 폰트 최적화 및 트리 셰이킹을 통해 좀 더 개선을 해보려고 한다. font 최적화 Lighthouse에서 위와 같은 경고를 볼 수 있었다.이에 관련하여 해결하기 위해 FOIT와 FOUT에 대해 알아볼 필요가 있었다. FOIT(Flash of Invisible Text) FOIT란 웹폰트가 로드되는 동안 텍스트가 일시적으로 사라지는 현상을 말한다. font-display 속성을 지정해 주지 않으면 웹폰트가 아직 로드되지 않은 상태에서 해당 폰트를 사용하는 텍스트가 기본 시스템 폰트로 표시되다가, 웹폰트가 로드되고 나서야 해당 폰트로 교체되는 현상이라고 할 수 있다. FOUT..
