Flying Scripts by WP Speed Mattersの使い方・設定!JAVCASCRIPTSを呼び飛ばす方法!

JAVASCRIPTを呼び飛ばす
  • URLをコピーしました!

Flying Scripts by WP Speed MattersでJAVCASCRIPTSを呼び飛ばす使い方や方法!

SEO対策です。

JavaScriptの読込みには、非同期化(async)や遅延(defer)など様々な手法があります。

様々な手法でアプローチされていますが、JavaScriptがコアな部分の役割を果たしているので、ユーザーが思っているような劇的な改善が出来ずに苦労しているのが現実です。

  • 非同期化(async)は、言葉の通りHTMLとJavaScriptを非同期で処理します
  • 遅延(defer)は、HTML解析後にJavaScriptを実行します
目次

使用できないJAVASCRIPTは何かを確認したい

「PageSpeed Insights」「Lighthouse」で確認します。

下記は「Lighthouse」を利用しています。

使用していないJavaScriptsが多い

使用していないJavaScriptsが多い

Google系広告もがおおいですがこれは削除できません。

そこで私は「Flying Scripts」を利用しました。

最初のレンダリングに必要ないJavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間、最初のCPUアイドルなどを削減します。

レンタリングとは
レンタリングとは一つのWebページに含まれる、HTMLやCSSなどによる描画内容の記述、スクリプトによる動作の記述、画像ファイルやフォントファイルなど外部のデータなどを組み合わせ、Webブラウザのウィンドウ内にページ内容の描画を行うことを指します。

Flying Scripts by WP Speed Mattersの利用方法!使い方

Flying Scriptsとは、JavaScriptを読み飛ばすプラグインを利用することにしました。ユーザーによる操作(マウスホバー、スクロールなど)が無くなるまでJavaScriptを実行しません。

ユーザーがウェブページのリンクをホバーしたり、画面をスクロールさせたり、何かしらのアクションした時にJavaScriptを読み込ませることができます。

Chromeの場合は、「デベロッパーツール」を利用して見つけ出します。対象のウェブサイトを表示させて右クリックし「検証」を選択します。「Network」タブに切り替えてください。

①「Flying Scripts」の起動する

WordPressのダッシュボードの「設定」 > 「Flying Scripts」から設定を行います。基本的に外部スクリプトをすべて設定して構いません。

FlyingScriptsjava削除

FlyingScriptsjava削除

②Javascriptの登録

使用しないないJAVASCRIPT

使用しないないJAVASCRIPT

下記の設定画面が表示されますので、「Include Keywords」欄にJavaScriptを登録します。(Pagespeed Insightの「使用していないJavaScript」を登録します。)

Timeoutは2秒にしました。何もしないで2秒経過するとJavascriptが稼働します。

(設定画面)

JAVASCRIPTを登録

JAVASCRIPTを登録

大幅に改善

大幅に改善いたしました。使用していない JavaScript の削減が一つだけとなっています。設定したJAVASCRIPTは改善されました。

改善1

改善1

まとめ

JAVCASCRIPTSを呼び飛ばすツールやテーマは多々あります。競合しておそくなることもありますので一つのツールだけで実施しましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる