웹사이트 속도 추정기
HTML 분석·페이지 무게·렌더 차단 리소스 추정
Website Speed Estimator 사용 가이드
웹 페이지의 HTML 소스를 붙여넣으면 HTML 크기, 렌더 차단 리소스, 이미지 최적화 여부, viewport 메타 태그 등을 즉시 분석합니다. URL을 입력하면 Google PageSpeed Insights로 바로 연결해 실제 성능 점수와 Core Web Vitals를 확인할 수 있습니다.
자주 묻는 질문
Q. 페이지 속도는 왜 중요한가요?
A. 페이지 속도는 사용자 경험, SEO 순위, 전환율에 직접적인 영향을 미칩니다. Google은 Core Web Vitals를 검색 순위 신호로 사용하며, 1초 지연 시 전환율이 최대 20% 감소할 수 있습니다.
Q. Core Web Vitals란 무엇인가요?
A. Core Web Vitals는 Google이 정의한 웹 성능 지표로 LCP(최대 콘텐츠 렌더), FID(첫 입력 지연), CLS(누적 레이아웃 이동) 세 가지로 구성됩니다.
Q. LCP를 어떻게 최적화하나요?
A. LCP(Largest Contentful Paint)를 개선하려면 히어로 이미지를 최적화하고, 중요 리소스를 preload하며, 서버 응답 시간을 줄이고, 렌더 차단 리소스를 제거해야 합니다.
Q. 렌더 차단 리소스란?
A. 브라우저가 페이지를 렌더링하기 전에 먼저 로드해야 하는 CSS나 JS 파일입니다. defer나 async 속성을 사용하거나 CSS를 인라인으로 처리해 렌더링을 차단하지 않도록 합니다.
Q. 이미지 lazy load는 어떻게 구현하나요?
A. <img> 태그에 loading="lazy" 속성을 추가하면 브라우저가 화면 밖 이미지의 로딩을 지연시킵니다. 모든 현대 브라우저에서 지원합니다.
Q. font-display:swap은 무엇인가요?
A. 웹 폰트가 로드될 때까지 시스템 폰트를 표시하는 CSS 속성입니다. 폰트가 로드되면 교체되며, CLS에 영향을 미칠 수 있으므로 size-adjust와 함께 사용하면 좋습니다.
Q. defer와 async의 차이는?
A. async는 HTML 파싱과 병렬로 스크립트를 다운로드하고 완료 즉시 실행합니다. defer는 HTML 파싱 완료 후 DOMContentLoaded 전에 순서대로 실행됩니다.
Q. PageSpeed Insights를 어떻게 사용하나요?
A. https://pagespeed.web.dev에 URL을 입력하면 실제 사용자 데이터와 Lab 데이터 기반의 Core Web Vitals 점수와 구체적인 개선 방안을 제공합니다.