[CDN] CDN을 사용하면 성능이 좋아질까?
CDN(Content Delivery Network)을 사용하면 물리적으로 멀리 있는 거리에서 데이터를 요청했을 때 더 빠르게 데이터를 받을 수 있다고 합니다. CDN을 사용하였을 때와 사용하지 않았을 때의 차이를 보여주는 사이트도 많습니다.
CDN을 사용하면 성능이 좋아지는지 직접 S3와 CloudFront를 이용하여 네트워크 속도를 측정해 볼려고합니다.
측정 환경
- Chrome browser(localhost)
- 컴퓨터 M1 프로 사용
- 네트워크 동일
- 사진 10개(각 4.2MB)
- html image tag(프레임워크 X)
물리적으로 먼 거리를 측정하기 위해 S3 bucket을 미국 버지니아 북부로 만들어서 성능 측정을 해보았습니다. 성능은 chrome 개발자 도구의 network 부분을 이용하여 했고 각 테스트는 3번씩 하였습니다.
S3를 이용해서 데이터를 받았을 때
S3에서 데이터를 받았을 때 시간은 다음과 같습니다. 10장 전부 받아오는데 걸리는 평균 시간은 9.86s였습니다.
S3 앞에 CloudFront를 사용하여 데이터를 받았을 때
CloudFront를 이용했을 때 걸린 네트워크 시간은 다음과 같습니다. 첫 번째 사진의 경우는 CloudFront에 사진이 없어 CloudFront가 S3에 요청을 해서 사진을 갖고 올 때 걸리는 시간 입니다. 나머지 3장의 경우는 CloudFront에 사진이 존재하여 cache hit되어서 사진을 받아오는 경우입니다. 사진 10장이 전부 도착했을 때 걸리는 평균시간은 5.19s 이었습니다.
결론
직접 측정을 해보았을 때 CloudFront에 cache가 되었을 때 데이터를 받아오는 시간이 더 빨랐습니다. S3의 위치가 미국 버지니아 북부에 있기에 성능에서 차이가 많이 있을꺼 같았지만 생각보다 차이가 많이 나지는 않았습니다. 최대한 같은 환경에서 측정을 하려고 했으나 조금의 오차가 있었던게 아니었던 싶습니다. 좀 더 크게 생각을 해보면 AWS 관점에서도 차이가 있습니다. Cloudfront에 요청을 보내면 처음에만 S3에 요청을 보내고 그 후에는 cache된 이미지를 보내줍니다. 하지만 S3만 사용하는 경우 S3에서 계속 응답을 하기에 비용면에서도 차이가 납니다.
Cloudfront를 사용하더라도 사진을 받아오는 시간이 느리기에 다른 방법으로 성능 개선이 필요합니다. 네트워크 개선보단 사진 자체에 대한 개선이 필요합니다. 사진의 확장자가 jpeg가 아니라 webp를 사용하는 방법도 있습니다. 또한 많은 사진을 한 번에 필요로 하지 않을 때 lazy loading을 통해서 현재 페이지 rendering을 개선할 수 있습니다.
※ 혼자 공부하며 정리한 내용이니 틀린 점이나 궁금한 점이 있으면 댓글 부탁드립니다.