WordPress高速化プラグインFlying Scripts|重いアドセンス等のJavaScript遅延読み込み

Flying Scriptsで高速化する前後のPagespeed Insightsのスコア比較

PageSpeed Insightsでサイトスピードを確認すると「使用していないJavaScriptの削減」でGoogleマップやアドセンスの自動広告が読み込み速度を遅くしているのが分かります。その対策としてJavascriptを読み飛ばして速度を劇的に改善するWordPressプラグイン「Flying Scripts」を導入する方法を写真付きで解説します。

ウェブサイトの読み込みを遅くするJavaScriptとは?

JavaScript(ジャバスクリプト)とは、ネットスケープコミュニケーションズのブレンダン・アイクによって、1995年5月に開発されたプログラミング言語のひとつで、開発当初はLiveScriptと呼ばれていましたが、1995年にサン・マイクロシステムズ(現・オラクル)が開発したプログラミング言語「Java」が注目されていた事から、JavaScriptという名前に変更されました。
JavaScriptはウェブサイトやアプリケーション、デスクトップやスマートフォンなど、利用される場面は多岐にわたり、ウェブサイトにおいては、ポップアップウィンドウの表示や、文字や画像などのアニメーション、自動スクロールとスライダーなどの、動的な操作やアニメーションが有効な場面で利用されている欠かせない存在です。

ウェブサイトでは、Googleアドセンス広告やGoogleマップ、FaceBookやYouTubeの埋め込みなどにもJavaScriptが使用されているのですが、処理が遅くなってウェブページの読み込み時間にも影響が出てしまうのです。

Xサーバーで高速化設定をしたページのPagespeed insightsのスコア
以前、Xサーバーの高速化設定であるXPageSpeedやJITを設定してWordPressサイトの読み込み速度の改善を行ってモバイルパフォーマンスの改善を行ってPageSpeed Insightsのモバイルスコアで81点を出していたのですが、後ほど自動広告の設定をしてみたら、読み込み速度の低下と共にパフォーマンスのスコアが下がって50点台前後まで下がってしまったのです。

グーグルが2017年に公表したデータによれば、ページの読み込み時間が1~3秒の場合、離脱率は32%、1~5秒の場合は90%、1~6秒の場合は106%、1~10秒の場合は123%上昇することが報告されています。
つまり、ページを読み込んでいる間に離脱してしまうユーザーを逃さないまま、JavaScriptを使用したアドセンス広告やGoogleマップを表示して、収益や利便性を落とさない必要性があるので、目標としては32%の離脱率である3秒以内、可能であれば2秒以内が目標となります。

モバイルページの高速化であればAMP(Accelerated Mobile Pages)を使用する手段もありますが、TCD GENSENの特徴的な機能である検索フォームが使用出来なくなる事や、関連記事カードリンクの崩れなどが気になって、Google検索の優遇が無くなってからは一切使用しなくなりました。

JavaScriptを全て遅延読み込みにすると不具合が出る

エックスサーバーのXPagespeed設定画面
エックスサーバーのXPageSpeed設定ではJavaScriptの読み込みをコンテンツの表示後まで遅延させる事で、読み込み速度を向上させる設定が可能なのですが、ファーストビューに表示されるハンバーガーメニューなどのJSを使用した項目まで遅延読み込みをしてしまって、ウェブサイトの機能が正常に使えなくなってしまうのです。

これを回避するためにXPageSpeed設定では、JavaScriptの遅延読み込みをOFFにしておりましたが、ファーストビューで正常に機能しなくなる機能に影響が無い程度に、読み込み時にJavaScriptを読み飛ばしてしまえばいいんですよね。


WordPressプラグインFlying Scriptsのインストールと設定方法

Flying Scriptsのインストール

WordPressプラグイン Flying Scriptsのインストール画面

PageSpeed Insightsの「使用していないJavaScriptの削減」を行いながら、ファーストビューで不具合を起こさせないようにするには、ワードプレスプラグインの「Flying Script」が便利です。

まず、管理画面の「新規プラグインを追加」で「Flying」と検索フォームに入力すると、作者がWP Speed MattersになっているFlying Scriptsが表示されるので、これをインストールして有効化します。

