WordPressでJavaScriptの解析を延期する方法

公開: 2021-07-22

WordPressでJavaScriptの解析を延期する

サイトの読み込みに時間がかかりすぎていませんか？ WordPressサイトやその他のサイトを使用しているかどうかは関係ありません。読み込み時間が長いことは重大な懸念事項であり、すぐに修正する必要があります。

それで、あなたは同じようにさまよっていますか？ 個人的にサイトをチェックすると、「WordPressでJavaScriptの解析を延期する」というメッセージが表示される場合があります。 あなたは技術に精通していないので、これは複雑で、時には理解できないようです。

メッセージに従うと、ページの読み込み速度が向上し、サイトのコンバージョンと収益の向上に重要な役割を果たします。

ここで問題となるのは、WordPressでのJavaScriptの解析の延期とはどういう意味ですか？

だから、ここに簡単で短い答えがあります。 WordPressでのJavaScriptの解析の延期により、ブラウザはスクリプトを読まずに最初にWebサイトのコンテンツをロードして、ダウンロードを完了し、ロード時間を短縮できます。

ブラウザはWebサイトのコンテンツをロードする前にJavaScriptをレンダリングしてサーバーからダウンロードするため、この簡単なプロセスは重要です。 これは当然、Webサイトの速度を妨げ、読み込み時間を中断します。

しかし、WordPressでJavaScriptの解析を延期することが問題のロックを解除するための鍵であり、数分待つことなくWebサイトのパフォーマンスを楽しむことができます。

この投稿では、JavaScriptを延期するための5つの実証済みの手法を共有します。 しかし、解決策に飛びつく前に、このポップアップメッセージの実際の意味を理解する必要があります。

それで、それ以上の苦労なしに始めましょう！

WordPressでJavaScriptの解析を延期するとはどういう意味ですか？

ブラウザがWebページをどのようにレンダリングするか知っていますか？ そうでない場合は、最初にこれを理解する必要があります。

ブラウザがユーザーからリクエストを受信すると、ブラウザはそれをWebサーバーに送信し、ページはHTML形式でダウンロードを開始します。 このHTMLドキュメントには、DOM要素と、画像、スクリプト、スタイルシートなどのさまざまなリソースをレンダリングするテキストとコードが含まれています。

ただし、ブラウザはリソースを順番にダウンロードします。 ただし、ページをレンダリングすると、すべてのプロセスが再開され、読み込み時間に悪影響を及ぼします。 これでもプロセスが妨げられ、メッセージが表示されることがあります-ページをダウンロードできないか、サーバーエラーが表示されます。

ブラウザがウェブサイトまたはページをレンダリングするためにコードを実行するときはいつでも、JavaScriptがそこで見つかった場合はレンダリングを停止します。 このプロセスは、スクリプトをフェッチして解析できなくなるまで停止します。 さらに、それはあなたのウェブサイトの速度に悪影響を及ぼします。

しかし、WordPressのJavaScriptの解析の延期の助けを借りて、サイトのページまたはメインコンテンツをダウンロードするようにブラウザに通知するのに役立ち、高速ロードを提供します。 これで、ユーザーはWebサイトを見つけることができます。

WordPressでJavaScriptの解析を延期する必要があるのはなぜですか？

ウェブサイトの読み込みに時間がかかりすぎる場合は、フックアンドクルックによってパフォーマンスを向上させる必要があります。 ウェブサイトのパフォーマンスに気付いていない場合は、GT Metrix、Google Pagespeed Insights、WPEngineなどの最高のツールを使用してサイトでテストを実行してください。

これらは、サイトを分析するときにJavaScriptの解析を延期することを提案し、提供するスピードツールテストです。 たとえば、GTMetrixを試してみましょう。

GTMetrixでは、各ページにサイトのグレードと、できるだけ早く改善する必要のある特定のスクリプトが表示されます。 このツールを使用するには、WebサイトのURLを入力して数分待つと、データ全体を取得できます。

[ページ速度]タブまで完了すると、読み込み速度が向上し、[JavaScriptの解析の延期]セクションが展開されます。

