Runtime Image Converter

현재 유지보수로 일하고 있는 회사 사이트의 Lighthouse를 돌려보니 Performence 점수가 너무 낮았다.
대부분 이미지 문제로 이미지 로딩을 개선하면 많은 부분 나아질 것으로 생각된다.

업로드시 resize 및 webp로 변환된 것을 추가해도 되지만, 서버파트를 내가 맡고 있는게 아니라 마음대로 수정하기가 애매하다, 또한 nhn클라우드를 사용하고 있어 nhn 내의 cdn을 사용할까 찾아보았으나 webp 포멧을 지원하지 않는다.

그래서 만들기로 했다.

앞단에 nginx로 content cache 서버 올려놓고 뒷단에 image converter 서버를 구동하는 구조로 image converter 서버는 이미지 요청을 받으면 nhn object storage에서 이미지를 다운받아 변환 후 응답을 보낸다.

시퀀스 다이어그램.

캐시되기 전 최초의 이미지 요청시 기존 nhn object storage의 이미지를 바로 엑세스 하는 것에 비해 대략 2~3배가량 느렸다. nhn object storage의 원본이미지 요청시 평균적으로 150ms가 소요되나 image converter 서버를 통해 resize 및 transform된 이미지를 받을 경우 평균적으로 300~450ms가 소요되었다.
이 문제는 업로드시 캐시서버에 request를 보내는 것으로 해결하면 될 것같다.

구성 후

서드파티 라이브러리와 다를 서비스의 이미지들 때문에 여전히 Lighthouse의 Performence 점수는 낮다. 그러나 TTI, LCP, FCP등 상당부분 향샹된 것을 확인할 수 있었다.

TTI(약 48% 감소), LCP(약 82% 감소), FCP(약 15% 감소)

#개으른#개발자#cuuDev