もし見つからない場合は、こちらをダウンロードして新規プラグインの追加にあるプラグインのアップロードでインストールを行ってください。

Flying Scriptsの設定方法

WordPressプラグイン Flying Scriptsの設定画面

Flying Scriptsは「使用していないJavaScriptの削減」に表示されていたURLの一部分をInclude Keywordsに入力するのみなので、設定はとても簡単です。

このウェブサイトでは、以下の内容がページ読み込み時の速度に大きな影響を与えておりました。

  • Google自動広告と手動広告
  • Googleマップ
  • YouTube埋め込みプレーヤー
  • FaceBookいいねと埋め込み
  • Googleアナリティクス

これらの内容を、ページデザインや機能に影響が無い事を確認しながら、Include Keywordsに一つずつ追加していけば、PageSpeed Insightsのスコアを大きく上昇させる事が出来るのです。

この中でYouTube埋め込みプレーヤーだけが、JavaScriptの読み飛ばしをしても全く効果が無かったのですが、それ以外は全て改善されておりますので、Include Keywordsには「使用していないJavaScriptの削減」に表示されていたURLの一部をこのように入力をしております。

  • adsbygoogle.js
  • pagead2.googlesyndication.com
  • connect.facebook.net
  • googletagmanager.com/gtag/js
  • maps.gstatic.com
  • maps.googleapis.com

URLの最後のJSまでを含める事を記載しているサイトを見かけますが、読み飛ばしの必要が無いJavaScriptに影響が無い程度に、部分一致で指定してしまえば正しく機能します。
このウェブサイトでは、「使用していないJavaScriptの削減」で影響が大きかった、アドセンス広告やGoogleマップ、アナリティクスやFacebook関係を遅延読み込みさせるように、部分一致で入力をしてからTimeoutを5秒のままSave Changesをクリックをして完了させました。

また、レンダリングを妨げるリソースの除外に表示されているjquery/jquery.min.js?ver=〇.〇.〇はレンダリングを妨げるどころか、使っている場合がほとんどなので、これは絶対に入れないようにしましょう。


Flying Scripts設定前後のスコア

Flying Scripts設定前のPagespeed insightsのモバイルパフォーマンススコア

Flying Scriptsを設定する前は自動広告を設定する前のスコアになってしまいますが、モバイルのパフォーマンススコアで81点、デスクトップのパフォーマンススコアで95点を取れておりました。
AMP (Accelerated Mobile Pages)を導入していない状態のスコアとしては、かなりの高得点でしたが、自動広告を設定後は50点台まで下がってしまっていたので、そこからの改善策なのです。

Flying ScriptsでJavaScriptの読み飛ばし設定をしてからは、なんと!

Flying Scripts設定後のPagespeed insightsのモバイルパフォーマンススコア
非AMPページなのに、モバイルのパフォーマンススコアで96点が出てしまいました。
Total Blocking Time(TBT)とLarge Contentful Paint(LCP)が特に大きく変化していますね。

Flying Scripts設定後のPagespeed insightsのデスクトップパフォーマンススコア
TCD GENSENは特にSEO対策などに力を入れているワードプレステーマではないのですが、デスクトップのパフォーマンススコアは100点が出てしまいました。
AdSenseの自動広告やGoogle Mapなどのサイトの外部から大量の情報を読み込んでいる重いユニットを無効化しないまま、このスコアが出てしまったというのは筆者的にも驚きです。

新サーバーへの移転やXPageSpeed設定など、ウェブサイトの読み込み速度改善のために色々と手を尽くしてきていましたが、様々なプラグインや機能を駆使してWordPressを高速化していく中で、最も効果が強力で不具合のリスクが少ないのは、一度も導入をする事が無かった「Flying Scripts」でした。
全体的に見るとまだまだ改善の余地がありますが、体感でも分かる快適な読み込み速度とほぼ満点に近いPagespeed insightsのスコアは必見ですので、是非Flying Scriptsを導入して違いを実感してみて下さい。



YouTubeチャンネルバナー

Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中!
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます!
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです!

