CDN 및 캐싱을 통한 Core Web Vitals 최적화
Google은 사이트 속도와 안정성을 측정하기 위해 Core Web Vitals를 사용합니다. 점수가 높을수록 SEO가 개선되고 전환율이 높아집니다.
다음 세 가지 주요 지표를 추적해야 합니다:
- Largest Contentful Paint (LCP): 2.5초 미만을 목표로 합니다.
- Interaction to Next Paint (INP): 200ms 미만을 목표로 합니다.
- Cumulative Layout Shift (CLS): 0.1 미만을 목표로 합니다.
콘텐츠 전송 네트워크(CDN)는 지연 시간을 줄여 이러한 점수를 개선합니다. 사용자와 더 가까운 서버에서 콘텐츠를 제공합니다.
CDN과 캐싱 헤더가 함께 작동하는 방식:
- 사용자와 서버 사이의 거리를 줄입니다.
- 에지(edge)에서 API 응답을 캐싱합니다.
- 오리진 서버가 다운되면 기존 콘텐츠를 제공합니다.
- 이미지를 자동으로 크기 조정하고 압축합니다.
다음 헤더 전략을 사용하세요:
- 정적 에셋: 파일 해시를 사용하여 긴 캐시 시간을 설정합니다.
- HTML 페이지: 더 짧은 캐시 시간을 사용합니다.
- API 응답: 서버 부하를 줄이기 위해 콘텐츠를 캐싱합니다.
Headless CMS를 사용하는 경우, 정적 사이트 생성(SSG)과 에지 캐싱을 결합하세요. 이를 통해 JavaScript 지연을 제거하고 사이트 속도를 높일 수 있습니다.
이미지 최적화는 LCP에 매우 중요합니다. 대부분의 큰 LCP 요소는 히어로 이미지(hero images)입니다. CDN을 사용하여 이미지를 WebP 또는 AVIF 형식으로 제공하세요. 이를 통해 모바일 페이지 용량을 60%에서 70%까지 줄일 수 있습니다.
스마트한 캐시 무효화(cache invalidation)로 업데이트를 관리하세요. 콘텐츠를 업데이트할 때 웹훅(webhook)을 사용하여 특정 캐시를 삭제하세요. 이를 통해 사용자가 오래된 데이터를 보는 것을 방지할 수 있습니다.
더 나은 성능을 위한 체크리스트:
- 에지 컴퓨팅 기능이 있는 최신 CDN을 사용하세요.
- 모든 리소스 유형에 대해 특정 cache-control 헤더를 설정하세요.
- 에지에서 이미지를 최적화하세요.
- 오리진 서버를 보호하기 위해 API 응답을 캐싱하세요.
- 콘텐츠가 변경될 때 캐시를 퍼지(purge)하기 위해 웹훅을 사용하세요.
- 실제 사용자 지표를 지속적으로 모니터링하세요.
데이터를 제공하는 방식의 작은 변화가 순위의 큰 상승으로 이어집니다.
출처: https://dev.to/sohanaakbar7/optimizing-core-web-vitals-using-cdn-caching-headers-2lfd
선택 사항 학습 커뮤니티: https://t.me/GyaanSetuAi