ここには、レンダリングプロセス中にロードされているロードスクリプトのリストがあります。 ですから、すべてを注意深く読んでください。

非同期VS遅延属性

これは、スクリプトのダウンロードがWebページのレンダリングと相互作用しないようにするために重要です。 したがって、これを行う2つの方法は、Asyncとdeferです。

Asyncを使い始める場合は、次のスクリプトタグを追加する必要があります。

これにより、ブラウザは、ブラウザがスクリプトを非同期でロードする必要があるという更新を受け取ります。 正確には、ブラウザはコードにぶつかるとすぐにリソースをダウンロードしますが、リソースのダウンロード中にHTMLを解析します。
一方、2番目のメソッドDefer属性を選択できます。 したがって、指定されたスクリプトを追加します。

このタグを使用すると、Webページの解析が完了するまでリソースをダウンロードしないようにブラウザに指示します。 プロセスが完了すると、以前に遭遇した遅延スクリプトがダウンロードされます。

両方のリソースがダウンロードされたときに確認しようとしている主な違い。 両方をより適切に使用するには、Webアプリケーションを確認する必要があります。

Webアプリケーションがコンパクトな場合は、延期を選択する必要がありますが、スクリプトが少ない場合は、非同期が最適です。 まあ、両方に違いはありませんが、真実は、遅延は大きなファイル用であり、非同期は小さなファイル用です。

Asyncとdeferの違いをよりよく理解するために、例を共有しました。 読む。

2つのJavaスクリプトJS1とJS2があるとします。 また、JS1の後にJS2がコードに現れるという条件があります。つまり、JS2はJS1に依存していますが、JS2よりも大きいということです。

Asyncを使用している場合、JS2がJS1の前にダウンロードを完了できる可能性があります。 これにより、JS1がない場合にJS2が実行されるため、エラーが発生する可能性があります。

また、延期を使用している場合は、JS1スクリプトとJS2スクリプトの両方が正常にダウンロードされ、エラーは発生しません。

したがって、スクリプトをロードし、Webサイトの速度またはロード時間を改善するには、延期するのが最適です。

JavaScriptの解析を延期する必要がある理由

先に述べたように、グーグルの最初のページにランク付けしたい場合は、ウェブページを高速でロードする必要があります。 およそ、ページは2〜3秒で読み込まれます。 残念ながら、JavaScriptはページの品質をレンダリングし、多くのトラフィックを失います。

ページの読み込みを遅らせると、さまざまな方法でWebサイトに影響を与える可能性があります。 幸い、JavaScriptの解析を延期すると、この問題を解決するのに役立ちます。 見て、それがあなたを助けることができる理由をチェックしてください。

  • 検索ランキングを上げる

グーグルが検索ランキングのためにあなたのウェブサイトのパフォーマンスを評価するときはいつでも、グーグルがチェックする最も重要な要素はサイトの読み込み時間です。 ウェブサイトの読み込みが速い場合は、検索結果の最初のページに自然に表示されます。

調査によると、2人に1人がウェブサイトの読み込みを待つと、2番目のソースに移動することがわかりました。 また、Googleは、読者に迷惑をかけず、最高のユーザーエクスペリエンスを提供するWebサイトのみを優先します。

また、ウェブサイトの読み込みに4秒以上かかる場合は、ウェブサイトのパフォーマンスに悪影響を及ぼします。 したがって、JavaScriptで作業することが重要です。 そして、延期は、サイトの速度を通常から超に上げるための賢い方法にすぎません。

最良の結果を得るには、SEO手法に従ってコンテンツを強化し、ページ速度を最適化する必要があります。

  • コンバージョン率を高める

あなたがコンバージョン率を高めたいならばあなたのウェブサイトが延期する必要があるもう一つの最大の理由。 ウェブサイトの読み込みが遅い場合、顧客が他のソースにバウンスし、トラフィックと売上を失う可能性があります。

ユーザーは急いでいます、彼らはしばしば彼らに速い情報を示すサイトをフォローするのが好きです。 また、サイトの実行速度が遅い場合、これは彼らにとって苛立たしいことであり、彼らはあなたのページに再びアクセスしない可能性があります。 作業しているサイトやブログは関係ありません。