最新の更新情報を受け取れる各種SNSを運営中!フォローや登録はこちら!


X Postをタップして、@jvcameratravelを付けたまま記事をX(旧・Twitter)でシェアをすると、弊社運営のXアカウントにてあなたのポストをリポストするアカウント拡散キャンペーンを行っています。
不要な時は@jvcameratravelは外してね!

関連記事

  1. XサーバーのXPageSpeedの設定

    WordPressサイトのトラブル|TCD GENSENのヘッダーバーメニューが開けない時の対処法

  2. 閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法 サムネイル画像

    閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法

  3. ワードプレスプラグイン Autoptimizeの導入サムネイル画像

    WordPress高速化プラグインAutoptimizeの設定方法!CSS JavaScript 画像を最適化!

  4. WordPressサイトの写真や画像が色褪せたり色が変わる原因の対策や対処法

    WordPressサイトの写真や画像が色褪せたり色が変わる原因の対策や対処法

  5. WordPress 常時SSL化とサブディレクトリからサブドメインへの301転送設定

    WordPressのサブドメインサイト、常時SSL化とサブディレクトリからリダイレクトする301転送設定

  6. WordPress プラグイン Google XML Sitemapsの設定・使用方法

    WordPressプラグイン XML Sitemap Generator for Googleで検索インデックス登録!

  7. WordPressプラグインWP Rocketの購入ページと3つの料金プラン

    WP Rocketのレビュー!高機能キャッシュ&最強のWordPress高速化プラグイン!

  8. Xサーバーの高速化設定ページのサムネイル

    エックスサーバーの高速化設定!レンタルサーバーのパフォーマンス向上で快適に!

  9. 内部検索スパム サーチコンソールの未登録件数

    目障りなSEO To66.Asia 内部検索スパムをRobots.txtでブロックしてクロール禁止に

  10. 記事の最後に定型文を自動表示するWord Pressプラグイン!Add Widget After Content

    記事最後に定型文を自動表示するWordPressプラグイン!Add Widget After Content

  11. Googleサーチコンソールへの登録

    Googleサーチコンソールで検索登録してSEO対策!XMLサイトマップの送信と使用方法

  12. 自動読み込みがリスクになっているWordPressサイト

    WordPressプラグインの入れすぎがダメな理由を解説!アンインストール後も注意!

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. 楽天モバイル×富士ソフト ポケットWi-Fi FS050W

    楽天モバイルをWi-Fi専用で使用!富士ソフトのモバイ…

  2. ザハトラーFSB8へのHaoge Tie Down Short Threadedノブ取り付け風景

    短くて激安!ザハトラービデオ三脚雲台用ボールクラ…

  3. DHLの国際配送で日本に届くまでの荷物追跡履歴

    DHLで荷物を国際発送・受け取り 到着日数や荷物の追…

  4. 尺玉のド迫力を体感!三条夏まつり大花火大会 | 新潟県三条市

    三条夏まつりは2025年7月25日から開催!26日に花火大…

  5. 宮城県登米市 伊豆沼はすまつり

    遊覧船で蓮の花を観賞!伊豆沼・内沼はすまつり開催 …

  6. 2023年 大曲の花火 全国花火競技大会 大会提供花火

    大曲全国花火競技大会は2025年8月30日に開催!有料観…

  7. 2023年 神明の花火 グランドフィナーレ

    神明の花火は2025年8月7日に開催!有料観覧席も販売…

  8. 2023年 第76回塩竈みなと祭前夜祭花火大会の観覧レポ | 宮城県塩釜市

    塩竈みなと祭前夜祭花火大会は2025年7月20日に開催|…

  9. ぎおん柏崎まつり海の大花火大会 尺玉100発一斉打上げ

    ぎおん柏崎まつり海の大花火大会を2025年7月26日に開…

  10. 南くりこま高原 一迫ゆり園|約200品種15万球の百合の花が咲く絶景|宮城県栗原市

    南くりこま高原 一迫ゆり園 復活をかけて2025年6月21…

楽天トラベルのバナー画像

よく読まれている人気記事ランキング




Amazonトップページバナー
楽天モバイルアフィリエイト