속도가 중요한 이유
전체 사용자 중 절반은 로드하는 데 3초 이상 걸리는 웹사이트를 닫어. 방문자 모두가 빠른 Wi-Fi를 사용하는 새 전화기를 갖고 있는 것은 아닙니다. 일부는 기차에서 오래된 전화기를 가지고 있을 것야. 프로젝트 보스도 그들에 대해 생각해.
좋은 소식: 이미지라는 단 하나의 방법으로 가장 큰 속도 향상을 얻을 수 있어. 휴대폰에서 직접 찍은 사진의 크기는 쉽게 5MB가 될 수 있어. 웹사이트에는 그 중 10분의 1만 있으면 돼.
보여줄게: Lighthouse로 측정
Lighthouse는 Chrome에 내장된 측정 도구야.
- 웹사이트를 엽니다(localhost가 아닌 라이브 버전).
- F12 → Lighthouse 탭 → 페이지 로드 분석.
- 성능, 접근성, SEO에 대해 0~100점의 점수를 받게 되며, 가장 중요한 것은 개선할 사항에 대한 구체적인 팁 목록야.
가장 일반적인 팁과 해결 방법:
| 등대 팁 | 해야 할 일 |
|---|---|
| 이미지 크기를 적절하게 조정 | 이미지 축소(아래 참조) |
| 차세대 형식으로 이미지 제공 | WebP로 저장 |
| 이미지 요소에 너비/높이가 없어 | 추가하다width그리고height속성 |
| 링크에 설명 텍스트가 없어 | ”여기를 클릭해” 대신 링크가 어디로 가는지 말해주세요 |
이미지 축소
- 크기: 웹사이트에는 너비가 약 1200픽셀(히어로 사진) 또는 약 600픽셀(일반 사진)만 있으면 돼. 온라인(예: squoosh.app)을 포함한 모든 편집기에서 크기를 조정할 수 있어.
- 형식: WebP는 동일한 품질에서 JPG보다 약 1/3 더 작어.
- 지연 로딩: 스크롤 없이 볼 수 있는 부분 아래의 이미지는 방문자가 아래로 스크롤한 후에만 로드돼.
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />네 차례야 💪
- Lighthouse로 웹사이트를 측정하고 성능 점수를 기록해. 그것이 출발선야.
- 웹사이트에서 가장 큰 이미지 3개를 찾어(F12 → 네트워크 탭 → 크기별 정렬).
- 축소하고(치수 + WebP) 추가해.
loading="lazy"상단의 첫 번째 이미지를 제외한 모든 항목에 적용돼. - 다시 측정하고 점수를 비교해. 쓰기
LAUNCH.md: 전 → 후. - 보너스: Wi-Fi를 끈 상태에서 휴대폰에서 웹사이트를 테스트해. 어떤가요?
💡
**100점을 기대하지 마세요.** 대형 웹사이트도 70~90점을 받어. 중요한 것은 진행야. 60에서 85로 가는 것은 방문자가 실제로 알아챌 수 있는 승리야.
✅
**확인:** Lighthouse 점수 전후를 알 수 있어. 이미지 크기는 WebP에서 지연 로딩을 사용하여 조정돼. 네 웹사이트는 모바일에서 눈에 띄게 더 빠르게 로드돼.
이번 수업에서 배울 점
- 속도 = 방문자가 머물게 돼. 3초가 한계야.
- 등대는 개선해야 할 점을 정확하게 알려줍니다.
- 가장 큰 수단: 더 작은 이미지(크기, WebP, 지연 로딩).
© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관