Gridsome用のBrotliを入れて転送データの圧縮をする

Webサイトのパフォーマンスを上げるために、転送するテキストサイズを減らす必要があります。 Brotliは2015年、webfontの圧縮を目的に誕生しました。Googleのエンジニアが改良を加え 汎用データ圧縮、圧縮率の向上、エンコーダ/デコーダ両方の高速化、ストリーミングAPIの改善、 圧縮品質レベルの調整項目などが追加されました。

圧縮アルゴリズムBrotliを導入するメリット

代表的な圧縮アルゴリズムにはgzipというものがありますが、Brotliを用いた場合、 gzipに比べた際に、さらに1割くらい圧縮できるという優れものです

モダンブラウザであればほとんどが対応しているため利用して損はないでしょう

サポートブラウザ

サポートブラウザは多く、スマートフォンでの閲覧環境では有効な圧縮手段と捉えて良さそうです

  • Google Chrome 49とそれ以降のバージョンでサポートされている。
  • Microsoft Edge はバージョン15から対応した。
  • Mozilla Firefox 44とそれ以降のバージョンでサポートされている。
  • Opera 36とそれ以降のバージョンでサポートされている。
  • Safariにおいては、Safari 11から対応した。

インストール

Gridsomeに早速 brotliをインストールするためにプラグインを入れます

yarn add gridsome-plugin-brotli

brotli　有効にする

有効化は非常に簡単です。設定ファイルのpluginのなかに以下を記述します 今回はcss,html,js,svg,jsonというファイル形式をオプションで指定しました

gridsome.config.js

 plugins: [
        {
            use: 'gridsome-plugin-brotli',
            options: {
                extensions: ['css', 'html', 'js', 'svg', 'json']
            }
        }
 ]

Chrome開発 > ネットワーク > 各ファイル中の、

content-encoding: br

となっていればbrotli適用は完了です

Brotliまとめ

これまではgzip圧縮が使われてきましたが、ブラウザの歴史の中でgzipが幅広くサポートされていたためです 今では、圧縮効率が高いBrotli圧縮が浸透し始めてきており、スマートフォンに搭載のブラウザやモダンブラウザは対応しているので、 転送データ量の削減と転送速度の向上をはかりたいのであれば、間違いなくbrotliを導入した方が良いでしょう