속도 개선
웹사이트가 느리게 열리면 방문자는 기다리지 않고 떠나버립니다. 사이트를 빠르게 만드는 방법을 알아봅시다. 어렵지 않습니다.
속도가 느린 가장 큰 원인: 이미지
웹사이트가 느린 이유의 80% 이상은 이미지 때문입니다.
| 상황 | 파일 크기 | 로딩 시간 |
|---|---|---|
| 스마트폰으로 찍은 사진 그대로 | 5~10MB | 매우 느림 |
| 크기를 줄인 사진 | 100~500KB | 적당 |
| 웹에 최적화된 사진 | 50~150KB | 빠름 |
5MB짜리 사진 5장을 올리면 총 25MB입니다. 모바일 데이터로 접속하면 한참을 기다려야 합니다.
이미지 최적화하기
방법 1: 올리기 전에 크기 줄이기
무료 온라인 도구를 사용합니다:
- TinyPNG (tinypng.com) — 이미지를 올리면 자동으로 크기를 줄여줍니다
- 사용법: 사이트에 접속 → 이미지 파일을 드래그해서 올리기 → 줄어든 파일 다운로드
방법 2: Next.js Image 컴포넌트 사용하기
AI에게 이렇게 요청합니다:
"일반 img 태그 대신 Next.js Image 컴포넌트를 사용하게 바꿔줘. 자동으로 이미지 최적화가 되게."
Next.js가 자동으로 이미지 크기를 조절하고, 화면에 보이는 만큼만 불러옵니다.
나중에 불러오기 (Lazy Loading)
페이지 맨 아래에 있는 이미지를 처음부터 다 불러올 필요는 없습니다. 스크롤해서 보일 때 불러오는 것을 "Lazy Loading"이라고 합니다.
"이미지들이 화면에 보일 때만 불러오게 해줘 (lazy loading)."
Next.js Image 컴포넌트를 사용하면 이 기능이 자동으로 적용됩니다.
속도 측정하기
내 사이트가 얼마나 빠른지 확인하는 방법이 있습니다.
- Chrome에서 내 사이트를 엽니다
- F12를 눌러 개발자 도구를 엽니다
- 상단 탭에서 "Lighthouse"를 찾아 클릭합니다
- "Analyze page load" 버튼을 클릭합니다
- 잠시 기다리면 점수가 나옵니다
| 점수 | 의미 |
|---|---|
| 90~100 | 매우 빠름 (훌륭합니다!) |
| 50~89 | 개선 필요 |
| 0~49 | 느림 (이미지 최적화부터 시작) |
처음부터 100점을 받을 필요는 없습니다. 70점 이상이면 일반적인 사용에 충분합니다. 점수를 올리고 싶다면 Lighthouse가 알려주는 개선 사항을 AI에게 보여주세요.
간단한 속도 개선 요청
AI에게 이렇게 요청하면 속도가 개선됩니다:
| 요청 | 효과 |
|---|---|
| "불필요한 라이브러리가 있으면 제거해줘" | 파일 크기 줄어듦 |
| "폰트를 최적화해줘" | 글꼴 로딩 시간 단축 |
| "큰 컴포넌트를 lazy loading으로 바꿔줘" | 초기 로딩 시간 단축 |
이 절의 요약
- 웹사이트 속도가 느린 가장 큰 원인은 큰 이미지 파일입니다
- TinyPNG로 이미지를 압축하고, Next.js Image 컴포넌트를 사용하세요
- Lazy Loading으로 보이는 이미지만 불러오게 할 수 있습니다
- Chrome Lighthouse로 속도를 측정하고, 개선 사항을 확인할 수 있습니다
- 속도 개선도 AI에게 요청하면 도와줍니다