SVG 파일 크기 최적화해보기 (feat. SVGO)

웹페이지를 개발하고 배포했는데, 큰 용량의 SVG 파일이 많이 들어가는 페이지어서 그런지 렌더링이 오래걸리는 문제가 있었다.

따라서 조금이라도 SVG 파일을 최적화해보고자했다.

 

PageSpeed Insights

객관적으로 점수 측정을 먼저 해보는 것이 좋겠다.

아래의 사이트에 배포된 사이트의 링크를 입력하면 결과를 알 수 있다.

https://pagespeed.web.dev/

PageSpeed Insights

 

먼저 휴대전화의 경우를 살펴보자.

 

데스크톱의 경우도 확인해보자.

 

 

SVGO

SVG 파일의 렌더링 시간을 줄이기 위해 SVG 최적화를 해보자.

SVGO를 설치하고 사용하여 파일 크기를 줄이는 방법을 사용할 것이다.

 

1. SVGO를 설치한다.

npm install svgo -D

 

2. SVG 파일들을 최적화한다.

이 명령어는 public/assets 디렉토리에 있는 모든 SVG 파일을 최적화하고 같은 위치에 저장한다.

npx svgo -f public/assets -o public/assets

 

3. 빌드 스크립트에 다음 스크립트를 추가한다.

빌드 시에 자동으로 SVG 파일이 최적화 하기 위함이다.

"scripts": {
  ...
  "optimize-svg": "svgo -f public/assets -o public/assets",
  "build": "npm run optimize-svg && react-scripts build"
}

 

svgo 를 실행한 결과를 분석해보면,

 

• 대부분의 작은 SVG 파일들(예: icon_tooltip.svg, right-arrow.svg)은 15-50% 정도 크기가 감소하였다.
• 중간 크기의 SVG 파일들(예: landing_6_mobile.svg, treehouse_gray.svg)도 25-55% 정도 크기가 감소하였다.
• 하지만 대형 SVG 파일들(landing_1.svg, landing_1_mobile.svg, landing_3.svg, landing_3_mobile.svg, landing_5.svg, landing_5_mobile.svg)은 거의 최적화되지 않았다.(0-0.5% 감소).

일단 여기까지만이라도 변경사항들을 반영하고, 수치가 달라졌는지 다시한번 측정을 해봤다.

먼저 휴대전화의 경우이다.

 

다음은 데스크톱의 경우이다.

 

 

진단 결과 비교

	휴대전화(최적화 전)	휴대전화(최적화 후)	데스크톱 (최적화 전)	데스크톱 (최적화 후)
성능 점수	35	66	29	50
Largest Contentful Paint	63.2 초	2.7초	12.1초	0.4초
Speed Index	15.1초	2.7초	6.0초	0.9초

 

• 성능 점수
  • 휴대전화과 데스크톱 모두 점수가 향상했다.
• Largest Contentful Paint(LCP)
  • 휴대전화와 데스크톱 모두 크게 감소해서 콘텐츠 로드 속도가 대폭 개선되었다.
• Speed Index
  • 휴대전화와 데스크톱 크게 감소해서 페이지가 시각적으로 완료되는 속도가 크게 빨라졌다.

SVG 파일 최적화로 콘텐츠가 빠르게 로드된고 렌더링되는 점에서 큰 발전이 있었음을 볼 수 있다.