WordPress高速化 アドセンス自動広告等のJavaScriptを読み飛ばすプラグインFlying Scripts

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

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

WordPress 重いアドセンス自動広告にも有効!Flying ScriptsでWordPressの高速化

ウェブサイトの読み込みを遅くする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を読み飛ばしてしまえばいいんですよね。


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です!
YouTube チャンネルリンク
各種SNSを運営中!フォローや登録はこちら!
YouTubeチャンネル
Bluesky
Fecebook
threads
instagram



関連記事

  1. WordPress ブログ記事を書き始めて10ヶ月目のアクセス数や収益は?

    WordPress ブログ記事を書き始めて10ヶ月目のアクセス数や収益は?

  2. WP YouTube Lyteの設定方法サムネイル画像

    YouTubeのサムネイルをキャッシュして高速化するプラグインWP YouTube Lyte

  3. udinra sitemap proの購入

    Udinra Sitemap pro|WordPress画像・動画サイトマップ作成プラグインの使用方法

  4. ウェブサイト管理者向け!汚い美容系広告だけをブロックして収益を減らさず離脱率を下げる方法

    ウェブサイト管理者向け!汚い美容系広告だけをブロックして収益を減らさず離脱率を下げる方法

  5. 2018年 第3回楽天イーグルス花火大会

    WordPressで記事を書いて6か月目 月間1万PV達成!アクセス数や収益は?

  6. WordPressサイトのレイアウト崩れ修復方法

    WordPress管理画面のレイアウト崩れの簡単な修正方法!原因はレンタルサーバーの高速化機能

  7. Wordpressでブログ開設して2ヶ月目の記事数、アクセス数や収益は?

    WordPressでブログ開設して2ヶ月目の記事数、アクセス数や収益は?

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

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

  9. TCD ワードプレステーマGENSEN 検索フォーム

    検索機能が高性能すぎるWordPressテーマ! TCD GENSENでSEO対策がオススメ

  10. Word Pressプラグイン Your Channel

    Your Channel | Youtubeチャンネルを埋め込むWordPressプラグイン

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

    Google サーチコンソールへのXMLサイトマップ登録と使用方法

  12. 肘をつき悩む女性 [モデル:Lala*]

    WordPress ブログ記事を書き始めて11ヶ月目のアクセス数は?収益は?SEOや書き方も!

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

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

  1. 寒河江ダムにある月山湖大噴水が最大高まで水柱を上げる画像

    日本一! 寒河江ダムの高さ112mまで上がる月山湖大噴…

  2. 詐欺通販サイトのURLが表示された商品ページ

    騙されない!詐欺通販サイトや偽ECサイトを簡単に見…

  3. WordPressを高速化するプラグイン3選 サムネイル画像

    WordPressを高速化!95点から100点を取れる軽量爆速…

  4. WP YouTube Lyteの設定方法サムネイル画像

    YouTubeのサムネイルをキャッシュして高速化するプラ…

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

    Autoptimizeの設定方法!CSS、JavaScript、画像を最…

  6. 活き生き田園フェスティバルファンタジック花火ショー スターマイン

    花火大会や食などを楽しめるお祭り!2024年 第35回 …

  7. 福島県南相馬市小高区 相馬野馬追 火の祭 フィナーレスターマインと2尺玉

    2024年 相馬野馬追 火の祭 二尺玉やスターマインなど…

  8. 2024年 錦秋湖湖水まつり湖上花火大会のサムネイル画像

    錦秋湖の湖面を彩る2024年 錦秋湖湖水まつり湖上花火…

  9. 2022年 わたりふるさと夏まつり花火大会のミュージックワイドスターマインの写真

    鳥の海公園で壮大な花火が楽しめる! わたりふるさと…

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

    大曲全国花火競技大会は2024年6月10日に開催!有料観…


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




Amazonトップページバナー