【WordPress高速化】ページが重い原因JavaScriptの削減！Flying Scriptsの設定＆使い方

とりあえずページを爆速化したい！
PageSpeed Insightsの点数が悪かった……。
使用していないJavaScriptを削減したい
Flying Scripts by WP Speed Mattersの使い方や設定方法を教えて

ブログ運営者にとって永遠のテーマと言えるのが、ページ読み込み速度の高速化。

かつてGoogleは「ページの読み込み速度を1秒以内にしましょう」
という目標をかかげ、とにかく表示速度が速いページを評価していました。（2013年）
参考 : スマートフォンサイトの読み込み速度を改善するために | Google検索セントラルブログ

2023年現在はページの読み込み速度への評価はだいぶ緩くなりましたが「Speed Update」や「Core Web VitalsのLCP」の実施により、ページ表示速度のGoogle評価は継続しています。

• Google「かなり遅いページのみ検索順位を下げるアップデート（Speed Update）を実施します。それ以外のページは多少遅くても上位に表示されることもあります」
  参考 : ページの読み込み速度をモバイル検索のランキング要素に使用します | Google検索セントラルブログ
• Google「モバイルのページ速度が2.5秒以内は「良好」。4秒以下なら「改善が必要」4秒を超えると「不良」です（Core Web Vitals）を実施します」
  参考 : Web Vitals の概要: サイトの健全性を示す重要指標 | Google Debelopers

そこで対策をしたいのが、使用していないJavaScript（ジャバスクリプト）の削減です。

JavaScriptはブラウザ上で読み込むプログラムのため、ページの読み込みが遅くなる原因になってしまうのです。

そこで導入したいのが今回紹介する「Flying Scripts by WP Speed matters」（以下Flying Scripts）。
JavaScript削減に特化したプラグインです。

このFlying Scriptsを使い、当ブログの使用していないJavaScriptを削減した結果

 Flying Scripts使用後の測定結果
パフォーマンス　 　51点 83点

「51点から83点」＋60％の改善という驚きの結果に。

導入するだけでページ速度改善が期待できます。ｓ

それでは、さっそく始めていきましょう。

ページ速度が遅い原因「JavaScript」

JavaScript（ジャバスクリプト）とは、ブラウザ上で動作するプログラミング言語です。アプリ開発にも使われ、動的なWebページを作ることができます。

JavaScriptはブラウザ上で動作する動的なプログラムです。
そのため読み込む順番が遅いと”JavaScript待ち”の状態になり、ページが表示されるまでの速度が遅くなってしまいます。

そこでCSSから先に読み込ませたり、JavaScriptをヘッダーではなくフッターの読み込みにすることでページが重い原因を解消することができるのです。

ですが、コードの記述など技術的な対処法はむずかしく、慣れていないとエラーの原因になったり時間がかかってしまいます。

そこで使いたいのが、今回紹介する「Flying Scripts」のようなJavaScript削減に特化したプラグインです。

Flying Scripts by WP Speed mattersのインストール

それではWordPressにFlying Scriptsをインストールしていきたいと思います。
プラグイン名になっているWP Speed mattersが運営元のプラグインになります。

プラグインは公式サイトからダウンロードすることができますし、WordPress管理画面内からインストールすることもできます。

 Flying Scripts公式サイト
 https://ja.wordpress.org/plugins/flying-scripts/

今回は一般的なWordPress管理画面内から検索してインストール方法で見ていきましょう。

まずはWordPress管理画面にログイン。
左メニュー「プラグイン」から「新規追加」を選択します。

画面が切り替わるので検索枠に「Flying Scripts」と入力。
プラグインが表示されたら「今すぐインストール」→「有効化」を選択します。

Flying Scripts by WP Speed mattersの設定方法＆使い方

さっそく設定を行っていきたいのですが、ページのパフォーマンスがどれ位改善されたか比較する必要があります。まずはパフォーマンスを計測しましょう。

まずは速度を計測「PageSpeed Insights」

