どうも、個人ビジネス部ＰＨＰ専門のコウイチです。
皆さん、WordPressのブログの表示速度って気にしていますか？
この度Googleが、「スピードアップデート（Speed Update）」を導入すると発表しました。
平たく言うと、Googleが、「モバイル向けの表示が遅いページは、検索順位を下げるよ！！」
と言ってきたのです。
ページの表示速度をモバイル検索のランキング要素として組み込むことを Google はアナウンスしました。
引用：Googleがスピードアップデート(Speed Update)を導入、2018年7月からページ表示速度をランキング要因に
今までもページの表示速度は検索順位に影響していたのですが、パソコンでもモバイルでも、パソコン向けのページの表示速度で測っていたので、パソコン向けのページさえ最適化していればよかったんです。
スマホでのアクセスが多い近年、きちんとモバイル向けのページを作成し、表示速度も最適化しておくことに越したことはありませんね。
この記事では、WordPress初心者も作業しやすいように、画像を使って手順を説明しています。
手順通りに作業するだけで、簡単にプラグインの設定を行い、あなたのサイトの表示速度が改善できるようようになっていますので、是非参考にしてください。
サイトの表示速度の計測方法
ご自分のサイトの表示速度がどんなもんなのか、気になったでしょうか。
表示速度を一瞬で計測するサイトがあります。Googleが提供してくれてますよ。
↓
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
計測したいページのURLを入れて、分析ボタンを押すだけ！簡単です。
ブログの速度改善を依頼されたので、速度を計測してみた。
この度、あるブログの速度改善をしてくれとの依頼を受け、試しに速度を計測してみました。
すると・・・
モバイルでの表示速度
速度：Unavailable（！？）
最適化：Low
速度が「Unavailable」って何ぞや！？計測不能なほど遅いってことか？（後述します）
最適化はLow。最適化が甘いみたいみたいです。ちょっと危機感がありますね。
パソコンでの表示速度
速度：Unavailable
最適化：Medium
最適化はまあまあみたいです。ただ、まだ改善の余地はありそうです。
速度改善の結果・・・
具体的な作業内容の説明に入る前に、速度改善の作業を実施した結果を発表します。
どうなったかというと・・・
モバイルでの表示速度
最適化：Good（87/100）
実に、最適化の点数が40もアップしました！！
パソコンでの表示速度
最適化：Good（86/100）
こちらはさらなる最適化を遂げ、最適化の点数が13アップしました！！
速度がUnavailableになってしまう件について
速度がUnavailableになってしまうのは、何故なのでしょうか？
PageSpeed Insightsのよくある質問に
速度のデータが表示されない URL があるのはなぜですか？
PSI では Chrome ユーザー エクスペリエンス レポートのデータを使用しており、Google のウェブクローラが認識している代表的な URL について速度のデータが表示されます。ただし、速度のデータがない URL であっても、PSI でページの最適化に関する分析をすることは可能です。
とありました。
つまり、まだGoogleのウェブクローラが認識している速度データがないだけ、ということのようです。
決して、「ページの表示が遅すぎて測定不能になっているわけではない」です。
ですので、速度が表示されなくても、「最適化」の欄の点数を上げることを目指しましょう。
ブログの表示速度の改善作業を実施
それでは、実際にこのブログの表示速度を改善させた作業について、説明していきます。
今回は、プラグインを使用して簡単に改善でき、かつ効果の高いものを取り上げ、作業してみました。
それでは行ってみましょう！
画像を圧縮して画像の表示速度を改善
まずは、プラグイン「EWWW Image Optimizer」をインストールして、サイズのデカい画像を自動的に圧縮してくれる機能を導入しましょう。
プラグイン「EWWW Image Optimizer」をインストールして有効化してください。
「EWWW Image Optimizer」の設定を開きます。
それでは設定をしていきましょう。
基本設定
基本設定タブを開きます。
「メタデータを削除」をチェックしましょう。
画像に画像データ以外のデータが組み込まれている場合、それらは不要ですので、削除してくれます。
変換設定
次に、変換設定タブを開きます。
「コンバージョンリンクを非表示」にチェックします。
これで、JPGからPNGに変換したりといった機能が無効になります。
これが有効になっていると、ファイル形式の違う同じ画像が沢山増えて管理が煩雑になったり、画像が必要以上に劣化する恐れがあるため、デメリットの方が大きいでしょう。
以上が設定項目となります。
他にも上級者向けの設定は沢山ありますが、速度改善としては、今紹介した設定で十分です。
これで、今後アップロードする画像は特に意識しなくても、自動で圧縮してくれます。
どれくらい圧縮されたか確認する
どれくらい圧縮してくれたのかは、メディアライブラリを見ると分かりますよ。
まだ圧縮されていない画像を一括で圧縮する
まだ圧縮されていない画像もここで一括圧縮してしまいましょう。
メディア⇒一括最適化から、「最適化されていない画像をスキャンする」をクリックします。
少し待って準備が完了したら、「最適化を開始」をクリックします。
これで、一括最適化は完了です。
プラグイン「Lazy Load」で、画像の読み込みを後回しにする
次に、画像の読み込みを後回しにするプラグインを導入してみましょう。
通常であれば、文章や画像が順次読み込まれ、ページが表示されます。
しかし、プラグイン「Lazy Load」を使えば、ページを表示し、後から画像が読み込まれます。
これだけで、ページの表示速度の改善が見込めます。
こちらはインストールして有効化するだけで効果を発揮するプラグインです。カンタンですね！
プラグイン「Head Cleaner」で、cssやJavaScriptの読み込みを後回しにする
プラグイン「Head Cleaner」は、cssやJavaScriptの読み込みを後回しにしてくれるプラグインです。
簡単に言うと、先ほどの画像を後から読み込む話と同じで、通常の文章よりも読み込みが重いcssやJavaScriptを、後から読み込むことで、ページの表示速度を向上させます。
「Head Cleaner」をインストールしたら、設定を開きます。
「Head Cleaner」の設定
「CSSとJavaScriptを、サーバ上にキャッシュする」にチェックを入れます。
するとそれに関連する設定項目が現れます。
以下のようにチェックを入れます。
設定は完了です。
プラグイン「W3 Total Cache」でキャッシュによる高速化を実現
プラグイン「W3 Total Cache」を使えば、ブラウザにキャッシュ（一時的に保存されたファイル）としてサイトデータを残すことで、再びそのページが閲覧された際のページの表示速度を高速化できます。
「W3 Total Cache」をインストールしたら、「Performance」⇒「General Settings」を開きます。
「W3 Total Cache」の設定
以下の通り、設定します。
Page Cache
Minify
CSSやJavaScriptの最適化は、前述した「Head Cleaner」でやっているので、無効にしておきます。
Database Cache
Enableにチェック、Diskを選択。保存をクリック。
Object Cache
Enableにチェック、Diskを選択、保存をクリック
Browser Cache
Enableにチェック、Diskを選択、保存をクリック
Miscellaneous
以下の通り、設定しましょう。
Page Cacheの詳細設定
次に、Performance⇒Page Cacheを開きます。
General
以下の通り、チェックしましょう。
「Cache front page」にチェックし、トップページのキャッシュを有効にします。
「Don't cache pages for logged in users」にチェックし、管理画面へのログイン中はキャッシュしないようにします。
編集中の記事がキャッシュされ、不特定多数に公開されるのを防ぐためです。
Cache Preload
「Automatically prime the page cache」はチェックしないでおきます。事前にページのキャッシュを作成してくれる機能ですが、サーバーに負荷がかかるため使いません。
Purge Policy: Page Cache
以下のように設定しましょう。
これで、記事を公開した際にキャッシュが再作成されるようになります。
Database Cacheの詳細設定
Performance⇒Database Cacheに移動します。
General
「Don't cache queries for logged in users」をチェックします。
管理画面へログイン中にデータベースのキャッシュを行わないようになります。
記事編集中などにキャッシュが作られてしまうと、編集結果が反映されないなどの問題が起こる可能性があるためです。
Browser Cacheの詳細設定
Performance⇒Browser Cacheに移動します。
- Set Last-Modified header
- Set expires header
- Set cache control header
- Set entity tag (ETag)
- Enable HTTP (gzip) compression
の5つの項目をチェックします。
以上で設定は完了です。
Cloud Flare
最後にもうひとつ、Cloud Flareというサービスを使うと、さらなる速度改善が期待できます。
これは何かというと、CDNサービスと言って、複数のサーバーでサイトのデータをキャッシュし、誰かがページにアクセスしたときに物理的に最も距離が近いサーバーのキャッシュからサイトデータを読み込むというもの。
Cloud Flareには有料プランもあるのですが、無料プランで十分使えます。
Cloud Flareへ登録
Cloud Flare公式サイトへアクセス。
Sign Upをクリック
メールアドレスと、ご希望のパスワードを入力し、「Create Account」をクリック。
「+ Add a Site」をクリックし、最適化したいサイトのURLを入力します。
「Next」をクリック
最適化したいサイトの解析結果が表示されるので、「Continue」をクリック
「1 Free Website」を選択したことを確認し、「Purchase」をクリック。
FREEプランを選択し、「Confirm Plan」をクリック
ここで、使用しているDNSサーバをご覧の通りに変更してくださいという画面が表示される。
これはDNSサーバを設定しているサービスにログインし、この画面の指示通りにDNSサーバを変更しましょう。
変更したら、「Continue」をクリック。
「W3 Total Cache」の設定を再度変更する
それでは、W3 Total Cacheの設定に戻り、Cloud Flareを有効にしましょう。
Extensions
「Performance」⇒「Extensions」へ移動します。
CloudFlareの「有効化」リンクをクリックします。
General Settings
Performance⇒General Settingsに移動します。
「Network Performance & Security powered by CloudFlare」という項目があるので、「Flush CloudFlare on Post Modifications」にチェックしましょう。
これにより、記事を編集した際に、キャッシュが更新されるようになります。
以上で、設定は終わりです。
結論：プラグインを入れるだけで効果バツグン
プラグインを入れて設定を行うだけで、このように即効性のある速度改善が可能です。
プログラミングの知識が無くても実施できるものなので、この機会にあなたのサイトにも取り入れてみてください。
ちなみに、PageSpeed Insightsでサイトの速度測定を行った結果を下にスクロールすると・・・
ぺージの読み込みを妨げている原因と改善策が表示されます。
これをやっていくとGoogleの「最適化」評価が100%に近づいていきます。
ただここから先は、少し専門的にWordPress内部をいじる必要が出てきますね。
ですのでひとまず、専門知識が無くても実施できる、「プラグイン導入による速度改善」を行ってください。
いつか、あなたのブログを僕がカスタマイズできる日を、楽しみにしています！（＾＾）
ではまた。
