こども・ママ・元気

こどもとママが元気なら、家族も元気に!子育てや生活、美容に役立つママが知っておきたい情報について書いています♪

ブログ

ブログのアクセス数が激減!ワードプレスの速度改善したプラグイン紹介!

投稿日:2020年5月16日 更新日:

2020年5月6日に急にブログのアクセス数が激減・・・(涙)。

今までの4分の1以下になってしまいました。

2020年の5月5日からGoogleの「コアアルゴリズムのアップデート」が実施され、その影響だと思います。

今までのほほんとブログを書いていたのですが、今回のアクセス数激減に驚き、対策を練ることにしました。

まず、ワードプレスのブログ表示速度が遅い!ということです。

気にしてはいたのですが、アクセス数も良かったので、何も対処をしていませんでした。

浅はかでした・・・。

Googleの PageSpeed Insights で分析してみると・・・・

なんと・・・

モバイルの分析が36・・・・

「フィールド データからこのページは速度が「遅い」ことがわかりました。」

と結果が出ました(涙)。

パソコンの方は90以上だったので、モバイルをどうにかしないと!

実は・・・今まで、 PageSpeed Insights で分析したことがなく、お初です(汗)

それだけ速度に対して気にもしていなかったのです。

速度が遅いのはブログの致命傷とも言われているのに・・・。

でも!分析したおかげで、思っていた以上に対策が必要なんだと言うことがわかりました。

まだ未経験の方はやってみてください~。

PageSpeed Insights

とりあえず速度対策をしよう!

ということで立ち上がりました!

何もブログの表示速度に対して対策をしていない方のために、今回は、いろいろなプラグインを入れた中で一番効果のあったプラグインをご紹介したいと思います。

  

ブログの表示速度をアップさせるプラグイン

ブログの表示速度を上げるために多くの方が使っている定番のプラグインを導入しました!

①EWWW Image Optimizer

ブログに使用する画像を自動的にサイズを圧縮してくれます。

結構ブログに画像を載せていたので、これで速度アップするかな・・・と期待したのですが、私の場合は、 PageSpeed Insights の分析結果は変化ありませんでした。

②Lazy Load – Optimize Images

ウェブサイトを開くと、画面が表示され、スクロールしながら読み進めることが多いと思います。

ウェブサイトを開いた時、最初の画面表示されますが、その時にスクロールしながら読んでいく後の方の画像まで一気に読み込もうとします。

それで速度が落ちます。

ならば、まずは画面に表示される画像を優先的に読み込んで、スクロールされて次の画像が近づいてきたら、その画像を読み込んでいこう!

ということをしてくれる画像の遅延読み込みをしてくれるプラグインです。

設定後、わくわくしてPageSpeed Insights の分析をしましたが、私の場合は、分析結果に変化はありませんでした。

③Head Cleaner

ワードプレスの表示速度を高速化できるプラグインだとよく紹介されているので、入手しました。

HTMLのHEAD要素のタグを最適化してくれるプラグインです。

おすすめの反面、テンプレートによっては不具合が起きるかもとも、記載が多いので心配はあったのですが・・・。

設定が終わり、ブログを確認すると、ばっちり不具合が起きていました。

トップ画面がおかしくなっていました(汗)。

バックアップしてあったので、そんなには焦りませんでしたが、Head Cleanerを停止させたら、すぐにトップ画面が直ったので、手間は何もありませんでした。

ちなみに、私の使っているテーマは「STINGER」です。

同じテーマの方は、気を付けてくださいませ。

④WP Fastest Cache

前回閲覧したURLのページを再度閲覧する際に、表示速度を早くしてくれる機能を、キャッシュと言います。

キャッシュを作成して、ブログの表示速度を改善してくれます。

PageSpeed Insights の分析をしましたが、私の場合は、分析結果に殆ど変化はありませんでした。

⑤Autoptimize

HTMLやCSS・Javascriptのコードを圧縮してくれます。

データを小さくしてくれるので、表示速度を速めることに繋がります。

また、カーソルを合わせるだけでキャッシュを削除でき、簡単です。

キャッシュを削除してから、PageSpeed Insightsで分析すると、若干結果が良くなります!

このプラグインと同じ開発者が作った「Async JavaScript」を連結させると、CSSとJavaScriptの両方に効く情報があったので、「Async JavaScript」を入手しようと思います。

また、PageSpeed Insights の改善できる項目に「レンダリングを妨げるリソースの除外」と書かれており、「Autoptimize」と「Async JavaScript」を連結させることで、こちらも解決できそうな予感です。

この時点で、PageSpeed Insightsのモバイルの分析が45になりました!

⑥Async JavaScript

JavaScriptの読み込みを非同期にさせたり、遅延読み込みをさせたりすることができます。

設定後、PageSpeed Insightsで分析してみると、モバイルで70でした!!

このプラグイン入れたら、45から70に上がりました!

そして、「レンダリングを妨げるリソースの除外」にも成功し、合格した監査に表示されました!

70でも速度はまだまだ低いので、もっと改善できるように頑張らないと~。

「レンダリングを妨げるリソースの除外」の改善の仕方

「Autoptimize」と「Async JavaScript」を有効にする。

設定

Async JavaScript

「Enable Async JavaScript」にチェック

Quick Settingsの中の「Apply Defer」を選択

そうすると自動でチェックを入れてくれます。

保存

設定

Autoptimize

「JavaScript コードの最適化」と「CSS コードを最適化」のボックスにチェックを入れる

保存

※他にも必要なものがあればチェックを入れてくださいね!

まとめ

今回ご紹介した6つのプラグインは、多くの方が設定方法を紹介してくれていますので、検索すればすぐにわかります。

私の場合は、「Autoptimize」と「Async JavaScript」が速度を上げるのに効果がありました。

今回は「Head Cleaner」を導入すると不具合がありましたが、プラグインを導入すると不具合が起きるのは多くの人が経験することです。

是非とも、プラグインを導入する際には、バックアップしましょう!!!

私は、バックアップに「UpdraftPlus」というプラグインを使っていますが、使いやすいですよ。

-ブログ
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です