計測に使うのが「PageSpeed Insights」です。
PageSpeed Insightsは言わずと知れた、Googleが提供するWebページのパフォーマンスを計測するサービスになります。
このような計測ツールは他にもありますが、SEO的な指標を考慮して計測してくれるので、使い勝手がいいPageSpeed Insights一択です。

まずは公式ページにアクセス。

 PageSpeed Insights公式ページ
 https://pagespeed.web.dev/?hl=ja

自身のブログのURLを入力し「分析」を選択しましょう。

当ブログのパフォーマンス分析結果は、スマホが「51点」パソコンが「95点」でした。

なぜだろうと原因を探ると、やはり使用していないJavaScriptが原因だったもよう。

自動広告によるアドセンスやアナリティクスが影響しているようです。

Flying Scriptsの設定方法「JSファイルを指定」

Flying Scriptsを有効化したら、左メニュー「設定」の中に「Flying Scripts」という項目が追加されます。
その「Flying Scripts」を選択しましょう。

すると設定画面に切り替わります。

設定箇所は3つのうち2つ

Flying Scriptsの設定箇所は3つありますが、設定するのは「Include Keywords」と「Timeout」のみです。

設定項目	内容
Include Keywords「含めるキーワード」	削減したいファイル名「.js」を指定
Timeout「タイムアウト」	ユーザーがアクションを起こさない場合JavaScriptを自動的に読み込ませる時間（1秒～10秒、無効）
Disable on pages「無効にするページ」	Flying Scriptsにより遅延読み込みさせたくないページ ※設定不要

Include Keywordsに、削減したいJavaScriptのファイル名を指定します。
Timeoutはデフォルトの5秒のままでOKですが、パフォーマンスを見ながら任意で決めるでもかまいません。

Keywordsに指定するJSファイル名について

Flying Scriptsの設定でInclude Keywordsに指定するJavaScriptファイル名はPageSpeed Insightsから確認できます。

まずは先ほどのように、計測したいブログURLを入れて計測します。
結果が出たら「使用していない JavaScript の削減」を押せばプルダウンで確認できます。

「減らせるデータ量」の詳細を見ると、各JSファイルのURLが表示されているはずです。
そのURLの一部をコピーして、先ほどの設定画面Include Keywordsに貼り付けます。

当ブログは以下のファイル名を指定しました。

「Timeout」はデフォルトのままで「Save Changes」を選択し、設定を反映させましょう。

 アナリティクス
gtag

 アドセンス
async-ads.js　
adsbygoogle.js
show_ads_impl_with_ama_fy2021.js　

　

PageSpeed Insightsを使った結果

今回PageSpeed Insightsを使った結果、ページを爆速化することができました。

 Flying Scripts使用後の測定結果
パフォーマンス　 　51点 83点

「51点から83点」＋60％の改善という結果に。

まとめ

まとめです。

ブログ運営者にとって永遠のテーマと言えるのが、ページの高速化です。
一昔前は「1秒以内の表示を推奨します」と宣言して評価していたGoogleでしたが、今では少し緩くなり「2.5秒以内の表示であればOK」という評価に変化しました。

この2023年最新のSEO対策と言えるこの基準は「Speed Update」と「Core Web VitalsのLCP」です。これについては別の関連記事でわかりやすく解説しましたので、今すぐそちらもチェックすることをおすすめします。

関連記事

ページが重くなる原因としては、JavaScriptファイルという可能性が多いです。
使用していないJavaScriptファイルを削減するなら今回紹介したFlying Scriptsが有効ですが、それでもだめなら他に原因があります。

WordPressはPHPというプラグインによって作られています。
そのPHPのバージョンが古いと、こちらもページが重い原因となってしまいます。

その場合、PHPのバージョンを早急に最新バージョンにする必要がありますが、使用するテーマやプラグインとの相互性を確認しないとエラーが起こります。
それを防ぐために相互性をチェックするためのプラグイン「PHP Compatibility Checker」を紹介している記事もあります。そちらも是非。

関連記事

今回の記事は以上です。