Speed Index란? 홈페이지 화면이 얼마나 빠르게 채워지는지 쉽게 이해하기
Speed Index는 보이는 화면이 얼마나 빠르게 시각적으로 완성되는지를 평가하는 지표입니다. FCP·LCP와의 차이, Filmstrip, 히어로·Lazy Loading·리소스 우선순위까지 초보 기준으로 정리합니다.
로고는 빨라도 화면은 천천히
로고는 0.5초에 떠도 제목·이미지·버튼이 5초에 걸쳐 나타나면 사용자는 여전히 느리다고 느낍니다. Speed Index는 보이는 영역(Viewport)이 빈 상태에서 완성된 화면으로 얼마나 빠르게 채워지는지를 평가합니다. 퍼즐을 둘 다 10초에 끝내도, 중간에 50%·90%가 빨리 채워지는 쪽이 더 「진행되는」 느낌인 것과 같습니다. 로딩 완료 시각만으로는 5초 동안 무엇을 봤는지 알 수 없습니다.
FCP · LCP · 다른 지표와의 자리
FCP = 처음 무언가가 보인 시점, LCP = 주요한 큰 콘텐츠 하나, Speed Index = 화면 전체의 시각적 진행입니다. LCP가 같아도 「조금씩 채워짐」과 「거의 비다가 한꺼번에」는 체감이 다릅니다. TTFB·INP·CLS와도 별개입니다 — 화면은 빨라도 버튼이 느리거나 광고로 밀릴 수 있습니다. Visual Completeness·Filmstrip으로 시간대별 화면을 보면 숫자만 볼 때보다 원인을 찾기 쉽습니다.
TTFB → FCP(첫 콘텐츠) → LCP(주요 큰 콘텐츠) Speed Index = Above the Fold가 채워지는 전체 과정 Lab/Lighthouse·합성에서 자주 활용 · RUM의 LCP/INP와 함께 볼 것
히어로 · 우선순위 · Lazy · JS
Above the Fold의 히어로·제목·CTA가 중요합니다. 화면 밖 이미지 49장과 히어로가 경쟁하면 첫 화면이 비어 보입니다 — 아래쪽은 Lazy Loading, 핵심 LCP 이미지는 지연하지 않습니다. Preload는 「지금 꼭 필요」, Prefetch는 「곧 필요할 수도」 — 전 링크 Prefetch는 낭비입니다. Progressive Rendering은 준비된 부분부터 보여 주되, 공간 없이 끼우면 CLS가 날 수 있습니다. CSR·무거운 초기 JS·광고·채팅·A/B는 화면 생성을 늦출 수 있고, Skeleton·스피너는 UX 피드백일 뿐 처리 시간을 줄이지 않습니다. 배경 영상·유튜브는 포스터/Lite Embed를 검토합니다. 중요한 제목을 긴 fade-in으로 숨기면 「준비됐어도」 늦게 보입니다.
점검 순서 · Lab vs Field
순서: Filmstrip → 빈 구간·큰 빈 영역 → TTFB·CSS·JS·첫 화면 이미지·폰트·제3자. TTFB가 느리면 채우기 시작이 늦고, TTFB가 빨라도 JS/API 뒤에 화면이 올 수 있습니다. 히어로가 화면 60%면 아이콘 최적화보다 이미지 우선이 합리적입니다. Speed Index는 주로 Lab·합성에서 비교하고, 실제 체감은 RUM의 LCP 등과 함께 봅니다. Lighthouse Performance Score ≠ Speed Index 단독. 모바일·반응형 이미지·CDN도 확인합니다. SEO 전용 점수가 아니라 시각적 로딩 분석용이며, 배포 후 급증이면 CI/CD 변경을 대조합니다.
자주 묻는 질문
Speed Index란?
보이는 영역이 로딩 중 얼마나 빠르게 시각적으로 완성되어 가는지를 평가하는 지표입니다.
FCP와 차이는?
FCP는 첫 콘텐츠가 나타난 시점, Speed Index는 이후 화면이 얼마나 빨리 채워지는지입니다.
LCP와 차이는?
LCP는 주요한 큰 콘텐츠 하나, Speed Index는 특정 요소가 아닌 전체 시각적 진행입니다.
이미지가 영향을 주나요?
첫 화면에서 큰 영역을 차지하는 이미지가 늦으면 화면이 오랫동안 불완전해 보입니다.
Lazy Loading은?
화면 밖은 지연이 도움이 될 수 있고, 첫 화면 핵심 이미지를 지연하면 악화될 수 있습니다.
실제 사용자 데이터인가요?
주로 Lab·합성에서 시각적 로딩을 비교할 때 쓰이며, Field는 RUM 등과 함께 봅니다.
정리
Speed Index는 보이는 화면이 얼마나 빠르게 시각적으로 완성되는지를 평가하는 지표입니다. FCP = 처음 무언가, LCP = 중요한 큰 콘텐츠, Speed Index = 화면이 채워지는 속도. Filmstrip으로 늦은 큰 요소를 찾고 서버·이미지·CSS·JS·폰트·제3자·우선순위를 점검하세요. 그런데 JS가 메인 스레드를 오래 차지하면 버튼을 눌러도 처리가 밀릴 수 있습니다. 입력 처리가 막힌 시간을 이해하는 데 쓰이는 지표가 TBT(Total Blocking Time)입니다.