PageSpeed Insightsを使用してWEBサイト表示の問題点に対応する

PageSpeed Insightsとは

PageSpeed Insightsは、Googleが公開しているサービスで、作成したWEBページの表示速度について様々な視点から改善提案をしてくれるツールです。 PCでのユースケースだけでなく、モバイル向けにも同時にチェックしてくれます。

どんなことをチェック・提案してくれるか？

PC

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
ブラウザのキャッシュを活用する
表示可能コンテンツの優先順位を決定する
画像を最適化する
JavaScript を縮小する
CSS を縮小する
HTML を縮小する
サーバーの応答時間を短縮する
リンク先ページのリダイレクトを使用しない

モバイル

モバイルについてはユーザー・エクスペリエンスの視点からも提案をしてくれます。

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
ブラウザのキャッシュを活用する
画像を最適化する
圧縮を有効にする
JavaScriptを縮小する
CSSを縮小する
HTMLを縮小する
サーバーの応答時間を短縮する
リンク先ページのリダイレクトを使用しない
表示可能コンテンツの優先順位を決定する
タップターゲットのサイズを適切に調整する
viewportの設定
コンテンツのサイズを表示域に合わせる
プラグインを使用しない
判読可能なフォントサイズの使用

改善例（Node.js編）

圧縮を有効にする

静的ファイル（html、JavaScript、CSS、画像など）をクライアントに送信する際に、サイズが大きいと読み込みに時間がかかるようになります。 JavaScriptをムダなスペースを消したり、変数名を短縮したりして圧縮する、といった方法も有効です。ですが、根本的に、ファイルそのものをgzipなどて圧縮してサーバからクライアントに送信できれば、それだけ速度改善も進めることができます。

compressionモジュールの利用

Node.jsにはcompressionという圧縮を有効化するためのモジュールがあります。 https://github.com/expressjs/compression 使い方は簡単です。

$ npm install compression --save

const compression = require('compression');

:

const app = express();
app.use(compression({level: 6}));

levelという引数がありますが、これは圧縮レベルで、9までの値を指定します。デフォルトは6で、値が大きいほど、圧縮処理に時間がかかるようになります。

この記事を書いた人 : 國田健史

その他のスタッフブログ:

一覧へ戻る

WEBページの表示改善