パフォーマンステストツールでWordPressサイトをチェックしてみると、JavaScriptの解析を延期するようアドバイスが。そんな経験ありませんか？

このような変更の実装は、サイトのページ読み込み時間にプラスの影響を与える—特にモバイルユーザーにとって—可能性があります。ただし、上記のようなアドバイスの理解は、時に難しいもの。そこで、JavaScriptの解析を延期することの意味と、WordPressサイトでこの変更を実装する方法を正確にご説明したいと思います。

今回の記事では、こんな内容を扱います。

チュートリアルに直接スキップしたい場合には、上のリストの最後のリンクをクリックしてください。

WordPressでJavaScriptの解析を延期することの意味とは？

WordPressサイトをGoogle PageSpeed Insights（ページスピードインサイト）、GTmetrixなどのページスピードテストツールでチェックしたことはありますか？そこで、「JavaScriptの解析を延期」という提案に出くわしたことがあるはず。

でも…実際、何を意味するのでしょうか？パフォーマンス向上のためにこれを考慮すべき理由とは？

基本的に、誰かがWordPressサイトにアクセスすると、サイトのサーバーは、あなたのウェブサイトのHTMLコンテンツをその訪問者のブラウザに配信します。

訪問者のブラウザは上部からコードを実行し、サイトをレンダリングします。 上から下に移動するときにJavaScriptが見つかった場合、JavaScriptファイルを取得して解析できるまで、ページの残りのレンダリングは停止されます。

スクリプトが見つかるたびに、これが起こります。ブラウザがすべてのJavaScriptをダウンロードし、解析する間—訪問者は空白の画面を見つめることになるため—サイトのページ読み込み時間には、悪影響がもたらされる可能性があります。

サイトの中核となる機能に特定のスクリプトが必要ない場合には（少なくとも、最初のページの読み込み時）、サイトのより重要な部分の読み込みの邪魔にならないように注意したいものです。だからこそ、ページスピードテストツールからは常に、「JavaScriptの解析を延期するよう」指示が出されるのです。

そもそも、JavaScriptの解析を延期する、とはどういう意味なのでしょうか？

基本的に、サイトは訪問者のブラウザに、サイトのメインコンテンツの読み込みが完了するまで、JavaScriptのダウンロードや解析を待つように指示します。その時点で、訪問者はすでにページを表示し操作できるので、そのJavaScriptをダウンロードして解析するための待機時間は、それほど悪影響を及ぼしません。

コンテンツのスクロールせずに見える部分の読み込み時間を短縮することで、Googleをサポートし、訪問者により快適で、より速いユーザーエクスペリエンスを提供できます。

JavaScriptの解析を延期する必要があるかどうかを判断する方法

WordPressサイトでJavaScriptの解析を延期する必要があるかどうか。これをテストするには、GTmetrixが使えます。

GTmetrixを使えば等級が表示され、また延期する必要がある特定のスクリプトがリスト表示で提案してもらえます。

GTmetrixを使ってJavaScriptの解析を延期する
GTmetrixを使ってJavaScriptの解析を延期する

JavaScriptの解析を延期するさまざまな方法

JavaScriptの解析を延期する方法はいくつかあります。まず、スクリプトに追加できる2つの属性からご紹介します。

  1. Async
  2. Defer

両方の属性で、訪問者のブラウザはHTMLの解析を一時停止することなくJavaScriptをダウンロードできるようになります。ただし、違いとして、 asyncは（デフォルトの動作のように）HTMLの解析を一時停止せずに、HTMLパーサーを一時停止して、取得後にスクリプトを実行します。

deferを使用すると、訪問者のブラウザはHTMLの解析中にスクリプトをダウンロードしますが、HTML解析が完了するまでスクリプトの解析は待機状態になります。

Growing with the Webの説明は、この違いを理解するにはうってつけです。

asyncとdeferの違いの説明
asyncとdeferの違いの説明

VarvyのPatrick Sexton氏が推奨する別のオプションとしては、スクリプトを使用して、最初のページの読み込みが完了した後にのみ、外部JavaScriptファイルを呼び出します。つまり、訪問者のブラウザは、最初のページの読み込みが完了するまでJavaScriptをダウンロードまたは実行しないことになります。

最後にご紹介するアプローチは、JavaScriptをページの一番下に移動すること。ただし、この方法は優れたソリューションとは言えません。というのも、ページがすぐに表示されても、すべてのスクリプトが終了するまで、訪問者のブラウザには読み込み中のページが表示されるためです。コンテンツが完全に読み込まれていないと感じ、一部の訪問者はページを操作できない状態になる可能性があります。

WordPressでJavaScriptの解析を延期する方法（4つの手法）

WordPressでJavaScriptの解析を延期するには、主に、次の3つの方法があります。

  • プラグイン – JavaScriptの解析を延期する優秀な無料WordPressプラグインがあります。2つの有名どころのプラグインを使用してこれを行う方法をご紹介します。
  • Varvyメソッド – テクノロジーに詳しい方であれば、直接サイトのコードを編集して、Varvyのコードスニペットを使うことができます。
  • phpファイル – 子テーマのfunctions.phpファイルにコードスニペットを追加して、スクリプトを自動的に延期できます。

