【遅延読込】Flying Scriptsの設定方法・使い方・デメリット・メリットまとめ

2023年1月9日

Page Speed Insightsの【使用していない javascript の削減】を解決する方法として、超有名なFlying Scriptsの概要設定方法・使い方・メリット・デメリットをまとめていく。

サイトスピードを落とす原因である重すぎAdSense広告を一瞬で何とかしたい人・JSファイルの遅延読込をしたい人は最後まで是非。

Flying Scriptsとは?

Flying Scriptsとは、WP Speed Mattersが開発する

  • 読者が何かアクションを起こすまで指定したJavaScriptを読み込ませない
  • 読者がアクションを起こさなくても、一定時間経ったらJavaScriptを勝手に読み込ませる

設定が出来るプラグインだ。

英語がわからなくても、JavaScript言語がわからなくても、簡単に設定できるから安心してほしい。

Flying Scriptsの使い方

説明が終わったところで、Flying Scriptsの使い方を解説していく。
Page Speed Insightsの【使用していないJavaScriptの削減】を解決する人向け。

それ以外の使い方をする人は【2】の手順を飛ばそう。

設定手順

  1. Flying Scriptsプラグインをインストール
  2. Page Speed Insightsで分析
  3. 【.js】までを全てコピー
  4. (Timeout,Disable on pagesを設定)
  5. Save Changeで設定完了

5分もあれば絶対に終わる!!

Page Speed Insightsで分析

まずはGoogle謹製Page Speed Insightsでサイト・ブログを分析しよう。

【show_ads〜.js】と【adsbygoogle.js】

上記は例。他にもあればそれもコピー。

コピーする場所は【/の後】から【.js】まで。

gtagはAnalyticsの計測コードだからコピー非推奨。遅延させると読み込まれるまでの数秒、スクロール・クリックなどの計測が出来なくなる。

設定⇒Flying Scriptsで、あらかじめコピーしておいたコードをInclude Keywordsに書き込む。

Timeoutは何もしなくてOK

読者がスクロールなどのアクションを起こさなくてもJavaScriptを勝手に読み込ませる時間が、Timeout。

これは初期時の”5s”のままでOK。

Disable on pagesは何もしなくてOK

遅延読み込みさせたくないページを指定するのが、Disable on pages。

これも放置でOK。

Save Changesで設定完了

青色のSave Changesボタンで設定完了。

これでAdSense広告などのjsファイルが他のコンテンツよりも遅れて読み込まれていれば、無事設定が完了している。

Flying Scriptsのメリット・デメリット

【メリット】
・複雑な設定なし
・Page Speed Insightsの点数大幅アップ
・サイトスピード改善(FCP)
⇒SEO対策に役立つ

【デメリット】
・サイト崩れするかも
・読み込みが遅くなる(画像のLazyLoadと同じぐらい)

メリット

もちろん条件はどちらとも揃えている。変えているのはFlying ScriptsをONにするか?しないか?だけ。

本当に凄い。ヤラセ感凄いけど本当。というかAdSense広告が重すぎるんだよな…

デメリット

絶対に最初に読み込ませないといけない必要なJSファイルまでも、遅延させるとサイト崩れが起きる可能性があるから、そこは注意。
⇒もしもサイト崩れが起きたらコードを消せば解決。

読み込みが遅くなるというのは0.5秒程度。画像のLazyLoadとほぼ同じ。

とりあえずサイトを爆速にしたい方におすすめ

総評としてFlying Scriptsは、複雑なコード操作をする必要なく、ファイル操作をする必要なく、簡単にサイトを爆速したい方におすすめだ。

とりあえず入れよう。

おすすめ記事

レビュー

2023/2/12

【ケース使用者は買うな】Anker PowerCore Magnetic 5000 レビュー【MagSafe】

