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

WordPress Webサイトを運営している場合でも、他のWebサイトを運営している場合でも、Webサイトのパフォーマンスの重要な指標はページ速度であることを知っておく必要があります。

GTmetrixやGooglePageSpeed Insightsなどのサイトパフォーマンステストツールのいずれかを使用している場合は、JavaScriptの解析を延期することをお勧めします。

さて、このフレーズは紛らわしいかもしれませんが、それはあなたのウェブサイトの読み込み時間を増やすのに重要な役割を果たします。

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

さて、これについては後で詳しく説明します。 つまり、JavaScriptの解析を延期すると、スクリプトのダウンロードが完了するのを待たずに、ブラウザーが最初にWebサイトのコンテンツをロードできるようになります。

ブラウザは他のWebサイトのコンテンツをロードする前に、JavaScriptをレンダリングしてサーバーからダウンロードするため、このプロセスは不可欠です。 これにより、Webサイトの速度が低下し、ページの読み込み時間が中断されます。

ありがたいことに、JavaScriptの解析を延期することが、この問題を軽減するための最良の方法です。

この記事では、WordPressでJavaScriptの解析を延期するための5つの実証済みの方法について説明しました。 ただし、その前に、フレーズの意味を詳しく調べて、Javascriptの解析を延期する必要があるかどうかを確認しましょう。

始めましょう！

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

JavaScriptの解析を延期する手法を理解する前に、WebブラウザーがWebページをレンダリングする方法を知っておく必要があります。

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

デフォルトでは、ブラウザはこれらのリソースを順番にダウンロードします。 Webページのレンダリングは、すべてのリソースがダウンロードされた後にのみ再開されます。 さらに、大量のリソースはWebページの読み込み時間に悪影響を及ぼします。

ブラウザがコードを調べてWebサイトをレンダリングするときは常に、JavaScriptが見つかるとレンダリングを停止します。 JavaScriptファイルをフェッチして解析できるようになるまで、プロセスは停止します。 これはあなたのウェブサイトの速度に悪影響を及ぼします。

ありがたいことに、JavaScriptの解析を延期するプロセスは、Webサイトのメインコンテンツの読み込みが完了するまで、JavaScriptファイルのダウンロードと解析を待機するようにブラウザーに通知します。 この時点で、訪問者はWebサイトを操作できるため、JavaScriptのダウンロードと解析に必要な時間がサイトの読み込み時間を危険にさらすことはありません。

JavaScriptの解析を延期する必要があることを知る方法は？

前に述べたように、GTmetrix、Google PageSpeed Insights、またはWP Engine Speed Toolなどのサイトパフォーマンステストツールは、Webサイトを分析するときにJavaScriptの解析を延期することを提案することがよくあります。

特にGTmetrixは、グレードを提供し、ページの読み込み速度を向上させるために延期する必要のある特定のスクリプトを一覧表示します。

WebサイトのURLを入力して、ツールがそれを評価するのを待つだけです。 評価が完了したら、[PageSpeed]タブに移動し、[JavaScriptの解析の延期]セクションを展開します。

このセクションでは、以下の例に示すように、レンダリングプロセス中にロードされる必須ではないスクリプトのリストを提供します。

非同期属性と延期属性

スクリプトのダウンロードがWebページのレンダリングに干渉しないようにすることが重要です。 これを行うには2つの方法があります。

• 非同期
• 延期

次のように、 async属性をスクリプトタグに含めることができます。

 <script src= “path/to/script” async> </script>

これは、スクリプトを非同期でロードするようにブラウザに指示します。 正確には、ブラウザはコード内でリソースを検出するとすぐにリソースをダウンロードしますが、リソースがまだダウンロードされている間にHTMLの解析に進みます。

一方、次のようにdefer属性をスクリプトタグに追加できます。

 <script src= “path/to/script” defer> </script>

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

async属性とdefer属性の主な違いは、リソースがダウンロードされるタイミングです。

コンパクトなWebアプリケーションを使用している場合は、相互依存関係が満たされるようにdeferを使用することをお勧めします。 さらに、レンダリングパスにスクリプトが数個しかない場合は、これらの属性の両方を使用してもかまいません。

非同期属性と延期属性を理解するための例を次に示します。

JS1とJS2の2つのスクリプトがあるとします。

