홈페이지 디자인이 아무리 예뻐도 로딩이 느리면 아무 소용이 없습니다. 구글 연구에 따르면 페이지 로딩 시간이 1초에서 3초로 늘어나면 이탈 확률이 32% 증가합니다. 5초가 되면 90%가 이탈합니다. 로딩 속도는 UX와 SEO 모두에 영향을 미치는 가장 기초적인 성능 지표입니다.
지금 당장 내 홈페이지 속도를 확인하고 싶다면 구글 PageSpeed Insights(pagespeed.web.dev)에 URL을 입력해보세요. 모바일과 데스크탑 점수를 각각 확인할 수 있고, 개선이 필요한 항목도 구체적으로 알려줍니다.
로딩이 느린 가장 흔한 원인
압축되지 않은 대용량 이미지
로딩 속도 저하의 원인 1위는 이미지입니다. DSLR로 찍은 원본 사진을 그대로 올리면 파일 하나가 5~10MB가 됩니다. 화면에 표시되는 크기에 맞게 리사이즈하고, WebP 형식으로 변환하면 파일 크기를 70~80% 줄이면서 화질 저하는 거의 없습니다.
너무 많은 폰트 로드
구글 폰트를 여러 개 사용하거나, 사용하지 않는 폰트 굵기까지 전부 불러오면 로딩이 느려집니다. 폰트는 2개 이하, 굵기는 실제로 사용하는 것만 지정하세요.
렌더링을 막는 스크립트
JavaScript 파일이 페이지 로딩보다 먼저 실행되면 화면이 늦게 나타납니다. 스크립트 태그에 `defer` 또는 `async` 속성을 추가하면 페이지 콘텐츠가 먼저 로드된 후 스크립트가 실행됩니다.
로딩 속도 개선 실전 방법
이미지 최적화 — 가장 효과가 큰 방법
이미지를 올리기 전에 반드시 압축하세요. Squoosh(squoosh.app)는 브라우저에서 무료로 이미지를 WebP로 변환하고 압축할 수 있는 도구입니다. 홈페이지에 올라가는 이미지는 대부분 200KB 이하로 줄일 수 있습니다. 히어로 이미지처럼 큰 이미지도 500KB 이하를 목표로 하세요.
지연 로딩(Lazy Loading) 적용
화면에 보이지 않는 이미지를 처음부터 전부 로드하지 않고, 스크롤해서 해당 위치에 도달했을 때 로드하는 방식입니다. HTML 이미지 태그에 `loading="lazy"` 속성 하나만 추가하면 됩니다. 이미지가 많은 포트폴리오 사이트에서 특히 효과적입니다.
CDN 사용
Vercel, Netlify 같은 서비스는 기본적으로 CDN(콘텐츠 전송 네트워크)을 제공합니다. 전 세계 여러 서버에 파일을 분산 저장해서 방문자 위치에서 가장 가까운 서버에서 콘텐츠를 제공합니다. Vercel로 배포하고 있다면 이미 CDN 혜택을 받고 있습니다.
불필요한 플러그인·앱 제거
아임웹이나 Wix에서 플러그인이나 앱을 많이 추가할수록 로딩이 느려질 수 있습니다. 실제로 사용하지 않는 앱은 삭제하고, 꼭 필요한 것만 유지하세요.
PageSpeed Insights 점수 목표
- 모바일 점수 70 이상 목표 (90 이상이면 우수)
- 데스크탑 점수 90 이상 목표
- LCP(최대 콘텐츠 표시 시간) 2.5초 이하
- FID(첫 입력 지연) 100ms 이하
- CLS(누적 레이아웃 이동) 0.1 이하
점수가 낮게 나온다고 너무 걱정할 필요는 없습니다. 이미지 최적화만 제대로 해도 점수가 크게 올라가는 경우가 많습니다. 특히 모바일 점수 70 미만은 개선이 필요한 신호로 봐야 합니다.