제목

카테고리

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

서브카테고리

웹 개발

대상자

• 웹 개발자, 사이트 운영자, 성능 최적화를 원하는 기획자
• 초보자부터 중급자까지 적용 가능한 실용적 팁 제공

핵심 요약

• HTML 코드 내 불필요한 공백과 주석 제거로 웹사이트 로딩 속도 40% 개선
• PageSpeed 점수 47 → 70 상승, 2.8초 → 2.1초로 로딩 시간 단축
• HTMLMinifyPlugin 사용 시 자동화된 코드 최적화 가능

섹션별 세부 요약

1. 문제 상황

• 고객의 웹사이트 판매량 40% 감소, SEO 전문가의 무효한 작업으로 5,000달러 낭비
• 기존 개발자가 남긴 2021년 주석, 과도한 공백, 비논리적인 들여쓰기로 코드가 복잡해짐
• 하루 2,000명 방문자 기준으로 80MB의 불필요한 데이터 전송 발생

2. 발견된 문제점

• 87KB의 전체 파일 중 40KB가 불필요한 공백, 주석, 포맷 구성 요소로 이루어짐
• HTML 속성 주변의 추가 공백, 빈 줄, 무의미한 들여쓰기로 인한 성능 저하
• Google PageSpeed 점수 47 (매우 낮은 성능)

3. 개선된 결과

• 로딩 시간 2.8초 → 2.1초, 전체 페이지 로딩 4.2초 → 3.1초
• PageSpeed 점수 70 달성, 동결 시간 340ms → 210ms
• 모바일 사용자 대상으로 2-3초의 추가 로딩 시간 감소

4. 주의사항 및 팁

• JavaScript 의존성 있는 공백 제거 시 테스트 필수
• 기능적인 주석은 제거 금지 (예: )
• 모든 파일에 적용 시 성능 개선 효과 극대화

결론

• HTMLMinifyPlugin을 사용해 removeComments: true, collapseWhitespace: true 설정으로 자동화된 코드 최적화 가능
• Web Utility Labs의 HTML 압축 툴로 실시간 테스트 가능
• 기본적인 HTML 정리만으로도 PageSpeed 점수 23점 상승, 로딩 시간 0.7초 단축 가능