ひとことで言うと
modulepreloadは`<link rel="modulepreload" href="app.js">`のように書き、ES Modulesで構成されたJavaScriptファイルを先読みする仕組みです。通常のpreloadと異なり、ファイルの取得だけでなくJSのパース（解析）とコンパイルも事前に行います。そのため「ページは見えているのにボタンが動かない」時間を短縮できます。
Vite・Rollup・esbuildで出力したAI生成サイトのHTMLには、`<link rel="modulepreload">`が自動で含まれることがあります。共有前にこの行が存在するか確認し、なければ主要なJSファイルのパスを指定して追加することで、受け取った相手が最初にページを操作するまでの待機時間を減らせます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
インタラクティブな見積もりフォームや料金計算ツールをHTMLで作りURLで共有した場合、JSの読み込みが遅れると入力フィールドが反応しない瞬間が生じます。modulepreloadで主要モジュールを先読みしておくと、ページのレンダリング完了とほぼ同時にJSが動作可能になります。
複数のJSファイルがimport/exportで連鎖している構成では、modulepreloadに最初のエントリーポイントだけ指定しても連鎖先のファイルは先読みされません。依存するファイルをすべてmodulepreloadに列挙するか、バンドラーで1ファイルに結合した上で共有する方法が確実です。
よくある誤解
「modulepreloadはpreloadの上位互換」とは言い切れません。通常のpreloadは画像・CSS・フォントなどあらゆるリソースに使えますが、modulepreloadはES Modulesのみが対象です。`type="module"`のないscriptタグで読み込むJSファイルにmodulepreloadを指定しても効果がありません。
「設定すればすべてのJSが速くなる」も誤解です。modulepreloadで先読みするのはheadに列挙したファイルだけです。後からユーザー操作で動的にimportされるチャンク（コード分割された遅延ロードファイル）には効果がなく、それらの速度改善にはprefetchの方が適しています。
安全に使うための注意点
modulepreloadで読み込まれるJSファイルには、APIキーやアクセストークンを直接書き込まないでください。先読みされたファイルはブラウザのキャッシュに保存され、DevToolsのSourcesタブから誰でも中身を確認できます。秘密情報はサーバーサイドで処理するか、環境変数をビルド時に埋め込まず実行時にAPIで取得する設計にしましょう。
共有したHTMLのJSファイルを後から更新する場合、URLが変わらないとブラウザがmodulepreloadでキャッシュしたファイルを使い続けることがあります。ファイル名にハッシュを含める（例：`app.a1b2c3.js`）か、クエリパラメータで版数を付けて確実に新しいファイルを取得させましょう。
よくある質問
modulepreloadとprefetchはどちらをJSファイルに使えばいいですか？
現在表示しているページで最初から必要なJSモジュールにはmodulepreload、次のページ遷移や遅延ロードで使うJSにはprefetchが適しています。現在ページの主要モジュールをprefetchにすると先読み優先度が下がり逆効果になります。
AI生成のHTMLにmodulepreloadが含まれていない場合、追加しなくても動作はしますか？
動作はしますが、特にモバイル回線や低スペック端末では操作できるまでの時間が長くなることがあります。フォームや計算ツールなどインタラクションが重要なページほど追加の効果が大きくなります。
modulepreloadはどのブラウザで動作しますか？古いブラウザを使う相手に共有しても問題ないですか？
Chrome 66以降、Edge 79以降、Firefox 115以降、Safari 17以降で動作します。非対応ブラウザでは単純に無視されるため、pageが壊れることはありません。ただし先読み効果がなくなるため表示は遅くなります。