1. 폰트 preload와 외부 CDN 제거
처음에는 해커톤이 목적이었기 때문에 빠른 완성이 중요해서 폰트를 사용하기 위해 url을 사용했다.
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
다음은 위와 같은 메세지를 확인하고 폰트 로딩을 최적화하고, 외부 CDN을 제거한 과정이다.
1. 폰트 로딩 최적화: preload 사용
폰트를 내부에서 받아오고, preload를 사용하여 렌더링 전에 미리 로드함으로써, 폰트가 즉시 적용되도록 하였다.
이는 폰트 파일을 렌더링 후에 로드하게 되면, 종종 기본 폰트로 표시되다가 폰트가 로드된 후에 정해진 폰트로 변경되는 문제점도 해결할 수 있다.
2. 외부 CDN 제거: jsDelivr 없애기
외부 CDN을 사용하면 서버 응답 시간과 네트워크 요청에 의존하게 된다.
jsDelivr CDN을 제거하고, 폰트 파일을 내부 서버에서 로드하여 서버 응답 시간을 최소화함으로써 불필요한 외부 요청을 줄이고 더 빠르게 리소스를 제공할 수 있도록 해보았다.
(카카오 cdn은 카카오 공유하기에 필요해 없앨 수 없다..)
2. LCP 개선 - webp (x)
해당 컴포넌트에서 mbti 이미지로 svg를 사용했다.
webp는 구글이 만든 웹 이미지에 뛰어난 무손실 및 손실(lossy) 압축을 제공하는 최신 이미지 형식이라는 이야기를 듣고, 작은 용량의 이미지를 사용하면 lcp를 개선할 수 있을 것 같아서 해당 컴포넌트에서 사용하는 이미지를 모두 webp로 바꿔보았다.
하지만 위 사진처럼 약 2배가량 더 큰 용량이 되어버려 아쉽게도 webp를 적용하여 더 나은 성능을 기대할 수는 없었다.
복잡한 사진이 아닌 간단한 아이콘과 같은 경우는 webp의 용량이 더 커질 수도 있다고 한다.
다른 방법으로 preload를 생각해봤지만 preload를 하기에는 각 mbti에 해당하는16가지의의 이미지를 모두 받아오면 필요없는 이미지까지 받아오게 되어 기대한 바를 충족시킬 수 없어 구현하지 않았다.
**
내용 중 잘못된 부분이나 보완할 점이 있다면 편하게 댓글로 알려주시면 감사하겠습니다!