웹페이지 성능 최적화

웹 페이지의 성능 최적화를 위해 사용되는 HTML과 JavaScript의 로딩 전략

 

웹 페이지의 성능 최적화를 위해 사용되는 HTML과 JavaScript의 로딩 전략을 설명하겠습니다. async, defer, preload, prefetch, 그리고 **이미지 지연 로딩(lazy loading)**은 각기 다른 목적과 동작 방식을 가지고 있습니다.

---

1. async 속성

개요

• 비동기적으로 스크립트를 로드.
• HTML 파싱과 스크립트 다운로드가 동시에 진행됩니다.
• 스크립트 다운로드가 완료되면 즉시 실행되므로 실행 순서는 보장되지 않습니다.

동작 방식

1. 스크립트 다운로드와 HTML 파싱이 병렬로 진행.
2. 스크립트가 로드되면 HTML 파싱이 중단되고, 스크립트 실행.
3. 스크립트 실행이 완료되면 HTML 파싱 재개.

사용 예

<script src="script.js" async></script>

장점

• HTML 파싱과 스크립트 다운로드가 병렬로 진행되어 초기 로딩 속도가 개선됩니다.

단점

• 스크립트 실행 순서가 중요할 경우 부적합.

---

2. defer 속성

개요

• HTML 파싱이 완료된 후에 스크립트를 실행.
• 모든 defer 스크립트는 정해진 순서로 실행됩니다.

동작 방식

1. 스크립트 다운로드와 HTML 파싱이 병렬로 진행.
2. HTML 파싱이 완료된 후, 다운로드된 스크립트를 순서대로 실행.

사용 예

<script src="script.js" defer></script>

장점

• 스크립트 실행이 HTML 파싱을 방해하지 않음.
• 스크립트 실행 순서를 보장.

단점

• async에 비해 초기 실행이 약간 느릴 수 있음.

---

3. preload

개요

• 중요한 리소스를 우선적으로 로드하여 성능 최적화를 지원.
• 브라우저가 리소스를 즉시 로드하지만, 실행 시점은 개발자가 결정.

사용 예

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">

장점

• 중요한 리소스(글꼴, 스크립트, 스타일 등)를 미리 로드하여 초기 화면 렌더링 속도를 향상.

단점

• 잘못 사용할 경우 불필요한 리소스를 미리 로드하여 네트워크 자원을 낭비할 수 있음.

---

4. prefetch

개요

• 미래의 요청을 예측하여 리소스를 미리 로드.
• 현재 페이지에서 사용되지 않더라도, 사용 가능성을 예측해 리소스를 다운로드.

사용 예

<link rel="prefetch" href="next-page.html">

장점

• 다음 페이지나 사용자 행동을 예측하여 로딩 시간을 단축.

단점

• 사용자가 예측과 다르게 행동할 경우 불필요한 리소스 낭비.

---

5. 이미지 지연 로딩 (Lazy Loading)

개요

• 이미지를 사용자가 실제로 보게 될 때(viewport안에 들어올 때) 로드.
• 초기 로딩 속도와 네트워크 사용량을 줄이는 데 효과적.

사용 방법

HTML 속성:

<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">

JavaScript 사용:

document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.getAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });

  images.forEach(img => observer.observe(img));
});

장점

• 페이지 초기 로드 속도 향상.
• 네트워크 사용량 감소.

단점

• 잘못 구현하면 이미지가 늦게 보이거나 깜빡임 현상이 발생.

---

요약

속성/기술	동작 방식	사용 사례
async	비동기 로드, 순서 보장 X	독립적인 스크립트 (예: 광고, 분석 도구)
defer	HTML 파싱 완료 후 순서대로 실행	의존 관계가 있는 스크립트
preload	중요한 리소스 미리 로드	CSS, 폰트, 중요 스크립트
prefetch	미래에 필요한 리소스 미리 로드	다음 페이지 리소스
Lazy Loading	필요할 때 리소스 로드	이미지, 비디오, 비동기 콘텐츠

각 기술을 적절히 활용하여 성능 최적화를 극대화할 수 있습니다.