WordPress で外部 Javascript を組み合わせる方法

JavaScript プログラミング言語は、Web ページが動的コンテンツを表示するのに役立ちます。たとえば、WordPress Web サイトでは、Javascript を使用してオーディオとビデオを埋め込みます。また、画像ギャラリー、インタラクティブ メニュー、カウントダウン タイマーなどの表示にも使用されます。

Javascript ファイルはファイル拡張子 .js を使用し、一般的な WordPress Web サイトでは、アクティブ化された WordPress テーマと WordPress プラグインによって Javascript ファイルがページに挿入されます。たとえば、テーマのホームページのスライダーが正しく機能するには、slider.js というファイルが必要な場合がありますが、お問い合わせフォーム ページでは form.js というファイルが必要な場合があります。

Javascript は、最新の WordPress Web サイトに不可欠であると考えています。残念ながら、ウェブサイトが正しく最適化されていないと、ウェブサイトが遅くなる可能性もあります.

Hypertext Transfer Protocol の最初のバージョンでは、ページを正しく表示するために各 Javascript ファイルをダウンロードして実行する必要があったため、Javascript によって Web サイトの速度が低下する可能性がありました。この問題に取り組むための一般的な最適化手法は、複数の Javascript ファイルを組み合わせて、ブラウザーが行う必要のある HTTP 要求の数を減らすことです。この手法は、Javascript 集約と呼ばれることもあります。

この記事では、なぜ多くの Web サイト所有者が WordPress で外部 Javascript を組み合わせるのかを説明します。 このタスクを実行するために使用できるいくつかの便利な WordPress プラグインを共有します。また、ほとんどの Web サイト所有者にとって、外部 Javascript ファイルを組み合わせる必要がなくなった理由についても説明します。

WordPress で外部 Javascript ファイルを結合する理由

JavaScript 関数は SCRIPT タグを使用して HTML に直接追加できますが、代わりに Javascript コードを外部ファイルに保存するのが一般的です。コードを分離し、Javascript 関数を多くのページで呼び出すことができるため、これを行う方がより実用的です。

Web ページで必要な各 Javascript ファイルは、ページのレンダリング プロセス中にブラウザーによってダウンロードされる必要があります。

ページ レンダリング	誰かが Web ページを表示すると、ブラウザはコードの各行を順番に処理してページを構築します。これはページ レンダリングと呼ばれます。
HTTP リクエスト	サーバー上のファイルにアクセスするためのリクエストは、HTTP リクエストと呼ばれます。したがって、ブラウザは、ページに必要な Javascript ファイルごとに HTTP リクエストを作成する必要があります。

ファイルが順番にダウンロードされる場合、HTTP 要求の数が多いと、Web ページの読み込みにかかる時間が長くなる可能性があります。そのため、WordPress で外部 Javascript ファイルを組み合わせることで、ページのレンダリング中に行われる HTTP リクエストの数を大幅に減らすことができます.

一部の検索エンジンは、外部 Javascript を 2 つのファイルに結合することを推奨しています。

重要な Javascript 関数 (ファイル 1)	最初の Javascript ファイルには、最初のページの読み込みを正しくレンダリングするために必要な重要な関数が含まれています。
あまり重要でない Javascript 関数 (ファイル 2)	2 番目の Javascript ファイルには、ページが読み込まれた後に呼び出すことができるあまり重要でない関数が含まれています。

Web ページを正しく表示するために 9 つの Javascript ファイルが必要な場合、WordPress で外部 JS ファイルを組み合わせると、Javascript コードの HTTP リクエストの総数を 9 つから 2 つに減らすことができます。外部 CSS ファイルも組み合わせることができるため、ページの HTTP リクエストの数をさらに減らすことができます。

外部 Javascript ファイルを組み合わせると、WordPress サイトは高速になりますか?

Hypertext Transfer Protocol の改善により、Web ホスティング会社が HTTP/2 をサポートしていない限り、Javascript ファイルと CSS ファイルを組み合わせる必要はなくなりました。

HTTP/1.0 と HTTP/1.1 では、Javascript と CSS ファイルを順番にダウンロードする必要がありました。これは、次のファイルのダウンロードを開始する前に、1 つのファイルを完全にダウンロードする必要があることを意味していました。 2015 年に開始された HTTP/2 プロトコルは、並列ダウンロードを可能にすることでこの問題を解決しました。すべての外部リソースを同時にダウンロードできるため、HTTP/2 が利用可能な場合、ファイルを結合する利点はなくなります。

