성능 최적화

웹 성능과 리소스 로딩 최적화

모던 웹 개발에서는 화면을 예쁘게 만드는 것만큼이나 '얼마나 빨리 뜨는가(로딩 성능)' 가 매우 중요합니다.
복잡한 서버 설정 없이, 오직 HTML 태그 몇 줄(defer, preload 등)만 알맞게 배치해도 웹사이트의 체감 로딩 속도를 극적으로 끌어올릴 수 있습니다.

1. 지능형 택배 시스템 비유

로딩 최적화는 텅 빈 창고에 물건(파일)들을 순서대로 지능적으로 배달시키는 과정과 같습니다.

🚚

HTML 문서를 쭉 읽어 내려가다 거대한 자바스크립트 파일(JS)을 만나면, 브라우저는 화면 그리기를 아예 멈추고 다운로드를 기다립니다(렌더링 병목 현상).

이때 defer 속성을 JS 태그에 붙여주면 "화면 뼈대부터 먼저 싹 그리고 나서 코드를 실행해!" 라고 지시하여 유저가 하얀 화면만 보고 답답해하는 일을 막아줍니다.
반면 preload는 "이건 첫 화면에 무조건 나오니까 묻지도 따지지도 말고 당장 가져와!" 라며 우선순위를 최상으로 끌어올리는 VIP 새치기 티켓입니다.

2. 성능 최적화 핵심 태그 정리

태그명	주요 속성	설명 및 효과
`<link>`	`rel="preload"`	현재 페이지 첫 화면에서 당장 필요한 핵심 폰트나 히어로 이미지를 최우선으로 다운로드(새치기) 시킵니다.
`<link>`	`rel="prefetch"`	다음 페이지에서 쓰일 확률이 높은 자원(JSON, 다음 이미지 등)을 브라우저가 한가할 때 몰래 미리 다운로드 해둡니다.
`<script>`	`defer`	브라우저가 HTML을 다 읽고 DOM 트리를 완성할 때까지 JS 실행을 뒤로 미루어 화면 렌더링이 막히는 것을 방지합니다. (가장 많이 씀)
`<script>`	`async`	구글 애널리틱스처럼 순서와 상관없이 독립적으로 동작하는 스크립트를 다운로드 즉시 병렬로 실행시킵니다.

<!-- 
  💡 안내: 아래 코드는 시각적으로 아무것도 나타내지 않는 백그라운드 최적화 태그입니다. 
  우측 화면은 브라우저의 '네트워크(Network) 다운로드 폭포수'를 시뮬레이션한 시각 자료입니다.
-->

<head>
  <!-- 1. VIP 새치기 티켓: 당장 쓸 폰트와 메인 이미지를 최우선으로 다운! -->
  <link rel="preload" href="hero-image.webp" as="image">
  <link rel="preload" href="important-font.woff2" as="font" type="font/woff2" crossorigin>

  <!-- 2. 한가할 때 몰래 받기: 다음 페이지에서 쓸 데이터를 미리 캐싱! -->
  <link rel="prefetch" href="/next-page-data.json">

  <!-- 3. 화면 그리기 방해 금지: HTML 분석이 다 끝난 뒤에 깔끔하게 실행 (추천!) -->
  <script defer src="main.js"></script>

  <!-- 4. 다운 끝나면 바로 실행: 구글 애널리틱스처럼 독립적인 코드에 사용 -->
  <script async src="analytics.js"></script>
</head>

<body>
  <!-- 브라우저 네트워크 시뮬레이션 UI -->
  <div class="network-sim">
    <h3>🌐 브라우저 다운로드 폭포수 (Waterfall)</h3>
    <div class="waterfall-container">
      <div class="track">
        <span class="label">HTML 문서</span>
        <div class="bar bar-html"></div>
      </div>
      <div class="track">
        <span class="label">preload (이미지)</span>
        <div class="bar bar-preload"></div>
        <span class="note">VIP 최우선 로드!</span>
      </div>
      <div class="track">
        <span class="label">defer (JS)</span>
        <div class="bar bar-defer"></div>
        <span class="note">화면 렌더링 후 실행!</span>
      </div>
      <div class="track">
        <span class="label">prefetch (JSON)</span>
        <div class="bar bar-prefetch"></div>
        <span class="note">여유로울 때 다운!</span>
      </div>
    </div>
  </div>
</body>

🔒 localhost:8000/preview

웹 성능과 리소스 로딩 최적화

1. 지능형 택배 시스템 비유

로딩 최적화는 텅 빈 창고에 물건(파일)들을 순서대로 지능적으로 배달시키는 과정과 같습니다.

🚚

2. 성능 최적화 핵심 태그 정리

태그명	주요 속성	설명 및 효과
`<link>`	`rel="preload"`	현재 페이지 첫 화면에서 당장 필요한 핵심 폰트나 히어로 이미지를 최우선으로 다운로드(새치기) 시킵니다.
`<link>`	`rel="prefetch"`	다음 페이지에서 쓰일 확률이 높은 자원(JSON, 다음 이미지 등)을 브라우저가 한가할 때 몰래 미리 다운로드 해둡니다.
`<script>`	`defer`	브라우저가 HTML을 다 읽고 DOM 트리를 완성할 때까지 JS 실행을 뒤로 미루어 화면 렌더링이 막히는 것을 방지합니다. (가장 많이 씀)
`<script>`	`async`	구글 애널리틱스처럼 순서와 상관없이 독립적으로 동작하는 스크립트를 다운로드 즉시 병렬로 실행시킵니다.