「使用していない JavaScript の削除」をプラグインでなんとかする

Gooleの検索結果のランキングには、ページエクスペリエンスが影響します。

上のページにもあるように、今年（2021年）5月にはページエクスペリエンスシグナルとして新たにウエブに関する主な指標（コアウェブバイタル）が加味される新しい検索ランキング方法がリリースされる予定です。

現状

というわけで、PageSpeed Insightsで現状を確認してみるのですが、これがかなり悲惨な状況です。

このスコアはチェックする度に変動するようで、60は何度か試したうちの一番高い値。大体、50～60程度でした。

「改善できる項目」の筆頭が「使用していない JavaScript の削除」で、つまり、これが一番時間を食っており、何とかすべき最大のものです。

いくつか挙がっていますが、この中のrecaptcha_en.jsやadsbygoogle.jsは名前から察するに、Googleのサービスを使うためのもの。なので、本当はGoogleさんになんとかしてもらいたいものですが…。

そんなことを言っても始まらないので、自分でなんとかする方法を考えます。

対処方法

一番確実なのは、JavaScriptを削除すること。上の話だと、reCAPTCHAやAdSenseを止めてしまえばいいわけです。それができれば悩むことはないわけで…。そうはいかないので、そうしたサービスを使いつつ、対処する方法を考えなければなりません。

これまで試してみたもの

よく見かける対処方法としては、JavaScriptの読込みの非同期化（async）や遅延（defer）。それをやってくれるプラグインもたくさん見つかります。

しかし、これまで試したところでは、それで劇的なスコア向上はできませんでした。サイト（WordPressテーマ）の作り（構造）にもよるのかもしれませんが。

JavaScriptの読飛ばし ～ Flying Scripts by WP Speed Matters

他に手はないかと探していて見つけたのが、Flying Scripts by WP Speed Mattersというプラグイン。これは、asyncやdeferとは違って、ユーザが何らかのアクションを起こすまでJavaScriptが実行されません。言わば、読み飛ばされたような格好です。以下、FAQから引用。

How is it different from `defer`

defer tells browser to download the script when found and execute it when HTML parsing is complete. When you include a script in Flying Scripts, those scripts won’t be executed until there is a user interaction.

これは試す価値がありそうです。ということで、早速インストール。

管理画面で検索してインストール、有効化するだけの一般的な方法。詳細は省略。

設定と効果

Flying Scripts by WP Speed Mattersの設定は、設定画面を開いて「Include Keywords」に対象とするJavaScriptを羅列するだけ。

「Keywords」とあるので識別できる言葉を入れればいいのでしょうが、名称（ファイル名）がわかりやすいと思います。そこで、「使用していない JavaScript の削除」に挙がっているものを拾って入れます。

記述し終えたら「Save Changes」。そして、PageSpeed Insightsでチェック。

おぉ！劇的に改善されました。ただし、これも上と同様に、何度かやって一番良かったスコアです。大体80～90の範囲。それでも大きく改善したことには間違いありません。

モバイルサイトは…

上の結果は、実はPCサイトのものです。モバイルサイトはもっと悲惨な状況。

まずは、Flying Scripts by WP Speed Mattersの導入前。

PCサイトの対応（つまり上の設定）を入れた後。

改善してはいますが、まだまだひどい状態です（元が悪すぎ）。

そこで、今度はモバイル側での「改善できる項目」をチェックします。

「レンダリングを妨げるリソースの除外」と「使用していない JavaScript の削除」の項目の中にJavaScriptがありますので、これらをFlying Scripts by WP Speed Mattersの設定に加えます。

少し良くなりました。

他にないかチェックしてみると「診断」の「第三者コードの影響を抑えてください」の中にもJavaScriptがありました。

「.js」のファイルをFlying Scripts by WP Speed Mattersの設定に加えます。

63で黄色ですからまだまだですけど、最初が16だったことを考えると大幅改善できています。この先はJavaScript以外を対処しなければならないでしょう。

設定の補足

Flying Scripts by WP Speed Mattersには他にも設定項目があります。

Timeoutで指定した時間を経過すると、ユーザによるアクションがなくてもJavaScriptを実行します。ページを開いたまま放置しているような状況ですね。

Disable on pagesで指定したページではFlying Scripts by WP Speed Mattersは機能しません。

注意

Flying Scripts by WP Speed Mattersを使用するとJavaScriptの実行が一旦止められます（ユーザが何らかのアクションを起こすか、Timeout時間が経過するまで）。したがって、ページを開いた瞬間に何かを行うようなものであればその動作に影響が起きます。

具体的には、AdSense広告の表示が影響を受ける可能性があります。また、開いてすぐに閉じるとか前のページに戻った場合はアクセス解析ツールに拾ってもらえないかもしれません（Analyticsなどでアクセスカウントに数えられないなど）。そのあたりは、実際の様子を見ながら調整が必要かと思います。