JavaScript の実行を遅延させて WordPress サイトを高速化する方法

Nkenganyi Clovis WordPressチュートリアル Dec 14, 2023

WordPress サイトの動作がトレッドミル上のカタツムリよりも遅いと感じたことはありますか?ラップトップを窓から放り投げて、思いっきり叫びたくなるようなフラストレーションを感じますか?はい、私たちは皆そこに行ったことがあります。

おそらく、キャッシュから縮小、遅延読み込みまで、サイトを高速化するためにあらゆることを試したことがあるでしょう。しかし、大きな違いはないようです。読み込みに永遠に時間がかかり、訪問者をイライラさせる、遅いサイトがまだ残っています。

JavaScript の実行の遅延を使用して WordPress サイトのパフォーマンスを最適化する簡単な方法があると言ったらどうなるでしょうか?初期読み込み時間を短縮し、Core Web Vitals スコアを向上させ、エラーや競合を回避できる方法。うますぎる話ですね。

そうではありません。これは、市場で最高のキャッシュ プラグインの 1 つであるWP Rocketに組み込まれている機能です。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

このブログ投稿では、これを使用してサイトの速度とパフォーマンスを向上させる方法を説明します。始める準備はできていますか?さあ行こう!

WPロケットとは何ですか?

WP Rocket は、WordPress サイトの速度とパフォーマンスを向上させるプレミアム キャッシュ プラグインです。かさばる PHP スクリプトの代わりに、動的 WordPress サイトから静的 HTML ファイルを生成し、訪問者に提供することでこれを実現します。これにより、サーバーの負荷が軽減され、Web サイトの応答時間が短縮されます。

WP Rocket は、サイトを最適化するための他の多くの機能も提供します。

  • GZIP 圧縮:ファイル サイズを縮小し、帯域幅を節約します。
  • ブラウザのキャッシュ:ブラウザ内の静的リソースをキャッシュし、サーバーへのクエリの量を減らします。
  • 縮小と連結:コードから不要なスペースとコメントを削除し、多数のファイルを 1 つに結合することで、HTTP リクエストの数を減らします。
  • LazyLoad:画像と iframe の読み込みを画面に表示されるまで遅らせ、帯域幅を節約し、読み込み時間を短縮します。
  • CDN 統合:サーバーのグローバル ネットワーク全体にマテリアルを配布し、訪問者により速く配信します。
  • データベースの最適化:データベースから不要なデータを削除し、サイズを削減します。
  • プリロード:検索エンジンによるインデックス作成を改善するために、ホームページとすべてのリンクされたページのキャッシュを事前に生成します。
  • もっと...

WP Rocket は JavaScript の実行を遅らせるのにどのように役立ちますか?

WP Rocket には、JavaScript の実行を遅らせる機能が含まれています。この機能は、ユーザー操作 (ページ上でマウスを移動する、画面に触れる、スクロール、キーを押す、マウス ホイールでスクロールするなど) が発生するまですべての JavaScript ファイルとインライン スクリプトの読み込みを延期することにより、パフォーマンスを向上させます。 LazyLoad と同様に機能しますが、JavaScript ファイルが対象です。

JavaScript の実行を遅延すると、Web ページの初期読み込み時間が短縮され、First Contentful Paint (FCP)、Largest Contentful Paint (LCP)、Time to Interactive (TTI) などのサイトのパフォーマンス指標が向上する可能性があります。これらの指標は、Google が Core Web Vitals でランク付けしているため、ユーザー エクスペリエンスと SEO にとって重要です。

WP Rocket は、安全に遅延できるスクリプトを認識し、それらに遅延を適用します。 WP Rocket 設定では、延期するファイルを識別するキーワードを手動で指定することもできます。

WP Rocket で JavaScript の実行遅延を有効にするにはどうすればよいですか?

WP Rocket で JavaScript の遅延実行を有効にするには、次の手順を実行します。

ステップ 1: WordPress サイトに WP Rocket をインストールしてアクティブ化します。

これを行うには、 WP Rocket サイトにアクセスし、サインインしてプラグインを購入することで、以下に示すデモで使用できるすべての機能を入手できます。

プラグインを購入し、zip ファイルをダウンロードした後、WordPress ダッシュボードで[プラグイン] > [新規追加]に移動し、ページの上部にある[プラグインのアップロード]をクリックします。

[プラグインのアップロード]をクリックすると、新しいウィンドウが表示され、[ファイルの選択] ボックスが表示されます。それをクリックして、ファイル管理で zip インストーラー ファイルを選択する必要があります。

zip ファイルを選択したら、 「今すぐインストール」ボタンをクリックします。

[設定] > [WP Rocket] > [詳細ルール]タブに移動します。

「JavaScript 実行の遅延」セクションまで下にスクロールします。

「遅延するスクリプト」または「遅延から除外するスクリプト」フィールドにキーワードをカンマで区切って追加します。

加えた変更を保存します。

たとえば、名前に「jquery」または「analytics」という単語が含まれるすべてのスクリプトを遅延させたい場合は、「遅延するスクリプト」セクションにこれらの用語を入力します。

名前に「WooCommerce」または「カート」という用語を含むすべてのスクリプトを省略する場合は、「遅延」領域から除外するスクリプトにそれらを入力します。

JavaScript の実行を遅らせることの利点は何ですか?

JavaScript の実行を遅らせることで、WordPress サイトに次のようないくつかのメリットを享受できます。

  • 読み込み時間の短縮: JavaScript の実行を遅らせることで、Web ページの読み込みとコンテンツの表示にかかる時間を短縮できます。これにより、ユーザー エクスペリエンス、維持率、SEO ランキングが向上します。
  • パフォーマンス指標の向上: JavaScript の実行を延期することで、FCP、LCP、TTI などのサイトのパフォーマンス指標を向上させることができます。これらの測定は、Web サイトがユーザーにとってどれくらい早く使いやすくなり、インタラクティブになるかを追跡します。 Google も、これらを Core Web Vitals のランキング要素として使用しています。
  • エラーと競合の減少: JavaScript の実行を延期することで、多くのスクリプトを同時に読み込んで実行するときに発生する可能性のあるエラーや競合の一部を防ぐことができます。たとえば、一部のスクリプトは、まだロードされていないスクリプトに依存している場合や、相互に対話している場合があります。 JavaScript の実行を遅延すると、これらの問題を回避し、より良いユーザー エクスペリエンスを提供できます。

結論

最後に、ユーザーがページを操作するか下にスクロールするまで、必須ではない JavaScript コードの読み込みと実行を遅らせることは、WordPress サイトのパフォーマンスを向上させるための優れた戦略です。

WP Rocket は、ユーザーが WordPress サイトに JavaScript の遅延実行や、サイトの速度と効率を向上させるその他の機能を簡単かつ適切に実装できる強力なプラグインです。

ユーザーは、WP Rocket の Delay JavaScript Execution 機能を使用して、サイトの読み込み時間、PageSpeed スコア、ユーザー エクスペリエンス、コンバージョンを向上させることができます。

Divi WordPress Theme