あなたの仕事は、ユーザーに最高のサービスを提供することです。 Hubspotの調査によると、Webサイトの読み込み時間は7％のコンバージョン率を低下させることがよくあります。 WordPressでJavaScriptの解析を延期する手法を使用すると、サイトの速度をより速く上げることができ、コンバージョン率がさらに向上します。

  • 最高のユーザーエクスペリエンスをプレゼント

私たちはそうは思わないので、この理由の説明が必要です。 サイトの速度が良好で、ユーザーがサイトのコンテンツを楽しんでいる場合、訪問者がサイトに満足していることを期待できます。

また、サイトの読み込みに通常よりも時間がかかる場合、ユーザーはサイトを削除し、バウンス率を高めます。

WordPressのJavaScriptの解析の延期を使用すると、主要なWebサイトコンテンツをすばやくロードするのに役立つJavaファイルを更新できます。 この高速読み込みスキームは、ユーザーエクスペリエンスを向上させるWebサイトの速度を上げるのに役立ちます。

WordPressでJavaScriptの解析を延期するための5つの異なる方法

これで、記事のメインセクションに移動しました。 ここでは、サイトを高速化し、最高のユーザーエクスペリエンスを提供し、最初にランク付けするためのルートを提供するのに役立つ5つの優れたテクニックを学びます。

それでは、方法を教えてください。

JavaScriptの解析を延期するために選択できる3つの重要なルートは、plugin、varvyメソッド、およびfunctions.phpファイルです。 これらのルートを使用すると、指定された5つの方法を適用できます。

方法1-無料の非同期JavaScriptプラグインを使用する

WordPressでは、Async JavaScriptは、コンテンツのロードでレンダリングをブロックするJavaScriptを根絶するのに役立つ無料のプラグインです。

このプラグインを使用すると、Javaスクリプトを完全に制御でき、Asyncまたはdeferを使用すると、サイトの速度を上げ、検索ページでのパフォーマンスを向上させることができます。 ただし、非同期と延期を選択する際に従う必要のある提案はほとんどありません。

  • AsyncはHTMLファイルの解析中にJavaScriptをダウンロードできますが、JavaScriptファイルを実行するためにHTML解析を一時停止します。
  • Deferは、HTMLファイルの解析中にJavaScriptファイルをダウンロードできますが、HTML解析の完了後にファイルの実行を待機します。

次に、Asyncプラグインを使用してWordPressでJavaScriptの解析を延期するためのステップバイステップガイドに移りましょう。

  1. WordPressダッシュボードを開き、プラグインタブにジャンプします。
  2. プラグインタブで、[新しい追加]ボタンをクリックし、非同期JavaScriptプラグインを検索します。
  3. プラグインを見つけたら、インストールボタンをクリックしてアクティブにします。
  4. したがって、インストールが完了したら、設定に移動して必要な変更を加えます。
  5. [非同期JavaScriptを有効にする]オプションにチェックマークを付け、[非同期JavaScriptとして延期]を選択します。
  6. 高度な機能については、チェックマークを付けて、適用するスクリプトから選択します-非同期タグと延期タグ。
  7. ここで、含めたり除外したりするスクリプトを選択できます。 さらに、非同期JavaScriptプラグインによる変更から除外するプラグインとテーマを選択することもできます。
  8. 変更が完了したら、変更を保存します

方法2：WPRocketプラグインを使用する

WPロケットプラグインについて聞いたことがない場合は、今すぐこれをキャッチしてください。 WP Rocketは、ウェブサイトの読み込みを数秒で高速化するのに役立つ最もトレンディなプラグインの1つです。

さらに、このプラグインを使用すると、ページキャッシュ、キャッシュの事前読み込み、圧縮、およびその他の多くの優れた機能を受け取ることができます。

一方、プラグインは、ファイル最適化タブでJavaScriptの解析を延期するのにも役立ちます。

