とも運送.com
仕事も遊びもゆるく楽しむ個人事業主のブログ
ブログ運営

サイト表示速度改善のために行ったこと【ワードプレスプラグインAutoptimize・EWWW Image Optimizer・WP Super Cacheの活用】

ブログの記事数や訪問者数がある程度増え始めると、サイトの表示速度についても改善しなければなりません。

私も記事数と内容を増やすことで精一杯だったので、サイトの表示速度については後回しにしていました。

とも

久しぶりにPageSpeed Insightsを見たところ、私のサイトは表示速度が非常に遅いことに気付き驚きました。特にモバイル表示が遅く、50点前後しかありません。

この記事では私のブログにおいて、サイト表示高速化のために行った対策を紹介します。

特にWordPressのプラグイン、AutoptimizeとWP Super Cacheの導入は簡単で、かなりの効果がありました。

パソコン表示に関しては60点前後から90点前後に急上昇しましたので、表示速度改善に興味のある方はぜひ最後まで御覧ください。

この記事はこんな方におすすめです

ブログ初心者で、サイト表示速度の改善に興味がある方

プラグインを使用することで、不具合が発生してしまう可能性があります。 プラグインの使用は、あらかじめデータをバックアップしたうえで、ご自身の責任のもと行ってください。プラグインを使用されたことや、この記事で紹介する方法で生じたいかなる損失、損害につきましても、当ブログでは一切の責任を負いかねます。

サイト表示速度改善のためインストールしたワードプレスのプラグイン

インストールしたプラグイン用途
EWWW Image Optimizer主に画像サイズの圧縮
Autoptimize主にCSSやJS、HTMLなどのコードを軽量・最適化。今回は画像の遅延読み込みにも使用 
WP Super Cache主にキャッシュの活用

ネット上の様々な解説サイトを参考にした結果、これら3つのプラグインが比較的安全かつ設定が簡単で、効果がありそうでした。

私が使用している有料テーマ「JIN」のマニュアルで、EWWW Image OptimizerとAutoptimizeは推奨プラグインとされていましたが、WP Super Cacheは扱いに注意するよう記述がありました。

EWWW Image Optimizerはすでに使用していましたが、アップロードする前に画像を圧縮していなかったのが表示速度に大きく影響しているようです。

今後はアップロードする写真のサイズに気を付けなければなりません。

ワードプレスに画像をアップロードする前に、適切なサイズに縮小や圧縮を行うことがとても重要でした。ブログ初心者の方は、私のように後悔しないよう気をつけてください。

サイト表示速度改善のため設定した主な内容

Autoptimizeで画像の読み込みを「遅延読み込み」にする

最もネックになっているのが画像サイズの問題らしいとわかったのですが、写真中心の記事を多く書いていたため、今からアップロードし直すのは現実的ではありません。

PageSpeed Insightsで指摘された項目の内、すぐに対処できそうなことは、オフスクリーン画像を遅延読み込みさせることでした。

Autoptimizeで「画像の遅延読み込みを利用」にチェックした画面。

この点はAutoptimizeを設定するだけですぐに改善されたことが、PageSpeed Insightsで確認できました。

同時にCSSやJS、HTMLなどのコード内容等も最適化しましたが、効果についてははっきりと確認できませんでした。

AutoptimizeでCSSを最適化する画面。
AutoptimizeでJSを最適化する画面。

ただしAutoptimize導入後PageSpeed Insightsのポイントははっきり良くなった印象があります。

Autoptimizeの細かい設定に関しては、詳しい方の記事がネット上にたくさんありますので省略させていただきます。

PageSpeed Insightsはグーグルが提供するサイトで、モバイル端末やパソコン向けのページの実際のパフォーマンスや、改善方法を確認できます。

WP Super Cacheでキャッシュを活用する

もう一つすぐに対処できそうなことはキャッシュを利用することでした。

キャッシュ系のプラグインは、他のキャッシュ系プラグインと一緒に使うと不具合が生じる恐れがあるなど、良くわからないまま使うのは怖い印象があったのでインストールしていませんでした。

今回色々調べるうちに、WP Super Cacheは「WordPress.com」を運営しているAutomatic社が提供していることを知り、導入することにしました。

私のサイトでは、WP Super CacheのONとOFFで、PageSpeed Insightsの点数がすぐに5~10ポイントほど変わりました。

