ページスピード高速化論争に終止符！？

みなさんこんにちは！ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！つい先日、クリック一つで「mod_pagespeed」を導入できますよ！的なメールがエックスサーバーさんから届きました。

当ブログでもプラグインや、.htaccessでのページ表示速度高速化をたくさん試してきました。

そして、ページスピードインサイトでも施策前から比べると大幅なポイントの改善に至ったわけですが、実はこの「mod_pagespeed」こそが、最も興味のある施策だったので、クリック一つで導入できるとなると試さないわけにはいきません！

という事で、早速クリックしてみたいと思いますが、もし興味のある方がいれば、当ブログで散々悩んだ高速化計画の一部始終をご覧ください。興味のない方はそのまま読み進めて行きましょう。

■　ここから高速化計画は始まった！ ： 「EWWW Image Optimizer」ページ表示速度を早くする為に導入したプラグイン。WordPress高速化第一弾！

 

mod_pagespeedとはなんなのか？

「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデーター転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。

この最適化処理により、Webサイトにアクセスしたブラウザはページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

引用元　：　エックスサーバー公式HP

 

mod_pagespeedはGoogleが提供している、ページ表示速度を高速化してくれる機能の事で、公式サイトPageSpeed Module より、自身の環境にあったパッケージをダウンロードし、サーバーにアップロードするのですが、公式サイトをご覧いただければわかりますが、すべて英文な上に、私のようにプログラミングに疎い人には意味不明だと思います。

いわゆる管理者向けのソフトウェアでもあるわけです。

しかし、今回ぱそこんプログラムに疎い私の為にエックスサーバーさんがクリック一つでmod_pagespeedを導入出来る様にしてくれたおかげで、簡単に設定できるようになりました。

Googleが提供しているという事で、ページスピードインサイトのポイント、つまりページ表示速度の改善によるSEO効果が期待できると言う事になります。

 

どういった効果があるのか？

機能が多すぎてすべては書ききれませんが、主に以下のようなものがあります。いずれもページスピードインサイトで指摘されている改善項目を最適化させるには必須のものばかりです。

• CSSやJavaScriptのスペースなどを削除し、縮小してくれる。
•  HTMLの不要な空白などを削除し縮小、最適化させる。
•  画像タイプの最適化をさせる。
•  CSSやJavaScript、画像のブラウザ側のキャッシュ期間延長と更新時期の最適化。
•  HTTPリクエスト数を少なくする。

他にも機能がたくさんありますが、詳しい解説はWeb担当者フォーラムに記載されていますので、そちらをご覧いただいた方が分かりやすかもしれません。

参考　：　インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった　Web担当者フォーラム

 

当サイトの現在の速度向上施策

当サイトが現在行っているページスピード高速化でやっている施策の現状は以下の通りです。

• EWWW Image Optimizerプラグインの導入
• .htaccessでのgzip化とキャッシュ生成

現在導入している方法は上記の2つだけです。この他CSS、JavaScriptの縮小やキャッシュ系の様々なプラグインを試してみましたがページ表示の不具合等を考慮し、この2つの組み合わせがページスピードインサイトでの評価と、サイトの不具合がない妥協点を探り導入しているものです。

他にもプラグインを試したことはありますが、大幅なポイントの上昇もなかったので(積み重ねは大切ですけど)、ソースが増える事で、将来的にどれかが原因で不具合が起こるかもしれません。

そうなった時にトラブルシューティングが困難になるので、プラグインを増やしたくないとの意図もあり、上記の2種類の施策にとどめていました。

 

mod_pagespeedをテストする！

前置きが長くなりましたが、早速「mod_pagespeed」をテストしてみようと思いますが、疑問点もありましたので、その辺も考慮しながら検証してみたいと思います。

 

.htaccessでのgzip化とキャッシュ生成をストップ

今回導入する「mod_pagespeed」にはキャッシュを生成する機能もあります。ただし、現在.htaccessでもキャッシュを生成するように設定していますので、この辺りが重複しているような気がします。

悩んでいても仕方ないので、.htaccessから一旦ソースを削除し、デフォルト状態にしてページスピードインサイトで数値と項目がどのように変化するのか検証してみたいと思います。

参考　：　.htaccessでgzip圧縮とキャッシュを行ってページスピードインサイトのポイントが向上！？

 

 

