サイト診断すると出てくるのが「使用していない JavaScript の削減」
パフォーマンスに結構な確率で、結構な割合を含んだ修正箇所が出てきてしまいます。
これが解決すればサイトのパフォーマンスはぐんと上がるのに・・・
その問題がプラグインで解消されるかもしれません。
診断に出てくる「使用していない JavaScript の削減」
サイト診断ができる「Lighthouse（ライトハウス）」を前回紹介しました。
これを利用して自分のサイト診断をすると決まって出てくるのが「使用していない JavaScript の削減」
使用していない JavaScript の削減 って言ってもなぁ～・・・
探してみるとCSSの書き換えや高度な（私的には・・・）やり方ばかりが目に入ります。
素人同然の私が見様見真似でしてしまったら、サイトが無くなってしまうかもしれません（実際無くなったことがあります・・・）
プラグインで無いのかな～？
そう思ってさあがしてみると・・・ありました。
「Flying Scripts 」と言うプラグインです。
サイト表示にはJavaScriptはコアな部分の役割を果たしているので、常に大量のリソースを消費します。
そこで、最初のレンダリングに必要ないJavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間、最初のCPUアイドルなどを削減し足りしていますが、それだけでは間に合わなくなってきてしまうのです。
そこで登場するのが「Flying Scripts 」プラグインと言う訳です。
どんな働きをするのかと言うと「JavaScriptを読み飛ばし、ユーザーが何らかのアクションを起こすまでJavaScriptが実行しない」と言う事。
多分「いつでも使用していたJavaScriptを必要な所だけで使用する」
と言う事ですかね？
実際このサイトでの使用で９０以上にあがりました。
使ってみてもいいんじゃないかと思っているので今回紹介したいと思いました。
Flying Scripts インストールと設定
サイト管理から「プラグイン」➡「新規追加」
検索に「 Flying Scripts 」を挿入
「Flying Scripts by WP Speed Matters」を確認し「インストール」➡「有効」をクリック
設定は私の場合ディフォルトでの使用で全く問題ありませんでした。
Flying Scripts 使用方法
使用する前に別タブか別ウィンドウでサイト診断結果を開き「使用していない JavaScript の削減」をクリックして詳細を開きます。
診断で引っかかった「JavaScript のURL」を表示します。
次に管理ページから「設定」➡「Flying Scripts」でFlying Scripts管理ページを開きます。
診断ページに移行し、診断で引っかかった「JavaScript のURL」をコピーし
Flying Scripts管理ページの「Include Keywords」の欄に貼り付けます。
JavaScript のURLが複数ある場合は、段落して次のURLを貼り付けます。
診断で引っかかった「JavaScript のURL」を張り終わったら下の「save change（設定保存）」をクリック
サイトを再読み込みしサイド検証
パフォーマンスの数字を確認します。
「Flying Scripts 」導入前
「Flying Scripts 」導入後
画像はこのサイトの物で、実際「Flying Scripts 」プラグインをインストールして行った作業を紹介しています。
作業後は「使用していない JavaScript の削減」は少なくなりパフォーマンスも上がりました。
数字は上がりましたが、まだまだ修正するところも多いと思います。
今後も少しづつサイトの改良、進歩を勉強して、いい物が見つかったら紹介していこうと思っています。
コメント