WordPressでスクリプトの読み込みを遅らせる方法

公開: 2022-05-02

WordPressでスクリプトの読み込みを遅らせる方法をお探しですか？

WordPressユーザーは、ウェブサイトの読み込み時間を改善するための最先端のテクニックを常に求めています。 スピードは、オンラインプレゼンスを成功させる多くの要因にとって非常に重要です。 WordPressの速度に関する主な項目の2つは、訪問者のエクスペリエンスと検索エンジンのランキングです。

WordPressウェブサイトの機能や可視性を強化するサードパーティのツールはたくさんあります。 これらのサードパーティツールは、JavaScriptを使用してWordPressWebサイトに機能を追加します。

この追加されたサードパーティのJavaScriptの欠点は、ほとんどの場合、スクリプトが存在する各URLのページの読み込み時間が長くなることです。

これは、ページにスクリプトがあり、訪問者がそのページにアクセスしようとしている場合は常に、スクリプトが原因でページを完全にロードするのにかかる時間が長くなることを意味します。

おそらくあなたはあなたのウェブサイトが速いか遅いかさえ確信がありません。 以下のリンクを見て、サイトの速度を特定するために使用できる無料のWebサイト速度テストツールに関する情報を入手してください。
https://www.wpfixit.com/free-website-speed-testing-tools/

機能とスピードを交換しなければならないのは公平ではないようですが。

外部スクリプトはサイトページの読み込みにコストがかかります

サードパーティのスクリプトはいたるところにあります。 HTTPArchiveによるJavaScriptの状態レポートによると、Webサイトによって要求される外部スクリプトの数の中央値は20であり、それらの合計サイズは約449KBです。

Webページのなんと93.59％には、少なくとも1つのサードパーティリソースが含まれています。 同じデータを深く掘り下げると、 76％のWebサイトが分析スクリプトを使用してユーザーを追跡していることがわかります。

サードパーティのスクリプトの最悪の影響は、重要なレンダリングパスの遅延に加えて、FIDグレードから始まるコアWebバイタルスコアに影響を与えることです。

重要なレンダリングパスは、ブラウザがHTML、CSS、およびJavaScriptを実際の使用可能なWebサイトにアセンブルするために行う一連のアクションです。

当然、サードパーティのスクリプトのペイロードサイズがここで主要な役割を果たしますが、考慮すべきもう1つの重要な要素があります。

JavaScriptは、実行するために多くのCPUリソースを消費します。 サードパーティのスクリプトを最適化してレンダリング時間への影響を減らしたとしても、それらはTimetoInteractiveメトリックに影響を与える可能性があります。 これは、ユーザーがWebページを操作する速度を測定します。

速度が遅いほど、ユーザーの不満が高まり、ユーザーがWebサイトを放棄する可能性が高くなります。

WordPressで最も一般的に使用される外部スクリプト

以下は、WordPressWebサイトで最も一般的に使用される外部スクリプトのリストです。 これらの多くは、おそらくWebサイトで使用しているため、認識できます。

  1. グーグルアナリティクス
  2. Facebookのピクセルコード
  3. ライブチャットウィジェット
  4. ビデオ埋め込み
  5. 埋め込みフォーム
  6. ソーシャルメディアウィジェット
  7. 埋め込みフォーム

WordPressでスクリプトの読み込みを遅らせると素晴らしい成果を達成

機能のために速度を犠牲にしなければならない理由はありません。

両方持つことができると言ったらどうしますか？

サードパーティのスクリプトを使用してWordPressWebサイトの機能と可視性を強化し、Webサイトのすべてのページが訪問者に対して可能な限り高速に読み込まれるようにします。

それは可能であり、WordPressでスクリプトのロードを遅らせるプロセスを通じて行われます。

通常の状況では、Webサイトで内部スクリプトを使用すると、訪問者がサイトのURLの1つにアクセスしたときにページが読み込まれます。

WordPressでスクリプトの読み込みを遅らせると、設定された遅延時間が経過するまで、外部スクリプトの読み込みが開始されません。

たとえば、遅延時間を4秒に設定した場合、これは、ページが完全に読み込まれてから4秒後までスクリプトが実行されないことを意味します。

これは、ページの読み込みがスクリプトの完了を待機していないことを意味するため、非常に強力です。 ページの読み込みが速くなり、WebサイトのURLの1つをテストするために使用する速度テストツールがより良い結果をもたらすため、訪問者のエクスペリエンスが向上します。

以下の通常の外部スクリプトロードと遅延スクリプトロードの違いを見てみましょう。

通常の外部スクリプトのロード

次の画像は、TrustPilotの紹介文ウィジェットが埋め込まれているURLのウォーターフォール負荷を示しています。

画像でわかるように、このページで読み込まれている5つの外部リクエストがあります。 これらのリクエストは、埋め込まれた外部スクリプトから送信されます。

Delay Script Load in WordPress
通常の外部スクリプトが埋め込まれています
WordPress Load Script 1
通常の外部スクリプトが埋め込まれています

外部スクリプトのロードを遅らせる

それでは、WordPressで遅延スクリプトのロードがロードされた同じページを見てみましょう。

このTrustPilotの紹介文ウィジェットはまだページに埋め込まれていますが、ページが読み込まれてから2.5秒後に読み込まれるように遅延時間を設定しました。

リクエスト量が減少しただけでなく、フルロード時間とオンロード時間も減少したことを確認してください。

これは、ロード時にスクリプトがページ上に表示されていないかのようです。

WordPress Delay Load Script
遅延外部スクリプトが埋め込まれています
WordPress Delay Load Script 1
遅延外部スクリプトが埋め込まれています

これで、外部スクリプトのロード時間のコストが高く、速度を犠牲にすることなくスクリプトを使用する方法について説明したので、優れた機能を実現するために実装する必要のある正確なコードを示します。

WordPressでのオリジナルのロードスクリプトのロード

以下のコードは、上記の速度テストで使用したこのTrustPilotウィジェットに埋め込まれたデフォルトのスクリプトです。

 <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->

WordPressでスクリプトの読み込みを遅らせる

以下のコードは、上記の速度テストで使用したこのTrustPilotウィジェットに埋め込まれた遅延スクリプトです。

 <!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
    head_ID.appendChild（script_element）;
}、 2500 ）; //調整できる時間遅延
</ script>
<！-TrustBoxスクリプトを終了します->

<！-TrustBoxウィジェット-カルーセル->
<div class = "trustpilot-widget" data-locale = "en-US" data-template- data-businessunit- data-style-height = "140px" data-style-width = "100％" data-theme = " light "data-stars =" 1,2,3,4,5 "data-review-languages =" en ">
</ div>
<！-TrustBoxウィジェットを終了します->

WordPressでの遅延スクリプトの読み込みの使用

以下のコードは、WordPressでスクリプトの読み込みを遅らせるために使用できるデフォルトのテンプレートです。

このテンプレートには、変更が必要なアイテムが2つだけあります。

  1. 使用する外部スクリプトのURL
  2. スクリプトを実行するときの時間遅延
<script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
    head_ID.appendChild（script_element）;
}、 2500 ）; //調整できる時間遅延
</ script>

結論は

この投稿が参考になり、WordPressでスクリプトの読み込みを遅らせる方法を理解してくれることを心から願っています。

WordPress Webサイトで使用しているサードパーティの外部スクリプトには、これを実際に使用する必要があります。ページの読み込み時間がすぐに短縮され、検索エンジンのランキングと全体的な訪問者のエクスペリエンスに役立ちます。

この投稿で読んだことを実装する際に問題が発生した場合は、以下にコメントしてください。行き詰まっている場所を確認できます。