개인프로젝트 페이지 로딩 속도 개선 - WebP

로딩 속도를 테스트 한 이전 포스트를 토대로 이미지를 압축하고 사용하지 않는 코드를 삭제해봤다.

페이지 로딩 속도 테스트 후 리팩토링 계획

 

그러던 중 알게된 지식과 과정을 공유한다.

 

---

 

이미지 리사이징

내가 테스트를 진행한 라이트 하우스에서 안내하는 방법을 참고해서 이미지를 어떻게 하면 좋을 지 고민해 보았다.

 

처음으로 시도 한 방법은 기존 이미지 크기에 비해 작은 이미지를 하용하고 있기 때문에, 이미지 자체를 작게 만드는 것이었다.

평균적으로 60% 이상의 압축을 진행했고, 렌더링 속도도 4.26초에서 2.04초로 유의미하게 줄어들었다.

 

하지만 아직도 로딩 속도가 느려 더 개선해야 할 이유를 느껴 찾아 본 결과 WebP를 사용해 보기로 결정하였다.

 

WebP

어도비 공식문서에 자세한 설명이 나와있어 Webp에 대해 이해하는 데 도움을 얻을 수 있었다.

 

Webp란?

인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷이다.

 Google 개발자는 무손실 WebP 이미지가 PNG보다 최대 26%까지 줄어들 수 있다고 강조한다.

 

webp는 래스터 파일의 일종이다.

래스터 파일은 개별 픽셀로 구성되는 반면, 벡터 파일은 수식과 패스로 구성된다.

래스터 파일과 벡터 파일의 차이점

 

해상도

래스터 파일은 벡터 파일보다 더 다양한 색상을 표현하고, 더 유연한 색상 편집을 지원하며, 빛과 음영을 더욱 세밀하게 보여준다. 하지만 픽셀을 이용하기 떄문에 크기를 조절하면 이미지 품질이 저하된다. 확대 시 이미지가 흐려지거나 픽셀화 현상이 나타나면 래스터 파일이다.

 

벡터 이미지 파일의 경우 크기, 비율, 모양을 아무리 변경해도 이미지 품질이 저하되지 않는다. 벡터 파일은 명함에서 옥외 광고판까지, 다양한 크기의 매체에 표시되어야 하는 이미지(예: 로고)에 주로 사용한다.

 

파일 크기

래스터 파일은 수백만 개의 픽셀로 이루어져 있고 세부 정보가 매우 많으므로 벡터 파일보다 크다.

벡터 파일은 디자인을 결정짓는 수학 공식만으로 구성되어 있어 래스터 파일보다 훨씬 용량이 작은 포맷이다.

 

WebP 파일의 장점

• 웹 페이지가 빠르게 로드 되어, 유저의 이탈을 막을 수 있다.
• WebP 포맷은 Google Chrome, Microsoft Edge, Mozilla Firefox 등 다양한 웹 브라우저와 호환된다.
• WebP는 웹 사이트 이미지를 관리하기 쉬운 크기로 압축하므로, 파일 저장 공간이 여유롭습니다.

 

WebP 파일의 단점

• WebP 파일 포맷은 인터넷을 염두에 두고 설계되었으므로 오프라인에서 이미지를 사용하는 경우 좋지 않다.
• WebP 파일 포맷은 폭넓은 호환성을 가지고 있지만 Internet Explorer 등 일부 옛 브라우저의 경우, WebP 이미지를 지원하지 않는다.
• 약간의 압축으로도 이미지 품질이 저하될 수 있습니다. 고품질 이미지로 작업해야 하는 경우 지양해야한다.

실제로 단점 3번 같은 경우 이미 압축을 진행한 이미지여서 그런지 webp로의 변환을 실패하는 케이스도 있었다.

 

가장 큰 차이를 보이는 부분은 배포였다!

이미지를 압축하기만 했을 때보다 webp를 사용한 경우의 빌드 속도가 30%정도로 줄었다.

페이지 로딩 속도는 2.06초에서 1.76초로 실제 이미지 압축률에 비해서는 속도가 높아진 느낌은 아니었다.

 

 

 

---

이미지 리사이징과 webp를 이용한 개선결과는

1. 컨텐츠 용량 90% 감소
2. 빌드 속도 2분 55초에서 40초로 80% 개선
3. PageSpeed Insights 검사 결과 성능 67에서 94로 상승

 

이 외에 CDN과 캐시 정책을 통한 웹사이트 성능 상승을 다음에 진행 해보려고 한다!