今まで、やらなきゃいけないと思いつつもプラグインでちょこちょこ対応していた程度だった「表示速度の高速化」ちゃんと取組もうと思い、いろいろとやりました。
表示速度を改善する為には、キャッシュをいじるので下手するとWEBサイトが表示されなくなったり、WordPressが壊れたりするのでドキドキでした。
Udemyで人気講座を受講しよう
なぜ高速化が必要なのか？
一般的にWEBサイトを訪問して最長3秒で閲覧を続けるか、ほかのWebサイトに移動するかを判断されるといわれており、Webページを表示するだけで４秒も５秒もかかっていたのでは、機会損失なわけです。
GoogleもWEBページの表示速度は評価ポイントとして見ているので、速ければ速い方がいいわけです。
ブログの表示速度をチェックする
PageSpeed Insights（Google Developers）
GTmetrix
GTmetrix | Website Speed and Performance Optimization
ダメダメなWEBマスターの手帳
表示速度をチェックしたら、全然ダメダメでした。
PageSpeed Insightsでのチェック結果
GTmetrixでのチェック結果
WordPressの高速化対策した結果
Javascriptやソースコードの整理がまだできていないですが、かなり評価は上がりました。YSlow Gradeはyahooだからほっといてもいいかな。ちゃんとやらなきゃダメだろうな…
PageSpeed Insightsでのチェック結果
GTmetrixでのチェック結果
①WordPressの高速化に使えるプラグインの有効化
いくつかは以前から使っていましたが、今回の作業で新たに追加したものもあるので全て載せておきます。
尚、キャッシュ系のプラグインはトラブルが起こり易いですので、適当にやってしまうとブログが表示されなくなったり、壊れたりしますので、慎重に慎重を期して自己責任で使ってください。
W3 Total Cache
ブラウザやサーバーのキャッシュを使うことで表示速度を上げるためのプラグイン。多機能で「CloudFlare（CDNサーバー）」との互換性もあるので便利。
参考記事：W3 Total Cache のおすすめの設定方法
キャッシュとは
キャッシュと言われても、なんだかよく分からないという方もいるかもしれないので、一応載せておきます。
「キャッシュ」とは、Internet Explorerなどのブラウザが、表示したWebページの情報を一時的にコンピュータに保存しておく機能です。
再度同じWebページにアクセスしたときに、インターネット上のデータではなく、キャッシュに保存されたデータを参照することで、Webページを素早く表示することができます。／引用元：キャッシュとCookieの削除 | 早稲田大学ITサービスナビ
MO Cache
WordPressの翻訳ファイルをキャッシュすることで高速化できるプラグイン。「.moファイル」というWordPressを日本語化するために使われているファイルをキャッシュします。
EWWW Image Optimizer
画像ファイルを圧縮することができるプラグイン。ただでさえ量が増えると表示速度が遅くなるのが画像ファイル。画像ファイルのファイルサイズを気にせずにアップロードしてブログ内で使ったりすると、どんどん表示速度は遅くなる。
参考記事：EWWW Image Optimizer の設定方法と使い方
Lazy Load
ブラウザの画面で表示されていないスペースにある画像（スクロールすると見えてくる画像）をスクロールに合わせて画像を読み込むようにするプラグイン。
これが無いと、WEBページにアクセスした時に、スクロールしないと表示されない部分の画像も全て読み込んでしまうので表示速度が遅くなる。
DB Cache Reloaded Fix
データーベースのクエリをキャッシュするプラグイン。
②エックスサーバーで「mod_pagespeed設定」をオンにした
Googleが提供しているWEBサイトを高速化させるためのツール「mod_pagespeed」を使う設定をしました。設定と言っても「エックスサーバー」が実装してくれているので、エックスサーバーにログインして設定をオンにするだけ。楽だ。
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。／引用元：エックスサーバー マニュアル | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
③エックスサーバーのPHP高速化設定（FastCGI）を有効にした
こちらもエックスサーバーが実装してくれているので、設定をオンにするだけ。マジで楽です。
CPU負荷を軽減し実行を高速化できる仕組みである「FastCGI」をPHPプログラムに適用することができます。多数のアクセスが見込まれるドメインでは有効(On)にすることでCPU負荷軽減および高速化を図ることができます。／引用元：エックスサーバー管理画面内
エックスサーバーは高性能で動作も速くいのですが、さらに高速化する機能が充実しているので、選んで正解でした。今回はエックスサーバー様様でした。
④CloudFlareを使い始めた
CloudFlareという「CDN（コンテンツ・デリバリー・ネットワーク）」の１つを使い始めてみました。CDNはコンテンツの一部を複数のサーバーに分散し、１つのサーバーにかかる負荷を分散する仕組みです。
転送量に応じて使用料が発生するAmazon Web Serviceが提供するCDNもありますが、CloudFlareは無料プランがあるので助かります。
ウェブサイトにある画像や動画などの高容量コンテンツをウェブサービスが提供されているサーバーとは別のサーバーにキャッシュし、代わりに配信して負荷分散するという仕組み。/引用元：表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ！！ | gori.me（ゴリミー）
⑤必要のないプラグイン、テーマの削除、ウィジェットの整理
必要のない（使っていない）プラグインとテーマを削除しました。テーマは削除する必要は無かったかもしれませんが、断捨離ということで。
ウィジェットについても人気記事や最新記事など、本来はプラグインを使わずにウィジェットも使わずにphpを直書きしたほうがいいので、おいおいやっていきます。
様子を見ながら改善していきます
ひとまず、いろいろと修繕を施しました。まだ完璧に反映されていない部分もあると思うので定点観測しながら、改善を進めていきたいと思います。
大きなトラブルも無く無事に済んで良かった。それにしても「YSlow Grade」がD判定なのは、やっぱりよろしくない。ちゃんとやろう。
※後日、ちゃんとやりました→MinifyしたらGTmetrixのYSlow Gradeの評価がDからBに大幅ランクアップしたよ。
今回の作業で参考にした記事
今後、エラーが発生した時のためのメモ
- エックスサーバーとCloudflare併用時に「WordPress管理画面のアクセスが拒否されました」と出た場合の対処法
- WordPressセキュリティ設定 – マニュアル | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
スポンサーリンク
