웹 성능

웹 페이지의 속도는 사용자에게 매우 중요한 부분이라고 할 수 있습니다.
Akamai의 2017보고서를 살펴보면 다음과 같이 나와있습니다.

사이트 로딩 속도가 0.1초 지연되면 매출이 7% 감소할 수 있습니다

하루에 100만원을 번다고 했을때, 웹 성능 저하가 있을시 7만원을 잃게된다는 말이기도하죠. 그만큼 속도는 중요한 요소입니다.

웹 성능 측정하기

웹 페이지 성능 측정은 lighthouse 라는 크롬 익스텐션으로 쉽게 확인 할 수 있습니다.

lighthouse를 사용하여 자신의 프론트엔드 앱을 개선하고 사용자에게 더 나은 경험을 제공할 수 있습니다.

성능 개선하기

프로덕션 모드

webpack에는 개발 모드와 프로덕션 모드가 있습니다.
둘읙 가장 큰 차이점은 프로덕션 모드가 기본 압축 플러그인과 함께 제공되어 bundle.js의 크기를 최소화한다는것입니다.
bundle.js가 크다면 로드 시간이 길어질 수 있기때문에 bundle.js의 크기를 최소화하는것은 매우 중요합니다.

압축 플러그인

Gzip은 인터넷에서 널리 사용되는 압축 도구입니다. bundle.js를 한 번 더 압축을 할 수 있는데요 사용은 다음과 같이 하실 수 있습니다.

npm install --save-dev compression-webpack-plugin

compression-webpack-plugin을 설치했다면 webpack.config.js 파일에 다음과 같이 코드를 추가합니다.

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new CompressionPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.(js|css|html|svg)$/,
    threshold: 8192,
    minRatio: 0.8
    })
  ]
}

이렇게 하고 build를 한 다음 성능을 측정해보시면 성능이 큰 폭으로 향상된 것을 보실 수 있으실겁니다.

Code Splitting

Code Splitting은 위의 bundle.js의 크기 때문에 로드 시간이 길어진다는 것과 같은 이유인데 Code Splitting은 bundle이 거대해지는 것을 막기위해 bundle을 나누는 것입니다.
앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드는 불러오지 않게 하여 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.
Code Splitting은 다음 번 포스트에 자세하게 다루도록 하겠습니다.

이 외에도 여러가지 방법이 있습니다.
중복되는 코드를 줄이고 페이지 렌더링과 로드를 최적화 하는 등 여러가지 방법이 있고 저또한 알지 못하는 많은 방법이 있을 거라 생각합니다. 오늘 제가 포스팅한 내용들은 bundle의 크기를 어떻게 줄일 것 인가? 라는 고민을 하시는분들에게 많은 도움이 되었으면 좋겠습니다.