Lighthouse를 이용한 성능 개선 - 이미지 최적화

 

비효율적인 이미지

Opportunities의 가장 첫 번째 항목인 ‘Properly size images’는 이미지를 적절한 사이즈로 사용도록 제안하고 있다. 안에 있는 내용을 보면 적절하지 않은 사이즈의 이미지를 적절한 사이즈로 변경하면 용량을 줄일 수 있다고 말한다.

 

브라우저에서 사용하는 이미지의 크기보다 큰 이미지가 페이지에 제공되면 바이트가 낭비되고 페이지 로드 시간이 느려진다. 그렇기 때문에 적절한 이미지의 크기를 제공하는 것은 중요하다.

 

자체적으로 가지고 있는 정적 이미지라면 사진 편집 프로그램을 이용하여 직접 이미지 사이즈를 조절하면 된다. 하지만 API를 통해 받아오는 경우에는 사진 편집을 직접 할 수는 없다.

 

그렇다면 이미지 크기를 어떻게 줄일 수 있을까?

 

Image CDN

CDN(Content Delivery Network)이란 물리적 거리의 한계를 극복하기 위해 사용자와 가까운 곳에 콘텐츠 서버를 두는 기술을 말하는데, Image CDN은 이미지에 특화된 CDN이라고 할 수 있다. 기본적인 CDN기능과 더불어 이미지를 사용자에게 보내기 전에 특정 형태로 가공(사이즈, 포맷 변경 등)하여 전해줄 수 있다.

 

ex) http://cdn.image.com?src=[img src]&width=120&height=120

- 변경하고자 하는 형태(width, height)를 명시해줄 수 있다.

 

이미지 최적화

getParametersForUnsplash 함수를 만들 이미지 태그에 전달해서 이미지의 크기를 변경해주었다.

 

 

---

 

성능 개선 결과👍🏻

기존 50점이 였던 Performance가 90점으로 향상 된 것을 볼 수 있었다.(사용하는 이미지의 수가 많아서 성능의 큰 영향을 주고 있었구나….🥲)

 

정적인 이미지의 크기와 URL의 쿼리스트링을 통한 이미지 크기를 변경해 줌으로써 화면이 렌더링 되는 속도가 이전보다 확실하게 빨라지는 것을 볼 수 있었다. 평소 1초 2초라는 시간은 순간일 수 있을지 모르지만 웹 어플리케이션을 사용하는 사람에게는 불편함을 느낄 수 있는 시간이다. 그렇기 때문에 성능을 개선하는 것은 무조건적으로 필요하며 개선하기 위해 어떻게 해야하는지를 계속해서 고민하는 자세가 필요하나는 것을 다시 한 번 생각해 볼 수 있었다.

 

---

참고

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=304371832