로딩 성능 최적화 - 텍스트 압축, 불필요한 CSS 제거

텍스트 압축

개요

서버에서 보내는 리소스들(CSS, JS, HTML)의 텍스트를 압축해서 보내고 받고 압축을 해제한다.

크기가 작기 때문에 더 빨리 다운로드할 수 있다. -> 로딩 속도를 개선할 수 있다.

lighthouse의 opportunities에서 확인할 수 있다.

종류

텍스트 압축에는 크게 2가지가 있다.

• GZIP
• Deflate

GZIP이 Defalte보다 더 좋은 압축율을 제공한다.

적용

번들은 기본적으로 압축이 안된 상태로 전달이 된다.

이를 compression-webpack-plugin을 활용해 빌드 시 압축하거나, 서버 코드에서 텍스트 압축을 적용한 후 전달하도록 하면 된다.

압축 시 모든 파일을 압축하는 것이 아닌 크기가 특정 크기 이상(ex: 10KB)인 파일들만 압축을 해서 전달한다.

압축하는 시간, 압축을 푸는 시간을 고려해서 크기가 특정 크기 이상인 파일들이 압축을 할 때 속도상의 이점을 가져갈 수 있기 때문이다.

compression-webpack-plugin을 적용하는 방법은 다음과 같다.

// webpack.config.prod.js
plugins: [
	/// 생략
    new CompressionPlugin({
      deleteOriginalAssets: true,
      algorithm: 'gzip',
      test: /\.(js|css|html)$/,
      threshold: 10240, // 압축을 적용할 파일 크기의 최소값 (10KB)
      minRatio: 0.8, // 압축률이 80% 이상일 경우에만 압축을 적용
    }),
]

네트워크 탭에서 Response Headers의 Content-Encoding 속성을 확인하여 압축 여부, 종류를 확인할 수 있다.

불필요한 CSS 제거

크롬 Coverage 탭 활용해서 CSS파일에서 사용하지 않는 부분들을 확인할 수 있다. (빨간 부분: 사용X)

사용하지 않는 CSS 코드들은 어떻게 제거할 수 있을까?

PurgeCSS를 사용한다. - className 전부 추출해서 CSS 코드와 비교해 사용하지 않는 CSS 코드를 제거한다.

tailwindcss를 사용할 때 특히 유용하다.

webpack에 purgecss-webpack-plugin을 활용해서 mini-css-extract-plugin과 같이 활용해서 사용할 수 있다.

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");

const PATHS = {
  src: path.join(__dirname, "src"),
};

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ],
};

tailwindcss 와 같이 사용 시 가끔 클래스이름 들을 제대로 추출하지 못해서 사용하는 CSS 코드가 날아가는 경우가 있다.

config 설정을 따로 해줄 수 있다.

/// purgecss.config.js
module.exports = {
    defaultExtractor: (content) => content.match(/[\w\:\-]+/g) || []
}