서론
sorisoop 프로젝트를 개인 프로젝트로 돌리게 되면서 기존 ReactJS, typescript로 진행하던 프로젝트에서 NextJS, typescript로 전환하게 되었다. 이에 따라 성능 최적화를 새롭게 진행하였고 기본적으로 제공되는 개발자도구의 lightHouse를 활용해 성능 평가를 진행했다.
기본적으로 lightHouse를 활용해 성능 평가를 진행할 경우 chrome에 설치된 extension이 작동되지 않도록 하기 위해 시크릿 모드에서 측정하는 것을 원칙으로 한다. 다만 이 역시도 local환경에서는 코드 변경시 hot reload되거나, 네트워크·빌드·리소스 캐싱 등이 불안정하게 작동하기 때문에 측정시마다 점수가 상당히 다르게 측정된다. 쉽게 말해, npm run dev 명령어를 통해 측정시 점수가 측정때마다 상당히 다르게 측정된다는 것이다. 이에 따라 build 산출물을 통해 성능 평가를 진행하여 평가 점수의 오차를 최대한 줄였다.
-
절차
npm run build->npm run start -
결과
메인 페이지 메인 페이지 Metrics 
map 페이지 map 페이지 Metrics 
search 페이지 search 페이지 Metrics 
save 페이지 save 페이지 Metrics 
sign-in 페이지 sign-in 페이지 Metrics
해당 sorisoop 프로젝트가 mobile 중심의 웹이다 보니 device를 mobile로 두고 주요 페이지들의 성능 평가를 진행한 결과가 위의 이미지들이다.
성능 평가를 진행 후 최상단에는 점수로 그리고 metrics에는 해당 과정이 rendering되기까지의 걸린 시간 등을 다양한 관점에서 second로 표시된 것이다.
더 아래로 내려가면 2가지 중요 요소가 있는데 바로 Insight와 Diagnosis이다. Insight와 Diagnosis는 언뜻보면 유사해보이나 다음과 같은 차이가 있다.
- Insight : 성능에 ‘직접적인 영향’을 주는 핵심 개선 포인트
- Diagnosis : 점수에는 직접 반영되지 않지만, 성능을 이해하는 데 도움을 주는 세부 정보
이 중에서도 모든 주요 페이지에서 보여지는 Insight에는 Font-display라는 것이 다음과 같이 보였다.
이와 같은 경고가 왜 나타날까?
문제의 원인
웹폰트 로딩 중에 텍스트가 보이지 않는 현상이 나타날 때 font-display라는 경고가 발생하게 된다. 이는 font-display를 설정하지 않았기 때문이다.
프로젝트에 설정한 'pretendard'라는 글꼴이 기본 글꼴이기는 하지만 지원되지 않는 웹에 대비하여, 그리고 원하는 화면을 보여주기 위해 font를 직접 vs code에 넣었고 globals.css에 다음과 같은 형식으로 넣었다.
@font-face {
font-family: "Pretendard";
src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}font-display가 없음에 따라 브라우저는 “폰트가 로드될 때까지 텍스트를 숨김”으로 동작한다.
font-display 속성을 비교하면 다음과 같다.
| 옵션 | 설명 | 장점 | 단점 |
|---|---|---|---|
| auto (기본) | 브라우저 기본 동작 (대부분 블로킹) | - | 폰트 로드 중 텍스트 숨김 |
| block | 폰트 로드될 때까지 텍스트 숨김 | 글꼴 일관성 | 매우 느림 |
| swap | 기본 폰트로 즉시 표시, 이후 교체 | 빠름, UX 좋음 | 폰트 교체 시 살짝 흔들림 |
| fallback | 약간 기다렸다가 swap | 균형형 | 약간 지연 |
| optional | 폰트 로드 실패 시 교체 안함 | 네트워크 절약 | 폰트 미적용 가능 |
즉, 우리는 경고에 따라 font-display를 swap으로 설정해주면 간단하게 해결할 수 있다.
@font-face {
font-family: "Pretendard";
src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap; /* ✅ 추가 */
}font-display: swap; 적용후 성능 평가
font에 관련된 css 사항을 fonts.css로 옮긴 후 font-display: swap;을 적용하였다. 이후 성능평가를 재시도한 결과 다음과 같이 나타났다.
- 결과
메인 페이지 메인 페이지 Metrics 
map 페이지 map 페이지 Metrics 
search 페이지 search 페이지 Metrics 
save 페이지 save 페이지 Metrics 
sign-in 페이지 sign-in 페이지 Metrics
performance 평가가 떨어진것도 오른것도 존재했지만 font-display 경고는 모두 사라졌다. 당연하겠지만 글자가 많이 사용된 main page에서 performance평가가 기존 77점에서 81점으로 상승됐으며 FCP가 0.1 ~ 0.3s정도 감소하였다.
결론
이번 기회를 통해 lighthouse 성능 평가를 어떻게 안정적으로 평가하는지, font-display 속성에 대해 알 수 있게 되었고, 웹 폰트를 어떻게 적용하는지에 따라 FCP에 영향을 미칠 수 있다는 것을 알게 되었다. 가장 시급한 성능은 map 페이지지만 차근차근 85점 이상의 성능을 목표로 올려야겠다.
