JavaScriptファイルをJetpack Boostの遅延対象から除外する

この記事では、Jetpack Boostが特定のJavaScriptファイルやページ全体を遅延させないようにする方法を説明します。個々のスクリプトをハンドルで除外したり、スクリプトタグにdata-jetpack-boost="ignore"属性を追加したり、URLのパターンに一致するページ全体でJSの遅延をスキップしたりできます。JavaScriptの遅延によってレイアウトの問題が発生したり、ページの機能が壊れたりする場合は、これらの除外設定を使用してください。

JavaScriptを遅延対象から除外するタイミングMD

JavaScript（JS）をJetpack Boostで遅延させたときに、ウェブサイトで意図しない動作が発生する場合、影響を受ける機能は、JavaScriptファイルが特定の順序で読み込まれることや、できるだけ早くページで利用可能になることに依存している可能性があります。

Jetpack Boostでは、この問題に対処する2つの方法を利用できます。個々のスクリプトを除外してページの残りの部分では遅延のメリットを受けられるようにするか、ページ全体で遅延による問題が発生する場合はページ全体を除外できます。

• スクリプト単位の除外では、Jetpack Boostが特定のスクリプトを遅延させないようにしながら、ページ上の他のスクリプトは遅延させます。この方法は、あるスクリプトをすぐに読み込む必要がある場合や、決まった順序で読み込む必要がある場合に使用してください。
• ページ単位の除外では、Jetpack BoostがJavaScriptを遅延させないようにします。URLのパターンに一致するページが対象です。チェックアウトページやギャラリーページなど、ページ全体で遅延によってレイアウトやJavaScriptの実行に問題が発生する場合に、この方法を使用してください。

個々のスクリプトを遅延対象から除外するMD

Jetpack Boostに特定のファイルを遅延させないよう指示するには、属性data-jetpack-boost="ignore"をスクリプトタグに追加します。使用する方法は、スクリプトタグがハードコードされているか、wp_enqueue_scriptでキューに追加されているかによって異なります。

スクリプトタグがハードコードされている場合は、属性をタグに直接追加します。

<script data-jetpack-boost="ignore">

wp_enqueue_scriptでキューに追加されたスクリプトを除外するMD

スクリプトタグがwp_enqueue_scriptでキューに追加されている場合は、次のようになります。

function wpdemo_enqueue_scripts() {
    wp_enqueue_script( 'wpdemo', get_template_directory_uri().'/js/wpdemo.js' );
}
add_action( 'wp_enqueue_scripts', 'wpdemo_enqueue_scripts' );

以下のサンプルコードを使用して、テーマのfunctions.phpファイルに追加できます。

function add_data_jetpack_boost_tag( $src, $handle ) {
    if ( $handle !== 'wpdemo') {
        return $src;
    }
    return str_replace( ' src', ' data-jetpack-boost="ignore" src', $src );
}
add_filter( 'script_loader_tag', 'add_data_jetpack_boost_tag', 10, 2 );

必ずwpdemoを、除外したいスクリプトファイルのハンドルに置き換えてください。

ページ全体を遅延対象から除外するMD

Jetpack Boost 4.6.2以降では、「必須ではないJavaScriptの遅延」機能に、ページごとのURLパターン除外リストが追加されています。このリストにより、入力したパターンにURLが一致するページでは、Jetpack BoostがJavaScriptを遅延させないようにできます。サイト全体で「JSの遅延」機能を無効にする必要はありません。

ページ単位の除外を追加するには、次の手順に従ってください。

1. 次のJetpack → Boostを開き、Jetpack Boostの設定パネルを表示します。
2. 次の必須ではないJavaScriptの遅延機能を見つけます。
3. 除外リストに1つ以上のURLパターンを入力します。パネルには、想定される形式のインライン例が表示されます。
4. 変更を保存します。

URLパターンの構文MD

ページ単位の除外に使用するURLパターンの構文は、ページキャッシュの除外に使用する構文と同じです。プレーンテキストの断片（たとえばcheckout）や、ワイルドカードを含むパターン（たとえばgallery/(.*)）を入力できます。リスト内のパターンにURLが一致するページは、JSの遅延対象から除外されます。

パターンの一致の仕組みについて詳しくは特定のサイト部分をキャッシュ対象から除外するをご覧ください。