웹사이트 속도, 왜 지금 더 중요한가
페이지가 1초 느려지면 전환율이 7% 떨어진다는 통계는 이미 유명합니다. 하지만 2024년부터 구글이 Core Web Vitals를 검색 순위에 본격 반영하면서, 속도는 단순한 사용자 경험을 넘어 SEO와 매출에 직접 영향을 미치는 핵심 지표가 되었습니다. 특히 모바일 사용자 비중이 70%를 넘는 지금, 느린 사이트는 고객을 경쟁사에게 넘겨주는 것과 같습니다.
Core Web Vitals 세 가지 지표 이해하기
LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠 요소가 화면에 그려지기까지 걸리는 시간입니다. 보통 히어로 이미지나 메인 텍스트 블록이 이에 해당하며, 2.5초 이내가 합격선입니다. 사용자가 체감하는 로딩 속도와 가장 직결되는 지표이기도 합니다.
INP(Interaction to Next Paint)는 사용자가 클릭하거나 탭했을 때 화면이 반응하기까지의 시간을 측정합니다. 기존의 FID를 대체한 지표로, 200밀리초 이내가 목표입니다. 버튼을 눌렀는데 아무 반응이 없는 그 답답한 순간, 바로 INP가 나쁜 경우입니다.
CLS(Cumulative Layout Shift)는 페이지가 로딩되는 동안 요소들이 얼마나 밀리고 이동하는지를 수치화한 것입니다. 글을 읽다가 갑자기 배너가 끼어들어 레이아웃이 뒤틀리는 경험, 누구나 해봤을 겁니다. 0.1 이하를 유지해야 합니다.
LCP를 빠르게 만드는 실전 전략
LCP 개선의 핵심은 가장 큰 콘텐츠가 빨리 도착하게 만드는 것입니다. 히어로 이미지를 WebP나 AVIF 같은 차세대 포맷으로 변환하면 용량을 50~80%까지 줄일 수 있습니다. 또한 해당 이미지에 fetchpriority="high" 속성을 부여하면 브라우저가 우선적으로 다운로드합니다.
서버 응답 시간도 중요합니다. TTFB(Time to First Byte)가 느리면 아무리 이미지를 최적화해도 소용이 없습니다. CDN 적용, 서버 캐싱, 그리고 불필요한 리다이렉트 제거만으로도 체감 속도가 크게 달라집니다.
INP를 줄이는 자바스크립트 최적화
INP 문제의 원인은 대부분 무거운 자바스크립트입니다. 이벤트 핸들러에서 과도한 DOM 조작이나 동기 처리를 하고 있다면, 메인 스레드가 블로킹되어 사용자 입력에 반응하지 못합니다.
해결책은 긴 작업을 잘게 쪼개는 것입니다. requestAnimationFrame이나 setTimeout으로 작업을 분할하면 브라우저가 중간중간 사용자 입력을 처리할 여유가 생깁니다. 서드파티 스크립트(채팅 위젯, 분석 도구 등)도 defer나 async로 로딩 시점을 뒤로 미루는 것이 좋습니다.
CLS를 잡는 레이아웃 안정화 기법
CLS를 개선하려면 모든 미디어 요소에 명시적인 width와 height를 지정해야 합니다. 브라우저가 이미지나 영상의 크기를 미리 알면 로딩 전에 공간을 확보해둘 수 있기 때문입니다. CSS의 aspect-ratio 속성을 활용하면 반응형에서도 비율을 유지하면서 레이아웃 이동을 막을 수 있습니다.
웹폰트도 CLS의 주범 중 하나입니다. 커스텀 폰트가 늦게 로드되면서 텍스트 크기가 바뀌는 FOUT(Flash of Unstyled Text) 현상이 레이아웃을 흔듭니다. font-display: optional이나 폰트 프리로드를 적용하면 이 문제를 효과적으로 줄일 수 있습니다.
측정하지 않으면 개선할 수 없다
구글의 PageSpeed Insights는 실제 사용자 데이터(CrUX)와 시뮬레이션 결과를 함께 보여주는 무료 도구입니다. 개선이 필요한 항목을 우선순위별로 정리해주기 때문에 어디서부터 손대야 할지 막막할 때 가장 먼저 돌려보시길 권합니다. Chrome DevTools의 Lighthouse 탭에서도 동일한 분석이 가능합니다.
중요한 것은 한 번 측정하고 끝내는 게 아니라, 콘텐츠를 업데이트할 때마다 주기적으로 확인하는 습관입니다. 이미지 하나 추가했을 뿐인데 LCP가 1초 이상 느려지는 경우도 흔합니다.
속도는 기술이자 전략이다
웹사이트 속도 최적화는 개발팀만의 과제가 아닙니다. 디자인 단계에서 이미지 전략을 세우고, 기획 단계에서 서드파티 스크립트를 최소화하는 결정을 내려야 근본적인 개선이 가능합니다. CYAN에서는 프로젝트 초기부터 성능 목표를 설정하고, 디자인과 개발 전 과정에서 Core Web Vitals를 모니터링하며 작업합니다. 빠른 웹사이트는 단순히 기분 좋은 경험이 아니라, 검색 순위와 전환율을 모두 끌어올리는 가장 확실한 투자입니다.