⚡ 웹 성능 최적화 실습

웹 성능 최적화 실습 대시보드

"HTTP/3 시대의 웹 최적화 기술 이해하기" 강의 이론을 직접 체감해보는 실습 모음입니다. 각 실습의 Before/After 페이지를 각각 열어보면 아래에 성능 비교 결과가 쌓입니다.

📖 기술 가이드 보기 각 실습의 기술적 설명, 측정 방법, 지표 해석, 실무 베스트 프랙티스를 한 페이지에 정리했습니다.
프론트엔드 최적화

1스크립트 병합

20개의 개별 스크립트 vs 병합된 1개의 번들

Before After

2스크립트 최소화

주석/공백 가득한 원본 vs terser로 최소화한 파일

Before After

3스크립트 압축 전달 (gzip/br)

압축 없이 전송 vs 압축 미들웨어 적용

Before After

4이미지 포맷 최적화

JPG vs WebP/AVIF

Before After

5이미지 (비)손실 압축

무손실 PNG vs 손실 압축 JPEG

Before After

6브라우저 캐시 (Cache-Control)

no-store vs max-age=1년. 한 번 로드 후 새로고침해서 비교하세요.

Before After

7DNS Prefetch

힌트 없음 vs <link rel="dns-prefetch">

Before After

8CSS/JS 위치 조절

<head>의 렌더링 차단 스크립트 vs body 하단 배치

Before After

9페이지 Prefetch

일반 링크 vs <link rel="prefetch">

Before After

103rd-party 스크립트 조정

동기 blocking 로드 vs async/지연 로드

Before After
프로토콜 최적화

11HTTP/1.1 vs HTTP/2 vs HTTP/3

동일 페이지를 HTTP/1.1 / HTTP/2로 실제 비교 + HTTP/3 개념 가이드

실습 열기