웹 사이트 최적화 성공 사례

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자 및 프론트엔드 엔지니어

- 기본적인 HTML/CSS 지식을 가진 중급 수준 개발자

- 웹 성능 최적화에 관심 있는 개발자

핵심 요약

• loading="lazy" 속성을 사용해 이미지 로딩 최적화
• WebP 이미지로 전환하여 파일 크기 88.4% 감소 (30MB → 3.5MB)
• YouTube 영상 및 Google 지도 직접 삽입 회피, 태그로 브라우저 호환성 확보

섹션별 세부 요약

1. 최적화 전 문제점

• 30MB의 대량 이미지 데이터(3MB PNG 이미지 다발)
• Google PageSpeed Insights 점수: 41점 (모바일 성능 저하)
• FCP(최초 콘텐츠 표시): 12.9초, LCP(가장 중요한 콘텐츠 표시): 88.3초

2. 이미지 최적화 전략

• loading="lazy" 속성 적용: 사용자 스크롤 시 이미지 로딩
• WebP 이미지로 전환: PNG → JPG 및 WebP 형식
• 태그 사용: WebP 미지원 시 JPG 대체

3. 비디오 및 지도 최적화

• YouTube 비디오 직접 삽입 회피, 대신 이미지+클릭 시 재생 구현
• Google 지도 사용 중단: 데이터 무게 증가 방지

4. 결과 및 성능 개선

• 3.5MB로 데이터 감소 (88.4% 감소)
• Google PageSpeed Insights 점수: 90점 이상 달성
• Cumulative Layout Shift(CLS): 0 유지 (레이아웃 변동 없음)

결론

• loading="lazy" 및 WebP 이미지 사용으로 성능 향상 가능
• 태그로 호환성 확보 및 데이터 감소 효과
• Google PageSpeed Insights 활용해 성능 점수 모니터링 권장
• 사용자 경험 개선과 데이터 효율성 동시에 달성 가능