Ленивая загрузка (lazy loading) — откладывание загрузки ресурсов — изображений, iframe, видео, иногда компонентов — до того, как они собираются войти в viewport, а не загрузка всего при первой загрузке страницы. Она снижает начальный payload и ускоряет первый рендер, что помогает скорости страницы и Core Web Vitals, и она экономит трафик для контента, к которому пользователь никогда не прокручивает.
Определение
Ленивая загрузка (lazy loading) — откладывание загрузки ресурсов — изображений, iframe, видео, иногда компонентов — до того, как они собираются войти в viewport, а не загрузка всего при первой загрузке страницы. Она снижает начальный payload и ускоряет первый рендер, что помогает скорости страницы и Core Web Vitals, и она экономит трафик для контента, к которому пользователь никогда не прокручивает.
Современные браузеры поддерживают её нативно для изображений и iframe с простым атрибутом; более продвинутые настройки используют intersection observer.
Важная оговорка в том, что элемент Largest Contentful Paint и всё выше сгиба не должны лениво загружаться — откладывание hero-изображения задерживает LCP и делает страницу медленнее на метрике, которая важна. Ленивая загрузка — для контента ниже сгиба.
В контексте
Для iGaming-аффилиата ленивая загрузка — прямолинейная победа производительности на насыщенных контентом страницах, которые производит эта ниша — страницы обзоров с многими скриншотами, страницы сравнения с рядами логотипов операторов, гайды с несколькими изображениями и любая страница, встраивающая демо-игры, видео или сторонние виджеты. Откладывание всего этого контента ниже сгиба, пока пользователь не прокрутит близко к нему, существенно срезает начальную загрузку.
Моменты реализации: используй нативную ленивую загрузку (loading="lazy") на изображениях и iframe ниже сгиба; явно не ленивоо загружай LCP-элемент или изображения выше сгиба (пометь их eager или оставь по умолчанию и preload LCP); всегда задавай ширину и высоту на лениво загружаемых изображениях, чтобы их место было зарезервировано и они не вызывали смещение макета (CLS) при загрузке; и лениво загружай тяжёлые встраивания вроде демо-игр, видеоплееров и чат-виджетов, чтобы они не блокировали начальный рендер. Сделанное правильно, это улучшает LCP, INP и CLS вместе; сделанное небрежно (ленивая загрузка hero или пропуск размеров) оно им вредит.
Для обращённого к аффилиатам контента рамка в том, что ленивая загрузка откладывает изображения, iframe и тяжёлые встраивания ниже сгиба, пока они не близко к viewport, чтобы ускорить начальную загрузку, что LCP-элемент и контент выше сгиба никогда не должны лениво загружаться, что лениво загружаемые изображения всё равно нуждаются в явных размерах, чтобы избежать смещения макета, и что на насыщенном изображениями и встраиваниями аффилиатном сайте это надёжное улучшение Core Web Vitals.
Разобранный пример
Аффилиат добавляет нативную ленивую загрузку ко всем изображениям, скриншотам и встроенным демо-играм ниже сгиба на страницах обзоров, держит hero-изображение eager и preloaded и задаёт явные размеры на каждом изображении. Начальный вес страницы резко падает, LCP и INP улучшаются, а CLS остаётся низким, потому что ленивые изображения имеют зарезервированное место.
Связанные термины
Частые вопросы
Смотрите полный глоссарий iGaming и арбитража — сотни терминов EN/RU с примерами.
← Назад к глоссарию