高すぎiPhone14Proが発売され、「Dinamic Island楽しい!」と言う人が増えつつある今、iPhoneネタが書きたいと思いました。 そんな時、部屋中を見渡して「これだ!」という商品がありました。 ということで、今回は【Anker PowerCore Magnetic5000】のレビューをしていきます。 ちなみに呼び方はMagnetic5000に統一しています。 外観・仕様 まずは外観。 サラサラな質感で、シンプルな見た目でかつ、高級感があります。 カラーはホワイトの他に、ブラック・ネイビー ...

もっと読む

レポート

2023/3/8

【レポート】ご注文はアトレですか? in 秋葉原に行ってきた【2022/12】

「Koi先生はやっぱり凄い」ということを痛感させられるイベント【ご注文はアトレですか? in秋葉原 2022⇒ごちうさアトレ2022】に行ってきた。 ので、ガラスイラスト・グッズを紹介=レポートを残していく。 以下記載している画像はほぼ全て、ダウンロード・利用OK⇒規約 色々情報 開催期間:2022年12月1日(木)~12月25日(日) 開催場所:アトレ秋葉原1 2Fイベントスペース イベントページ:https://gochiusa.com/bloom/news/n02430000.html 事後通販につ ...

もっと読む

日常/食べ物レビュー

2023/2/19

【当選】毎日スロットくじでPayPay1000ポイント当たった話【Yahoo!】

Yahoo!毎日スロットくじといえば、Yahoo! Japan公式アプリや天気アプリ[Androidのみ]で参加できる豪華景品やPayPayポイントが当たるくじなんですが、このくじのことを、大体の人は 「1円しか当たらない」や「1円以外入っていないだろ」 という印象を持っていると思います。 ということで今回はそれは果たして真実なのか?本当に当たりは入っていないのか?綴っていきます。 当たりは入っていた 結論から。 当たりは入っていました。 ヤフー天気アプリのYahoo!毎日スロットくじで、6月3日16時2 ...

もっと読む

オーディオ レビュー

2023/3/23

【壁掛け】ヘッドフォンスタンドを探しているならこれを買え【レビュー】

総合評価:(星4|コスパが少し悪い) ヘッドフォンを使っているのなら全員買ってほしい製品を今回はレビューする。 壁掛けを探している人や、現在100均一のS字フックを使っている人は是非最後まで読んでほしい。 一般的なヘッドフォンスタンドはおすすめできない 最初に、ヘッドフォンスタンドと言うと上記のような物が大量に出てくるが、これはスペースが狭くなって埃がたまるからおすすめしない。 そして、100均に売っているS字フックもヘッドフォンのクッションが変形したり、ずれ落ちたり、するからおすすめしない。 Cozyc ...

もっと読む

ガジェット レビュー

2023/3/5

【Zepirion ミニ財布 レビュー】懸念点4つ、でも最高【コスパ最強】

評価:(星5) 一般的な2つ折り財布はポケットに入りづらいし、出しづらいし、で何か良い財布はないかな、とAmazonで時より探していた。 そんな中で「これだ!」と見つけてすぐに購入したZepirionのミニ財布(Quick Wallet L)を今回はレビューしていく。 キャッシュレス財布を探している人、この財布のデメリットを知りたい方は特に最後まで読んでいってほしい。 スライド機構は本当に便利 使ってみて思ったのは、カードのスライド機構は本当に便利。 支払い時にカードをサッと取り出してサッとしまえる。VI ...

もっと読む

アニメ

2023/2/27

【無料】iPhoneで画像バックアップするならAmazonPhotosがおすすめ【比較】

今日は、2種類の人々にアプローチする記事となっています。 該当する方は最後まで見ていってください。 画像バックアップってどれが良いのかな?出来れば無制限で無料が良いな。 GooglePhoto・iCloudの容量がギリギリで違うバックアップサービスに乗り変えたい!出来れば無料で。 僕は上記の【2】に当てはまっており、GooglePhotosの容量が残り5GBぐらいで、どこのバックアップサービスに変えようか悩んでいました。 悩んだ結果、無料で無制限で使えるAmazonPhotosを利用することにしたため、こ ...

もっと読む

-ブログ運営
-,