遅延読み込み（Lazy-loading） は、実際に必要になるまで — 通常はスクロールして表示されそうになるまで — 何かのダウンロードを先送りします。これにより初期ペイロードが小さくなり、ページの見える部分がより速く読み込まれます。
画像の遅延読み込み
ブラウザは1つの属性でネイティブに行えます:
html
遅延読み込み（Lazy-loading） は、実際に必要になるまで — 通常はスクロールして表示されそうになるまで — 何かのダウンロードを先送りします。これにより初期ペイロードが小さくなり、ページの見える部分がより速く読み込まれます。
ブラウザは1つの属性でネイティブに行えます:
ブラウザがスペースを確保できる（レイアウトシフトを避ける）よう、width/height は常に付けてください。LCP画像は決して遅延読み込みしないでください。測定されているまさにその要素を遅らせてしまいます。
重い、あるいはめったに使われないUI（モーダル、チャート）を別のチャンクに分割し、必要に応じて読み込みます:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
動的な import() は、<Chart> が最初に描画されるときにだけダウンロードされる別ファイルを作るよう、バンドラに指示します。
遅延読み込みは、重いページに対する最もシンプルで効果の高い施策です。前もってダウンロードするものが減れば、LCPが速くなり、パースするJSも減ります。面接官は、あなたがヒーロー画像を遅延読み込みしないことを見たいのです。それは助けようとしている指標を悪化させる典型的なミスです。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する