웹 성능 최적화를 위한 10가지 필수 기법

이미지 최적화

설명

이미지는 웹 페이지에서 큰 부분을 차지하며, 최적화되지 않은 이미지는 로딩 시간을 지연시킬 수 있습니다.

최적화 방법

• 적절한 형식 선택: JPEG는 사진에, PNG는 투명도가 필요한 이미지에 사용.
• 이미지 압축: TinyPNG, ImageOptim과 같은 도구를 사용해 이미지 파일 크기 축소.
• 반응형 이미지 사용: srcset 속성을 사용해 다양한 해상도에 맞는 이미지를 제공.

<img src="image-320w.jpg" srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w" alt="Example Image">

 

코드 스플리팅

설명

코드 스플리팅은 애플리케이션의 코드를 여러 개의 작은 번들로 분할하여 필요한 부분만 로드하도록 하는 기법입니다.

최적화 방법

• Webpack 사용: Webpack의 Dynamic Imports를 활용해 코드 스플리팅 구현.
• React.lazy와 Suspense 사용: React 애플리케이션에서 컴포넌트 단위로 코드 스플리팅.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

 

Lazy Loading

설명

Lazy Loading은 사용자가 스크롤할 때 콘텐츠를 로드하여 초기 로딩 시간을 단축시키는 기법입니다.

최적화 방법

• 이미지 Lazy Loading: HTML5의 loading 속성을 사용해 이미지의 Lazy Loading 구현.

<img src="image.jpg" loading="lazy" alt="Example Image">

 

• Intersection Observer API 사용: 비동기적으로 요소를 관찰하고 로드.

const imgObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imgObserver.observe(img);
});

 

 

콘텐츠 전송 네트워크(CDN) 사용

설명

CDN은 전 세계에 분산된 서버를 통해 사용자가 더 빠르게 콘텐츠를 받아볼 수 있게 해줍니다.

최적화 방법

• CDN 제공 업체 선택: Cloudflare, Akamai, Amazon CloudFront 등의 서비스를 활용.
• 정적 자산 배포: 이미지, CSS, JavaScript 파일을 CDN에 호스팅.

<link rel="stylesheet" href="https://cdn.example.com/style.css">
<script src="https://cdn.example.com/script.js"></script>

 

브라우저 캐싱

설명

브라우저 캐싱은 방문자가 동일한 리소스를 재방문할 때 서버 요청 없이 캐시된 리소스를 사용하도록 합니다.

최적화 방법

• 캐시 제어 헤더 설정: 서버에서 Cache-Control 헤더를 설정해 캐싱 동작 제어.

Cache-Control: public, max-age=31536000

• ETag 사용: 리소스가 변경되었는지 확인하는 태그를 설정.

ETag: "12345"

 

JavaScript 및 CSS 축소

설명

JavaScript와 CSS 파일을 축소하면 파일 크기를 줄이고 로딩 속도를 향상시킬 수 있습니다.

최적화 방법

• 도구 사용: Terser, UglifyJS, CSSNano와 같은 도구를 사용해 코드 축소.

npx terser script.js -o script.min.js
npx cssnano style.css -o style.min.css

• Webpack 설정: Webpack의 mode를 production으로 설정해 자동으로 축소.

module.exports = {
  mode: 'production',
  // other configurations
};

 

비동기적 자바스크립트 로딩

설명

비동기적 자바스크립트 로딩을 통해 HTML 파싱을 막지 않고 자바스크립트를 로드할 수 있습니다.

최적화 방법

• async 속성 사용: 외부 스크립트를 비동기적으로 로드.

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

• defer 속성 사용: HTML 파싱이 완료된 후에 스크립트를 실행.

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

 

HTTP/2 사용

설명

HTTP/2는 여러 개의 요청을 동시에 처리할 수 있어 웹 페이지 로딩 속도를 개선합니다.

최적화 방법

• 서버 설정: 서버가 HTTP/2를 지원하도록 설정.
• SSL 인증서 적용: HTTP/2는 SSL을 필요로 하므로, SSL 인증서를 적용.

크리티컬 렌더링 패스 최적화

설명

크리티컬 렌더링 패스는 브라우저가 웹 페이지를 렌더링하는 데 필요한 리소스를 최적화하는 기법입니다.

최적화 방법

• CSS 인라인: 크리티컬 CSS를 인라인으로 포함해 첫 번째 페인트 시간을 단축.

<style>
  /* Critical CSS */
  body { margin: 0; padding: 0; }
</style>

• 비크리티컬 CSS 지연 로드: 비크리티컬 CSS를 비동기적으로 로드.

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

 

서버 반응 시간 최적화

설명

서버 반응 시간(TTFB, Time to First Byte)은 사용자가 요청을 보내고 첫 번째 바이트를 받을 때까지의 시간을 나타냅니다.

최적화 방법

• 서버 최적화: 서버의 하드웨어와 소프트웨어 성능을 최적화.
• 데이터베이스 최적화: 쿼리 최적화와 인덱싱을 통해 데이터베이스 성능 향상.
• 캐싱: 서버 측 캐싱을 통해 자주 요청되는 데이터를 캐시.