2026年7月7日

WordPressでJavaScriptを非同期（async/defer）読み込みする方法

SEO・パフォーマンス

はじめに

ウェブサイトのパフォーマンスは、ユーザー体験とSEOランキングにとって非常に重要な要素です。JavaScriptを使用する場合でも、ページの読み込み時間を最適化することは可能です。この記事では、WordPressでJavaScriptを非同期（async）または遅延（defer）読み込みにする方法について詳しく解説します。

症状・背景

JavaScriptファイルがウェブページの読み込み速度に影響を与えている場合
サイトのSEO評価が低いと感じている場合
ユーザー体験を改善したいと考えている場合
ページロード時間を短縮して、より速いウェブサイトを作成したい場合

手順・設定方法

ステップ1: グローバルのJavaScript読み込みモディファイアを設定する

# WordPress管理画面にログインします。
wp login username --url=https://example.com

# functions.phpに以下のコードを追加して、全サイトでasync属性を使用します。
echo 'add_filter("script_loader_tag", function($tag, $handle) { return str_replace(" src=", " async='async' src=", $tag); }, 10, 2);'

ステップ2: 特定のJavaScriptファイルにdefer属性を追加する

# WordPress管理画面にログインします。
wp login username --url=https://example.com

# functions.phpに以下のコードを追加して、特定のスクリプトにdefer属性を適用します。
echo 'function add_defer_attribute($tag, $handle) {
    if ($handle == "your-script-handle") { // 変更が必要なスクリプトハンドルを指定
        return str_replace(" src=", " defer='defer' async='async' src=", $tag);
    }
    return $tag;
}
add_filter("script_loader_tag", "add_defer_attribute", 10, 2);'

ステップ3: カスタムテーマを使用して全サイトで非同期読み込みを有効にする

# WordPress管理画面にログインします。
wp login username --url=https://example.com

# theme-name/functions.phpファイルに以下のコードを追加して、全スクリプトにasync属性を適用します。
echo 'add_filter("script_loader_tag", function($tag, $handle) { 
    if (is_admin()) return $tag; // 管理画面では非同期読み込みを無効化
    return str_replace( "<script src=", "<script async='async' defer='defer' src=", $tag );
}, 10, 2);'

ステップ4: カスタムプラグインを使用して特定のJavaScriptファイルに非同期読み込みを適用する

# WordPress管理画面にログインします。
wp login username --url=https://example.com

# plugin-name/plugin-name.phpファイルに以下のコードを追加して、特定のスクリプトにasync属性を適用します。
echo 'function add_async_attribute($tag, $handle) {
    if ($handle == "specific-script-handle") { // 変更が必要なスクリプトハンドルを指定
        return str_replace( "<script src=", "<script async='async' defer='defer' src=", $tag );
    }
    return $tag;
}
add_filter("script_loader_tag", "add_async_attribute", 10, 2);'

注意事項

カスタムスクリプトを追加する際は、必ずfunctions.phpやテーマのフロントエンドファイルではなく、カスタマイズプラグインを通じて行うことを推奨します。
JavaScriptが依存関係を持っている場合（複数のJSファイルが必要な順序で読み込まれる必要がある場合）にはasync属性よりもdefer属性を使用してください。
セキュリティのために、すべてのJavaScriptソースコードを信頼できるものであることを確認してください。特にサードパーティのプラグインから生成されるスクリプトは注意深くチェックする必要があります。
パフォーマンスとSEOの観点からは、全てのJavaScriptファイルに非同期読み込み属性を適用することよりも、必要最小限のスクリプトのみに適用することが推奨されます。

まとめ

1. async属性: シングルページアプリケーション(SPAs)など、ページ遷移が発生しない場合や、JSは即座に実行されても問題がない場合に使用します。

2. defer属性: JSファイルの読み込み順序を保つ必要がある場合はdeferを使用し、そのスクリプトは他のスクリプトよりも遅延して実行されます。

3. functions.phpやプラグインの利用: WordPressでは、特定のJavaScriptファイルにasyncまたはdefer属性を適用するためには、functions.phpもしくはカスタムプラグインを通じてコードを追加することが一般的です。

4. セキュリティと信頼性: JavaScriptスクリプトの安全性を確保し、必要最小限のJSファイルのみに非同期読み込み属性を適用することでパフォーマンスとサイトの安定性を保つことが重要です。

5. SEOとユーザビリティ: 非同期または遅延読み込みによってページロード時間が短縮され、ユーザー体験とSEO評価が向上します。

Post Views: 13