Ленивая загрузка откладывает скачивание чего-либо до момента, когда это действительно нужно — обычно когда оно вот-вот попадёт в область видимости при прокрутке. Это уменьшает начальный объём загрузки, поэтому видимая часть страницы загружается быстрее.
Браузер делает это нативно с помощью одного атрибута:
Всегда сохраняйте width/height, чтобы браузер зарезервировал место (это избегает сдвига макета). Никогда не загружайте лениво ваше LCP-изображение — это задерживает именно то, что измеряется.
Выделяйте тяжёлый или редко используемый UI (модальные окна, графики) в отдельный чанк, загружаемый по требованию:
// Вместо статического импорта, который попадает в основной bundle:
const Chart = React.lazy(() => import("./Chart")); // отдельный чанк, загружается при отрисовке
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Динамический import() говорит сборщику создать отдельный файл, который скачивается только когда <Chart> отрисовывается впервые.
Ленивая загрузка — самый простой выигрыш с наибольшим рычагом для тяжёлой страницы: меньше нужно скачивать вначале — быстрее LCP и меньше JS для парсинга. Интервьюеры хотят видеть, что вы не загружаете лениво главное изображение — классическая ошибка, которая вредит той самой метрике, которую вы пытаетесь улучшить.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать