2026年9月22日
2026年9月22日
WordPressで「未使用のJavaScript」を減らしてパフォーマンスを改善する方法
PageSpeed Insights の「未使用の JavaScript の削減」は、ページで読み込んでいるのに実行されていないコードが多いことを示す指摘です。WordPress では、原因の多くは「全ページで読み込まれるプラグインのスクリプト」と「外部サービスのタグ」なので、出どころを特定し、使わないページでは読み込まない、外部の埋め込みは操作されるまで読み込まない、という順で対処するのが効果的です。この記事では、指摘の読み方、Coverage パネルでの調べ方、子テーマでの具体的な外し方、遅延実行との違い、直した後の確認方法を説明します。
作業は読み込み設定を変えるため、事前にバックアップを取り、可能ならステージング環境で試してください。
指摘の意味と、似た指摘との違い
この診断は、各スクリプトのうち、ページの読み込み中に一度も実行されなかったバイト数を一覧にしたものです。大きいものから順に並び、削減できる量の見込みが表示されます。Lighthouse の新しい版では診断項目の整理が進んでおり、表示名や置き場所が変わっている場合があります(2026年10月現在)。
よく一緒に出る「レンダリングを妨げるリソース」とは見ている点が違います。あちらは「最初の描画を待たせているか」、こちらは「読み込んだ量のうち無駄がどれだけあるか」です。defer を付けると前者は解消しても、ダウンロードと解析の量は変わらないため、後者は残ります。
また「未使用」は、計測した瞬間に実行されなかったという意味です。メニューを開いたとき、フォームを送信したときにだけ動くコードも未使用として数えられます。指摘に出たからといって削除してよいとは限らない点が、この項目でいちばん誤解されやすいところです。
出どころを特定する
診断の一覧のURLから、まず大まかな出どころを分けます。
/wp-content/plugins/プラグイン名/… プラグインのスクリプト/wp-content/themes/テーマ名/… テーマのスクリプト/wp-includes/js/… WordPress 本体(jQuery など)googletagmanager.comなどの外部ドメイン … 解析タグ、広告、チャット、動画や地図の埋め込み
次に、Chrome の開発者ツールで「Coverage」パネルを開き、記録しながらページを再読み込みします。ファイルごとに使われた割合が表示され、ファイルを開くと実行されなかった行が色分けされます。ここで、メニューの開閉やスクロールなど実際の操作をしてから割合を見直すと、「操作すれば使われるコード」と「そのページでは一度も使われないコード」を区別できます。
WordPress で登録されたスクリプトには、多くの場合 HTML で id="ハンドル名-js" が付くため、ページのソースからハンドル名を確認しておきます。後で外すときに必要になります。
対処1:使わないページでは読み込まない
効果が大きく安全なのは、特定の機能のためのスクリプトを、その機能があるページだけに限定することです。お問い合わせフォーム、スライダー、地図、SNS埋め込みなどが典型です。
<?php
add_action( 'wp_enqueue_scripts', function () {
if ( is_singular() ) {
$post = get_post();
if ( $post && ( has_shortcode( $post->post_content, 'example_form' ) || has_block( 'example/form', $post ) ) ) {
return; // フォームがあるページでは外さない
}
}
// 実際のハンドル名に置き換える
wp_dequeue_script( 'example-form-script' );
wp_dequeue_style( 'example-form-style' );
}, 100 );
ショートコード名、ブロック名、ハンドル名はプラグインごとに違うため、調べた実際の名前に置き換えます。ウィジェットやテンプレートに直接フォームを置いている場合は、投稿本文を調べるだけでは見つからないので、条件を is_page( 'contact' ) のようなページ指定にするほうが確実性は上がります。
プラグインによっては、読み込みを止めるフィルターを用意しています。例えば Contact Form 7 には wpcf7_load_js というフィルターがあり、false を返すとスクリプトの自動読み込みを止められます。こうした仕組みがあるかは各プラグインの説明やドキュメントで確認してください。
コードを書かない方法として、Asset CleanUp のようにページごとにスクリプトを外せるプラグインや、有料の Perfmatters のスクリプト管理機能があります。画面の項目名や無料版でできる範囲は版によって変わるため、導入前に説明を確認してください。
対処2:WordPress 本体のスクリプトを見直す
jQuery Migrate は、古い jQuery の書き方を新しい jQuery で動かすための互換用スクリプトです。テーマとプラグインが新しい書き方に対応していれば不要ですが、外すと古いコードが動かなくなることがあります。外す場合は、ステージングで全機能を確かめてからにします。
add_action( 'wp_default_scripts', function ( $scripts ) {
if ( is_admin() || ! isset( $scripts->registered['jquery'] ) ) {
return;
}
$scripts->registered['jquery']->deps = array_diff(
$scripts->registered['jquery']->deps,
array( 'jquery-migrate' )
);
} );
外した後はブラウザのコンソールを開き、エラーや jQuery Migrate の警告が出ていないかを見ます。jQuery 本体は多くのプラグインが前提にしているため、無理に外さず、jQuery を使うプラグインを減らすほうが現実的です。
ブロックのスクリプトは、block.json の viewScript や viewScriptModule で登録されていれば、そのブロックがあるページだけで読み込まれます。自作ブロックで全ページ読み込みにしている場合は、この仕組みに移すと無駄が減ります。
対処3:外部サービスのタグと埋め込みを整理する
解析、広告、ヒートマップ、チャット、A/Bテストなど、外部のタグは1つずつは小さく見えても、合計すると大きな割合を占めます。まず Google タグマネージャーなどの管理画面で、もう使っていないタグや重複して入っているタグがないかを棚卸しします。テーマの設定とプラグインの両方に同じ解析タグを入れているケースはよくあります。
YouTube の埋め込みや地図、チャットウィジェットは、最初はサムネイル画像やボタンだけを表示し、クリックされたら本物を読み込む「ファサード」という方法で、最初の読み込みから大きなスクリプトを外せます。Lighthouse にもファサードの利用を勧める診断があります。
遅延実行は「削除」とは別物
キャッシュ系プラグインの「JavaScript の遅延実行」は、利用者が画面を操作するまでスクリプトの読み込みを遅らせる機能です。計測時には読み込まれないため指摘が消えることがありますが、コードの量自体は減っていません。最初の操作時にまとめて読み込みと実行が起きるため、ボタンを押してから反応するまでの時間(INP)が悪化したり、ファーストビューのスライダーが操作するまで動かなかったりします。
遅延実行は、解析タグのように表示に関わらないものに限って使い、除外の設定でメニューやファーストビューの機能を外すのが無難です。複数の最適化プラグインで同じ処理を有効にすると二重処理で不具合が起き、原因も追えなくなるので、担当するプラグインは1つに絞ります。
自作テーマのスクリプトを軽くする
テーマのスクリプトを1つの大きなファイルにまとめている場合は、機能ごとにファイルを分け、必要なページでだけ wp_enqueue_script() で読み込みます。条件分岐タグ(is_front_page()、is_singular( 'product' ) など)と組み合わせるのが基本です。ビルドには @wordpress/scripts を使うと、依存関係とバージョンを記した index.asset.php が出力され、登録時に利用できます。
直した後の確認
- ページのキャッシュとプラグインのキャッシュを削除し、ログアウトした状態で再計測する。結果には揺れがあるため数回測る
- Coverage パネルで、外したスクリプトが読み込まれていないこと、残したスクリプトの割合を確かめる
- メニュー、フォーム送信、スライダー、カート、検索など、JavaScript に頼る機能を、外したページと残したページの両方で動かす
- コンソールにエラーが出ていないか、INP や CLS が悪化していないかを見る
指摘の数値を小さくすること自体は目的ではありません。表示速度が上がっても検索順位が上がるとは限らないため、利用者が待たされる時間を減らす取り組みとして、変更は1つずつ行い、効果と副作用を確かめながら進めてください。
まとめ
- 「未使用の JavaScript」は計測時に実行されなかったコードの量で、操作時にだけ使うコードも含まれる
- 診断のURLと Coverage パネルで出どころを特定し、ハンドル名を控える
- 機能ごとのスクリプトは、その機能があるページだけで読み込むように
wp_dequeue_script()などで外す - 外部タグは棚卸しし、動画や地図はファサードで後から読み込む
- 遅延実行は削減ではない。INP の悪化に注意し、表示に関わるものは除外する