Edited at

Node.js: compression middlewareで静的リソースをお手軽に圧縮し、expressのレスポンスを改善する。更にキャッシュも設定する

More than 3 years have passed since last update.


Node.jsで作ったサイトのレスポンス性能をあげるために、配信する静的リソース(HTML,JavaScript,CSSなど)をお手軽に圧縮する方法です。


compressionモジュールを使ってお手軽に圧縮

Node.jsのための、Webフレームワークexpressでは、4系からconnectモジュールが分割され、

今までそのまま使えたモジュールを別途npmでインストールする必要があります。

npm install compression

これで準備は完了です!

別途expressをまだインストールしていない場合は、インストールしてください。


Webサイトのパフォーマンスを確認するために、GoogleのPageSpeed Insightsを利用します。


  • compressionモジュールで圧縮する前は以下のような感じです。

    1.PNG



  • PageSpeed Insightsはご丁寧に、Webサイトの改善ポイントを教えてくれるので、とても便利です。

    使い方は、以下が参考になります。


    http://liginc.co.jp/web/useful/137177





実際に圧縮してみる

compressionモジュールでは、オプションを設定できます。

ここでは、圧縮レベルのみ指定しています。


var http = require("http");
var express = require("express");
var compression = require('compression')

//サーバー構築
var app = express();
var port = process.env.PORT || 8080;

// ここでcompressionモジュールを使う
// 圧縮レベルは9まで
app.use(compression({level: 6}));

// routesを設定
var maxTime = 86400000 * 30;
// maxAgeで、キャッシュの保持期間を設定。ここでは30日に設定
app.use(express.static(__dirname + "/public", { maxAge: maxTime }));

var server = http.createServer(app);
server.listen(port);

console.log("http server listening on %d", port);

ポイントはcompressionをかけてから、routesを設定することです。

順番が逆だと、圧縮がかかりませんでした。


圧縮結果

2.PNG

サイトのパフォーマンスが改善されました!

まだ修正箇所はありますが、これでだいぶパフォーマンスがあがりました。

あとは、画像自体を圧縮したり、JSファイルを圧縮したりすればもっとパフォーマンスは良くなります。


express3系はここが参考になります。


compressミドルウェアでexpressのレスポンスを良くしよう

http://blog.craftgear.net/4f81982a61933ced0d000001/title/compress%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%A7express%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%82%92%E8%89%AF%E3%81%8F%E3%81%97%E3%82%88%E3%81%86