WP Super Cacheの細かい設定も、より詳しい方の記事がたくさんありますので省略します。

キャッシュ系のプラグインは一つだけの利用に絞らないと、不具合の原因になるようです。多くの記事で同様の解説を見ましたので、インストールする際は十分に注意してください。

キーリクエストのプリロード

キーリクエストのプリロードとは、重要なリクエスト(キーリクエスト)を先に読み込むことのようです。

これはプラグインを使用せず、キーリクエストをプリロードするためのコードをブログのHEAD内に貼り付けて対処しました。

ネット上で紹介されていた何種類かのコードを試した結果、以下の例でやっと解決できました。

対象となるURLによってコードの書き方が異なるようなので、慎重にためしてみてください。

私が使用したコード

<link rel=”preload” href=”対象URL” as=”font” type=”font/woff2″ crossorigin>

私の場合上の対象URLの部分に、PageSpeed Insightsで指摘されていたURLを挿入して、ブログのHEAD内に貼り付けました。

私が使用しているWordPressテーマの「JIN」は、HEAD内に簡単にコードを貼り付けることができるので助かりました。

直接コードを修正しなければならなかったら、あきらめていたかもしれません。

もしも初心者の方がコードを直接修正する場合は、バックアップを取るなどくれぐれも注意してください。

これでキーリクエストのプリロードについては解決できました。

PageSpeed Insightsで提案された改善策を実行すると、結果をすぐに確認することができます。



まとめ

様々なプラグイン解説ブログ記事を参考にしましたが、おすすめ設定がそれぞれ微妙に異なっているためかなり悩みました。

私のブログに合うように設定したつもりですが、これが最適解かどうかはまだわかりません。

ただ今回の対策により、PageSpeed Insightsの点数はモバイル・パソコン共に平均スコアが少なくとも5ポイント以上は良くなったようです。(曜日・時間によって大きく異るため、はっきりとはわかりません。)

特にパソコンの方は対策前が70点前後だったものが、90点前後まで大幅に改善されたので大成功です。

PageSpeed Insightsで93点が出た画面。

今のところ特に不具合も見られないので、とりあえず良かったです。

サイトの状況によって効果には差があると思いますので、あくまでも参考程度にお読みいただければと思います。

今回も最後までご覧いただきありがとうございました。

ブログに人気記事ランキングを設置する方法【WordPress Popular Postsの使い方】 こんにちは!とも@tomounsoです。 みなさんはブログに人気記事ランキングを設置していますか? とも 人気記事ランキン...
タイトル黒板
クレジットカードの発行はA8.netのセルフバック利用がおすすめ!【ブログ初心者必見!】無料会員登録やクレジットカードの発行で報酬を得る事ができる、セルフバック(自己アフィリエイト)というサービスをご存知ですか? ブログ初心者の方や、これからクレジットカードを作ろうとしている方に、ぜひおすすめしたいサービスです。 ...
WordPressのブログをGoogleドライブに無料でバックアップする方法【初心者向け】WordPressでブログを始めたばかりの方、バックアップの方法がわかりづらくて困っていませんか?プラグインの『UpdraftPlus』を使ってGoogleドライブを保存先にすれば、簡単に無料でバックアップできます。初心者の方には一番簡単な方法だと思いますのでぜひ参考にしてください。 ...
もしもアフィリエイト「かんたんリンク」の使い方丨初めての広告におすすめこの記事では、もしもアフィリエイト「かんたんリンク」の特徴と使い方を解説します。初心者の方でも簡単にアフィリエイトリンクを貼れるようになりますので、 最後までお付き合いくださいね。 ...
Googleアドセンスの審査に合格する方法【9つのチェックポイント】この記事では、Googleアドセンスの審査に合格する方法【9つのチェックポイント】について解説します。 ...
ワードプレスでブログを始める方法【初心者向け】この初心者によるブログ運営日記では、私が知識ゼロの状態からブログを運営する様子を初心者の立場で解説します。ブログをこれから始める方にとって少しでもお役に立てば幸いです。...
スクリーンショットをブログ記事や資料作成に活用する方法【Screenpressoの使い方】今回はスクリーンショットを簡単に加工できるソフト、 「Screenpresso」を紹介します。スクリーンショットをブログ記事や資料作成に活用したい方はぜひ参考にしてください。 ...