[편집: 실제 프로젝트 캡처 2장 추가]
Astro 블로그는 빠르지만 초기 설정을 놓치면 점수가 흔들립니다. 배포 전 체크리스트를 정리하면 이후 수정이 줄어듭니다. 광고와 외부 스크립트가 늘수록 CLS와 LCP가 나빠진다는 점을 기억하세요.
속도 측정 루틴
Lighthouse와 PageSpeed Insights로 세 번씩 측정해 평균을 기록하고, LCP 2.5초·CLS 0.1·INP 200ms 이하를 목표로 삼습니다. Search Console 실사용 지표도 함께 기록하면 개선 폭을 검증하기 쉬워집니다. [편집: 측정 결과 표 삽입]
핵심 체크리스트
- 이미지 포맷을 AVIF·WEBP 우선으로 변환
astro:assets로 정적 리사이즈 후 빌드 캐시 확인- 웹 폰트는 preload +
font-display: swap적용 - 광고 슬롯 높이를 고정하고 lazy load 스크립트 연결
astro.config.mjs에서 sitemap·압축 플러그인 활성화
이미지와 폰트 최적화
이미지는 원본 비율을 유지한 채 최대 2배 크기까지만 제공하면 모바일 과부하를 막을 수 있습니다. 폰트는 서브셋으로 용량을 줄이고 CDN 캐시 TTL을 하루 이상으로 설정해 재요청을 줄입니다. FOUT를 최소화하려면 시스템 폰트를 fallback으로 지정하세요.
광고로 인한 CLS 줄이기
AdSense 스니펫에 min-height와 placeholder를 적용하면 로딩 중에도 레이아웃이 유지됩니다. Intersection Observer로 뷰포트 진입 시에만 adsbygoogle.push를 호출하면 불필요한 스크립트 실행을 줄일 수 있습니다. 주간 Web Vitals 리포트와 RPM 변동을 한 번에 확인하며 품질과 수익을 함께 모니터링하세요.
요약 및 FAQ
- 속도 측정은 Lighthouse/PSI 두 도구로 통일해 평균 기록
- 이미지·폰트 최적화로 LCP·INP를 선제적으로 관리
- 광고 슬롯에는 고정 높이와 lazy load 조합을 적용
Q1. 속도 개선이 검색 순위에 언제 반영되나요?
A1. 구글 인덱스가 갱신되는 3~7일 뒤 Search Console Core Web Vitals 보고서에서 변화가 확인됩니다.
Q2. 광고를 줄이지 않고도 CLS 0.1을 달성할 수 있나요?
A2. 슬롯 크기를 먼저 고정하고 지연 로딩을 적용하면 대개 0.1 이하를 유지할 수 있으며, RPM 변동을 주간으로 모니터링해 부작용을 줄이면 됩니다.