条件は、JS2がJS1の後にコードに現れることですが、JS2はJS1に依存していますが、JS1はJS2よりも大きいです。

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

一方、 deferを使用する場合は、JS1とJS2が順番にダウンロードされるため、エラーが発生しないことを確認してください。

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

ページ速度は、Webサイトのパフォーマンスを左右する最も重要な側面であると前述しました。 JavaScriptファイルはかなり大きく、ロードに時間がかかるため、実行をしばらく遅らせると、Webサイトの速度を上げるのに便利です。

以下は、WordPressでJavaScriptの解析を延期する必要がある理由のいくつかです。

1.検索ランキングを上げるには：

グーグルまたは他の検索エンジンが検索エンジンのランキングのためにあなたのウェブサイトを評価するとき、彼らは測定の重要なポイントとしてページ速度を取ります。 あなたのウェブサイトがより速くロードされるならば、それは検索エンジン結果の最初のページに現れるにちがいありません。

調査によると、2人に1人は、ページが2秒未満で読み込まれると予想しています。 ウェブサイトが2秒以内に適切に読み込まれない場合、Googleはあなたではなく競合他社を優先します。 したがって、検索ランキングに悪影響を与える可能性があります。

したがって、JavaScriptの解析を延期して、Webサイトの読み込み時間を大幅に短縮する必要があります。

WordPress Webサイトを高速化するためのその他のオプションを探している場合は、検索トラフィックを2倍にするこれらの7つのページ上のSEO手法を確認してください。

2.コンバージョン率を上げるには：

Webサイトの読み込みが遅い場合、訪問者はWebサイトを離れて、他のより良いオプションを探す必要があります。 ユーザーはウェブサイトですばやく信頼できる情報を探していることが多いため、読み込みの遅いページは気分を害する可能性があります。

同様に、アフィリエイトサイトを運営し、Webサイトを通じて製品を販売する場合、ユーザーはそれに対してより多くの行動を取ることが期待されます。 ただし、Webページの速度が遅いと、訪問者がアクションを実行できなくなる可能性があります。

HubSpotで発表された調査によると、Webサイトの読み込み時間が1秒遅れても、コンバージョン率は7％低下します。 それはあなたのウェブサイトの読み込み時間を増やしてコンバージョン率を上げることがどれほど重要であるかです。

JavaScriptの解析を延期する手法は、Webサイトの速度を上げ、コンバージョン率を向上させるのに役立ちます。

3.より良いユーザーエクスペリエンスを提供するには：

非常に簡単、考える必要のない！ 遅いウェブサイトはひどいユーザーエクスペリエンスを作成します。 ウェブサイトの読み込みに通常よりも時間がかかる場合は、訪問者がウェブサイトを離れることが予想されるため、バウンス率が高くなります。

Webページのコンテンツが読み込まれた後にのみJSファイルが実行されるように、JavaScriptの解析を延期することを検討する必要があります。 この手法は、WordPress Webサイトを高速化し、ユーザーに優れた最高のエクスペリエンスを提供するのに役立ちます。

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

JavaScriptの解析を延期するには、次の3つの主要なルートのいずれかを選択できます。

• プラグイン
• 縞模様の方法
• Functions.phpファイル

これらのルートを使用して、WordPressでJavaScriptの解析を延期するための5つの異なるメソッドを作成しました。

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

Async JavaScriptは無料のWordPressプラグインであり、上記のコンテンツでレンダリングをブロックするJavaScriptを排除するのに役立ちます。

プラグインは、WordPress Webサイトのパフォーマンスを向上させるために、非同期または延期属性を追加または除外するスクリプトを完全に制御します。 非同期と延期のどちらかを選択する前に覚えておくべきことは次のとおりです。

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

非同期JavaScriptプラグインを使用してWordPressでJavaScriptの解析を延期するためのすべてのステップは次のとおりです。

まず、WordPressダッシュボードから[プラグイン]-> [新規追加]にリダイレクトします。

次に、検索バーでAsync JavaScriptプラグインを探し、インストールしてアクティブ化します。

プラグインのインストールとアクティブ化が完了したら、 [設定]ページに移動して必要な変更を加えます。

次に、[非同期JavaScriptを有効にする]オプションにチェックマークを付け、次の画像に示すように[非同期JavaScriptメソッドとして延期]を選択します。

