인프런 OG 이미지, 속도 35배 빨라졌어요!
by DD
2년 전
조회수 1
@vercel/og를 활용하여 동적 OG 이미지 생성, CDN 캐싱 적용으로 응답 속도 13배 향상
satori와 sharp 라이브러리 조합으로 이미지 변환 성능 개선, RPS 13배 증가 달성
Node.js Inspector를 활용, 폰트 캐싱 문제 해결하여 OG 이미지 생성 서버 부하 35배 감소
CDN 캐싱 전략: CloudFront 활용
CDN 캐싱은 CloudFront를 통해 동적 생성된 OG 이미지의 응답 속도를 획기적으로 개선한다. 구체적으로, Cache Key 설정을 통해 이미지 내용 변경 시 즉시 반영되도록 했다. 따라서, CDN 캐시 적중률을 높여 사용자 경험을 향상시켰다.
이미지 변환 라이브러리 비교: sharp vs resvg-js
SVG를 PNG로 변환하는 과정에서 sharp와 resvg-js의 성능 차이를 확인했다. sharp는 이미지 리사이징에 특화되어 있어, 단순 변환 작업에 적합하다. 반면, resvg-js는 고품질 렌더링에 초점을 맞춰 성능 저하를 보였다.
Node.js 성능 최적화: 폰트 캐싱
Node.js Inspector를 활용하여 satori 라이브러리의 addFonts() 함수 병목 현상을 발견했다. 폰트 객체를 변수로 선언하여 메모리 주소를 고정, 폰트 캐싱을 가능하게 했다. 따라서, RPS 2배 향상이라는 놀라운 결과를 얻었다.