プラグインをインストールして使用する方法は次のとおりです。

  1. WordPressダッシュボードを開き、プラグインタブにリダイレクトします
  2. 次に、[新しい追加]ボタンをクリックして、WPロケットプラグインを検索します。
  3. インストールをタップしてプラグインをアクティブにします。
  4. 次に、設定に移動し、メニューからファイルの最適化を開いて開始します。
  5. 次に、JavaScriptファイルを下にスクロールし、JavaScript遅延オプションの読み込みにチェックマークを付けて、クエリのセーフモードを有効にします。
  6. プロセス全体が完了したら、ページの最後に移動し、[変更を保存]オプションをクリックします。

方法3：W3 TotalCacheプラグインを使用する

W3 Total Cacheは、WordPressでJavaScriptの解析を延期するために使用できるもう1つの最高のプラグインです。 このWordPressプラグインは、WebサイトのユーザーエクスペリエンスとSEOを強化するのに役立ちます。 さらに、CDN（コンテンツ配信統合）を活用することで、Webサイトのパフォーマンスを向上させ、読み込み時間を短縮します。

W3トータルキャッシュは非常に効果的で安全に使用できます。 さらに、このプラグインを使用して、WordPressでJavaScriptの解析を延期することができます。 このプラグインの使用方法は次のとおりです。

  • 最初にWordPressダッシュボードにアクセスし、プラグインページにジャンプします。
  • 次に、新しいボタンを追加して、プラグインW3トータルキャッシュプラグインを検索します。
  • プラグインが見つかったら、[インストールしてアクティブ化]ボタンをクリックします。
  • これでプラグインがインストールされました。 WordPressからパフォーマンスと一般設定に移動します。
  • 次に、ダッシュボードを下にスクロールして縮小セクションにジャンプし、有効化オプションにチェックマークを付けます。
  • さらに、縮小モードから手動オプションを確認し、保存オプションをクリックして続行できます。

コードを縮小する
[パフォーマンス]タブに移動し、左側のサイドバーから[縮小]タブを選択し、[JS]見出しまで下にスクロールします。そこで、2つのHTMLタグを使用して操作と領域のセクションを検索できます。

設定オプションを縮小する
延期オプションを使用して非ブロッキングを選択し、前にコードのタイプを埋め込みます鬼ごっこ。

JSMinify設定

  • 設定では、WordPressテーマを選択する必要があるJSファイル管理を見ることができます。
  • 次に、[スクリプトの追加]オプションをクリックして、解析するJavaScriptのURLを含めます。
  • [スクリプトの追加]ボタンをタップすると、必要な数のURLを追加できます。
  • 変更が完了したら、[設定の保存]ボタンと[純粋なキャッシュ]ボタンをクリックして続行します。
  • 完了したら、CSSセクションを下にスクロールします。
  • 次に、[スタイルシートの追加]ボタンをクリックします。
  • 次に、CSSファイル管理にスタイルシートのURLを挿入します。
  • 監視ツールによって提供された提案に基づいて、複数を追加できます。
  • これで変更が完了したので、設定と純粋なキャッシュボタンを保存します。

方法4：Varyの推奨する方法を使用する

WordPressでJavaScriptの解析の延期を選択できるもう1つの最良の方法は、Varyを選択することです。これは、最初のページが読み込まれると、スクリプトを使用して外部JavaScriptファイルを呼び出します。

これは、Webページがロードされない限り、ブラウザがJavaScriptをダウンロードまたは実行しないことを意味します。 ただし、この方法はPatrickSextonによって提案されています。

このメソッドを使用するには、varvyが提供するコードスニペットを微調整してから、bodyセクションの下のテーマエディターに追加します。

そこで、WordPressでJavaScriptの解析を延期するためにテーマの本文部分に追加できるコードを次に示します。

<Script type =“ text / javascript”>
関数downloadSAtOnload（）{
var element = document.createElement（“ Script”）;
element.src =“ defer .js”; document.body.appendChild（要素）;
}
もしも
（window.addEventListener）window.addEventListener（“ load '、
downloadJSAtOnload、false）;
それ以外の場合
（window.attachEvent）
Window.attachEvent（ "onload"、downlaodJSAtonlaod;
</ script>

