프론트엔드 프로젝트 최적화 방법 끄적끄적

Benza·2022년 12월 13일

웹팩최적화 이미지최적화 최적화 프론트엔드

🔎

목록 보기

10/11

최적화는 사용자 경험 향상과 더불어 기업의 비용 측면에서도 중요한 요소 입니다. 그래서 많은 채용 공고들에서 최적화 경험을 묻는 것이겠지요.

꾸준하게 최적화 방법들을 정리해보고 프로젝트에 적용하기 위한 체크리스트를 만들어 보도록하겠습니다.

Front-end 영역에서 개발의 비용 효율성을 최적화하는 방법은 매우 많습니다.
가장 효과적인 특정 기술과 접근 방식은 주어진 프로젝트의 특정 목표와 제약 조건에 따라 달라질 수 있습니다.

네트워크 최적화
캐싱 및 기타 성능 최적화 기술을 사용
클라이언트 사이드로 오프로드 하기
React, Vue, Angular 등 프레임워크 및 라이브러리를 잘 사용하기

등등...

그중에서 이미지 최적화와 webpack 최적화 기법에 대해서 끄적여보겠습니다.

이후 React, lighthous, Network 최적화 방법들에 대해서도 정리해보는 시간을 가질 예정입니다.

이미지 assets 최적화 방법

1. 적절한 image format 사용하기

WebP

WebP 이미지는 이미지 품질 저하 없이 동등한 JPEG 이미지보다 최대 25-34% 더 작을 수 있고, 동등한 PNG 이미지보다 최대 28% 더 작음
WebP 이미지는 다른 이미지 형식보다 더 빠르게 웹 브라우저에서 디코딩 및 렌더링될 수 있음
WebP는 무손실 압축과 손실 압축을 모두 지원하므로 다양한 이미지 유형과 콘텐츠에 사용 가능. 무손실 압축을 사용하면 WebP에서 아티팩트나 왜곡 없이 이미지의 원래 품질을 유지할 수 있으며, 손실 압축을 사용하여 품질을 크게 저하시키지 않고 복잡한 연속 톤 이미지의 파일 크기를 줄일 수 있음
WebP는 투명도(알파 채널)를 지원하므로 이미지가 투명하거나 반투명한 영역을 가질 수 있음. 이는 다른 이미지 형식으로는 달성하기 어렵거나 불가능한 웹 페이지 레이아웃 및 시각 효과를 만드는 데 유용.

WebP대신 다른 확장자를 사용해야할 경우

JPEG: 복잡하고 연속적인 톤 콘텐츠가 포함된 사진
PNG: 색상이 평평한 영역이나 투명한 배경이 있는 이미지

이전 웹 브라우저와의 호환성이 문제가 되는 경우
WebP는 모든 웹 브라우저에서 지원되지 않으므로 이전 브라우저 사용자가 웹 페이지나 애플리케이션에 액세스할 수 있어야 하는 경우 대신 JPEG 또는 PNG를 사용해야 하는 경우
이미지에서 투명도(알파 채널)를 지원해야 하는 경우
WebP는 투명도를 지원하지만 모든 웹 브라우저가 이 기능을 지원하는 것은 아니므로 이미지에 투명도가 중요한 경우 더 광범위하게 지원되는 다른 이미지 형식을 사용해야 하는 경우
이미지의 파일 크기나 성능이 주요 관심사가 아니거나 이미지 편집 및 기타 도구에서 보다 광범위하게 지원되는 이미지 형식을 사용해야 하는 경우

2. 적합한 이미지 사이즈 고르기

큰 이미지는 다운로드하는 데 시간이 오래 걸리고 더 많은 대역폭을 사용하므로 이미지를 사용할 웹 페이지 또는 애플리케이션에 적합한 크기로 이미지 크기를 조정하는 것이 중요

3. 적절하게 이미지 compressing하여 크기 줄이기

