こんにちは、龍一です！
ブログやサイトを運営していく上で、ページの表示速度はとても重要です。一般的に表示速度が３秒以上かかるページは訪問者の４０％～５０％が離脱すると言われています。アフィリエイト収入を考えているブログなら死活問題になりますね。
自分も気になり速度を測ったら悲惨な結果だったので、改善することにしました。知識が何もないので、素人でも簡単にできることだけをやってみました。自分と同じで知識がない人でも簡単にできると思うので、表示速度に悩んでいる方は参考にしてください。
Googleが提供している PageSpeed Insights でページ速度を測れます。
[aside type=”boader”]表示速度を計測したページの詳細サーバー：エックスサーバー（X１０プラン）
テーマ：ストーク [/aside]
改善した結果
画像は改善後の速度結果です。満足いく結果になって良かったです。欲を言えばモバイルもパソコンと同じくらいしたいですね。
[aside type=”boader”]改善前パソコン：５３点、モバイル：４８点
改善後
パソコン：８５点、モバイル：６９点 [/aside]
試した方法
エックスサーバー
エックスサーバーを利用している人の改善方法です。
サーバーパネルにアクセスしたら、赤枠内の「mod_pagespeed設定」をクリックします。
現在の設定が「OFF」になっていたら、青枠内の「ONにする」をクリックして現在の設定を「ON」にしてください。
mod_pagespeed設定とは、Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。
BJ Lazy Load
画像を圧縮してくれるプラグイン「EWWW Image Optimizer」は使ってましたが、画像を遅延してくれるプラグインは使ってなかったので導入してみました。導入したのは「BJ Lazy Load」です。
BJ Lazy Loadは、画像を遅延読み込みして表示速度を上げるワードプレスのプラグインです。画像をたくさん使用している人におすすめです。BJ Lazy Load以外に、「Lazy Load」と「Unveil Lazy Load」も有名なので使用している人が多いです。
Lazy Loadは１年以上も更新されていません。Unveil Lazy Loadは３年以上も更新されていません。長期間更新されていないプラグインは、セキュリティー面や不具合の問題が起きる場合があるので、自分はBJ Lazy Loadを選びました。
[aside]画像をあまり使用していない方には不要のプラグインです [/aside]
プラグインの新規追加をクリックして、赤枠内に「BJ Lazy Load」を入力します。インストールしたら、青枠内の「有効化」をクリックして有効にします。
管理画面の「設定」から「BJ Lazy Load」クリックします。Thresholdの欄だけお好みの設定値に変更してください。
[aside]Thresholdは、遅延させている画像の読み込み位置の指定です。４００が違和感なく読み込んでくれると思います。推奨は２００～４００です。注意点が１つだけあります。パソコンは問題ないのですが、モバイルはスクロールが停止してから画像が表示されます。モバイルからの訪問者が多いブログの方には注意が必要かもしれません。 [/aside]
キャッシュ系プラグイン
ワードプレスには、高速化ができるキャッシュ系のプラグイン「w3 Total Cache」・「WP Super Cache」・「WP Fastest Cache」などが有名です。
キャッシュ系プラグインは不具合などのトラブルが出るみたいなので、知識がない自分は使用していません。使用する場合は、「使用しているテーマ・使用しているプラグイン」との相性を確認してから使用した方が良さそうです。
.htaccessの編集
ブラウザのキャッシュを活用します。
エックスサーバーのサーバーパネルから「.htaccess編集」をします。赤枠内に以下のコードをコピペしたら完了です。
[aside type=”boader”]ExpiresActive OnExpiresByType text/css “access plus 1 days”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks” [/aside]
CDNサービスを使用する
高速化する方法にCDN（コンテンツ・デリバリー・ネットワーク）を活用する方法があるみたいです。CDNサービスとは、キャッシュを複数のサーバーで所有し、アクセスによる負荷を分散することができます。
このサービスを無料で提供してくれている「Cloud Flare」がありますが、Cloud Flareのサイトが英語なのと設定が難しそうだったので断念しました。
まとめ
以上の内容を実践したら、かなり改善されました。表示速度に悩んでいる方は、参考にしてください。
プラグインを使用する場合は、使用しているテーマによって不具合が出ることがあるので、不具合が出たら使用を中止してください。