Прямой ответ
Ленивая загрузка откладывает получение ресурса до момента, когда он потребуется. Для изображений используется атрибут loading, для компонентов — динамический импорт.
<!-- Изображение ниже первого экрана -->
<img src="/img/photo.webp" alt="Фото" loading="lazy"
width="800" height="600">
<!-- Изображение первого экрана: без отложенной загрузки -->
<img src="/img/hero.webp" alt="Обложка" fetchpriority="high"
width="1200" height="630">
// Отложенная загрузка компонента
const Editor = () => import('./Editor.vue')
| Ресурс | Способ отложенной загрузки |
|---|---|
| Изображение ниже первого экрана | Атрибут loading="lazy" |
| Компонент, не нужный сразу | Динамический импорт |
| Скрипт, не нужный сразу | Атрибут defer либо динамический импорт |
Отложенная загрузка применяется к ресурсам ниже первого экрана. Ресурсы первого экрана загружаются сразу, поскольку отложенная задержка увеличивает время отрисовки; о метриках — в статье про FCP и LCP.
Порог срабатывания и влияние на метрики
Отложенная загрузка срабатывает при приближении элемента к видимой области, поэтому два параметра определяют поведение.
Порог срабатывания. Ресурс загружается до попадания в видимую область, чтобы к моменту показа он был готов. Малый порог приводит к загрузке в момент показа, поэтому пользователь видит незагруженный элемент.
Размеры элемента. Атрибуты ширины и высоты позволяют браузеру зарезервировать место, поэтому смещение макета при загрузке изображения не происходит.
Практическое следствие: отложенная загрузка без указания размеров приводит к смещению макета, поскольку место под элемент не зарезервировано.
Отдельный аспект — влияние на метрики скорости. Отложенная загрузка изображений ниже первого экрана сокращает объём первоначальной загрузки, поэтому время отрисовки сокращается. Отложенная загрузка изображения первого экрана увеличивает время появления основного содержимого.
Три признака некорректной отложенной загрузки.
Изображение первого экрана с отложенной загрузкой. Основной элемент загружается позже, поэтому время отрисовки растёт.
Отсутствие размеров элемента. Место под изображение не зарезервировано, поэтому макет смещается при загрузке.
Отложенная загрузка критичного скрипта. Скрипт, необходимый для работы страницы, загружается позже, поэтому взаимодействие недоступно.
О разделении кода на части — в статье про code splitting; об оптимизации самих изображений — в статье про форматы изображений.
Динамический импорт компонента создаёт отдельный файл, который загружается при первом обращении к компоненту.
Отложенная загрузка и доступность содержимого
Отложенная загрузка изменяет момент получения ресурса, поэтому два аспекта требуют внимания.
Содержимое для вспомогательных технологий. Текст, описывающий изображение, доступен сразу, поскольку задаётся в разметке. Отложенная загрузка не влияет на доступность описания.
Поведение без скрипта. Атрибут отложенной загрузки поддерживается браузером, поэтому ресурс загружается без скрипта. Отложенная загрузка компонента требует скрипта, поэтому резервный вариант учитывается.
Печать страницы. Ресурсы ниже первого экрана требуются при печати, поэтому браузер загружает их при формировании печатной версии.
Практическое следствие: отложенная загрузка изображений работает без скрипта, отложенная загрузка компонентов требует резервного варианта для среды без скрипта.
Поведение при быстром прокручивании
Отложенная загрузка рассчитана на постепенное приближение элемента к видимой области, поэтому быстрое прокручивание требует внимания.
Загрузка в момент показа. При быстром прокручивании элемент попадает в видимую область до завершения загрузки, поэтому пользователь кратковременно видит незагруженный элемент.
Запас по порогу. Загрузка начинается до попадания элемента в видимую область, поэтому при умеренной скорости прокрутки ресурс готов к показу.
Практическое следствие: порог срабатывания выбирается с запасом, чтобы ресурс был готов к моменту показа при обычной скорости прокрутки.
Практика: настройка отложенной загрузки
1. Определите ресурсы первого экрана. Они загружаются сразу, поскольку отложенная загрузка увеличивает время отрисовки.
2. Применяйте отложенную загрузку к ресурсам ниже первого экрана. Объём первоначальной загрузки сокращается, поэтому отрисовка выполняется быстрее.
3. Указывайте размеры изображений. Браузер резервирует место, поэтому смещение макета при загрузке не происходит.
4. Используйте динамический импорт для компонентов. Отдельный файл загружается при первом обращении, поэтому первоначальный объём сокращается.
5. Проверяйте порог срабатывания. Ресурс должен быть готов к моменту показа, поэтому загрузка начинается до попадания в видимую область.
6. Не откладывайте загрузку критичных скриптов. Скрипт, необходимый для работы страницы, загружается сразу.
7. Проверяйте фактическое поведение. Загрузка ресурса в момент показа означает, что порог срабатывания мал.
Рекомендации:
- Различайте отложенную загрузку и приоритет. Ресурсы первого экрана загружаются с высоким приоритетом, остальные — отложенно.
- Учитывайте объём первоначальной загрузки. Отложенная загрузка сокращает объём, поэтому время отрисовки сокращается.
- Проверяйте смещение макета. Отсутствие размеров элемента приводит к смещению при загрузке изображения.
- Не применяйте отложенную загрузку ко всем изображениям. Изображение первого экрана загружается сразу, иначе время отрисовки растёт.
- Пересматривайте состав при изменении разметки. Изменение первого экрана меняет перечень ресурсов, загружаемых сразу.
Практический сценарий: основное изображение загружалось с задержкой
Контекст: время появления основного содержимого выросло после включения отложенной загрузки для всех изображений.
- Диагностика. Отложенная загрузка применена ко всем изображениям, включая изображение первого экрана. Основной элемент загружался позже, поэтому время отрисовки увеличилось.
- Причина. Отложенная загрузка применена без различения ресурсов первого экрана и остальных. Изображение первого экрана должно загружаться сразу, поскольку определяет время появления основного содержимого.
- Действия. (а) Определили ресурсы первого экрана и исключили их из отложенной загрузки; (б) установили высокий приоритет загрузки для основного изображения; (в) добавили атрибуты размеров для всех изображений, чтобы исключить смещение макета; (г) проверили время отрисовки до и после изменения; (д) зафиксировали правило: отложенная загрузка только для ресурсов ниже первого экрана.
- Результат. Время появления основного содержимого сократилось, а объём первоначальной загрузки уменьшился за счёт отложенной загрузки остальных изображений.
Вывод: отложенная загрузка применяется к ресурсам ниже первого экрана. Применение ко всем изображениям увеличивает время отрисовки, поскольку основной элемент загружается позже.
FAQ
Как указать отложенную загрузку изображения?
Атрибутом loading="lazy" в элементе изображения. Ресурс загружается при приближении к видимой области.
Нужно ли указывать размеры изображения? Да, атрибуты ширины и высоты позволяют браузеру зарезервировать место, поэтому смещение макета при загрузке не происходит.
Можно ли откладывать загрузку изображения первого экрана? Нет, основной элемент загружается сразу, поскольку отложенная загрузка увеличивает время появления содержимого.
Как отложить загрузку компонента? Динамическим импортом, который создаёт отдельный файл. Файл загружается при первом обращении к компоненту.
Источники: MDN img loading, Intersection Observer API, Vite guide — ссылки в шапке.