WordPressでJavaScriptの解析を遅延させる方法｜DeferとAsyncの使い方を徹底解説

表示速度の速いWordPressサイトは、訪問者のユーザー体験の向上、検索エンジンでの視認性の改善、オーガニック流入の増加といった面で大きなメリットをもたらします。

WebページはHTML、CSS、JavaScript、画像で構成されており、ページの読み込み時間を短縮するには、それぞれを最適化する必要があります。特に画像はページサイズに与える影響が大きいため、WordPressの画像最適化プラグインを使ってファイルサイズを削減することが重要です。

コードの種類	主な用途
HTML	ページのコンテンツや構造の定義
CSS	フォント、色、余白などのスタイリング
JavaScript	ボタン、フォーム、動画、スライダーなど

ページパフォーマンスをさらに向上させるには、WordPressでJavaScriptの解析を遅延（ディファー）させる方法が有効です。これは、JavaScriptを読み込む前に、ページのコンテンツや画像を先に読み込むようブラウザに指示する仕組みです。この対策により、フォームやスライダーなどのJavaScript要素の表示に数秒余分にかかる場合がありますが、ページ全体の読み込み時間が大幅に短縮されることを考えれば、十分に見合うトレードオフと言えます。

1990年代前半のウェブサイトは、テキストや画像といった静的な情報を表示するだけのものでした。それが一変したのが1995年。Netscapeの人気ブラウザ「Netscape Navigator」が、JavaScriptという新しいスクリプト言語のサポートを追加したことで、動的なWebページの時代が幕を開けました。

JavaScriptのコードを後から実行するためのテクニックが、DeferとAsyncの2つです。どちらの方式も主要なWordPressキャッシュ系プラグインでサポートされていますが、専用ツールを使えば、どのJavaScriptファイルを遅延読み込みするかをより細かく制御できます。

本記事では、JavaScriptファイルの遅延読み込みによるメリットを解説し、そのプロセスを簡単にしてくれる5つの便利なWordPressプラグインをご紹介します。

記事全体を読んで内容をしっかり理解することをおすすめしますが、初心者の方が最低限押さえておくべきポイントはただひとつ。DeferとAsyncを活用すれば、サイトのページ読み込み時間を大幅に改善できるということです。

WordPressでJavaScriptの解析を遅延させるさまざまな方法（Defer＆Async）

JavaScriptは、ボタン、フォーム、メディアギャラリー、音声・動画、カウントダウンタイマー、SNSタイムラインなどを表示するために使われており、WordPressサイトの重要な構成要素として確固たる地位を築いています。

しかし残念ながら、JavaScriptはページの読み込みが遅くなる主な原因のひとつでもあります。ブラウザは各スクリプトをダウンロードして実行し終えるまで、ページのHTMLマークアップの解析を続けられないからです。

解析（パース）とは、ブラウザがページのコードを分析し、実行可能な形式に変換するプロセスのこと。このプロセスを妨げるコードは「レンダリングブロック（Render-Blocking）」と呼ばれ、訪問者へのページ描画を遅らせてしまいます。

レンダリングブロックリソースは、WordPressサイトの表示が遅い原因としてよく挙げられます。重要なCSS（クリティカルCSS）はインライン表示することでレンダリングブロックを防げますが、JavaScriptについては、DeferまたはAsyncを使って読み込みを後回しにする方が効果的です。

また、未使用のJavaScriptコードを削除したり、実行時間を短縮したりするのも良い習慣です。そのひとつの方法がミニファイ（Minification）と呼ばれる処理で、各JavaScriptファイルから空白や不要なコードを取り除き、ファイルサイズを削減します。

JavaScriptはボタン、フォーム、スライダーなど、さまざまな要素の表示に使われています。

Google PageSpeed InsightsやGTmetrixのような計測サービスが重視する指標のひとつが「First Contentful Paint（FCP）」です。これは、最初のコンテンツが訪問者に表示されるまでの時間を示します。Googleによれば、FCPが0〜1.8秒なら良好、1.8〜3秒なら普通、3秒を超えると遅いと判断されます。

ページのURLを計測サービスに入力するだけで、レンダリングを妨げているJavaScriptやCSSファイルを確認できます。下のスクリーンショットのように、レンダリングブロックしているCSSやJavaScriptファイルのダウンロードには数秒かかることがあるため、これらを排除できればページの表示は大幅に高速化します。

ページを分析すれば、レンダリングを妨げているJavaScriptやCSSファイルがわかります。

レンダリングブロックするJavaScriptファイルを排除する最も効果的な方法が、defer属性とasync属性の使用です。これらのブーリアン属性は、src属性で外部ファイルを読み込むscriptタグでのみ使用できます。

<script src="javascript.js"></script>

通常のJavaScriptファイル

<script defer src="javascript.js"></script>

defer属性を付けたJavaScriptファイル

