PageSpeed Insightsでサイトスピードを確認すると「使用していないJavaScriptの削減」でGoogleマップやアドセンスの自動広告が読み込み速度を遅くしているのが分かります。その対策としてJavascriptを読み飛ばして速度を劇的に改善するWordPressプラグイン「Flying Scripts」を導入する方法を写真付きで解説します。
ウェブサイトの読み込みを遅くするJavaScriptとは？
JavaScript(ジャバスクリプト)とは、ネットスケープコミュニケーションズのブレンダン・アイクによって、1995年5月に開発されたプログラミング言語のひとつで、開発当初はLiveScriptと呼ばれていましたが、1995年にサン・マイクロシステムズ（現・オラクル）が開発したプログラミング言語「Java」が注目されていた事から、JavaScriptという名前に変更されました。
JavaScriptはウェブサイトやアプリケーション、デスクトップやスマートフォンなど、利用される場面は多岐にわたり、ウェブサイトにおいては、ポップアップウィンドウの表示や、文字や画像などのアニメーション、自動スクロールとスライダーなどの、動的な操作やアニメーションが有効な場面で利用されている欠かせない存在です。
ウェブサイトでは、Googleアドセンス広告やGoogleマップ、FaceBookやYouTubeの埋め込みなどにもJavaScriptが使用されているのですが、処理が遅くなってウェブページの読み込み時間にも影響が出てしまうのです。
以前、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設定ではJavaScriptの読み込みをコンテンツの表示後まで遅延させる事で、読み込み速度を向上させる設定が可能なのですが、ファーストビューに表示されるハンバーガーメニューなどのJSを使用した項目まで遅延読み込みをしてしまって、ウェブサイトの機能が正常に使えなくなってしまうのです。
これを回避するためにXPageSpeed設定では、JavaScriptの遅延読み込みをOFFにしておりましたが、ファーストビューで正常に機能しなくなる機能に影響が無い程度に、読み込み時にJavaScriptを読み飛ばしてしまえばいいんですよね。
WordPressプラグインFlying Scriptsのインストールと設定方法
Flying Scriptsのインストール
PageSpeed Insightsの「使用していないJavaScriptの削減」を行いながら、ファーストビューで不具合を起こさせないようにするには、ワードプレスプラグインの「Flying Script」が便利です。
まず、管理画面の「新規プラグインを追加」で「Flying」と検索フォームに入力すると、作者がWP Speed MattersになっているFlying Scriptsが表示されるので、これをインストールして有効化します。
もし見つからない場合は、こちらをダウンロードして新規プラグインの追加にあるプラグインのアップロードでインストールを行ってください。
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を設定する前は自動広告を設定する前のスコアになってしまいますが、モバイルのパフォーマンススコアで81点、デスクトップのパフォーマンススコアで95点を取れておりました。
AMP (Accelerated Mobile Pages)を導入していない状態のスコアとしては、かなりの高得点でしたが、自動広告を設定後は50点台まで下がってしまっていたので、そこからの改善策なのです。
Flying ScriptsでJavaScriptの読み飛ばし設定をしてからは、なんと！
非AMPページなのに、モバイルのパフォーマンススコアで96点が出てしまいました。
Total Blocking Time(TBT)とLarge Contentful Paint(LCP)が特に大きく変化していますね。
TCD GENSENは特にSEO対策などに力を入れているワードプレステーマではないのですが、デスクトップのパフォーマンススコアは100点が出てしまいました。
AdSenseの自動広告やGoogle Mapなどのサイトの外部から大量の情報を読み込んでいる重いユニットを無効化しないまま、このスコアが出てしまったというのは筆者的にも驚きです。
新サーバーへの移転やXPageSpeed設定など、ウェブサイトの読み込み速度改善のために色々と手を尽くしてきていましたが、様々なプラグインや機能を駆使してWordPressを高速化していく中で、最も効果が強力で不具合のリスクが少ないのは、一度も導入をする事が無かった「Flying Scripts」でした。
全体的に見るとまだまだ改善の余地がありますが、体感でも分かる快適な読み込み速度とほぼ満点に近いPagespeed insightsのスコアは必見ですので、是非Flying Scriptsを導入して違いを実感してみて下さい。
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中！
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます！
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです！
この記事へのコメントはありません。