ノーマル.htaccessでの計測

■　ソース導入時のパソコンとモバイルポイント。

 

■　ソース削除時のパソコンとモバイルポイント。

数値が大幅に悪くなってますね・・・。如何に.htaccessに導入したソースが有効かと言う事が実証されました。

 

赤字の修正が必要の部分が今回の最重要修正項目なのですが、特に「スクロールせずに見えるコンテンツのレンダリングブロックのJavaScript/CSS を排除する」の所は気になっていた部分ですので、この辺りの数値に変化が出るのかも見て行きたいと思います。

一旦これを“デフォルト値”として計測していきます。私が今回一番重要視しているのが、何をやっても向上しなかったモバイルのポイントです。これが上がればいいな～と密かに思っております。

なんせ、当サイトへの流入はモバイルが50％程度を占めています。画像も多用している当サイトでは、モバイルからのアクセスには表示されるまでに多少時間がかかってしまいますので、ここは何とかなってほしいですね。

 

mod_pagespeedをONにする

これはいたって簡単で、エックスサーバーのサーバーパネル管理画面からmod_pagespeed機能のONをクリックするだけです。図解しておきますので参考までにご覧ください。

複数のドメインを管理している方は、適用する設定対象ドメインを確認しておきましょう。そして、mod_pagespeedをクリックします。

 

現在の設定が表示されています。現在はOFFになっていますので、ONをクリックします。

 

「mod_pagespeed設定の変更が完了しました。」と表示されれば設定完了です。簡単ですね^^

 

ON状態でのページスピードインサイトポイント

驚愕のポイントです！今まで何をやっても50にも満たなかったモバイルポイントが70にまで上昇。「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」のスクリプトリソースが6、CSSが6と大幅に減少しています^^

 

.htaccessにソースを追記し計測。

ソースを再度追記し、ページスピードインサイトのポイントを計測してみましたが、結果はmod_pagespeedをONにした状態と変わらず。今までのソースの効果を感じられなかったた為、ソースコードを削除する事にしました。

ただ一つ問題があって、当サイトだけかもしれないのですが、.htaccessをFTPから触るとmod_pagespeedが勝手にOFFになっている現象が見受けられました。そういった仕様なのか当サイトだけの現象なのかわかりませんので、それぞれ確認した方が良いかもしれませんね。

 

EWWW Image Optimizerも削除してみる

mod_pagespeedに画像最適化という項目があったので、ついでにEWWW Image Optimizerプラグインも削除してポイントを計測してみようと思います。

削除後もポイントが全く変わらず・・・。mod_pagespeed恐るべし！という事でEWWW Image Optimizerプラグインも完全に削除しました。

 

結論

mod_pagespeedで今まで何をやっていたんだろうというくらいの驚きがありました。今まで高速化のための施策やプラグインはすべて削除し、現在はmod_pagespeedのみ設定しています。

これをクリック一つで有効化できる機能を持つレンタルサーバーはエックスサーバーにしかありません。

他のサーバーにも導入に少し手間がかかるようですが、組み込むことは可能です。しかし、プログラムに精通している管理者向けのソフトウェアですので、簡単には手は出せないと思います。

もし、これからレンタルサーバーを決めようと思っている方、ブログの移転を考えられている方には、是非エックスサーバーを使ってもらいたいなと思うくらい感動しました。

なにより、何をやってもダメだったモバイルポイントがアップした事がすごくうれしいです^^容量の少ないモバイルの表示速度が上がる事で、必然的にユーザビリティも向上する事でしょう^^

 

まとめ

今回の検証の結果。mod_pagespeedはページスピードを意識するのであれば必須のソフトという事になりました。

勿論、テーマや個人の環境により効果が薄かったり、デザインが崩れる可能性も否定できませんし、ブログの隅々まで見て、不具合がないかを長い目でチェックしていかないといけないとは思いますが、現段階では大変満足しています。

プラグインでmod_pagespeedと同程度の高速化を図る場合は数多くのプラグインを使用しなくてはならないでしょう。

プラグイン削減によるソースの軽減他、CSSにはじまりJavaScripやHTML、そして画像やキャッシュまでクリックでONにしておくだけで、自動で調整してくれるので大変便利です。

エックスサーバー以外の方も、もし導入する機会があれば検証してみて下さい。