広告

「Flying Scripts by WP Speed Matters:使用していないJavaScriptを削減してサイト速度を向上させる方法と注意点」

皆さんは、サイトのスピードパフォーマンスをどのように上げていますか。

「Flying Scripts by WP Speed Matters」、このプラグインを使用して上げて見ました。

私の場合のケースですので、それぞれのサイトの状況やテーマなどでも変わると思います。

サイトは、ワードプレスのテーマはアフィンガーEXです。

そして、不具合が出た時の注意点を見てくださいね。

スマートフォンでのサイトパフォーマンススコアを示すPageSpeed Insightsの結果画面
スマートフォン版のサイト速度パフォーマンス測定結果。改善前のスコアを確認。

これが、スマートフォンのパフォーマンスの状態でした。


PageSpeed Insightsで検出された「使用していないJavaScript」の一覧。
削除候補として挙げられた圧縮・最適化済みのJavaScriptファイル。
wpo-minifyによる最適化ファイルを含むJavaScriptの削減候補リスト
削除候補として挙げられた圧縮・最適化済みのJavaScriptファイル。

そして、これが、使用していないJavaScriptの削減の状態でした。

Google Tag Manager
 tag-manager 

/gtag/js

/gtag/js

koutakun-ippin.com
 自社

/wpo-minify-footer-7e8934fd.min.js

/スラッシュから、jsまでをコピペして貼り付けます。


Flying Scripts by WP Speed Mattersプラグインのインストール画面と注意表示
Flying Scripts プラグインの管理画面。右下には「現在のWordPressバージョンで未検証」と表示されている。

そして、これが「Flying Scripts by WP Speed Matters」プラグインです。

これをインストールして使用しました。

しかし右下に、使用中のWordpressバージョンで未検証と記載していますね。

私の場合、最新のWordpress6.7.2です。


Flying Scriptsプラグインの設定画面で、Include keywords入力欄が表示されている様子
Flying Scriptsの設定画面。ここにスクリプト名を入力して遅延読み込みを指定する。

settingsから入ると上記の画面になります。

そして、Include keywordsに使用していないJavaScriptをコピペして貼り付けます。


Google Tag Managerや/gtag/jsなどのスクリプトパスをInclude keywordsに貼り付けている画面
PageSpeed Insightsで検出されたスクリプトパスを1行ずつInclude keywordsへ追加。
独自ドメインのスクリプトやwpo-minifyファイルをキーワードとして追加した設定画面
自社サイトのスクリプトも含め、使用していないJavaScriptを複数追加。

Google Tag Manager
 tag-manager 

/gtag/js

/gtag/js

koutakun-ippin.com
 自社

/wpo-minify-footer-7e8934fd.min.js

/スラッシュから、jsまでを一行ごとコピペして貼り付けてくださいね。


独自ドメインのスクリプトやwpo-minifyファイルをキーワードとして追加した設定画面
自社サイトのスクリプトも含め、使用していないJavaScriptを複数追加。
新たに検出されたスクリプトを含む、合計4つのJavaScriptキーワードが一覧表示された画面
複数回の計測で新たに検出されたスクリプトを加え、全4つを登録。

一度、サイトパフォーマンスを計測して

もう一つ出ましたので全部で4つ、一行ごとコピペして貼り付けました。

koutakun-ippin.com
 自社

/wpo-minify-header-7a8b0e31.min.js


Flying Scripts適用後に向上したスマートフォンのPageSpeed Insightsスコア75の画面
Flying Scripts 適用後、スマートフォンスコアが75へ改善。

計測したら、75に上がりました。

デスクトップのパフォーマンスは、もともと高かったのですが

5つほど上がりました。

素晴らしいです。


ここからは、検証した結果

不具合が出てしまった場合を記載してあります。

スマートフォンのサイトトップでメニューと検索アイコンが反応しない不具合のスクリーンショット
遅延読み込みにより、メインメニューと検索アイコンが動作しなくなった例。

スマートフォンのサイトのトップ画面なのですが

いちばん上、左右のメニューと検索が反応しませんでした。

/wpo-minify-footer-7e8934fd.min.jsの部分でした。


Googleアナリティクスのリアルタイム計測が停止している状態を示す画面

/gtag/js を遅延させたことで、アナリティクス計測が停止した状態。

上記の画像は/gtag/js を遅延させたことで、アナリティクス計測が停止した状態です。

そして、googleアナリティクスの計測が止まってしまいました。

/gtag/js

/gtag/jsの部分でした。

アナリティクスが止まった時は、焦りましたが大丈夫です。


サイトの「上に戻る」ボタンが遅延読み込みされた結果ユーザー補助スコアが低下した画面
/wpo-minify-header の遅延によりユーザー補助が低下した例。
上に戻るボタンの遅延によりユーザー補助スコアが低下したPageSpeed Insightsの評価画面
上に戻るボタンの遅延が影響し、PageSpeed Insightsのユーザー補助スコアが低下した例。

そして、上に行くボタンでした。

使用できるのですが、下記のユーザー補助のスコアーが落ちました。

/wpo-minify-header-7a8b0e31.min.jsの部分でした。

Scriptsプラグイン詳細ページに表示されたWordPress未検証の注意画面
このプラグインは現在のWordPressバージョンではテストされていないと表示されている注意画面。

Scriptsプラグインの必須バージョンと対応バージョン情報が表示された詳細画面
プラグインに必要なWordPressバージョンと、対応済みバージョンを示す情報画面。

このプラグインの、「詳細を表示」から入ると。

Flying Scriptsプラグインの詳細ページに表示された注意書き「使用中のWordPressでテストされていません」
プラグイン詳細に表示される、バージョン未検証の注意書き。

注意:このプラグインは現在使用中のWordpressバージョンではテストされていません

右側には、必須バージョンと対応する最新バージョンが記載してありまね。


プラグインページに表示された必須バージョンと互換性バージョン情報のスクリーンショット
Flying Scripts の推奨バージョンと対応状況を確認する画面。

私の場合はWordpress6.7.2です。

このバージョンはテストは、まだされていないようです。

でも、大丈夫でした。

貼り付けたスクリプトを削除すれば、全部もとに戻ります。


新たに検出されたスクリプトを含む、合計4つのJavaScriptキーワードが一覧表示された画面
複数回の計測で新たに検出されたスクリプトを加え、全4つを登録。

Google Tag Manager
 tag-manager 

koutakun-ippin.com
 自社
サイトトップページに関するJavaScriptに関しては注意してくださいね。


Include keywordsから削除した後、正常動作に戻った設定画面のスクリーンショット
キーワード削除後、メニューやアナリティクスが正常に戻った状態。

keywordsからJavaScriptを削減しました。

アナリティクスが計測されるように、なりましたよ。


まとめ

サイトパフォーマンスの向上で、このプラグインを使用しました。

サイトパフォーマンスが改善されて良いと思います。

私の場合は、不具合が出てしまったのですが

一つ一つ丁寧に、チェックしながら使用すればサイトスピードが上がって

よい結果が得られると思います。

そして、不具合が出てもkeywordsJavaScriptを削減すれば元に戻すことが

できますので安心してください。

ここまで、ありがとうございました。

-オジサンの出来事
-