<script async src="javascript.js"></script>

async属性を付けたJavaScriptファイル

scriptタグにdeferまたはasync属性を追加すると、ブラウザはページ解析と並行してファイルをダウンロードします。deferの場合、ファイルはページの解析が完全に終わった後に実行されます。

一方、async属性は非同期処理で、ファイルのダウンロードが完了次第すぐに実行されます。そのため、asyncを使った場合の総解析時間はわずかに長くなります。ブラウザはHTMLの解析を一時停止してファイルを実行する必要があるからです。

なお、deferとasyncを両方指定した場合は、ブラウザはasyncを優先します。

Defer	Async
ページ解析と並行してファイルをダウンロード	ページ解析と並行してファイルをダウンロード
ページの解析完了後にファイルを実行	ダウンロード完了次第すぐにファイルを実行
ファイルは順番どおりに実行される	HTML解析を一時停止してファイルを実行

DeferとAsyncの違いをまとめたものが上の表です。

理解しておきたい重要な概念にDOM（Document Object Model）があります。DOMは、XMLファイルやHTMLページといったドキュメント全体を単一のオブジェクトとして表現したものです。head、body、ヘッダーなどの重要な要素は、DOMの枝と考えることができます。

JavaScriptファイルが他のファイルやDOM自体の情報を必要としない場合は、async方式を使う価値があります。ページの重要な要素がより早く表示されるからです。ただし、まだ読み込まれていない情報をファイルが要求すると、サイトでエラーが発生する可能性がある点には注意が必要です。

逆に、JavaScriptファイルが他の情報を必要とする場合は、ファイルの実行前にすべてのコンテンツが正しく取得されることが保証されるdeferが望ましい選択肢となります。

DeferとAsyncの目的はページのレンダリングブロックを軽減することであり、どちらの方式を使ってもページ読み込み時間は大幅に改善されるでしょう。

deferとasyncをいつ使うべきかについてより詳しく知りたい方は、Zell Liew氏の記事「How and when to use Async and Defer attributes」を読むことをおすすめします。

WordPressプラグインでJavaScriptの解析を遅延させる方法

サイト上のJavaScript呼び出しの大半は、有効化しているWordPressテーマやプラグインから発生します。そのため、scriptタグに手作業でdeferやasync属性を追加するのは現実的ではありません。

そこで、パフォーマンス最適化系のWordPressプラグインを使ってJavaScriptの解析を遅延させ、サイト全体に一括でdeferやasyncを適用するプロセスを簡略化するのが得策です。

ただし、設定を誤るとサイトのデザインに問題が生じる点には注意してください。たとえば、適切な設定を選ばなかったり、お問い合わせフォームのファイルを最適化対象から除外しなかったりすると、フォームが正しく表示されなくなることがあります。

したがって、最適な設定とベストなパフォーマンスを見つけるには、試行錯誤が不可欠です。

• サイトのバックアップ – 最適化プラグインを有効化する前に、必ずサイトをバックアップしておく
• パフォーマンスのテスト – 主要ページのパフォーマンスを測定し、設定を変更するたびに再テストする
• サイトの確認 – 設定変更後にサイトのどこも壊れていないか確認する

JavaScriptの解析遅延中に重大な問題が発生した場合は、プラグインのデフォルト設定に戻してください。サイトとうまく連携しない場合は、プラグインをアンインストールすることもできます。

1. Autoptimize

Autoptimizeは100万以上のWordPressサイトで利用されています。

Autoptimizeは、JavaScript、CSS、HTMLを集約・圧縮できる多機能なWordPress最適化ツールです。最適化されたコンテンツはパフォーマンス向上のためにキャッシュされます。ただし、このキャッシュはすぐに肥大化するため、「Autoclear Autoptimize Cache」というプラグインを使って自動的にキャッシュをクリアするのがおすすめです。

ファイル集約で知られていますが、AutoptimizeはJavaScriptファイルの解析遅延にも対応しており、レンダリングブロックを防ぐことができます。JavaScriptやCSSコードのインライン表示も可能で、画像、Google Fonts、絵文字などに関する追加の最適化オプションも用意されています。

AutoptimizeはWordPressのキャッシュ系プラグインとも問題なく連携できます。

AUTOPTIMIZEをダウンロード

2. Async JavaScript

Async JavaScriptならスクリプトを完全にコントロールできます。

Autoptimizeの開発者が手がけたAsync JavaScriptは、サイト全体のJavaScriptファイルにasyncやdeferを適用できます。jQuery、特定のJavaScriptファイル、WordPressプラグイン、テーマを除外できるほか、asyncにするファイルとdeferにするファイルを個別に指定することも可能です。

特に注目すべき機能がセットアップウィザードです。GTmetrix上でサイトのすべての設定パターンのパフォーマンステストを実行してくれます。各設定におけるサイトの速度が正確にわかるので時間の節約になりますが、サイトのどこも壊れていないか都度確認することを忘れないでください。

