WordPressサイトの表示速度を計測する際、「PageSpeed Insights」を使いますよね。そこで表示されることのある「使用していない JavaScript の削減」という次の項目。
余分なJavaScriptが読み込まれていて、ページの表示速度に影響を与えていますよ。という内容です。
では、どのJavaScriptを読み込まないようにすれば対処できるのでしょうか。
当記事では、非エンジニアでもできるようにプラグインを使った対策方法をご紹介いたします。
目次
JavaScriptの削減には「Flying Scripts」を使おう
「使用していない JavaScript の削減」を行うには「Flying Scripts」というプラグインが便利です。指定した JavaScriptを遅延読み込みするためのプラグインです。
ページ表示時に一部のJavaScriptを読み込まないようにすることで、ページ表示速度を上げられます（すべてのJavaScriptをページ表示時に読み込む必要はない）。
設定が簡単で、非エンジニアでも簡単に使えます。問題が発生した場合もすぐに元に戻せるので安心して試してみてください。
インストール
管理画面から「Flying Scripts」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストールにつきましてはこちらで詳しく解説しています。
2021/2/16 情報を更新いたしました。 WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインス...
使い方・設定方法
「Flying Scripts」の設定方法は次の3ステップです。
1. PageSpeed Insightsで表示される内容を確認する
まずは今一度、PageSpeed Insightsで表示される内容を確認します。
「使用していない JavaScript の削減」の項目の右端の「∨」を押します。
このように展開するので、どのJavaScriptを削減可能か確認してみましょう。上記は、recaptchaや、gtag（Google Tag Manager）が削減可能なリストに表示されている例です。
今回の検証では、上記のうち、recaptchaのJavaScriptを遅延読み込みの対象にします。
※ここに表示されているものすべてを遅延読み込みするのはおすすめしません。サイトの表示崩れや不具合などの可能性があります。
2. プラグインのInclude Keywordsに記載する
それでは、プラグインの設定に移ります。
プラグイン一覧から「Settings」を押して次の画面を開きます。
「Include Keywords」に、遅延読み込みさせるJavaScriptのキーワードを1行ごとに入力します。
- Timeout：ユーザーが何もしなくても指定した秒数（上記例では5秒）後に読み込むという設定
- Disable on pages：特定のページで遅延読み込みを除外する設定
今回の例では、recaptchaのみを記載します。最後に「Save Changes」を忘れずに押しておきましょう。他の設定は変更不要です（※注意点あり）。
プラグインのFAQによると、ファーストビューに重要でないスクリプト、トラッキングスクリプト、チャットプラグインなどのサードパーティスクリプトが適していると書かれています。他の入力例として次の項目が推奨されているようです。
fbevents.js（Facebookピクセル）
customerchat.js（Facebookカスタマーチャットプラグイン）
3. キャッシュを削除して確認する
プラグインの設定が済んだら、再度、PageSpeed Insightsを試してみましょう。正確な数値を把握するために、キャッシュを削除してから確認してみてください。
WEBサイトを運営していたり、WEB制作に携わっているとキャッシュクリアを行うことは、多々ありますよね。サイトの見た目を変えたり、機能面をカスタマイズしたり、何かを更新した場合は、キャッシュクリア後に確認しなければなりません。 「キャッシュって何？」という方は、下記記事でもご覧いただけます。 ...
もしサイトの表示が崩れていたり、スコアにあまり変化がない場合は、「Include Keywords」の内容を削除、変更するなどして対応してください。
ご利用上の注意
「Include Keywords」に記載した内容によって、次のような不具合が起こる可能性があります。
- Google アナリティクスの計測機能の低下（gtagなど）
- 問い合わせフォームが機能しなくなる（recaptchaなど）
- サイトの表示崩れ（スライダーのJavaScriptなど）
- アドセンス広告の表示の遅延（adsbygoogle.jsなど）
gtagはプラグイン側で入力例として推奨されていますが、Google アナリティクスで正確に計測できなくなる可能性があるためご注意ください。
また、recaptchaを遅延読み込みする場合は、サイト内の問い合わせフォームが機能しなくなる可能性があります。これに関しては対策が可能で、フォームの設置されているページでのみ遅延読み込みを除外するように設定すれば問題ないです。
「Disable on pages」の入力欄に、除外したいページのURLを判別できるキーワードを入れておきます。
例えば、当サイトの場合は次のようなフォームが複数あるので、これらのURLを判別するキーワードである「inquiry」を入れています。
- ご購入前のお問い合わせ（https://tcd-theme.com/inquiry_1）
- 技術的なお問い合わせ（https://tcd-theme.com/inquiry_2）
これで問い合わせフォームではrecaptchaを機能させつつ、不要なページでは遅延読み込みさせるという対策が可能です。
導入前後のPageSpeed Insightsのスコア
弊社検証時のPageSpeed Insightsのスコアのビフォーアフターを載せておきます。スマホとPCの両方で20ポイント以上アップしています。
ビフォー
プラグイン導入前のスコア：スマホ 32 / PC 77
- スマホ
- PC
アフター
プラグイン導入後のスコア：スマホ 58 / PC 98
- スマホ
- PC
まとめ
PageSpeed Insightsで表示される「使用していない JavaScript の削減」の対策方法を解説しました。プラグイン「Flying Scripts」を使えば、簡単に対応できますね。
JavaScriptなら何でも遅延読み込みさせればいいというわけではないので、導入前後でしっかりと確認しておきましょう。サイトに影響がなく、スコアが上がるのであれば、導入する価値はあります。
サイト・ページの表示速度に関連する記事
Webサイトにアップする画像の容量はなるべく小さい方が良いです。理由は次の2つです。 閲覧者に負荷をかけない 検索エンジン対策 本稿では、なぜ画像容量が小さい方が良いかという話と、画像容量を圧縮する方法について解説します。 画像容量を小さくしたほうがいい理由と背景...
WordPressサイトの表示速度が遅いと、すぐにページを離脱したり、別のページを参照したくなりますよね。 いくらコンテンツが良くても、見られる前に閉じられます。 逆にページ表示速度が速いと、ユーザーの最大の目的である情報収集がスムーズになります。いいコンテンツであれば離脱率も下がり、間...
WordPressサイトを運営していると、記事内にTwitterを埋め込む機会がありますよね。お客様のリアルタイムなツイートや、口コミをそのままコンテンツに反映できて便利です。 とはいえ、一度に多くのツイートを埋め込みすぎるとページの読み込みが極端に遅く（重く）なることがあります。せっかくの反...
コメント