[ Feat ] 이미지, SVG 파일 최적화

[seueooo]

🔥 Related Issues

• close [ Feat ] SVG 최적화하기 #205

✅ 작업 리스트

• svgo 설치 후 모든 svg 파일 최적화
• png 파일들 webP로 포맷 변경
• cdn 활용
• 폰트 에러 해결

🔧 작업 내용

LCP 개선을 위해 이미지, svg 파일 최적화를 진행했습니다.

1️⃣ svgo 설치 후 모든 svg 파일 최적화

• 각 파일마다 용량 대략 10~30% 정도 줄어듦

2️⃣ png 파일들 webP로 포맷 변경

• 모든 png 파일들을 png 대비 26%, jpg 대비 25~34% 더 나은 효율을 갖고있는 webP 포맷으로 변경해주었다.
• 따로 webP를 지원하지 않는 브라우저는 대응하지 않았다. ( 서비스 특성상 크롬에서만 사용하므로)
• 원래의 png파일과 webP로 변환한 파일의 용량을 비교해보면 30-40% 정도 축소된 것이 보인다.

3️⃣ cdn 활용

• 위에 작업들로 용량이 많이 축소됐지만, LCP 점수의 향상이 미미하여 cdn을 활용했다.
• 서버에 이미지 파일을 올리고, 다음과 같이 cdnUrl 뒤에 해당 이미지 이름.포맷형식 을 입력해주면 된다.

const cdnUrl = import.meta.env.VITE_IMAGE_CDN_URL;
<div
	className="relative flex h-[108rem] w-[192rem]"
	style={{ backgroundImage: `url(${cdnUrl}img_timer_bg.webp)` }}
>

• 현재 모든 이미지 파일들이 정적 이미지이므로 Cache-Control 헤더를 public, max-age=86400으로 설정하여 24시간 동안 캐시하도록 설정했다. 캐시를 이용해 로드 시간을 단축하여 LCP를 개선하려고 하였다.
• 500바이트 이상인 파일들은 cdn을 활용하도록 했다.

4️⃣ 폰트 에러 해결

• 다음과 같은 에러가 계속 발생해왔는데 index.css의 폰트 불러오는 부분을 다음과 같이 수정해서 해결했다.
• 최신 브라우저에서 지원하는 woff2 포맷의 가변 폰트를 먼저 로드하고, 구형 브라우저에서 사용할 수 있는 woff 포맷의 폰트도 제공하여 호환성을 유지시켰다. woff2는 압축률이 더 높아 파일 크기가 작아 성능을 향상시킬 수 있음
• font-display: swap;으로 폰트가 로드될 때까지 시스템 폰트를 먼저 표시하고, 폰트가 로드되면 해당 폰트로 교체하도록 설정 -> 폰트 로딩 지연이 페이지 렌더링 속도에 영향을 미치지 않도록 함

🧐 새로 알게된 점

• cdn 활용해서 이미지 파일 불러오는 법
• svg, 이미지 파일들 최적화시키는 법
• 네트워크, 퍼포먼스 탭 분석하는 법

🤔 궁금한 점

• 캐싱 전략을 세워본적이 없어서, 정적 이미지일때 어떤 캐시 정책을 적용하면 좋을지 제안 있으시면 코멘트 부탁드려요.
• 500바이트 이상인 파일들은 cdn을 활용하도록 했는데, 이미 이미지 포맷 변경과 최적화 등으로 용량을 많이 줄인 상태에서 cdn 사용이 유의미한가 싶긴 했습니다.(svgo와 포맷 변경으로 최적화한 이후 로드 시간에 큰 영향을 줄정도로 많은 용량을 차지하는 파일이 없었음)
• 결론은 LCP 향상이 아주아주 미미한데 그 이유를 모르겠습니다ㅜ
• pr 작성하다가 새롭게 발견했는데, 실제 파일들의 용량은 최적화 이후가 월등히 작아졌음에도 불구하고 network 탭의 size를 비교하면 최적화 이전보다 크게 나타나는 것을 발견했습니다.. 찾아보니 네트워크 탭에서의 Size는 해당 파일이 실제로 전송된 후의 크기로, http 헤더나 캐시 등의 영향으로 실제 파일의 크기보다 크게 나타날 수도 있다고 합니다..

원인이 이거인가..일단 다음 태스크 진행을 위해 pr 올리고 나중에 한 번 다시 분석해보겠습니다..