より高度なオプションについては、ページまでスクロールダウンできます。 ここでは、非同期タグと延期タグを適用するスクリプトを含めたり、除外するスクリプトのリストを追加したりできます。

また、AsyncJavaScriptプラグインによる変更から除外できるプラグインとテーマを一覧表示することもできます。

必要な変更を加えたら、ページの一番下までスクロールして、[設定を保存]ボタンをクリックします。

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

WP Rocketは、数回クリックするだけでWebサイトの読み込みを高速化する最も強力なWordPressキャッシングプラグインの1つと呼ばれています。 プラグインは、ページキャッシュ、キャッシュプリロード、静的ファイル圧縮、およびその他の多くの優れた機能を提供します。

それ以外に、WP Rocketは、WPRocketダッシュボードの[ファイルの最適化]タブでJavaScriptの解析を延期するのにも役立ちます。

WP Rocketプラグインを購入、インストール、およびアクティブ化したら、 [設定]オプションにリダイレクトし、メニューから[ファイルの最適化]タブをクリックして開始します。

その後、[JavaScriptファイル]セクションまでスクロールし、[ JavaScript遅延のロード]オプションにチェックマークを付けて、 jQueryのセーフモードを有効にします。

プロセス全体が完了したら、ページの最後までスクロールして、[変更を保存]ボタンをクリックします。

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

W3 Total Cacheは、WebサイトのSEOとユーザーエクスペリエンスを向上させるもう1つの重要なWordPressプラグインです。 コンテンツ配信ネットワーク（CDN）の統合を活用することで、Webサイトのパフォーマンスを向上させ、読み込み時間を短縮します。

W3 Total Cacheは無料で、非常に効果的です。 このプラグインを使用して、WordPressWebサイトでのJavaScriptの解析を延期できます。

W3 TotalCacheプラグインを使用してWordPressでJavaScriptの解析を延期するためのすべての手順は次のとおりです。

まず、WordPressダッシュボードから[プラグイン]-> [新規追加]にリダイレクトします。

次に、検索バーでW3 Total Cacheプラグインを探し、インストールしてアクティブ化します。

プラグインのインストールとアクティブ化が完了したら、WordPressの左側のサイドバーから[パフォーマンス]-> [一般設定]に移動して、必要な変更を加えます。

その後、[縮小]セクションまで下にスクロールし、[有効にする]オプションにチェックマークを付けます。 さらに、縮小モードから[手動]オプションを選択し、[すべての設定を保存]ボタンをクリックして続行します。

次に、左側のサイドバーから[パフォーマンス]-> [縮小]タブにリダイレクトし、 JSの見出しまで下にスクロールします。ここで、2つのHTMLタグが付いた[領域の操作]セクションが表示されます。

Before </ head>タグのEmbedタイプの「defer」オプションを使用して「Non-blocking」を選択します。

同じセクションで、アクティブなWordPressテーマを選択し、[スクリプトの追加]ボタンをクリックして、解析するJavaScriptのURIを含める必要があるJSファイル管理の見出しを確認できます。

[スクリプトの追加]ボタンをクリックすると、必要な数のURIを追加できます。

変更が完了したら、[設定の保存とキャッシュの削除]ボタンをクリックして続行します。

その後、 CSSセクションまでスクロールダウンします。 次に、 CSSファイル管理ヘッダーの下にある[スタイルシートの追加]ボタンをクリックして、CSSスタイルシートURIを挿入できます。 オンライン速度監視ツールによって提供される提案に基づいて、複数を追加できます。

変更が完了したら、[設定の保存とキャッシュの削除]ボタンをクリックして続行します。

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

VarvyのPatrickSextonが推奨する別の方法では、最初のページの読み込みが完了すると、スクリプトを使用して外部JavaScriptファイルを呼び出します。 これは、Webページの読み込みが完了するまで、ブラウザがJavaScriptをダウンロードまたは実行しないことを意味します。

このメソッドを使用するには、Varvyが提供するコードスニペットを微調整し、 </ body>終了タグの直前にスクリプトをテーマファイルに追加します。

WordPressでJavaScriptの解析を延期するために、テーマの本文部分に追加するコードは次のとおりです。

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

注： defer.jsを外部JavaScriptファイルの名前に変更してください。 その後、wp_footerフックを使用して、子テーマのfunctions.phpファイルを介してコードを挿入できます。

