WordPressの高速表示が求められるようになって、数年経ちますが、サイトを格納しているサーバーによって、全く同じホームページの内容なのに、その表示速度に大きな違いがあるということが、このレンタルサーバー比較のサイトで実験を行い明らかになってきました。

上記のサイトでは、5種類のサーバーに全く内容が同じデザインと施策で作ったコンテンツを掲載し、レンタルサーバー毎のWordPress高速化の検証を行っています。本サイトはリニューアルを行った時点では、お名前.comの共用サーバーで運営していたので、ひとまず、WordPress高速化に対して何も施策を取り入れていない状況から、ひとつずつインターネット上に出ているWordPress高速化支援のプラグインの効果測定を行っていきたいと思います。(現在このサイトはKDDIのCPIレンタルサーバーで運用しています。)

現在調査中のレンタルサーバーの中では、やはりWordPress高速表示を謳っているエックスサーバーに軍配が上がりますので、本サイトのリニューアル時点でのコピーサイトを、エックスサーバーに設置し、Google PageSpeed InsightsとGTmatrixでの計測結果を目標値と定め検証をスタートさせていきたいと思います。

対策無しで測定すると圧倒的な差が…

まず、初めにGoogle PageSpeed Insightsで本サイトを計測した結果です。本サイトは2017年3月に再リニューアルされています。

お名前.comはデフォルトのままだと特定値は低い

測定結果で指摘されている「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目。プログラムを学んでいる人には理解できるでしょうが、そうでない人だと「いったいなんなんだ?」と感じさせる「レンダリングをブロック」という意味深な文言。

この項目の詳細を見ると以下のような記述があります。

以下のリソースの読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを何もレンダリングできませんでした。レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。

今度は、「非同期」や「直接インライン化」といった専門用語が出てきました(汗)。単純にこのあたりは考えて頂きたいのですが、『専門用語が出てくる作業=お金のかかる作業』だと考えて頂いて構いません。ですから一旦、こういった項目は保留します。JavaScriptやCSSというのは、ホームページのデザインやレイアウトなどサイトを閲覧させるために重要なプログラムですので、生半可な知識でイジってしまうとサイトが壊れてしまいます。

次に指摘されている「圧縮を有効にする」。これもCSSファイルやJsファイルを圧縮しろという指摘なので保留。続いて『サーバーの応答時間を短縮する』。こちらはGoogle デベロッパーサイトにヘルプが掲載されていますので、確認することはできるのですが、対処方法などはもう全く歯が立ちません(笑)

最後に指摘されている「ブラウザのキャッシュを活用する」。これは「WordPress キャッシュ プラグイン」なんかで検索すると解決してくれる無料のプラグインをすぐに見つけることもできるでしょう。

修正を考慮の項目を見ていくと「画像を最適化する」の項目は何となくできそうですよね。それにしても「モバイル」51点「パソコン」61点という評価は低すぎです。では、次にエックスサーバーに設置しているコピーサイトの計測結果を見てみましょう。

エックスサーバーの方が測定結果はやはり良い

別のWordPressテーマ・テンプレートで検証している時の測定結果の差は、モバイル17、パソコン16の差があったのですが、このサイトで利用しているWordPressテーマ・テンプレートだとモバイル5、パソコン18とテーマ・テンプレートによるさも確認できましたが、はやりWordPressの高速表示を謳っているだけあってエックスサーバーでの測定結果はまずまずと言ったところです。

それぞれの項目を見ていくと、お名前.com共用サーバーにおいている本サイトの場合に比べ、エックスサーバーにおいているコピーサイトでは、『サーバーの応答時間』に関する指摘がなくなりました。しかしその他の項目を詳細まで見てみても、指摘されているファイルの数などに違いはありません。

【修正を考慮】の項目を見ていくと、こちらに『サーバーの応答時間』に関する指摘が記載され、『HTML を縮小する』が、なくなりました。エックスサーバーはどうやらHTMLを縮小してくれる機能があるようです。これはエックスサーバーに無料で付いているオプション設定の「mod_pagespeed」が効果を現してくれているようです。「mod_pagespeed」の詳しい記述はこちらのサイトが詳しかったのでリンクを張っておきます。(サイバーエージェント:mod_pagespeedの概要と導入について



「パソコン」での測定結果を見ると一目瞭然で【修正が必要】の項目から「圧縮が必要」が消えています。しかし、今のご時世、上げたいのはモバイル環境下での表示速度。果たしてこれからどこまで引き上げられるのか、そして仮にお名前.com共用サーバーで表示速度を早めることができたとして、同じ設定をエックスサーバーに設置した場合、どれだけの差が出るのか、それとも出ないのか…

このあたりは引き続き改善報告記事をご確認ください。

最後にGTmatrixでの計測結果です。

GTmatrixでの計測結果比較

全ての項目において、目を見張る差が出ていますが、やはり「Page load time」の1秒以上の差は気になりますね。それでは、今後の改善記事をお楽しみに。

WEBサイトの仕様

  • WordPressバージョン:4.4.2
  • WPテーマ・テンプレート:Arise Child(WP無料テンプレート:子テーマにてカスタマイズ)
  • 有効プラグイン:JetPack、Akismet、Contact Form 7、Search Regex、WP Multibyte Patch、Yoast SEO

Jetpack有効化機能:Beautiful Math、Gravatar ホバーカード、JSON API、WP.me 短縮リンク、ウィジェット表示管理、カスタム CSS、カスタム投稿タイプ、サイト統計情報、ショートコード埋め込み、スペルと文法、パブリサイズ、プロテクト、メール投稿、モニター、一括検索、共有、拡張配信、購読、追加サイドバーウィジェット、通知、集中管理

phpバージョン

  • お名前.com共用サーバー:5.5.30
  • エックスサーバー:5.6.18