これを行うときは、defer.Jsを外部JavaScriptファイルの名前に変更したことを確認してください。 次に、Wp_footerを使用して、子のテーマのfunctions.phpファイルを介してコードを挿入します。

使用する必要のあるコードは次のとおりです。

/ **
Varvyのコードスニペットを使用してJavaScriptの解析を延期する
* /
Add_action（ 'wp_footer'、 'my_footer_scripts'）;
関数
My_footer_scripts（）{
？>
REPLACE_WITH_VARVY_SCRIPT
<？php
}

今、私たちは明確な意味のためにステップバイステップガイドに進んでいます。

  1. WordPressダッシュボードに移動し、外観、テーマエディターの順に進みます。
  2. header.phpファイルに移動し、bodyセクションの前後に上記のコードを貼り付けます。
  3. 次に、[ファイルの更新]オプションをクリックします。

方法5-functions.phpファイルを使用する

忘れてしまった場合は、HTMLを介してWordPressに直接スクリプトを追加することはできません。 代わりに、組み込みのWordPress関数を使用してリソースを要求し、サイトをバックアップする必要があります。

関数スニペットをfunctions.phpファイルに追加して、JavaScriptファイルのdefer属性を使用する必要があります。

プロセスを完了するには、テーマエディターを開き、functions.phpファイルに移動して指定されたコードを追加します。

関数
Defer_parsing_of_js（$ url）{
もしも （
User_ is_logged_in（））
$ urlを返します。 // WP管理者を壊さないでください
If（FALSE ===
Strops（$ url、 '。js'））
$ urlを返します。
If（strops（$ url、 'jquery.js'））return $ url;
str_replace（ 'src'、 'defer src'、$ url）;を返します。
}

Add_filter（
'script_loader_tag'、
'defer_parsing_of_js'、10
）;

このコードは、WordPressがJQueryを除くJavaScriptファイルにdefer属性を追加するのに役立ちます。

これは、functions.phpファイルを介してdefer属性をJavaScriptファイルと同期するために使用できるコードです。

Add_filter（ 'script _loader_tag'、
'add_defer_tags_to_scripts'）;
 
