내가 만든 홈페이지, Lighthouse 90점 이상 달성 비법 (Core Web Vitals 최적화 실전 방법)
"내가 만든 홈페이지 왜 이렇게 느리지?"
몇 달간 밤새워가며 정말 열심히 만들었는데,
방문자들이 3초도 못 기다리고 휙 나가버리면 진짜 힘 빠지잖아요.
저도 딱 그 심정이었습니다.
처음 제 사이트 라이트하우스(Lighthouse) 점수를 보고
두 눈을 의심했어요. 새빨간 50점대라니...
이건 단순히 숫자가 낮은 걸 넘어서,
구글이 "당신 사이트는 사용자 경험이 좋지 않아요"라고
직접 말해주는 경고등이었죠.
'대체 뭐가 문제일까?' 파고들기 시작했고,
모든 길은 결국 '코어 웹 바이탈'로 통하더군요.
그런데 막상 해결책을 찾아보니 너무 어려운 용어뿐이었어요.
그래서 제가 직접 몸으로 부딪히면서 알아낸,
비전공자나 초보자도 바로 따라 할 수 있는 실전 비법만
아낌없이 눌러 담아봤습니다.
이 글 하나로 여러분의 사이트도 90점 이상으로 재탄생할 거예요!
🚀 코어 웹 바이탈, 대체 그게 뭔데?
최적화를 시작하기 전에 딱 3가지만 알면 돼요.
복잡하게 생각할 필요 전혀 없습니다.
구글이 우리 사이트를 평가하는 핵심 기준,
바로 코어 웹 바이탈(Core Web Vitals)입니다.
이 3가지가 사이트 속도와 사용자 경험의 전부라고 해도
과언이 아니에요. 식당에 비유해 볼까요?
1️⃣ LCP (Largest Contentful Paint): 메인 요리가 얼마나 빨리 나오는가? (로딩 속도)
2️⃣ INP (Interaction to Next Paint): 직원을 불렀을 때 얼마나 빨리 반응하는가? (반응 속도)
3️⃣ CLS (Cumulative Layout Shift): 식사 중에 테이블이 흔들리지 않는가? (시각적 안정성)
어떤가요? 훨씬 이해가 쉽죠?
구글은 이 3가지 경험이 좋은 사이트를 더 높이 평가하고,
검색 결과 상단에 노출시켜 줍니다. SEO에도 직결되는 거죠.
내 사이트 점수는 'PageSpeed Insights'에서 누구나 무료로 확인할 수 있어요.
💡 LCP 잡기: 이미지 최적화가 8할!
LCP 점수가 낮게 나왔다면, 90%는 이미지 때문입니다.
특히 웹사이트 첫 화면을 멋지게 장식하는 크고 아름다운
배경 이미지가 주범인 경우가 정말 많아요.
저도 처음엔 4K 화질 원본 이미지를 그대로 올렸다가
LCP가 5초가 넘게 나오더라고요. 방문자가 다 떠나갈 시간이죠.
하지만 몇 가지 간단한 작업만으로 1초대로 확 줄일 수 있었어요.
✅ 차세대 포맷(WebP) 사용하기: JPG, PNG보다 용량이 20~30% 더 가벼운 WebP 포맷으로 변환하세요. 'Squoosh' 같은 무료 온라인 툴을 쓰면 드래그 한 번으로 끝나요.
✅ 이미지 크기 맞추기: 실제 화면에 보이는 영역이 800px인데 4000px짜리 이미지를 올리는 건 낭비예요. 딱 맞는 크기로 줄여서 업로드하는 게 핵심입니다.
✅ 지연 로딩 (Lazy Loading): 화면에 바로 보이지 않는 스크롤 아래쪽 이미지들은 나중에 로딩되도록 설정하세요. HTML `
솔직히 위에 3가지만 해도 점수가 확 오르는 게 보일 거예요.
가장 쉽고, 효과가 가장 강력한 방법이니 무조건 해보세요!
🔧 CLS 잡기: '깜빡임'과 '밀림' 현상 막기
웹서핑하다가 버튼을 누르려는 순간!
갑자기 광고가 뿅 나타나면서 버튼이 아래로 밀려나
원치 않는 광고를 클릭한 경험, 다들 있으시죠?
이게 바로 CLS, 즉 '레이아웃 밀림' 문제입니다.
사용자 입장에서는 정말 짜증 나는 경험 1순위죠.
이건 보통 이미지, 동영상, 광고처럼 나중에 로딩되는 요소들의
공간을 미리 지정해주지 않아서 생기는 문제입니다.
• 이미지, 비디오 태그에 `width`와 `height` 값을 지정하지 않은 경우
• 웹 폰트가 뒤늦게 적용되면서 글자 모양이 바뀌고 전체 레이아웃이 밀리는 경우
• 광고나 팝업처럼 동적으로 삽입되는 콘텐츠의 공간을 미리 확보하지 않은 경우
해결책은 의외로 정말 간단합니다.
"자리가 예약되어 있으니 비워두세요!"라고 브라우저에게
미리 알려주기만 하면 되거든요.
<!-- ❌ 나쁜 예: 크기 지정이 없어 이미지가 로드되면 레이아웃이 밀림 -->
<img src="my-image.jpg" alt="설명">
<!-- ✅ 좋은 예: 가로/세로 크기를 지정해 공간을 미리 확보함 -->
<img src="my-image.jpg" width="600" height="400" alt="설명">
이미지 태그에 `width`와 `height`를 적어주는 습관!
이것 하나만으로도 대부분의 CLS 문제는 마법처럼 해결됩니다.
⚡ INP 잡기: 버벅거림 없는 반응 속도 만들기
INP는 사용자가 버튼을 클릭하거나 메뉴를 열 때,
사이트가 얼마나 즉각적으로 반응하는지를 측정해요.
클릭했는데 한참 반응이 없으면 "사이트가 멈췄나?" 싶잖아요.
이 버벅거림의 주범은 대부분 무거운 자바스크립트(JS)입니다.
화면 뒤에서 복잡한 계산을 하느라 바빠서
사용자의 클릭에 반응할 여유가 없는 거죠.
• 불필요한 JS 코드 제거: 사용하지 않는 오래된 통계 스크립트나 기능, 플러그인은 과감하게 삭제하세요. 코드가 적을수록 빨라집니다.
• JS 지연 실행 (defer): 당장 필요하지 않은 스크립트(예: 채팅 상담 봇)는 페이지 로딩이 끝난 후에 실행되도록 하세요. `