icon안동민 개발노트

asset 최적화 (이미지, 스크립트, 스타일시트)

 웹 애플리케이션에서 asset 최적화는 페이지 로딩 시간을 줄이고 사용자 경험을 개선하는 핵심 요소입니다.

 최적화된 asset은 대역폭 사용을 줄이고, 특히 모바일 환경에서 중요한 성능 향상을 가져옵니다.

이미지 최적화

 1. 포맷 선택

  • JPEG : 사진이나 그라데이션이 있는 이미지
  • PNG : 투명도가 필요한 이미지
  • SVG : 로고, 아이콘 등 벡터 그래픽

 2. 압축

# ImageMagick을 사용한 이미지 압축
convert input.jpg -quality 85 output.jpg

 3. 리사이징

<img src="large.jpg" srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 300px) 300px, (max-width: 600px) 600px, 1200px" alt="반응형 이미지">

 4. 레이지 로딩

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="레이지 로드 이미지">

최신 이미지 포맷

 1. WebP

  • 장점 : 높은 압축률, 투명도 지원
  • 사용법
<picture>
   <source srcset="image.webp" type="image/webp">
   <img src="image.jpg" alt="WebP 이미지">
</picture>

 2. AVIF

  • 장점 : WebP보다 더 나은 압축률
  • 브라우저 호환성 : 제한적이므로 대체 이미지 제공 필요

자바스크립트 최적화

 1. 압축 및 난독화

  • Terser 사용
npx terser input.js -o output.min.js -c -m

 2. 번들링

  • Webpack 설정 예시
// webpack.config.js
module.exports = {
   entry: './src/index.js',
   output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist')
   }
};

 3. 코드 스플리팅

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

CSS 최적화

 1. 압축

  • PostCSS와 cssnano 사용
// postcss.config.js
module.exports = {
   plugins: [
   require('cssnano')({
      preset: 'default',
   }),
   ],
};

 2. Critical CSS 추출

<style>
   /* 중요한 CSS 인라인 */
</style>
<link rel="preload" href="full-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

효율적인 asset 전송

 1. HTTP/2 서버 푸시

  • Nginx 설정 예
location / {
   http2_push /styles.css;
   http2_push /script.js;
}

 2. 리소스 힌팅

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

CDN 활용

 1. 장점

  • 지리적으로 가까운 서버에서 컨텐츠 제공
  • 원본 서버 부하 감소

 2. 구현

<script src="https://cdn.example.com/library.js"></script>

 3. 고려사항

  • CORS 설정
  • 보안 (HTTPS 사용)

캐싱 전략

 1. 브라우저 캐싱

# Nginx 설정 예
location /static/ {
   expires 1y;
   add_header Cache-Control "public, max-age=31536000, immutable";
}

 2. 서비스 워커 캐싱

self.addEventListener('fetch', (event) => {
   event.respondWith(
      caches.match(event.request)
      .then((response) => response || fetch(event.request))
   );
});

 3. 캐시 무효화

  • 파일명에 해시 추가 : styles.123abc.css

자동화 및 CI/CD 통합

  1. 빌드 스크립트
// package.json
{
   "scripts": {
      "build": "webpack && npm run optimize-images"
   }
}
  1. CI/CD 파이프라인 통합
# .gitlab-ci.yml 예시
build:
   script:
      - npm run build
      - npm run test
deploy:
   script:
      - aws s3 sync dist/ s3://my-bucket/

 asset 최적화는 웹 애플리케이션의 성능을 크게 향상시킬 수 있는 중요한 과정입니다. 이는 페이지 로딩 시간을 줄이고 사용자 경험을 개선하며, 특히 모바일 환경에서 중요한 역할을 합니다.

 이미지 최적화는 가장 큰 영향을 미치는 영역 중 하나입니다. 적절한 포맷 선택, 압축, 리사이징, 레이지 로딩 등의 기법을 통해 이미지 크기를 줄이고 로딩 속도를 높일 수 있습니다. WebP나 AVIF와 같은 최신 이미지 포맷은 더 나은 압축률을 제공하지만, 브라우저 호환성을 고려하여 대체 이미지를 함께 제공해야 합니다.

 자바스크립트 파일 최적화는 압축, 난독화, 번들링, 코드 스플리팅 등의 방법을 통해 이루어집니다. Webpack이나 Rollup과 같은 도구를 사용하면 이러한 과정을 효율적으로 관리할 수 있습니다. 특히 코드 스플리팅은 초기 로딩 시간을 줄이는 데 큰 도움이 됩니다.

 CSS 파일 역시 압축과 중복 제거를 통해 최적화할 수 있습니다. Critical CSS 추출 기법은 초기 렌더링에 필요한 CSS만을 인라인으로 포함시켜 렌더 블로킹을 최소화합니다.

 HTTP/2 서버 푸시와 리소스 힌팅은 asset의 효율적인 전송을 돕습니다. 서버 푸시를 통해 클라이언트 요청 전에 필요한 리소스를 미리 전송할 수 있으며, 리소스 힌팅은 브라우저에게 중요한 리소스를 미리 알려줍니다.

 CDN 활용은 사용자와 지리적으로 가까운 서버에서 컨텐츠를 제공함으로써 로딩 속도를 크게 향상시킬 수 있습니다. 다만 CORS 설정과 보안 문제에 주의해야 합니다.

 캐싱 전략은 반복적인 asset 다운로드를 방지하여 성능을 개선합니다. 브라우저 캐싱과 서비스 워커를 이용한 캐싱을 적절히 활용하고, 효과적인 캐시 무효화 방법을 적용해야 합니다.

 asset 최적화 과정의 자동화는 개발 효율성을 높이고 일관된 최적화를 보장합니다. 빌드 스크립트를 작성하고 이를 CI/CD 파이프라인에 통합함으로써, 코드 변경 시마다 자동으로 최적화된 asset이 생성되고 배포되도록 할 수 있습니다.

 결론적으로, asset 최적화는 다양한 기법과 도구를 활용하는 복합적인 과정입니다. 이미지, 스크립트, 스타일시트 각각에 대한 최적화 뿐만 아니라, 이들의 효율적인 전송과 캐싱 전략도 함께 고려해야 합니다. 또한 최적화 과정을 자동화하고 지속적으로 모니터링하여 성능 개선 효과를 측정하고 필요에 따라 전략을 조정해 나가는 것이 중요합니다.

 효과적인 asset 최적화는 단순히 파일 크기를 줄이는 것을 넘어, 사용자 경험을 개선하고 비즈니스 목표 달성에 기여하는 중요한 요소입니다. 따라서 개발 초기 단계부터 asset 최적화를 고려하고, 지속적인 개선을 위한 프로세스를 구축하는 것이 현대 웹 개발의 핵심 과제라고 할 수 있습니다.

이전으로다음으로