LCP 개선하기 - CloudFront(CDN) 사용하기
date
Mar 22, 2024
slug
Improving-lcp-using-cloudfront
author
status
Public
tags
Optimizing Performance
summary
type
Post
thumbnail
category
updatedAt
Jun 9, 2024 01:40 PM
LCP(Large Contentful Paint)란
뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정합니다. 이를 이용해 주요 컨텐츠가 유저에게 보이는 시간을 알 수 있습니다.
LCP time(in seconds) | Color-coding |
0-2.5 | Green(fast) |
2.5-4 | Orange(moderate) |
Over 4 | Red(slow) |
서비스 LCP 측정 결과
페이지 | pc/m | 기본 | preconnect, preload, fetchPriority, CloudFront | Lambda@Edge |
메인 | pc | 1s | ㅤ | ㅤ |
ㅤ | mobile | 4.3s | 3.7s | ㅤ |
프로모션 | pc | 3.8s | 1s | ㅤ |
ㅤ | mobile | 21.4s | 4.9s | ㅤ |
CloudFront 사용의 기대 효과
사용자가 S3에 직접 접근하지 않고 CloudFront를 통해 이미지에 접근할때의 장점
- 콘텐츠 캐싱을 통한 S3 부하 감소
- Edge Location을 통한 응답속도 향상
- HTTPS를 사용한 콘텐츠 보안 유지
1. CloudFront 생성
원본
- OAC(권장, OAI는 레거시)를 사용해 S3 Bucket에는 CloudFront만 접근 가능하게 하고, 사용자는 CloudFront를 통해서만 파일 접근 가능하게 합니다.
- CloudFront가 접근할 S3 Bucket의 퍼블릭 접근을 막습니다.
기본 캐시 동작
방화벽
설정
- CloudFront는 Custom SSL 인증서를 적용해서 사용하기 위해서는 버지니아 북부 리전으로 생성해야합니다. 저는 Lambda@edge까지 곁들여 사용하기 위해 반드시 버지니아 북부 리전을 선택했습니다.(Lambda@edge는 버지니아 북부 리전만 지원)
2. S3 편집 또는 생성
객체 소유권 편집 ACL 활성화됨, 객체 라이터 선택
퍼블릭 액세스 차단
연결 결과 확인
프로젝트 env의 S3 URL을 CloudFront 배포 도메인 이름으로 변경하면, 요청 URL이 CloudFront로 변경되고 X-Cache는 Hit from cloudfront가 출력되어 연결 된 것을 볼 수 있습니다.
Cloudfront에서 캐싱 지표 확인하기
Cloudfront > 인기객체 메뉴에서 확인할 수 있는 지표
지표 | 설명 |
객체 (Object) | 객체에 대한 Endpoint URL을 나타낸다. |
요청 (Reqeusts) | 객체에 대한 총 요청 수를 나타낸다. |
검색결과 (Hits) | Edge Location에서 캐싱된 객체가 제공된 사용자 요청 수이다. |
검색결과 % (Hits %) | 검색 결과 (Hits)를 백분율로 표시한 값이다. |
누락 (Misses) | Edge Location에 객체를 찾지 못한 사용자 요청 수이다. |
누락된 바이트 (Bytes from misses) | Edge Location에 객체를 찾지 못하여 사용자에게 제공된 Byte이다. |
바이트 합계 (Total bytes) | 객체에 대해 최종 사용자에게 제공한 총 바이트 수이다. |
불완전한 다운로드 (Incomplete downloads) | 객체에 대해 사용자가 다운로드를 시작했으나 완료되지 못한 최종 사용자 요청 수이다. (일반적으로 다른 링크를 클릭하거나 브라우저를 닫는 등의 동작으로 사용자가 요청을 취소한 경우임) |
2xx | HTTP Status Code가 2xx(성공)인 요청 |
3xx | HTTP Status Code가 3xx(추가 작업 필요)인 요청 |
4xx | HTTP Status Code가 4xx(클라이언트 오류)인 요청 |
5xx | HTTP Status Code가 5xx(서버 오류)인 요청 |
캐싱이 잘 되는지 확인하기 위해서는 검색 결과와 검색 결과%를 살펴봅시다
해당 지표에서 검색결과 지표와 검색결과 % 지표가 캐싱율과 직결되는 지표인데 만약 해당 지표가 낮을 경우 제대로 캐싱이 되고 있지 않다는 것입니다.
검색 결과 %가 100%에 가까우면 가까울수록 캐싱율이 높다고 말할 수 있습니다.
지표를 측정하고 특정 수치 이상일 때 슬랙 알람을 받고 싶다면