関数
add_defer_tags_to_scripts（$ tyag）{
＃追加するスクリプトのリスト$ scripts_to_defer = array（ 'script_a'、script_b '）;
$ scripts_to_async = array（ 'script _c'、 'script_d'）;
＃deferタグをscripts_to_defer配列に追加します
Foreach（$ scripts_to_defer as $ current_script）{
If（true == strops（$ tag、
$ current_script））
Retun
Str_replace（ 'src、' defer =” defer” src '、' $ tag）;
}
＃非同期タグをscripts_to_async配列に追加します
Foreach（$ scripts_to_async as $ current_script）{
If（true == strops（$ tag、
$ current_script））
戻る
Str_replace（ 'src、' defer =”
Async =” async” src '、$ tag）;

}
$ tagを返します。
）。

次のコードを追加する必要があるため、各コードをキューに入れる必要があることを忘れないでください。

Add_action（ 'wp_enqueue_scripts'、
'enqueue_custom_js'）;
関数
Enqueue_ custom_js（）{
Wp_enqueue_script（ 'script_a'、
Get_stylesheet_directory_uri（）、 '/ script_a.js'）;
Wp_enqueue_script（ 'script_b'、
Get_stylesheet_directory_uri（）、 '/ script_b.js'）;
Wp_enqueue_script（ 'script_c'、
Get_stylesheet_directory_uri（）、 '/ script_ \ c.js'）;
Wp_enqueue_script（ 'script_ds'、
Get_stylesheet_directory_uri（）、 '/ script_d.js'）;
}

関数.phpファイルのすべてのコードを更新したら、ファイルを更新して変更を確認します。 これは、ファイルを更新するためのステップバイステップガイドです。

  1. WordPressダッシュボードを開き、外観、テーマエディタの順に進みます。
  2. 関数.phpファイルに移動し、上記のコードを貼り付けます。
  3. 次に、[ファイルの更新]オプションをクリックします。

WordPressでJavaScriptの解析を延期するための代替プラグイン

非同期と延期とは別に、WordPressのJavaScriptの解析を延期する2つのプラグインオプションがあります。

  1. スピードブースターパック

    2. これは、Webサイトの速度を簡単に向上させ、ユーザー向けに最適化するために使用できる、さらにもう1つの最高のWordPressプラグインです。 その長所と短所を教えてください。

    長所：

    • インタラクティブなユーザーインターフェイスにより、誰でも簡単に使用できます。
    • これは、JavaScriptの最適化、不十分な読み込み、およびCDN統合に役立ちます。
    • これは定期的に更新され、バグの脅威を排除します

    短所：

    • これにより、他のプラグインを使用する際に問題が発生する可能性があります。

  2. 非同期JavaScript

    3. このプラグインを使用すると、LABJSを使用してwp_enqueue_script（）として追加されたすべてのJavaスクリプトを簡単にロードできます。 その長所と短所を教えてください。

    長所：

    • プラグインはとても使いやすいです
    • プラグイン市場で最も人気があります
    • WordPressでJavaScriptの解析を延期するために設計されています

    短所：

    • 不規則な更新
    • たぶん、WordPressの新しいバージョンと互換性がありません
    • 他のプラグインに問題を引き起こす可能性があります

    よくある質問

    解析を延期するとはどういう意味ですか？

    解析の延期は、ブラウザのWebサイトコンテンツの後にJavaScriptファイルが読み込まれるときの状態です。 これは、deferがロードとレンダリングに参加しないことを意味します。

    そのため、ユーザーがブラウザーでWebサイトを要求すると、遅延JavaScript解析は、ブラウザーにJavaScriptが読み込まれるのを待たずに、コンテンツをすぐに表示します。 簡単に言うと、コンテンツが最初に表示されてから読み込まれます。

    WordPressのウェブサイトからレンダリングのブロックを削除するにはどうすればよいですか？

    Webサイトからレンダリングブロッキングを削除するための成功したアプローチの1つは、他のWebサイト要素の前に解析を延期することです。 レンダリングを最小限に抑える別の方法は、JSとCSSの両方を連結することです。

    サイトで重要でないJSを識別するために使用できるツールは何ですか？

    JavaScriptがWebサイトにとって重要であるかどうかを識別するには、次のツールにアクセスできます。

    • Google PageSpeedの洞察：これは、ウェブサイトの速度とパフォーマンスの主要な不足点を特定するのに役立ちます。 さらに、このツールは、サイトのパフォーマンスと読み込み時間を改善するためのいくつかの提案も提供します。
    • これにより、サイトは赤、オレンジ、緑などのさまざまな色のスコアを受け取ります。 赤はパフォーマンスが低く、オレンジは平均を示し、緑は永久に表示されます。
    • Pingdom Webサイトの速度テスト：パフォーマンスを追跡および監視するためのもう1つの人気のあるツールです。 このツールを使用すると、7つの異なる場所でWebサイトのパフォーマンスをテストできます。
    • さらに、このツールは、ページ速度を向上させるための提案も提供するため、Webサイトの速度とパフォーマンスを向上させることができます。

    Auto Optimizeプラグインを介してWordPressでJavaScriptの解析を延期できますか？

    自動最適化ツールを使用すると、JavaScriptの解析を簡単に延期できます。 プロセスを確実にするには、通常どおりプラグインをインストールしてアクティブ化する必要があります。 プラグインがインストールされてアクティブ化されたら、設定にアクセスして、JS、CSS、およびHTMLオプションを選択します。

    次に、JavaScriptコードオプションを最適化すると、オプションのロックが解除されます。 次に、集約JSファイルにチェックマークを付け、他のファイルを残します。

    さらに、プラグインを使用すると、レンダリングしたくないJavaScriptを除外できます。 変更が行われたら、保存ボタンをクリックします。

    まとめ
    ウェブサイトを最適化し、読み込み時間を短縮するには、WordPressでJavaScriptの解析を延期することが重要です。

    この記事で、鹿の構文解析の意味と、それがWebサイトを検索ページの上位にランク付けするのにどのように役立つかを理解していただければ幸いです。 幸運を！