파일 크기와 이미지 품질 사이의 균형을 최적화하기 위해 적절한 압축 설정을 자동으로 적용할 수 있는 ImageOptim 또는 Kraken.io와 같은 도구를 사용할 수 있음

4. 디바이스나 스크린 사이즈 별로 이미지 제공하기

해상도가 낮은 기기에는 더 작고 최적화된 이미지를 제공하는 동시에 더 큰 화면과 고해상도 디스플레이를 사용하는 사용자에게는 고품질 환경을 제공함으로써 웹 페이지의 성능을 개선하는 데 도움이 될 수 있음

srcset 및 sizes속성 사용

<img src="default.jpg"
     srcset="small.jpg 400w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 400px) 100vw,
            (max-width: 800px) 50vw,
            (max-width: 1200px) 33.3vw"
     alt="My image">

srcset: 사용할 수 있는 이미지의 세 가지 다른 버전(소, 중, 대)을 지정
w descriptor: 이미지의 너비를 픽셀 단위로 나타냄
sizes: 이미지가 서로 다른 화면 크기에서 차지하는 화면 너비를 지정

bundling tool 사용

Webpack은 JavaScript 및 CSS 파일을 더 적은 수의 파일로 묶음으로써 웹사이트의 성능을 최적화할 수 있는 도구로, 웹사이트 로딩 시간을 개선할 수 있습니다.

code splitting

Webpack을 사용하면 요청 시 로드할 수 있는 더 작고 집중된 번들로 코드를 분할할 수 있습니다. 이를 통해 웹 사이트의 초기 로드 시간을 줄이고 전반적인 성능을 향상시킬 수 있습니다.

module.exports = {
  // other webpack options here
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

자세한 사항은 여기를 확인 해주세요.

splitChunks옵션: 코드를 여러 번들로 분할하도록 구성
chunks옵션: all( 즉, 모든 코드가 별도의 청크로 분할)
minSize옵션: 최대 사이즈 30000바이트로 설정 (이 크기보다 작은 청크는 분할되지 않는다.)
maxSize옵션: 0(청크의 최대 크기가 없음을 의미한다.)
minChunks, maxAsyncRequests 옵션: 모듈이 별도의 청크로 분할되기 전에 가져와야 하는 횟수를 제어한다.
automaticNameDelimiter 옵션: name생성된 청크의 이름을 지정하는 방법을 제어한다.
cacheGroups옵션: webpack에서 다르게 처리할 수 있는 청크 그룹을 만들 수 있다.(이 예에서 vendors캐시 그룹은 node_modules디렉토리의 모든 모듈을 포함하도록 구성된다.)
priority : 더 높은 우선 순위가 부여되어 이러한 모듈이 먼저 별도의 청크로 분할된다.
default : 다른 모든 모듈을 포함하도록 구성되며 이러한 모듈을 여러 번 가져오는 경우에만 분할되도록 낮은 우선 순위가 지정된다.

tree shaking

번들에서 사용하지 않는 코드를 제거하여 크기를 줄이고 성능을 향상시킬 수 있는 webpack의 기능

module.exports = {
  // other webpack options here
  optimization: {
    usedExports: true,
    sideEffects: true
  }
};

performance budget

웹사이트가 총 번들 크기 및 로드 시간과 같은 성능 메트릭에 대한 특정 제한 내에서 유지되도록 하는 데 사용할 수 있는 일련의 지침으로, webpack의 성능 예산 기능을 사용하여 성능 예산을 집행하고 웹사이트의 성능을 유지할 수 있습니다.

module.exports = {
  // other webpack options here
  performance: {
    hints: 'warning',
    maxEntrypointSize: 1000000,
    maxAssetSize: 500000
  }
};

번들이 지정된 크기 제한을 초과하면 webpack이 경고를 생성

production mode

production mode에서는 축소 및 트리 쉐이킹과 같은 최적화가 가능하여 웹 사이트의 성능을 향상시킬 수 있습니다.

Benza

Understanding the impression

이전 포스트