WordPressのサイトを高速化して表示速度を改善する方法【PageSpeed Insightsによる測定】

WordPressで構築したブログに、Googleのサイト性能評価ツールである「PageSpeed Insights」を流してみたところ、以下のような結果になりました。

PageSpeed Insightsの結果

スコア61って低くない・・?いやいや、WordPress自体はデフォルトで運用しているから、多くの人は同じような状態なのでは・・と気持ちを落ち着かせて、PageSpeed Insightsの意義と対応策について考えていきます。

PageSpeed Insightsとは

「PageSpeed Insights」とは、Google Developersで公開されているWebサイトの表示速度測定ツールです。
Web業界では、スマホ等のモバイルデバイスでも適正にWebサイトが表示されるレスポンシブ対応等、今までのSEOとは異なった対策へとシフトしています。
「PageSpeed Insights」は、スマホ・PCそれぞれの閲覧において、サイトの表示速度を測定し、改善点を提案してくれるツールです。
WordPressはテーマや有効化しているプラグインによっては、表示速度がかなり遅くなり、高得点を出すのが困難のようです。
しかし、Googleが検索順位には表示速度も影響することを公表したので、少なくともPageSpeed insightsで出た問題点に対しては、対応が必須だと思われます。
試しに自分のWebサイトも計測してみるとよいでしょう。

PageSpeed insightsへ

PageSpeed Insightsのそれぞれの提案について

それでは、それぞれの提案について、詳細と対応を見ていきましょう。

画像を最適化する

画像のメタ情報を削除、ロスレス圧縮等により、見た目上の違いはそれほど無いまま、ファイルサイズを大幅に削減する事で対応できます。
WordPressのプラグインを利用することで、簡単に画像を最適化することができます。
詳細な方法は以下のページで解説しています。
WordPressで使っている画像を圧縮してブログを高速化する【PageSpeed Insightsで高得点を取る】

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

ページを表示する際に、CSSやJavaScriptが読み込まれる事によって、その間、読み込みが妨げられます。
非同期でCSSやJavascriptを読み込むWordPressのプラグインを利用することで、表示が遅れる現象を防ぐことができます。

ブラウザのキャッシュを活用する

ブラウザのキャッシュを有効にする事で、ページの表示速度を上げる事ができます。
WordPressのプラグインもありますが、余分な設定を多く含んでいます。
多少手間ですが、WordPressの設定ファイルに1行追加するだけで、ブラウザのキャッシュを有効化することができます。

サーバーの応答時間を短縮する

ここには、サーバーの応答時間が表示されているので確認しましょう。
1秒を超えている場合、なんらかの対策が必要です。

圧縮を有効にする

最近のブラウザは、gzipやdeflateによって圧縮されたデータ(HTML、CSS、JavaScriptファイルなど)をサポートしています。
「圧縮を有効にする」とサーバーからの出力をクライアントに送る前に圧縮します。
クライアント側は、圧縮されたデータをブラウザで展開・描画するので通信の負担が激減し、ページの読み込み時間が劇的に速くなります。

CSSを縮小する

無駄な改行やスペース等を削除・ファイルの圧縮などにより、ファイルサイズの縮小を行います。

JavaScriptを縮小する

CSSを縮小すると同様に、javascriptファイルの無駄な改行やスペース等を削除・ファイルの圧縮などにより、ファイルサイズの縮小を行います。

対応方法の注意点

プラグインの組み合わせによっては、早くなるどころか、表示速度がかえって遅くなるケースがあります。特にCSSやJavaScriptを再構築するようなプラグインは、正常に表示や動作しなくなる等、注意が必要です。
対応するごとに計測し直して、効果があることを確認しましょう。

再測定

私の環境で再測定が済み次第、結果を掲載しますので少々お待ちください。

まとめ

今回は、「PageSpeed Insights」を使って、Webサイトのページ表示速度の改善方法について説明しました。
このツールは、スコアが数値化されているため、現在の課題が把握しやすいと思います。
ぜひ、皆さんも試してみてください。