上の項目をクリックして希望の方法に直接ジャンプするか、すべてのテクニックを読んで、最適な方法を見つけてください。

1. 無料の「Async JavaScript」プラグイン

Async JavaScriptは、同じく人気のAutoptimizeプラグインの開発者でもある、Frank Goossens氏が誇る無料のWordPressプラグインです。

これを使えば、非同期または遅延を使用してJavaScriptの解析を簡単に延期することができます。

利用するには、WordPress.orgの無料プラグインをインストールし有効化しましょう。「設定」→「Async JavaScript」に移動して、プラグインを設定します。

上部で、プラグインの機能を有効にし、非同期と遅延を選択できます。以下の点を頭の片隅に置いておいてください。

  • 非同期はHTMLの解析中にJavaScriptをダウンロードしますが、その後、HTML解析を一時停止してJavaScriptを実行します。
  • 遅延は、HTMLの解析中にJavaScriptをダウンロードし、HTML解析が完了するまで実行を待機します。
Async JavaScriptプラグインの使い方
Async JavaScriptプラグインの使い方

さらに、jQueryの処理方法を選択することもできます。多くのテーマとプラグインはjQueryに大きく依存するため、jQueryスクリプトの解析を延期しようとすると、サイトの軸となる機能の一部が破損する可能性があります。最も安全なアプローチは、そもそもjQueryを除外することですが、遅延を試してみる価値もあるでしょう。個別のサイトで徹底的にテストしてみてください。

また、特定のスクリプトを手動で遅延対象に含んだり、そこから除外したりすることもでき、サイトでアクティブな特定のテーマやプラグインをターゲットにできる便利な機能もあります。

Async JavaScriptの対象/除外ルール
Async JavaScriptの対象/除外ルール

2. WP Rocketプラグインを使う

Kinstaではほとんどのキャッシュプラグインを推奨していませんが、 Kinstaのサーバーレベルでのキャッシュと調和し機能するインテグレーションが含まれているWP Rocketプラグインはこの点をクリアしていると言えます。

WP Rocketは、他の多くのパフォーマンス最適化のメソッドに合わせて、WP Rocketダッシュボードのファイルの最適化タブでJavaScriptの解析を延期するという大きな役割を果たします。JavaScriptファイルセクションでJavaScriptの遅延読み込みオプションをご覧ください。

Async JavaScriptプラグインと同様に、WP RocketでもjQueryを除外して、サイトのコンテンツに関する問題を回避できます。

WP RocketでJavaScriptの解析を延期する方法
WP RocketでJavaScriptの解析を延期する方法

3. Varvy推奨のメソッド（コード）

先ほど、VarvyのPatrick Sexton氏が、サイトの最初のページの読み込みが完了するまでJavaScriptのダウンロードと実行の両方を延期するためのコードスニペットの使用を推奨している、とご紹介しました。

このメソッドを実装するには、Varvyの提供するコードスニペットを調整してから、テーマ内、</body>タグの直前に追加してください。

Varvy提供のコードはこちら。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

「defer.js」を、延期したいJavaScriptファイルの実際のファイル名/パスに置き換えてください。次に、wp_footerフックを使用し、子テーマのfunctions.phpファイルを介してコードを挿入できます。

今回のアプローチでは、Varvyのコードを次のようにラップします。

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

4. functions.phpファイルでJavaScriptを延期

最後に、次のコードスニペットをfunctions.phpファイルに追加することで、プラグインを使わずに、JavaScriptファイルにdefer属性を追加することもできます。

function defer_parsing_of_js( $url ) {
 	 	 if ( is_user_logged_in() ) return $url; //don't break WP Admin
 	 	 if ( FALSE === strpos( $url, '.js' ) ) return $url;
 	 	 if ( strpos( $url, 'jquery.js' ) ) return $url;
 	 	 return str_replace( ' src', ' defer src', $url );
function defer_parsing_of_js ( $url ) {	 	}
	 	add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );


基本的に、このスニペットは、jQueryを除くすべてのJavaScriptファイルにdefer属性を追加するようにWordPressに指示します。


迅速かつ簡単なオプションですが、 Async JavaScriptプラグインのようなきめ細かな制御は行えません。



まとめ


WordPressサイトでJavaScriptの解析を延期することは、パフォーマンスを考える上で極めて重要です。


上記の方法のいずれかを使用してWordPressのJavaScriptの解析を延期したら、次の2つの項目を行うことをお勧めします。


    

  • サイトをテストして、特定のスクリプトを延期してもスクロールせずに見えるコンテンツが破損しないことを確認しましょう。繰り返しになりますが、これはjQueryでよく発生する可能性があるため、多くのツールではjQuery.jsが除外されています。ただし、他のスクリプトでも発生する可能性があります。
    • 

  • サイトをGTmetrixでチェックして、可能な限りのスクリプトを延期できているか確認しましょう（jQueryを除外すると、完全なスコアとはならない傾向にありますが、それでもスコアは向上するはずです）。
    • 



WordPressでJavaScriptの解析を延期する方法についてご質問がございますか？コメントでおしらせください。




    

                    

            
        

        

        Brian Jackson
                            
Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。