웹사이트 속도를 빠르게 하기 – 01편 – 코드 압축 / 미니파이

웹사이트 속도가 느리면 사이트 이용자가 기다리지 못하고 이탈할 확률이 높아지므로 SEO에도 매우 안 좋은 영향을 미친다.

이제부터 웹사이트 속도를 빠르게 하는 방법 중 첫번째, 미니파이 에 대해 알아보자.

미니파이 ?

CSS나 Javascript의 코드를 압축 하는 것을 미니파이(Minification)라고 한다.
코드에서 불필요한 공백, 주석, 줄바꿈 등을 제거해서 파일 크기를 줄이는 방법이다.

Javascript 미니파이

const btn = document.querySelector('button');

function random(number) {

return Math.floor(Math.random() * (number+1));

}

btn.onclick = function() {

const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';

document.getElementById('pid').style.color = rndCol;

}

위 코드를 미니파이 하면, 아래와 같이 바뀐다.

const btn=document.querySelector('button');function random(number){return Math.floor(Math.random()*(number+1))}btn.onclick=function(){const rndCol='rgb('+random(255)+','+random(255)+','+random(255)+')';document.getElementById('pid').style.color=rndCol}

CSS 미니파이

p{

	color: #00CCCC;

}

위 코드를 미니파이 하면, 아래와 같이 바뀐다.

p{color:#00CCCC;}

장단점

미니파이를 하면 내가 코드를 보기 힘들긴 하지만 브라우저에선 코드 확인하는데 아무런 문제가 없으며 파일 크기가 줄어들어서 더 빨리 다운로드 되고 실행될 수 있다.

미니파이 방법

Minify.org로 접속하여 Javascript, CSS 미니파이를 할 수 있다.

물론 이 사이트에 HTML Minifier도 있으나 오류가 발생된다.

미니파이한 코드를 다시 보기 좋게 만드는 CSS Formatter 와 JavaScript Beautifier 있으니 참고 하자.

그 외에 도움되는 것들

불필요한 코드 제거

불필요한 코드 제거는 필요 없는 코드를 제거하는 것이다.

트리쉐이킹(Tree Shaking)은 사용하지 않는 코드를 제거하여 번들 크기를 줄이는 최적화 기법이다. 주로 JavaScript 모듈 시스템(ES6 모듈)에서 사용되며, Webpack, Rollup 등의 모듈 번들러에서 지원한다.

아래 순서대로 코드를 작성하여 트리쉐이킹을 적용하자.

ES6 모듈 문법 사용

트리쉐이킹은 ES6의 import/export 문법을 기반으로 동작한다.
따라서 프로젝트에서 ES6 모듈을 사용해야 한다.

// math.js

export function add(a, b) {

  return a + b;

}

export function subtract(a, b) {

  return a - b;

}

// main.js

import { add } from './math.js';

console.log(add(1, 2)); // subtract는 사용되지 않음

모듈 번들러 설정

Webpack이나 Rollup과 같은 모듈 번들러를 사용할 때 트리쉐이킹을 활성화해야 한다.

Webpack 모듈러 사용 방법을 알아보자.

Webpack 설정

Webpack은 기본적으로 프로덕션 모드(mode: ‘production’)에서 트리쉐이킹을 자동으로 적용한다.

// webpack.config.js

module.exports = {

  mode: 'production', // 트리쉐이킹 활성화

  entry: './src/main.js',

  output: {

    filename: 'bundle.js',

    path: __dirname + '/dist',

  },

};

파일 압축

웹페이지 속도를 빠르게 하기 위해 Gzip 압축을 사용하는 것은 매우 효과적인 방법 중 하나다.
Gzip은 파일 크기를 줄여 페이지 로딩 시간이 단축되게 한다.
주로 텍스트 기반 파일(HTML, CSS, JavaScript, JSON 등)을 압축하는 데 효과적이며, 일반적으로 파일 크기를 70~90%까지 줄일 수 있다.

Gzip 압축은 주로 웹 서버(예: Nginx, Apache) 또는 CDN(Content Delivery Network)에서 설정한다.

Nginx에서 Gzip 설정

Nginx 설정 파일(nginx.conf 또는 사이트 설정 파일)에서 Gzip을 활성화할 수 있다.

http {

  gzip on; # Gzip 압축 활성화

  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 압축할 파일 타입 지정

  gzip_comp_level 6; # 압축 수준 (1~9, 6이 일반적으로 권장됨)

  gzip_min_length 256; # 최소 파일 크기 (256바이트 이상인 파일만 압축)

  gzip_vary on; # 클라이언트가 Gzip을 지원하는지에 따라 응답 변경

}

Apache에서 Gzip 설정

Apache에서는 mod_deflate 모듈을 사용하여 Gzip 압축을 활성화한다.

sudo a2enmod deflate

sudo systemctl restart apache2

<IfModule mod_deflate.c>

  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript

  DeflateCompressionLevel 6

</IfModule>

CDN에서 Gzip 설정

대부분의 CDN(예: Cloudflare, AWS CloudFront)은 기본적으로 Gzip 압축을 지원한다.

CDN 설정에서 Gzip을 활성화하면 된다.

코드 스플리팅

웹 페이지의 성능을 최적화하기 위해 코드를 여러 파일로 나누는 기술이다.
이를 통해 초기 로딩 시 필요한 코드만 로드하고, 나머지 코드는 필요할 때 동적으로 로드할 수 있다.

주로 Webpack과 React에서 코드 스플리팅을 구현한다.

초기 로딩 시간이 단축되지만 너무 많은 작은 번들로 나누면 네트워크 요청이 증가할 수 있으니 주의하자.

Webpack에서 코드 스플리팅

import() 문법을 사용하여 동적으로 모듈을 로드할 수 있다.

// webpack.config.js

module.exports = {

  entry: './src/index.js',

  output: {

    filename: '[name].bundle.js',

    path: __dirname + '/dist',

  },

  optimization: {

    splitChunks: {

      chunks: 'all', // 공통 코드를 별도의 번들로 분리

    },

  },

};

React에서 코드 스플리팅

React에서는 React.lazy()와 Suspense를 사용하여 코드 스플리팅을 구현한다.

import React, { Suspense } from 'react';

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

function App() {

  return (

    <div>

      <Suspense fallback={<div>Loading...</div>}>

        <LazyComponent />

      </Suspense>

    </div>

  );

}

export default App;