このアプローチでは、Varvyのコードを次のようにラップできます。

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

この方法のすべてのステップを明確な画像で説明します。

WordPressダッシュボードにログインし、 [外観]-> [テーマエディター]に移動します

次に、画面の右側からheader.phpファイルをクリックし、上記のコードを貼り付けてから</ bodytag>を閉じます。

その後、[ファイルの更新]ボタンをクリックします。

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

WordPressの開発についてのアイデアがある場合は、HTMLマークアップを介してスクリプトを直接追加してはならないという事実に精通している必要があります。 代わりに、組み込みのWordPress関数を使用してリソースを要求し、必要に応じてWebサイトをバックアップする必要があります。

関数スニペットをfunctions.phpファイルに追加することで、JavaScriptファイルにdefer属性を使用できます。
そのためには、WordPressダッシュボードからテーマエディターに移動する必要があります。 その後、 functions.phpをクリックして、次のコードを追加します。

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

このスニペットは、JQueryを除くすべてのJavaScriptファイルにdefer属性を追加するようにWordPressに指示します。
次のコードを簡単に追加して、 functions.phpファイルを介してJavaScriptファイルにasyncまたはdefer属性を使用することもできます。

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

スクリプトタグに非同期属性と延期属性を追加する前に、WordPressがアクセスできるように、各スクリプトをキューに入れる必要があることを忘れないでください。 そのためのコードは次のとおりです。

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function 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_d', get_stylesheet_directory_uri().'/script_d.js'); }

関数.phpファイルへのコードの追加が完了したら、[ファイルの更新]ボタンをクリックします。

この方法のすべてのステップを明確な画像で説明します。

WordPressダッシュボードにログインし、 [外観]-> [テーマエディター]に移動します

次に、画面の右側にあるfunctions.phpファイルをクリックします。 次に、上記のコードを貼り付け、[ファイルの更新]ボタンをクリックして、必要な変更を保存します。

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

WordPressでJavaScriptの解析を延期するために、AsyncJavaScriptおよびWPRocketプラグイン以外のオプションを探している場合は、それらがたくさんあります。 それらのいくつかは次のとおりです。

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

これは、JavaScriptの最適化やその他の速度最適化手法を支援するための使いやすいインターフェースを備えた無料のWordPressプラグインです。

スピードブースターパックの長所：

• 非常にシンプルで使いやすく、インタラクティブなユーザーインターフェイスが付属しています
• JavaScriptの最適化、CSSの最適化、遅延読み込み、コンテンツ配信ネットワーク（CDN）の統合を支援します
• 例外的なパフォーマンスとバグの改善のために定期的に更新されます

スピードブースターパックの短所：

• このプラグインまたはその機能のいずれかを有効にすると、Webサイト上の他のプラグインと競合する可能性があるというリスクがあります

2. WP遅延JavaScript：

このWordPressプラグインは、LABJSを使用して、wp_enqueue_script（）によって追加されたすべてのJavaScriptの読み込みを延期します。 その結果、ロード時間が適切に最適化されます。

WP Deferred JavaScriptの長所：

• 非常に使いやすく、市場で最も人気のあるソリューションの1つです
• アドオン機能としてだけでなく、WordPressでJavaScriptの解析を延期するように明示的に設計されています

WP Deferred JavaScriptの短所：

• 更新頻度が低く、WordPressの新しいバージョンと互換性がない可能性があります
• Webサイト上の他のプラグインが破損する可能性があります

FAQ（よくある質問）

結論

Webサイトの速度とパフォーマンスを向上させるには、WordPressでJavaScriptの解析を延期することが非常に重要です。 プラグインの使用やテーマファイルへのコードの追加など、この手法を実行するためのさまざまな方法を紹介したので、この記事が洞察に満ちていることを願っています。

テーマファイルにコードを追加するのが難しい場合は、上記のプラグインを使用してJavaScriptの解析を延期することを強くお勧めします。 プラグインは使いやすく、数回クリックするだけでプロセス全体を完了することができます。

プロセスが完了したら、GTmetrixなどのサイトパフォーマンステストツールを使用してWebサイトを実行し、Webサイトができるだけ多くのスクリプトを延期していることを確認してください。

WordPressでJavaScriptの解析を延期する方法について懸念や質問はありますか？ 下のコメントセクションでそれらを撃ち抜いてください！