Flying Scripts by WP Speed MattersでJAVCASCRIPTSを呼び飛ばす使い方や方法！
SEO対策です。
JavaScriptの読込みには、非同期化（async）や遅延（defer）など様々な手法があります。
様々な手法でアプローチされていますが、JavaScriptがコアな部分の役割を果たしているので、ユーザーが思っているような劇的な改善が出来ずに苦労しているのが現実です。
- 非同期化（async）は、言葉の通りHTMLとJavaScriptを非同期で処理します
- 遅延（defer）は、HTML解析後にJavaScriptを実行します
使用できないJAVASCRIPTは何かを確認したい
「PageSpeed Insights」や「Lighthouse」で確認します。
下記は「Lighthouse」を利用しています。
使用していないJavaScriptsが多い
Google系広告もがおおいですがこれは削除できません。
そこで私は「Flying Scripts」を利用しました。
最初のレンダリングに必要ないJavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間、最初のCPUアイドルなどを削減します。
Flying Scripts by WP Speed Mattersの利用方法！使い方
Flying Scriptsとは、JavaScriptを読み飛ばすプラグインを利用することにしました。ユーザーによる操作（マウスホバー、スクロールなど）が無くなるまでJavaScriptを実行しません。
ユーザーがウェブページのリンクをホバーしたり、画面をスクロールさせたり、何かしらのアクションした時にJavaScriptを読み込ませることができます。
Chromeの場合は、「デベロッパーツール」を利用して見つけ出します。対象のウェブサイトを表示させて右クリックし「検証」を選択します。「Network」タブに切り替えてください。
①「Flying Scripts」の起動する
WordPressのダッシュボードの「設定」 > 「Flying Scripts」から設定を行います。基本的に外部スクリプトをすべて設定して構いません。
FlyingScriptsjava削除
②Javascriptの登録
使用しないないJAVASCRIPT
下記の設定画面が表示されますので、「Include Keywords」欄にJavaScriptを登録します。（Pagespeed Insightの「使用していないJavaScript」を登録します。）
Timeoutは2秒にしました。何もしないで2秒経過するとJavascriptが稼働します。
（設定画面）
JAVASCRIPTを登録
大幅に改善
大幅に改善いたしました。使用していない JavaScript の削減が一つだけとなっています。設定したJAVASCRIPTは改善されました。
改善１
まとめ
JAVCASCRIPTSを呼び飛ばすツールやテーマは多々あります。競合しておそくなることもありますので一つのツールだけで実施しましょう。
コメント