このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

すぐ高速化*『使用していないJavaScriptの削減』を改善

ブログ

ブログ運営者なら誰もが衝突する壁、

\サイトの高速化/

私も悩まされました。

私は、高速化の確認に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は次の2つのスコアを総合して、サイトスピードを算出しています。

速度スコア

Chromeユーザーエクスペリエンスリポート(CrUX)のデータを組み入れて、ページの実際の処理能力データを表示します。

PageSpeed InsightsのFCPDCLのレポートをCrUXで確認できる全てのサイトと比較して早いか遅いかを評価します。

  • First Contentful Paint(FCP):クリック後、サイトを表示させるための画像や映像などを生成するまでの時間。
  • DOMContentLoaded(DCL):ページや画像の読み込みが完了した時点でボタンクリックやフォーム入力を実行するというプログラミング言語。

最適化スコア

次の2つに関してページの処理能力が改善できるか評価します。

  • スクロールせずに見える範囲の読み込み時間
  • ページ全体の読み込み時間
高速化する前に知っておきたいこと

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の使い方

1.ワードプレスで、Flying Scriptsのプラグインをインストール・有効化しましょう。

2.Flying ScriptsのSetting、または設定の中のFlying Scriptsをクリックします。

Flying ScriptsのSetting
設定の中のFlying Scripts

3.Include Keywordsの欄に遅延させたいJavaScriptを記入します。

遅延させたいJavaScriptの検索方法を以下に記載します。

Chromeデベロッパーツールを使ったJavaScriptの表示方法

1.Chromeで自分のサイトを開きます

2.右クリックし、検証を選択します

3.Networkを選択します

4.そのままの状態でページを再読み込みします

5.JSを選択します

6.この部分を記入してください

Microsoft EdgeのDevToolsを使ったJavaScriptの表示方法

1.Microsoft Edgeで自分のサイトを開きます

2.右クリックし、開発者ツールで調査するを選択します

3.ネットワークを選択します

表示されていない場合は「≫」を選択するとドロップダウンリストが出てきます。

4.そのままの状態でページを再読み込みします

5.JSを選択します

6.この部分を記入してください

上記で表示できない方は…

PageSpeed Insightsの結果の画面で、下にスクロールしていくと改善できる項目という欄が出てきます。そこに、

  • 使用していないJavaScriptの削減
  • レンダリングを妨げるリソースの除外

が記載されており、詳細でJavaScriptが確認できると思うので、それを記入してみてください。

詳しくはこちらのうーなさんの記事をお読みください。

4.すべての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は、サイトスピードの向上に有効な手段であると思います。

皆さんも是非試してみてくださいね。

コメント