MENU
あなたが知りたい芸能ニュースを運営するメディア「芸能マーケティング図書館」です。皆様の芸能における疑問の謎が解決します!

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をコピーしました!

この記事を書いた人

More
芸能と音楽をを追求しつづけるメディアです。東京都内に住んでいます。アネックといいます。
子供の頃から芸能・音楽・テレビっ子でした。ですので昔の芸能音楽や芸能の知識は自信があります。好きな芸能ニュースに自分の見解をいれますので意見もいただけますと幸いです。今だけでなく昔の芸能もお伝えして楽しんでいただければと感じます。とくに皆さんが興味をもってもらえるような懐かしい気持ちに浸れるメディアとしたいと考えています。
法人サイトの実績:
①某大手総合商社系メディア/コーポレイトサイト3件でインフラやセキュリティの技術面で要件定義から運用
②渋谷の大手ファッションモールのショッピングサイトのインフラ担当エンジニア


【資格】
Webディレクション資格認定者、Google アナリティクス個人認定資格(GAIQ)など他 IT資格を取得

【お問い合わせ先メールアドレス】
ybox4907@gmail.com

目次

コメント

コメントする

目次