HTTP/2 は現在、インターネット ブラウザーの 95.6% でサポートされています。 2022 年 1 月 6 日の時点で、オンラインのすべての Web サイトの 46.9% で HTTP/2 が使用されていますが、以下のグラフから、インターネットで最も人気のある Web サイトの中でこの数値が大幅に高いことがわかります。

Web ホストが HTTP/2 をサポートしている場合、ファイルを結合すると Web サイトの速度が低下する可能性があります。これは、結合された Javascript ファイルが、それらが集約したファイルよりも大きいためです。これは、ブラウザーが 2 つの大きな Javascript ファイルを同時にダウンロードするよりも、多くの小さな Javascript ファイルをダウンロードする方が時間がかかるためです。

Javascript で使用することをお勧めする 2 つの手法は、縮小化と遅延解析です。

縮小	ミニフィケーション 空白やコメントなどの不要な文字を削除する必要があります。これにより、Javascript ファイルが小さくなります。
解析の延期	Javascript コードは、ページのレンダリング プロセスを遅くします。 Defer と呼ばれる 2 つのテクニック と非同期 この問題に対処するために使用できます。

Javascript がページ レンダリング プロセスを遅くする理由をよりよく理解するには、WordPress での Javascript 解析の遅延に関する私の記事をお読みください。

WordPress で外部 Javascript を結合する方法

Web ホスティング会社がまだ HTTP 1.1 を使用している場合でも、WordPress で外部 Javascript ファイルと CSS ファイルを組み合わせることが推奨されます。

ファイルを結合する前後に必ずパフォーマンス テストを実行して、ページの読み込み時間にどのような影響があるかを確認してください。これは、GTmetrix、Google PageSpeed Insights、および Pingdom Website Speed Test を使用して行うことができます。

自動最適化

Autoptimize は、WordPress ユーザーが利用できる最も効果的な最適化プラグインの 1 つです。 HTML とファイルの組み合わせの縮小と、Javascript と CSS の縮小をサポートしています。 JavaScript ファイルは、レンダリング ブロックを防ぐために集約する代わりに遅延させることもできます。また、Google フォントの最適化オプションもあります。

ページの読み込み時間が常に改善されるため、多くの WordPress ウェブサイトで Autoptimize を使用しています。

公式ウェブサイトダウンロード自動最適化

アセットのクリーンアップ

Asset CleanUp は、高度に構成可能な最適化 WordPress プラグインで、Javascript と CSS の縮小、組み合わせ、延期をサポートします。また、HTML をクリーンアップし、フォントを管理してページの読み込み時間への影響を軽減するための多くのツールを提供します。

Asset Cleanup の際立った機能の 1 つは、Javascript および CSS マネージャーです。これにより、Web サイト全体で Javascript および CSS ファイルが読み込まれるページを正確に指定できます。

公式ウェブサイトダウンロードアセットのクリーンアップ

WP スーパー ミニファイ

WP Super Minify は、Javascript を圧縮し、CSS を圧縮するオプションのみを提供することで、少し異なることを行います.選択すると、WP Super Minify はファイルを結合、縮小、キャッシュします。

機能するシンプルな最適化ソリューションを探しているなら、これが最適なプラグインかもしれません。

公式サイトダウンロード WP SUPER MINIFY

WordPress キャッシュ プラグインを使用して外部 Javascript ファイルを結合する

最高の WordPress キャッシュ プラグインには、Web サイトのパフォーマンスを向上させるための追加の最適化ツールが多数含まれています。したがって、既存の WordPress キャッシング ソリューションで、外部の Javascript ファイルと CSS ファイルを組み合わせることができる可能性が高くなります。

たとえば、WP Rocket には、Javascript ファイルと CSS ファイルを縮小して結合するオプションがあります。レンダリングのブロックを防ぐために、Javascript ファイルも延期できます。

お好みの WordPress キャッシュ プラグインを使用してファイルを組み合わせてページの読み込み時間をテストし、その結果を Autoptimize や Asset CleanUp などのスタンドアロンの Javascript 最適化ソリューションと比較することをお勧めします。

最終的な考え

外部の Javascript ファイルを結合する様子を楽しんでいただけたでしょうか。これまで見てきたように、Web ホストが HTTP/2 をサポートしている場合は、ファイルを並行してダウンロードする方が効率的であるため、Javascript ファイルを集約する必要はありません。

Web ホストが HTTP/1.1 のみをサポートしている場合は、WordPress で外部 JavaScript を組み合わせて、ページの読み込み時間を短縮できます。

推奨記事:WordPress で未使用の CSS を削除する

読んでくれてありがとう。

ケビン