인프런에서 "웹 성능 최적화" 마스터패키지를 듣기 시작했다. 성능에 관한 부분은 항상 공부해보고 싶었는데, 회사에서 커뮤니티 아이템을 준비하며 본격적으로 성능 최적화에 관해 공부할 수 있게 되어 아주 기쁘다.

이번에 들은 강의 내용은 이미지 사이즈 최적화.
커다란(용량이 큰) 이미지를 로드할 때는 시간이 오래걸리고 이는 성능 저하를 야기한다.

웹에서 성능 개선이 필요한 부분을 어떻게 찾을 수 있을까?

의외로 성능 확인 툴은 쉽게 사용해볼 수 있었는데, 크롭 개발자 도구에 있는 LightHouse탭을 이용하면 됐다.

우측에서 검사하고자 하는 카테고리와 환경을 고른 후 Generate report 버튼만 누르면 알아서 성능 분석 레포트를 보여준다.

예제 사이트를 분석해본 결과 Properly Size Images라는 진단을 받게 되었다.
이는 이미지를 적절한 사이즈로 줄여서 셀룰러 데이터와 로드 타입을 최적화하라는 의미이다.

얼마나 작게 줄여야할까?

강의에서 말하길, 렌더링하기 원하는 사이즈의 너비를 기준으로 2배 크기로 줄이는 것이 좋다고 한다.

이미지 압축하는 방법

자체 서버에 있는 static한 리소스였다면 직접 이미지를 잘라서라도 올릴 수 있지만, api로 받아온 이미지는 그렇게 할 수가 없다.
이럴 때는 이미지 CDN을 사용한다. (예를 들면, Imgix)

Image CDN이란, 이미지를 사용자에게 보내기 전 특정 형태로 가공(예를 들면, 사이즈 축소 or 이미지 포맷 변환)한 뒤 사용자에게 전달할 수 있도록하는 기술이다.
Image CDN을 사용한 예시는 brunch만 봐도 확인해볼 수 있다.

하지만 이 강의에서는 cdn을 쓰지 않고, Unsplash에서 제공하는 이미지를 프로세싱할 수 있는 getParametersForUnsplash() 함수를 사용해서 이미지 사이즈를 조절해주었다.

function getParametersForUnsplash({width, height, quality, format}) {
  return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`
}

<img src={props.image + getParametersForUnsplash({width: 240, height: 240, quality: 80, format: 'jpg'})} alt="thumbnail" />

이 메소드를 사용하면 Unsplash가 임시 CDN역할을 해준다고 한다.

느낀점

이미지 최적화부터 배우게 되어 정말 흥미로웠다. skeleton을 띄우는 등 얼핏 얘기만 들었던 다른 최적화 방법도 얼른 배우고 싶다.