ブログ運営者なら誰もが衝突する壁、
＼サイトの高速化／
私も悩まされました。
私は、高速化の確認にPageSpeed Insightsを利用しています。
そのエラーの中で私が一番悩まされた項目が 『使用していないJavaScriptの削減』。
今回はその改善方法を紹介します。
今回の方法で、このサイトのページスピードは40から90に上がったよ！
- PageSpeed Insightsでわかること
- JavaScriptとは
- プラグインflying Scriptsで高速化
※ウェブ用語などに関しては、まだまだ初心者ですので解釈が間違っている場合があります。
PageSpeed Insightsとは
PageSpeed Insightsは、ウェブページのコンテンツを解析し、ページの読み込み時間の短縮方法を生成します。
https://developers.google.com/speed/pagespeed/insights/?hl=ja
こちらのリンクを見ると分かりますが、PageSpeed Insightsは、「速度スコア」と「最適化スコア」の２つのスコアを総合して、サイトスピードを算出しています。
速度スコア
Chromeユーザーエクスペリエンスリポート(CrUX)のデータを組み入れて、ページの実際の処理能力データを表示します。
PageSpeed InsightsのFCPとDCLのレポートをCrUXで確認できる全てのサイトと比較して早いか遅いかを評価します。
- First Contentful Paint(FCP)：クリック後、サイトを表示させるための画像や映像などを生成するまでの時間。
- DOMContentLoaded(DCL)：ページや画像の読み込みが完了した時点でボタンクリックやフォーム入力を実行するというプログラミング言語。
最適化スコア
次の２つに関してページの処理能力が改善できるか評価します。
- スクロールせずに見える範囲の読み込み時間
- ページ全体の読み込み時間
☆高速化する前に知っておきたいこと
PageSpeed Insightsで提案された解決策を実行することで、ページの相対的な処理能力は改善されます。
しかし、実際のスピードはユーザーのネットワーク接続に左右されるので、必ずしも早くなるとは限りません
使用していないJavaScriptの削除…？
私がPageSpeed Insightsを利用した際に提案されたページスピード改善の大きな解決策は、『使用していないJavaScriptの削減』でした。
モバイルのスピードがなかなか改善しない理由がコレでした。
JavaScriptとは、簡単に言うとWebサイトに動きをつけるためのプログラミング言語です。
https://breezegroup.co.jp/202003/javascript-onload/
この問題を解決するために色々調べていく中で、
JavaScriptを無闇に削除してはいけない
ページの表示に関して、JavaScriptのレポンスは遅くても大丈夫
という2点が分かりました。
JavaScriptの実行を遅らせるプラグイン『Flying Scripts』
JavaScriptの実行を遅らせれば表示スピードが上がる、つまりサイトスピードが向上するのでは？、というわけでさらに調べた結果、こちらのプラグインに行き着きました。
Flying Scripts by WP Speed Matters
Flying Scriptsをインターネットで検索すると、実証ブログが多くヒットし、どの方もスピードが向上していました。
※他に Flying Pagesというプラグインを入れている方もいましたが、プラグインは少ないに越したことはないので、今回はFlying Scriptsのみで試してみることにしました。
Flying Scriptsの使い方
１．ワードプレスで、Flying Scriptsのプラグインをインストール・有効化しましょう。
２．Flying ScriptsのSetting、または設定の中のFlying Scriptsをクリックします。
３．Include Keywordsの欄に遅延させたいJavaScriptを記入します。
遅延させたいJavaScriptについては、以下の方法で検索し、検討してください。
①Chromeデベロッパーツールを使ったJavaScriptの表示方法
②Microsoft EdgeのDevToolsを使ったJavaScriptの表示方法
表示されていない場合は「≫」を選択するとドロップダウンリストが出てきます。
※上記で表示できない方は…
PageSpeed Insightsの結果の画面で、下にスクロールしていくと改善できる項目という欄が出てきます。
そこに、
- 使用していないJavaScriptの削減
- レンダリングを妨げるリソースの除外
が記載されており、詳細でJavaScriptが確認できると思うので、それを記入してみてください。
詳しくはこちらのうーなさんの記事をお読みください。
４．すべてのJavaScriptを入力し終えたら、その他の設定はそのままで、Save Changesを押せば完了です。
※ Flying Scriptsの詳しい内容に関しては、こちらの方が説明してくださっています。
PageSpeed Insightsで再検査
当サイトのスピードはこのように変化しました。
プラグイン導入前
プラグイン導入後
私が運営している特化ブログに関してもスピードがとても早くなりました。
プラグイン導入前
プラグイン導入後
また、何人かに特化サイトが正常に開けるか確認してもらいましたが、今のところサイトデザインの崩れなどは見られません。
＜21/09/01・追記＞
モバイルフッターのトップに戻るボタンが反応しない不具合がありました。
これは、『jquery.min.js』を設定から外せば解決します。
外すとモバイルスピードは下がりましたが、今のところは80点代をキープ出来ています。
まとめ
今回はワードプレスのプラグインFlying Scriptsを使って、『使用していないJavaScriptの削減』を改善する方法を紹介しました。
JavaScriptを削除するのではなく、JavaScriptの読み込みを遅延させることによってページスピードをあげます。
今回の記事では、Chrome等で確認できる全てのJavaScriptを全て遅延させるので、以下の点には注意してください。
- アドセンス広告の表示速度の低下
- アナリティクスの遅延によって即離脱者が記録されない場合あり
- サイトデザインの崩れ
もし不具合が生じた場合は、関連するJavaScriptを Flying Scriptsのキーワードから外す、もしくは Flying Scripts自体を削除してください。
今のところ、私のブログに関しては崩れるなどの不具合はないので、 Flying Scriptsは、サイトスピードの向上に有効な手段であると思います。
皆さんも是非試してみてくださいね。
コメント