Flying Scripts

WordpPressの高速化を代行していていると、「Flying Scripts」プラグインを使用されている方をちらほら見かけます。

ただ、ほとんどの方が使い方を間違っています。

Googleで検索をしてみても間違った解説がされている記事の方が多かったので、その影響かなと思いました。

これを正さなくても別にいいかなと思ったのですが・・・

ブログを書く暇ができてしまったので書いてみようと思います(*´ω｀*)

Flying Scriptsとは

目次へ戻る

Javascriptを遅延読み込みさせるWordPressプラグインです。

Flying Scripts

プラグインページを見ると、

  • Javascriptをユーザーアクションで読み込みようにする
  • ユーザーアクションが無かった場合に読み込む時間も設定できる

ということで、PageSpeed Insightsのパフォーマンススコアを改善させるためには、良い働きが期待できるプラグインです。

ただ、Javascriptをいじるのは不具合も多いので、安易に行わず表示崩れや不具合がないかはしっかり確認をするのがお勧めです。

Flying Scriptsの使い方

目次へ戻る

使い方は簡単です。

設定項目は３つしかなく、やることも単純。

遅延読み込みしたいJavascriptを部分一致させるようにユニークな文字列を「Include Keywords」に記述すればOKです。

例）
adsbygoogle.js
pagead2.googlesyndication.com
pagead2.googlesyndication.com/pagead/js/adsbygoogle
https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
など

“ユニーク” というのは面白いっていうのではなくて、”唯一” の方の意味合いです。

ユニークアクセスとかのユニークの方です。

要は他のものと混同しないように部分一致で指定してね、ということです。

エンキューされたJavascriptだけでなく、ハードコートされたJavascriptにも効くことが確認できましたので、使い勝手は良さそうです。

Flying Scriptsが効かない！？

目次へ戻る

この記事の本題です。

Googleで検索すると、デベロッパーツールやPageSpeed Insightsの「使用していない JavaScript の削減」に挙がっているものを「Include Keywords」に記述する、と解説している記事が割と上位表示されていますが、これが間違いです。

Flying Scriptsが有効なのは、該当のページが直接読み込んでいるJavascriptのみです。

Javascriptが呼び出すJavascriptには機能しません。

何のこったい(´・ω・`)

と思う方もいらっしゃるかもしれませんが、１つのJavascriptを読み込むことで、それがまた別のJavascriptを読み込むものもあります。

特にサードパーティで多く、

  • アドセンス
  • Twitter埋め込み
  • Instagram埋め込み

なんかがそうです。

.jsの拡張子はとにかく「Include Keywords」に記述したのにうまく効かない、という場合は先述した、Javascriptが呼び出しているJavascriptを設定してしまっている可能性があります。

例えば　show_ads_impl_fy○○○.js

目次へ戻る

これはアドセンスのJavascriptが呼び出しているJavascriptになります。

ですので、Flying Scriptsではどうすることもできません。

そもそも広告タグにこのJavascriptを読み込む記述はありません。

これは　pagead2.googlesyndication.com/pagead/js/adsbygoogle.js　が呼び出しているからです。

pagead2.googlesyndication.com/pagead/js/adsbygoogle.js　の方が設定できていれば　show_ads_impl_fy○○○.js　も遅延読み込みされます。

なので　pagead2.googlesyndication.com/pagead/js/adsbygoogle.js　の方をFlying Scriptsに設定すればOKです。

Flying Scriptsで設定するJavascriptはhtmlソースで確認

目次へ戻る

Flying Scriptsで有効なのはページが直接読み込んでいるJavascriptなので、設定するものを確認するのはhtmlソースが分かりやすいと思います。

▼htmlソースの確認方法
https://www.google.com/search?q=html%E3%82%BD%E3%83%BC%E3%82%B9+%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95

htmlソースから「.js」で全文検索をし、<script>タグのsrc属性で読み込んでいるものです。

例えば、

<script src="○○○.js"></script>

↑こんな形です。

<script>
～　中略　～
var url = "○○○.js";
～　中略　～
</script>

↑試しにこんな感じで読み込まれているものも設定してみたのですが、環境のせいか私のブログではJavascriptが消えるだけで読み込まれませんでした。

なので要チェックです。

その他の注意点として、Javascriptは何でもかんでも遅延読み込みしてOKというわけではありません。

ライブラリ系のJavascriptもあって、それが読み込まれていることが前提で動作するスクリプトもあります。

jQueryやBootstrapが有名だと思います。

Javascriptは詳しくないという方であれば特に、表示や動作確認をしっかりと行ってくださいね(*‘∀‘)b

あとがき

目次へ戻る

物価高にため息です。

今更かもですがorz

よくいく飲食店のメニューも軒並み値上がりしています。

インボイス制度？

フリーランスでも消費税？

売上1,000万円いっていなくても消費税？

毎年毎年税金ばかりで貯金なんかできませんよ┐(´д｀)┌