Async JavaScriptのウィザードが最適な設定を見つける手助けをしてくれます。

ASYNC JAVASCRIPTをダウンロード

3. Perfmatters

Perfmattersには多くの便利なパフォーマンスツールが搭載されています。

Perfmattersは数十のユニークなパフォーマンス機能を備えたプレミアムWordPressツールボックスです。年額24.95ドルから利用でき、サイト上のすべてのJSファイルの解析を遅延できます。jQueryファイルも遅延対象に含められ、特定のJavaScriptファイルを除外することも可能です。もうひとつの便利な機能が「JavaScript Delay」で、ユーザーが操作したときだけJavaScriptファイルを読み込むように設定できます。

Perfmattersでは、セキュリティとパフォーマンス向上のためにWordPressコアの機能を無効化することもできます。カスタムログインURLの設定、コンテンツのプリロード、画像の遅延読み込み、Google Analyticsとの統合、Google Fontsの最適化など、多彩な機能を備えています。

筆者のお気に入りはスクリプトマネージャー機能です。サイトの各ページごとにJavaScriptやCSSファイルの有効・無効を切り替えられます。WordPress開発者は数ページでしか必要ないファイルでもサイト全体で読み込んでしまう傾向があるため、この機能でページサイズを大幅に削減できます。

PerfmattsersならJavaScriptファイルの遅延と延期の両方が設定できます。

公式サイトへ

4. Asset CleanUp

Asset CleanUpはページサイズ削減のための多数のツールを提供します。

Asset CleanUpは、JavaScriptとCSSファイルの圧縮、結合、解析遅延ができる多機能な最適化プラグインです。CSS/JSマネージャーはPerfmattersのスクリプトマネージャーと似た仕組みで、特定のページでのみファイルを読み込むよう指定できます。WordPressコア設定の無効化、HTMLコードのクリーンアップ、Google Fontsの最適化なども可能です。

Asset CleanUp Proのシングルライセンスは年額42.36ユーロです。Pro版にアップグレードすると、コードのインライン配置や、ページ単位でのasync/defer指定が可能になります。さらにプラグインマネージャーの利用も解禁され、サイト全体のアセット読み込みをより細かく制御できるようになります。

各JavaScriptファイルを個別に設定できます。

ASSET CLEANUPをダウンロード
ASSET CLEANUP PRO

5. HTTP/2 Push Preload

HTTP/2 Push Preloadではコンテンツのプリロードも可能です。

HTTP/2 Push Preloadは、enqueueローディング関数を使って、HTTP/2対応サーバー上でJavaScriptやCSSファイルのプッシュおよびプリロードを行えるプラグインです。すべてのファイルに一括適用することも、リソースごとに個別設定することもできます。対応リソースタイプは、script、style、audio、embed、fetch、font、image、object、videoです。

JavaScriptファイルのURLを入力すると、async、defer、削除のいずれかを選択できます。また、この設定を適用する条件をルールとして定義できます。全ページ、モバイルまたはデスクトップのみ、特定の投稿や固定ページ、カテゴリー、検索ページ、WooCommerceページなど、柔軟にJavaScriptルールを設定可能です。

特定のJavaScriptファイルを削除したり、deferやasyncに設定したりできます。

HTTP/2 PUSH PRELOADをダウンロード

まとめ

JavaScriptは今もなお、サイトに動的コンテンツやインタラクティブな要素を追加するための首选手段であり続けています。多くのWordPressテーマやプラグインがJavaScriptを使用しているため、WordPressでJavaScriptの解析を遅延させ、deferとasyncを活用してページを素早くレンダリングし、レンダリングブロックを軽減することが重要です。

多くのWordPressプラグインにdeferやasyncの機能が備わっていますが、本記事で紹介したソリューションなら、JavaScriptファイルをより細かく制御できます。

筆者自身のサイトでは、ファイル集約にAutoptimizeを、JavaScriptの遅延にAsync JavaScriptを使用しています。Async JavaScriptには満足していますが、最適化設定の適用範囲を細かく制御できる点で、HTTP/2 Push Preloadの方が多くのサイト運営者にとって良い選択肢かもしれません。

Asset CleanUpとPerfmattersは機能面で類似しているため、併用はおすすめしません。Asset CleanUp Proの方が明らかに制御性が高く高度な機能を備えていますが、筆者は引き続きPerfmattersをWordPressのクリーンアップに使っています。操作性がシンプルだからです。どちらのソリューションも、別のプラグインでJavaScriptの解析遅延を行っている場合であっても、あらゆるWordPress最適化環境を強化してくれるでしょう。

ぜひこれらのWordPressプラグインを実際に試して、複数回テストを重ね、最適な設定を見つけてください。

それでは、良いWordPressライフを！

Kevin