Flying Scripts by WP Speed Matters スクリプトの実行を遅らせページ表示速度を高速化するプラグイン 設定方法と使い方

ワードプレス(WordPress)のブログサイトのJavaScriptコードの読み込みを遅延させて、ページ表示速度の向上に貢献するプラグインFlying Scripts by WP Speed Mattersを解説します。

Flying Scripts by WP Speed Mattersで実現できること

Flying Scripts by WP Speed Mattersプラグインを利用すると、ブログサイトのページデータに含まれるJavaScriptコードの読み込みを遅らせることができるので、ページを表示させる速度を速くして利用者の利便性を上げることができます。

• JavaScriptコードの読み込みを遅延させ、ページの表示速度を向上させることができます

Flying Scripts by WP Speed Mattersのインストール方法

Flying Scripts by WP Speed MattersプラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面

1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
2. 「新規追加」をクリックします
3. 検索ボックスに”Flying Scripts by WP Speed Matters”と入力すると下に検索結果が表示されます
4. ”Flying Scripts by WP Speed Matters”の「今すぐインストール」ボタンをクリックします

“Flying Scripts by WP Speed Matters”のインストール完了画面

↑Flying Scripts by WP Speed Mattersのインストールが完了すると有効化ボタンが表示されるのでクリックします。

“Flying Scripts by WP Speed Matters”を有効化すると表示される画面

これでFlying Scripts by WP Speed Mattersのインストールと有効化が完了しました。

Flying Scripts by WP Speed Mattersの使い方

Flying Scripts by WP Speed Matters をインストールして有効化しただけでは機能していません。

Flying Scripts by WP Speed Mattersの設定をする前に、ブログ・サイトの表示速度に影響を及ぼしているJavaScriptファイルを調査します。

その後、設定画面で調査したJavaScriptコードを記載します。

PageSpeed Insightsで遅延の原因になっているJavaScriptを調べる

ページの表示速度と遅延の原因になっているJavaScriptを調べることができる「PageSpeed Insights」にアクセスします↓
PageSpeed Insights

「PageSpeed Insights」の画面

1. 空欄に計測したいページのURLを入力して分析ボタンをクリックすると分析が始まります
2. 分析結果の「使用していないJavaScriptの削減」の右端のVマークをクリックします

「PageSpeed Insights」の「使用していないJavaScriptの削減」

↑「使用していないJavaScriptの削減」の下にURL(JavaScriptコード名)が表示されるのコピーします。

コピーしたJavaScriptコード名を「Flying Scripts by WP Speed Matters」プラグインの設定画面に貼り付けます。

Flying Scripts by WP Speed Matters 設定

WoredPressのダッシュボード(管理者画面)の「設定」内の「Flying Scripts」をクリック

↑Flying Scripts by WP Speed Mattersの設定画面に入るにはWoredPressのダッシュボード(管理者画面)の「設定」内の「Flying Scripts」をクリックします。

Flying Scripts by WP Speed Matters 設定画面

Flying Scripts by WP Speed Mattersの設定画面

1. Include Keywordsに前項で調査したJavaScriptを貼り付けます
2. Save Chagesボタンをクリックします

以上でFlying Scripts by WP Speed Mattersの設定は完了です。

次に、もう一度ページ速度評価サイトで改善されているかを確認します。

Flying Scripts by WP Speed Mattersの効果

Flying Scripts by WP Speed Mattersに読み込みを遅延させるJavaScriptコードを設定した後、どの程度表示速度が向上したのか、効果を測定してみましたが、今回は元々影響の少ないJavaScriptコードを遅延させたので効果は殆ど無いという結果になりました。

測定には表示速度検証サイト「PageSpeed Insights」を利用しました。

スマホ環境

Flying Scripts by WP Speed Matters導入後に「PageSpeed Insights」で測定したスマホ環境のパフォーマンス

↑改善できる項目に、設定する前には表示されていた「使用していないJavaScriptの削減」が表示されなくなりました。パフォーマンススコアに関してはほどん変化しませんでした。

スマホの表示速度が遅いのはGoogleアドセンスの自動広告が原因

スマホ環境で「使用していないJavaScriptの削減」の値が悪く、パフォーマンスのスコアが低い場合はGoogleアドセンスの広告が原因の場合が殆どです。

Googleアドセンスの自動広告にしていると沢山の広告が表示されるのでページ表示速度が遅くなるのは必然の結果です。

GoogleアドセンスのJavaScriptを遅延させると「PageSpeed Insights」でのパフォーマンススコアは上がりますが、いっぽうで利用者側のスマホ画面上でワンテンポ遅れてから広告が表示されることになるので、広告が表示されるタイミングで見ている箇所が勝手にズレてしまい、利便性が悪化するので利用者の離脱率が上昇する原因になります。

なのでGoogleアドセンス広告の表示を遅延させてSEO低下の懸念を無くして安心するか、Googleアドセンス広告の表示を遅延させないでユーザの利便性を優先するのかの2択になります。

昨今はモバイル表示速度に対して厳しくなったため、サーチコンソールが警告状態になっていても、すぐにSEOの評価が変わって検索順位が下がるようなことはありません。

なので、Flying Scripts by WP Speed MattersプラグインでGoogleアドセンス広告を遅延させるよりも、自動広告を停止して手動で広告を貼り付ける対応をした方が、結果的に利用者の離脱率を抑えて、ページ表示速度の向上につながるので一石二鳥です。

とはいえ、SEO評価が下がり検索順位が低下するという懸念を払拭できるのは表示速度を改善することなので、Flying Scripts by WP Speed MattersでGoogleアドセンス広告を遅延表示させ表示速度の向上を図るのを最優先にするのもありです。

どちらにせよ、自動広告による収入と、手動で張り付けた広告による収入を比較してみるとより安心できると思います。

まとめ

Flying Scripts by WP Speed Mattersを使うと簡単にJavaScriptコードの実行を遅延させることができるので、ブログ・サイトのページ表示速度の向上が期待できます。

表示速度検証サイト「PageSpeed Insights」で計測した時にスマホ環境だけ著しくパフォーマンスが低い原因のほとんどはGoogleアドセンスの自動広告です。

自動広告を停止して手動で広告を設置する方法が、もっともページ表示速度の向上に繋がります。

いっぽう、Flying Scripts by WP Speed Mattersを使ってGoogleアドセンスの広告の表示を遅延させると利用者が記事ページを見ている最中にいきなり広告が表示されたり、ワンテンポ遅れて表示されるため、見ている位置がズレてしまい視認性が悪くなり、結果的に離脱率が高くなってしまう可能性があります。

つまり、選択肢は2つです。

• 自動広告を停止して手動で広告を設置 ⇒ 離脱率低下と表示速度向上が期待できる
• Flying Scripts by WP Speed Mattersで広告表示を遅延 ⇒ 表示速度向上が期待できるが脱率が上昇する可能性がある

Googleアドセンス広告のJavaScriptコード実行を遅延させるとページ表示速度が大きく向上します。

なので広告表示を遅延させる場合にはFlying Scripts by WP Speed Mattersは便利なプラグインなのでおすすめです。

スマホ環境の表示速度はコード最適化プラグイン「Autoptimize」とJavaScript非同期/遅延プラグイン「Async JavaScript」を組み合わせることで10％程アップしました。
設定方法等はこちらの記事を参考にしてください↓
Autoptimize コードを最適化して高速化するプラグイン 設定方法と使い方
Async JavaScript 非同期・延期プラグインの設定方法と使い方