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

【WordPress高速化】ページが重い原因JavaScriptの削減!Flying Scriptsの設定&使い方 | Eyecatch-Image

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

案内人

今回の記事はこんな方に向けた記事です。そんなお悩みをスッキリ解決します!

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

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

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


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

悩む人

使用していないJavaScriptって?

Web犬タロウ

アドセンスやアナリティクス、Twitterの埋め込みだよ!デフォルトのままだと、ブログが重くなる原因になるよ!

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

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

ジョン齊藤

ページの読み込み速度が爆速になります!

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

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

51点から83点」+60%の改善という驚きの結果に。

Web犬タロウ

パフォーマンスが気になる方必見だワン!

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

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

目次

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

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

「JavaScript」できること一覧
  • ポップアップの表示
  • ブラウザゲーム制作
  • スマホアプリの制作
  • チャットボット制作
  • 非同期通信 – Ajax(Googleマップなど)
ジョン齊藤

技術的な難しい説明はできるだけ省いて説明します!

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

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

「図解」ヘッダーとフッター - JavaScriptをフッター読み込みにすることでページが重い原因を解消できる
Web犬タロウ

特にWordPressでfunctions.phpの編集をするときは、ホワイトアウト(画面が白くなるエラー)しやすいから気を付けたいね!

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

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

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

Flying Scripts by WP Speed matters - Logo


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

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

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

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

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

左メニュー「プラグイン」から「新規追加」 | WordPressプラグイン追加方法


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

「今すぐインストール」→「有効化」を選択 - Flying Scriptsのインストール


ジョン齊藤

現在の最新WordPressバージョン6.2との互換性はあるみたいです。
JavaScript関連のプラグインなので念のため慎重に。インストール前に最新のWordPressバージョンに更新しておきましょう!

Web犬タロウ

続いて設定を見てみよう!


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

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

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

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

Web犬タロウ

そもそもSEOの指標はGoogleが決めているから、Googleが提供する測定ツールを使った方が間違いないし良いってことだね!

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

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

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

PageSpeed Insights公式ページ


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

パフォーマンス分析結果は、スマホが「51点」パソコンが「95点」 | mechalog - PageSpeed Insights



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

使用していないJavaScript - ページが重い原因 | PageSpeed Insights


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

ジョン齊藤

今回紹介するプラグインで、この点数がどこまで改善できるのか検証します!

Web犬タロウ

プラグイン入れるだけで改善できるなら、絶対使った方がいいね!


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

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

「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 の削減」を押せばプルダウンで確認できます。

「使用していない JavaScript の削減」を押してプルダウンで確認  | mechalog - PageSpeed Insights


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

使用していないJSファイルが表示される - | PageSpeed Insights


Web犬タロウ

「gtag」や「○○.js」をコピペしましょう!


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

「Include Keywords」にJSファイル名を指定して「Save Changes」を選択



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

アナリティクス
gtag

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

 

ジョン齊藤

Twitterの埋め込みのし過ぎでそれが重さの原因になっていることもあります!

PageSpeed Insightsを使った結果

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

読み込み速度が爆速に - pageSpeed Insightsを使った結果


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

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

Web犬タロウ

アドセンスとアナリティクスがページが重い原因だったんだね!


まとめ

まとめです。

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

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

関連記事

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

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

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

関連記事

今回の記事は以上です。

ジョン齊藤

最後までありがとうございました


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次