리액트 웹 성능 최적화 - 이미지 최적화

웹 성능 최적화에는 크게 두가지로 분류가 된다

1. 로딩 성능 최적화

2. 렌더링 성능 최적화

모든 최적화 포인트를 외우고 있으면 좋겠지만, 현실적으로 쉽지 않기 때문에 Audit (Lighthouse)라는 툴을 이용한다.

이렇게 Lighthouse 테스트를 하면, 나의 웹사이트가 성능이 어느정도인지를 점수로 매겨서 보여준다.

Opportunities랑 Diagnostics 섹션이 있는데, 이건 앞서 말했던 두가지 최적화 종류에 해당한다.

Opportunities는 로딩 성능 최적화 부분이고, Diagnostics는 렌더링 성능 최적화 부분이다.

사진을 자세히 보면,

Opportunities에서는 주로 이미지의 용량을 줄이고, 쓸데 없는 js 코드를 줄여라고 적혀있고,

Diagnostics에서는 캐시와 네트워크 관련한 조언을 해주고 있다.

Passed Audits에 적힌 부분은 내 웹사이트가 잘 하고 있는 내용들을 보여준다.

우선 이미지의 용량을 줄여보자

여기 보면 Resource Size와 Potential Savings가 있는데, Resource Size는 현재 이미지의 크기를 나타내고, Potential Savings는 이 이미지가 얼마나 최적화가 가능한지를 보여준다.

저만큼을 더 뺄 수 있다는 뜻이니까, 1번 이미지는 최적화를 진행하면 약 6~7kb의 사이즈로 줄일 수 있다는 뜻이다.

자 그럼 왜 6~7kb면 되는 사진이 270kb정도를 잡아먹고 있는지를 보려면,

이 부분을 확인하면 되는데, Rendered size는 120 x 120px이지만, Intrinsic Size, 그니까 사진 원본은 1200 x 1200px 인걸 볼 수 있다.

이게 무슨 뜻이냐면, Rendered Size를 넓이로 따지면 약 14400인데, 사진 원본은 1440000다보니까 필요 없을 정도로 고해상도의 이미지를 가져오고 있는 셈이다.

근데 요즘 디스플레이 기술이 좋아서 120 _ 120 그대로 가져오는 것 보다는 약 두세배 정도 큰 사진을 가져오는게 조금 더 깔끔해보인다고 한다. 대충 240 _ 240 이거나 360 * 360 정도

그럼 이제 이미지를 줄이는 방법을 알아보자.

이미지를 저장해서 static하게 띄우는거면 그냥 그 이미지 자체의 해상도를 줄이면 되는 일이지만, 일반적으로 api에서 받은 이미지 주소를 띄우기 때문에 직접적으로 해상도를 줄일 수는 없다. 그러면 어떻게 해야할까?

CDN은 Contents Delivery Network의 약자로, 물리적인 거리의 한계를 극복하기 위해 사용하는 기술인데, 유저와 가까운 위치에 컨텐츠 서버를 두는거라고 보면 된다.

근데 Image CDN은 일반적인 CDN과는 약간 다른데, Image CDN은 원본의 사진을 한다리 거쳐서 조정해서 받을 수 있도록 하는 기술이라고 보면 된다.

대표적으로 imgix라는 솔루션이 있다.

Image CDN을 사용하면 원본 사진을 내가 원하는 크기, 그리고 압축도를 조절해서 새로운 주소를 전달받을 수 있게 된다.