PageSpeed Insightとは何か？

PageSpeed InsightsはGooglega無料で提供しているWebサイトの表示速度を測定・評価する分析ツールです。調べたいWebサイトのURLを入力するだけで、Webページの読み込み速度がスコアで表示されます。モバイルとPC両方のデバイスの分析結果を確認できます。

ページ表示が速いというのは最も重要な要素です。自分のサイトと他のサイトのスコアを見比べる事で速度的な問題が生じてないか判断することが出来ます。

現在の状態について説明

私のWebサイト周りの情報になります。

この状態からXserverで標準で利用できるXPageSpeedの機能とCocooの高速化設定を使いPageSpeed Insightのスコア向上を目指していきます。

まずは何もしていない状態での速度はこちらです。

画面左側デスクトップのスコアをご覧ください。91点の高スコアです。速度の速い環境ですと画像や処理があっても余裕です。

それに対して携帯電話はどうでしょう。17点しか取れません。かなり低いです。モバイル回線においては、データをコンパクトに効率よく、ストレスなく表示させるかが重要になってきます。

Xserver標準のXPageSpeedの場所と設定方法

まず始めにXserver側の設定を変更していきましょう。

サーバーパネルへログインをしてください。

サーバーパネルのホームページにあるXPageSpeed設定を押してください。

ドメイン選択画面では、ご自身のHPのドメインを選択してください。

これがXpageSpeed設定の画面です。設定項目は左のラジオボタンのチェックを入れ替えて画面右下の確認画面へ進むボタンを押します。

確認画面です現在の設定と変更後の設定を確認して変更ボタンを押します。

設定変更が完了したら、戻るボタンでまた設定画面に戻れます。

XPageSpeedでの検証内容

画像設定でのスコアの変化

画像最適化のみをONにした場合

17→20へスコア向上。微妙。

画像遅延読み込みのみONにした場合

17→48に！素晴らしいです。

画像最適化と画像遅延読み込み両方ONの場合

17→44へ。なぜか下がるスコア

CSS設定でのスコアの変化

CSS最適化のみON

17→44へ。効果が高い。

CSS遅延読み込みのみON

17→48に。これも良い。

CSS最適化とCSS遅延読み込みをON

17→34に…。

JavaScript設定でのスコアの変化

JavaScript最適化のみON

17→42に。そこそこ良い。

JavaScript遅延読み込みのみON

17→50へ。かなり良いです。

JavaScript最適化とJavaScript遅延読み込みをON

17→45に。

最適化だけをONにした場合はどうか？

画像、CSS、JavaScriptの最適化をON

17→42。複数の効果が加算されるとか乗算されるとかではないみたいです。

遅延読み込みだけをONにした場合はどうか？

画像、CSS、JavaScript遅延読み込みをON

17→46に。やはり複数の効果が加算されたりはしないみたいです。

全部まとめて設定をONした場合

全部まとめてONにした場合

17→58に。

自分の環境ではすべての設定をＯＮにした場合のスコアが一番高かったです。サイトの表示も特に問題は起きてません。

Cocoonの高速化設定を試してみる

利用できる高速化項目

利用したい項目にチェックを入れて画面左下の変更を保存ボタンを押します。今回はすべて有効にしてみました。

Cocoonの高速化設定をすべて有効にした場合（XPageSpeedの設定はすべてOFF）

17→44に

CocoonもXPageSpeed全ての項目を有効にした場合

17→50に

結論

XPageSpeedもCocoon高速化設定もどちらでも簡単にスコア向上が出来ました。利用できる設定が似通っていますので最終的にXpageSpeedの設定はすべてONにしてCocoon高速化設定は設定が被っていないブラウザキャッシュとHTML縮小を利用することにしました。

現在特に不具合も見当たりません。不具合が出る場合もどの項目が影響を与えてるのか簡単に確認ができます。使わない手はないと思いますので是非お試しください。

追記:自分の環境ですと、Cocoonの高速化設定でHTMLを縮小化するにチェックを入れるとライブドアの相互RSSが表示されないみたいです。