WordPressのプラグインを使いPageSpeed Insightsのパフォーマンススコア改善を行います。PageSpeed Insightsのスコアが悪い原因の一つとして「使用していない JavaScript の削減」の項目が出てくると思います。この部分に効くWordPressのプラグインが「Flying Scripts」になります。

Flying Scriptsとは何か？

特定のJavaScriptの読み込みを後回しにするプラグインです。この動作によりサイトの表示速度が改善します。導入から設定まで非常に簡単で不要と感じればいつでも削除可能です。

Flying Scriptsプラグインのインストール方法

WordPressの画面左のプラグインを選択して新規追加ボタンを押してください。

画面右上キーワードに「Flying Scripts」と入力してプラグインの検索をしてください。

画像のFlying Scripts右上の今すぐインストールを押してください。

有効化を押すとインストール作業は完了となります。続いて設定の解説になります。

Flying Scriptsの設定方法

メニューのプラグインを選択するとプラグインの一覧が確認できます。ここでFlying Scriptsのsettingsを押してください。

3項目あります。

Include Keywordsは遅延させたいJavaScriptをコピペするスペースでではPageSpeed Insightsの結果に表示されている「使用していない JavaScript の削減」からコピペします。

Timeoutは、JavaScriptの読み込みを遅らせる時間を指定します。結果HTMLが先に読み込まれるため、サイト全体の表示が速くなります。基本的には5のままで大丈夫です。

Disable on pagesは、遅延を無効にするページを記入するスペースです。基本的には使いません。

では実際にPageSpeed Insightsに表示される「使用していない JavaScript の削減」を見てみましょう。

上記画像がPageSpeed Insightsになります。ここをクリックすると移動できます。

ご自身のサイトのURLを貼り付けて分析ボタンを押します。暫くまつと上記のようなデータが表示されます。下にスクロールさせてください。

使用してないJavaScriptの削減を押すと詳細が表示されます。（上の画像では1.2s下の画像では1.64sとなってますがこれはこちらのミスですので気にしないでください）

右上赤枠内が遅延表示により短縮できる時間、左下赤枠内が表示を対象となるJavaScriptです。

一行目の「…m202…/show_ads_impl_with_ama_fy2021.js?client=…」がjavascriptの記述になります。後ろにある(pagead2.googlesyndication.com)でこれがGoogleによるscriptであることが分かります。

今回表示されている4行のJavaScriptの表示を後回しにすると1.64秒表示が速くなるという分析になります。各行をFlying ScriptsのInclude Keywordsにコピペしてみましょう。

Include KeywordsにJavaScriptを貼り付けました。SaveChangesボタンを押してください。これで貼り付けされた文を含むスクリプトの読み込みが5秒遅延されることになります。

ではPageSpeed Insightsにもどり再度分析してみましょう。ここをクリックすると移動できます。

左画像が何もしてない状態のパフォーマンススコアです。33点でした。

右画像がJavaScriptを5つ遅延させたあとのパフォーマンススコアです。72点と大幅に向上してます。

Cocoonテーマを利用している場合に発生するFlying Scriptsの問題点

スコアは確かに上がりました。サイトに問題が発生していないか確認しましょう。

デスクトップPCから見たサイト表示については全く問題が見当たりませんでした。Googleアドセンスの広告やライブドアの相互RSSも遅延なく一瞬で表示されます。

次のモバイル環境（スマホでwifi off、4G回線でテスト）するとGoogleの広告の表示が少し遅れて表示される感じですがストレスを感じることはありませんでした。

ただ1点問題が発生していることに気づきました。自分はテーマをCocoonにしています。モバイル環境でサイドバーの表示が空白になってしまうみたいです。Flying Scriptsを無効にすると改善するのでこれが原因であることは間違いないみたいです。

画像左の右下にあるサイドバーを押すと画面右からサイドバーが飛び出して表示されます。

本来は画像中央のようにプロフィール等が表示されるのですがFlying Scriptsを使用すると画像右のように真っ白な状態になりました。

この問題はサイドバーの表示方法を変更して対策することにしました。

cocoon設定からモバイルタブを押してください。

モバイルボタンの項目にある「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れます。こうすることでサイドバーをメイン画面の最後尾に表示させることが出来ます。サイドバーボタンを押しても右から出てくる画面は、真っ白なままですがこれは我慢することにしました。速度向上とのトレードオフということになります。

まとめ

Flying Scriptsを使うことによりモバイル環境下での表示速度向上が簡単に出来ました。高速な光回線だとあまり効果を実感できませんが、スマホなどの遅い4G回線であれば効果を実感できるようになると思います。表示が遅いためユーザーが帰ってしまうのを防ぐ効果が期待できます。

問題点としては広告表示が後回しになるため広告収益に影響が出る可能性があります。広告収益の変化なども注視しながら活用されてみてください。