기존의 문제
요즘의 거의 모든 웹사이트들은 이미지를 같이 활용하기 떄문에 웹 사이트는 이미지와 떼레야 땔 수 없는 사이가 되었습니다. 이것은 제가 만든 애플리케이션도 마찬가지였습니다.
그리하여 웹 성능 최적화에서 이미지 최적화도 불가피한 최적화 항목이 되었고 또한 SPA로 만든 CSR의 웹애플리케이션의 가장 큰 단점인 초기의 느린 로딩 속도도 이미지 최적화를 통해 개선해야 할 필요가 있다고 생각했습니다.
문제 개선
고화질의 사진을 온전히 그대로 보여주지만 첫 페이지의 느린 로딩속도로 좋지 않은 사용자 경험을 제공하는 것 보다는 체감상 별다른 차이를 느끼지 못할 정도의 화질로 낮추어 이미지 용량을 줄임으로써 로딩 속도의 개선이 더욱 사용자에게 좋은 경험을 제공한다고 생각하여 이미지 사이즈를 줄이는 방식으로 최적화를 진행하였습니다.
이미지의 사이즈를 줄여주는 라이브러로 sharp라는 라이브러리를 사용하였고, 이미지를 resizing하는 작업은 cpu의 부하가 큰 작업이기 때문에 aws의 lambda를 사용하여 이미지 resizing 작업을 진행하였습니다.
aws-lambda가 실행되는 환경이 리눅스이고 제가 사용하는 노트북은 맥북이라 mac os체제에 맞게 sharp라이브러리가 설정되어 있었습니다.
그리하여 리눅스 환경인 Lightsail에서 빌드를 통해 sharp라이브러리가 리눅스 운영체제에 맞게 설정되도록 해주었습니다.
resizing 과정은 우선 사용자가 사진을 포함한 컨텐츠를 게시하면 s3에 이미지가 저장되도록 하고 lambda 트리거가 lambda를 불러오고 이미지의 resizing작업을 거친 후 다시 s3에 기존에 이미지가 저장 된 파일이 아닌 다른 경로의 파일로 이미지를 저장하는 방식으로 구성하였습니다.
이렇게 이미지를 resizing 함으로써 대부분의 이미지를 약 85%정도의 용량을 줄여 이미지 로딩 속도를 개선할 수 있었습니다.
기존의 81.1kb였던 이미지 용량을 11.5kb로 줄였습니다.
