웹 성능과 리소스 로딩 최적화
모던 웹 개발에서는 화면을 예쁘게 만드는 것만큼이나 '얼마나 빨리 뜨는가(성능)' 가 중요합니다. HTML 태그 몇 줄만 잘 써도 웹사이트 로딩 속도가 2배 이상 빨라질 수 있습니다.
🚚 텅 빈 식당을 빠르게 채우는 지능형 배달 시스템
HTML 코드를 읽어 내려가다 거대한 자바스크립트 파일을 만나면 브라우저는 화면 그리기를 멈추고 다운로드를 기다립니다(병목 현상).
이때 defer 속성을 쓰면 "화면부터 먼저 싹 그리고 나서 코드를 실행해!" 라고 지시하여 유저가 답답함을 느끼지 않게 합니다.
반면 preload는 "이건 첫 화면에 무조건 나오니까 묻지도 따지지도 말고 당장 가져와!" 하는 VIP 새치기 티켓입니다.
| 태그명 | 속성명 | 설명 |
|---|---|---|
<link> | rel="preload" | 현재 페이지에서 당장 필요한 핵심 폰트나 히어로 이미지를 최우선으로 다운로드 시킵니다. |
<link> | rel="prefetch" | 다음 페이지에서 쓰일 확률이 높은 자원을 브라우저가 한가할 때 미리 캐시에 쟁여둡니다. |
<script> | defer | 브라우저가 HTML을 다 읽고 DOM 트리를 완성할 때까지 JS 실행을 뒤로 미루어 화면이 빨리 뜨게 합니다. |
<script> | async | 구글 애널리틱스처럼 다른 코드와 순서가 상관없이 독립적으로 동작하는 스크립트를 다운로드 즉시 실행시킵니다. |
<div>
<strong>💡 안내: 이 코드는 눈에 보이지 않는 백그라운드 최적화 태그입니다.</strong>
<p>실행 결과 화면에는 시각적으로 아무것도 나타나지 않는 것이 정상입니다.<br>이 태그들은 웹페이지의 로딩 속도를 극적으로 끌어올리기 위해 브라우저 개발자 도구(F12)의 '네트워크(Network)' 탭에서 다운로드 순서를 직접 제어할 때 사용됩니다.</p>
</div>
<!-- 1. 외부 CSS를 당장 쓰진 않지만 미리 받아두기 (가장 높은 우선순위) -->
<link rel="preload" href="important-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.webp" as="image">
<!-- 2. 나중에 쓸 것 같으니 브라우저가 쉴 때 몰래 다운받아두기 -->
<link rel="prefetch" href="/next-page-data.json">
<!-- 3. 무거운 JS 때문에 화면 그리는 게 멈추지(Blocking) 않게 하기 -->
<!-- HTML 분석이 다 끝난 뒤에 깔끔하게 실행됨 (추천!) -->
<script defer src="main.js"></script>
<!-- 다운로드가 끝나자마자 순서 상관없이 아무때나 실행됨 -->
<script async src="analytics.js"></script>