パフォーマンステストツールで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つの方法があります。

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

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

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

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

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

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

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プラグインのようなきめ細かな制御は行えません。

Are you getting the *Defer Parsing of Javascript Warning* message? No worries... Fix it now with these 4 methods! 🚀⏳Click to Tweet

まとめ

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

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

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


WordPressの問題と遅いホスティング会社にうんざりしていませんか? 当社はWordPressの専門家による24時間年中無休で利用可能な世界クラスのサポートと、高速サーバーを提供します。 <a href=”https://kinsta.com/plans/?in-article-cta”>プラン一覧をご確認ください。</a>