홈페이지 로딩 속도 높이는 법
구글 PageSpeed 100점 받기

📊 60점짜리 사이트를 100점으로 만든 과정

홈페이지를 만들고 나서 구글 PageSpeed Insights로 점수를 측정해봤다. 처음엔 60점대가 나왔다. "뭔가 느리다"는 건 알겠는데 뭘 고쳐야 할지 몰랐다.

AI한테 PageSpeed 결과를 붙여넣고 "어떻게 고치면 돼?"라고 물어봤다. 하나씩 알려줘서 하나씩 고쳤다. 결국 100점이 나왔다. 어렵지 않았다. 순서가 있을 뿐이었다.

🔍 PageSpeed Insights가 뭔가요?

구글이 만든 무료 사이트 속도 측정 도구다. pagespeed.web.dev에 내 사이트 URL을 입력하면 0~100점 사이의 점수와 함께 개선해야 할 항목을 구체적으로 알려준다.

• 무료, 로그인 불필요
• 모바일 / 데스크톱 점수 따로 측정
• 개선 항목과 예상 절감 시간까지 표시
• Core Web Vitals(LCP, FID, CLS) 측정 포함

📉 점수를 깎는 주요 원인

PageSpeed가 낮은 이유는 보통 네 가지다. 어떤 항목이 점수를 깎는지 알면 고치기 훨씬 쉽다.

🔧 실제로 고친 것들

AI한테 PageSpeed 결과 화면을 설명하고 "이 HTML 코드 PageSpeed 점수 높이게 최적화해줘"라고 하면 어떤 부분을 어떻게 바꿔야 하는지 코드로 알려준다. 내가 직접 한 수정은 크게 네 가지였다.

① 이미지를 WebP 형식으로 변환

JPG·PNG를 WebP로 바꿨다. 같은 화질에서 파일 크기가 30~50% 줄어든다. squoosh.app에서 무료로 변환할 수 있다. 이미지 하나 바꿨는데 점수가 10점 이상 오른 적도 있다.

② 구글 폰트에 preconnect 추가

<!-- 폰트 서버에 미리 연결 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 폰트 로드 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

preconnect는 브라우저에게 "이 서버에 미리 연결해둬"라고 알려주는 힌트다. 폰트를 실제로 받을 때 연결 대기 시간이 없어진다.

③ 스크립트 태그에 defer 추가

<!-- 전: 렌더링 차단 -->
<script src="app.js"></script>

<!-- 후: 렌더링 비차단 -->
<script src="app.js" defer></script>

defer를 붙이면 HTML 파싱이 끝난 후에 스크립트를 실행한다. 브라우저가 화면을 먼저 그리고 나서 스크립트를 처리하므로 사용자 눈에 페이지가 훨씬 빠르게 나타난다.

④ 이미지에 width·height 명시

<!-- 전: 크기 미지정 → 레이아웃 흔들림(CLS) 발생 -->
<img src="photo.webp" alt="사진">

<!-- 후: 크기 명시 → 공간 미리 확보 -->
<img src="photo.webp" alt="사진" width="800" height="600">

이미지 크기를 미리 알려주면 브라우저가 이미지를 받기 전에도 공간을 확보한다. 이미지가 늦게 로딩돼도 페이지 레이아웃이 흔들리지 않는다. CLS(Cumulative Layout Shift) 점수에 직접 영향을 준다.

🔄 측정 → 수정 → 재측정 반복

처음엔 한 번에 다 고치려 했는데, 그게 오히려 느렸다. PageSpeed가 알려주는 항목 하나씩 고치고 다시 측정하는 게 훨씬 빠르다. 어떤 수정이 얼마나 효과가 있는지도 바로 보인다.

✅ 마무리 — 속도는 SEO다

구글은 느린 사이트를 싫어한다. PageSpeed 점수가 낮으면 아무리 글을 잘 써도 검색 상위에 노출되기 어렵다. 속도 최적화는 SEO의 기본이다.

어렵게 생각할 필요 없다. PageSpeed가 뭘 고치라고 알려주고, AI가 어떻게 고치는지 알려준다. 그걸 하나씩 따라 하면 된다. 60점짜리 사이트도 100점이 된다.