WordPressで外部JavaScriptを結合する方法｜HTTP/2時代のサイト高速化ガイド

JavaScriptは、Webページに動的なコンテンツを表示させるためのプログラミング言語です。WordPressサイトでは、音声や動画の埋め込み、画像ギャラリー、インタラクティブなメニュー、カウントダウンタイマーなど、さまざまな場面でJavaScriptが活用されています。

JavaScriptファイルは拡張子「.js」で保存され、一般的なWordPressサイトでは、有効化されているテーマやプラグインによってページ内に読み込まれます。たとえば、テーマのトップページスライダーには「slider.js」が必要で、お問い合わせフォームのページには「form.js」が必要といった具合です。

現代のWordPressサイトにとってJavaScriptは不可欠な存在ですが、適切に最適化しないとサイトの表示速度を低下させてしまう原因にもなりえます。

初期のHTTPプロトコルでは、各JavaScriptファイルを順番にダウンロードして実行しなければページが正しく表示されないため、JavaScriptはサイトを遅くする要因でした。この問題への対策として広く使われているのが、複数のJavaScriptファイルを1つにまとめてHTTPリクエスト数を減らす手法です。これは「JavaScriptアグリゲーション(統合)」とも呼ばれます。

本記事では、多くのサイト運営者がWordPressで外部JavaScriptを結合する理由を解説し、その作業に使える便利なプラグインをご紹介します。さらに、ほとんどのサイト運営者にとってファイル結合がもはや不要となっている理由についても触れていきます。

なぜWordPressで外部JavaScriptファイルを結合するのか?

JavaScriptのコードはSCRIPTタグを使ってHTML内に直接記述することもできますが、一般的には外部ファイルとして保存するのが主流です。コードを分離できるうえ、複数のページから同じJavaScript関数を呼び出せるため、実用性が高くなります。

Webページが必要とするJavaScriptファイルはすべて、ブラウザがページ描画の過程でダウンロードしなければなりません。

ページレンダリング	ユーザーがWebページを閲覧するとき、ブラウザはコードを上から順に処理してページを構築します。これをページレンダリングと呼びます。
HTTPリクエスト	サーバー上のファイルへのアクセス要求をHTTPリクエストといいます。ブラウザは、ページに必要なJavaScriptファイルごとにHTTPリクエストを発行します。

ファイルが順番にダウンロードされる場合、HTTPリクエストの数が多いほどページの読み込み時間は長くなります。そこで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サイトは速くなる?

HTTPプロトコルの進化により、ホスティング会社がHTTP/2に対応していない限り、JavaScriptやCSSのファイル結合はもはや必須ではなくなりました。

HTTP/1.0およびHTTP/1.1では、JavaScriptやCSSのファイルを順番にダウンロードする必要がありました。つまり、1つのファイルのダウンロードが完全に終わるまで、次のファイルのダウンロードを開始できなかったのです。2015年に登場したHTTP/2プロトコルは、並列ダウンロードを可能にすることでこの問題を解決しました。すべての外部リソースを同時にダウンロードできるため、HTTP/2が利用可能な環境ではファイル結合のメリットはなくなっています。

現在、インターネットブラウザの約95%がHTTP/2に対応しています。2022年1月6日時点で、全Webサイトの46.9%がHTTP/2を使用しているという調査結果もありますが、下のグラフを見ると、人気サイトほど採用率が高いことがわかります。

一方、ホスティング環境がHTTP/2に対応している場合、ファイル結合はむしろサイトを遅くする可能性があります。結合されたJavaScriptファイルは元のファイルよりサイズが大きくなるためです。大きなファイル2つを順番にダウンロードするよりも、小さなファイルを多数同時にダウンロードする方が速いのです。

JavaScriptに対して私が実際におすすめしたいのは、「圧縮(minify)」と「解析の遅延(defer parsing)」という2つのテクニックです。

圧縮(Minify)	圧縮(Minification)とは、空白やコメントなど不要な文字を取り除くことで、JavaScriptファイルのサイズを小さくする手法です。
解析の遅延(Defer Parsing)	JavaScriptコードはページレンダリングを遅らせる原因になります。DeferとAsyncという2つの属性を使うことで、この問題に対処できます。

JavaScriptがページレンダリングを遅らせる理由をより深く理解したい方は、WordPressでJavaScriptの解析を遅延させる方法についての記事もぜひご覧ください。

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

ホスティング会社がまだHTTP/1.1を使用している場合は、WordPressで外部JavaScriptファイルとCSSファイルを結合することが引き続き推奨されます。

ファイル結合の前後で必ずパフォーマンステストを実施し、ページの読み込み時間がどう変化したかを確認しましょう。GTmetrix、Google PageSpeed Insights、Pingdom Website Speed Testなどのツールが利用できます。

Autoptimize

Autoptimizeは、WordPressユーザーが利用できる最も効果的な最適化プラグインの一つです。HTMLの圧縮に加え、JavaScriptとCSSのファイル結合・圧縮をサポートしています。JavaScriptファイルは統合の代わりに遅延読み込みさせてレンダリングブロックを防ぐこともでき、Google Fonts向けの最適化オプションも用意されています。

私は多くのWordPressサイトでAutoptimizeを使用してきましたが、常にページの読み込み時間を改善してくれる頼れるプラグインです。

Asset CleanUp

Asset CleanUpは、非常に柔軟な設定が可能なWordPress最適化プラグインで、JavaScriptとCSSの圧縮・結合・遅延読み込みをサポートしています。HTMLのクリーンアップ機能もあり、フォント管理やページ読み込みへの影響を抑えるためのツールも多数搭載されています。

特に際立っているのがJavaScript・CSSマネージャー機能です。サイト全体のどのページでどのJavaScript・CSSファイルを読み込むかを細かく指定できます。

WP Super Minify

WP Super Minifyは少し変わったアプローチを採っており、設定項目は「JavaScriptの圧縮」と「CSSの圧縮」のみです。チェックを入れるだけで、ファイルの結合・圧縮・キャッシュを自動的に行ってくれます。

設定に悩まず、シンプルに動いてくれる最適化ソリューションをお探しの方には、ぴったりのプラグインかもしれません。

WordPressキャッシュプラグインで外部JavaScriptファイルを結合する

高性能なWordPressキャッシュプラグインの多くは、サイト性能を向上させるための追加最適化ツールを豊富に備えています。そのため、既にお使いのキャッシュプラグインでも、外部JavaScriptやCSSのファイル結合に対応している可能性は十分あります。

たとえばWP Rocketには、JavaScript・CSSファイルの圧縮と結合のオプションが用意されており、レンダリングブロックを防ぐためのJavaScript遅延読み込みにも対応しています。

おすすめの検証方法は、普段使っているキャッシュプラグインでファイル結合を有効にしてページの読み込み時間を測定し、その結果をAutoptimizeやAsset CleanUpのような単体のJavaScript最適化プラグインと比較してみることです。

まとめ

今回はWordPressにおける外部JavaScriptファイルの結合について解説しました。お使いのホスティング環境がHTTP/2に対応していれば、並列ダウンロードの方が効率的であるため、JavaScriptファイルを統合する必要はありません。

一方、ホスティング会社がHTTP/1.1しかサポートしていない場合は、WordPressで外部JavaScriptを結合することでページの読み込み時間を短縮できます。

あわせて読みたい:WordPressで未使用のCSSを削除する方法

最後までお読みいただきありがとうございました。