Node.jsで作ったサイトのレスポンス性能をあげるために、配信する静的リソース（HTML,JavaScript,CSSなど）をお手軽に圧縮する方法です。
compressionモジュールを使ってお手軽に圧縮
Node.jsのための、Webフレームワークexpressでは、4系からconnectモジュールが分割され、
今までそのまま使えたモジュールを別途npmでインストールする必要があります。
- リソースを圧縮するためのmiddlewareであるcompressionをインストールします。
- https://www.npmjs.com/package/compression
npm install compression
これで準備は完了です！
別途expressをまだインストールしていない場合は、インストールしてください。
Webサイトのパフォーマンスを確認するために、GoogleのPageSpeed Insightsを利用します。
-
compressionモジュールで圧縮する前は以下のような感じです。
-
PageSpeed Insightsはご丁寧に、Webサイトの改善ポイントを教えてくれるので、とても便利です。
使い方は、以下が参考になります。
実際に圧縮してみる
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を設定することです。
順番が逆だと、圧縮がかかりませんでした。
圧縮結果
サイトのパフォーマンスが改善されました！
まだ修正箇所はありますが、これでだいぶパフォーマンスがあがりました。
あとは、画像自体を圧縮したり、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