Отложенная загрузка картинок — один из немногих способов ускорить страницу одной строкой. И один из самых частых способов замедлить её при неверном применении.
Коротко
- Отложенная загрузка встроена в браузеры.
- Картинкам первого экрана её ставить нельзя.
- Width и height нужны, чтобы макет не прыгал.
- Без JavaScript откладывания не происходит.
Как это работает
| Свойство | Как устроено |
|---|---|
| Что делает | Откладывает загрузку до приближения к области видимости |
| Нужен ли скрипт | Нет, поддержка встроена в браузер |
| Как включается | Атрибутом у тега изображения |
| Что делают старые браузеры | Игнорируют атрибут |
| Есть ли вред от игнорирования | Нет, просто нет выигрыша |
Последние две строки снимают основной страх при внедрении. Браузеры без поддержки атрибута просто его не замечают и грузят картинки как раньше — отрицательных последствий это не даёт. Значит, внедрять можно без проверок версий.
Чего делать нельзя
Изображения, которые видны при загрузке страницы, откладывать не нужно — особенно то, по которому считается показатель отрисовки. Это прямая рекомендация документации, и нарушают её чаще всего при массовом внедрении: атрибут добавляют шаблоном ко всем картинкам сразу, включая обложку статьи и главный баннер.
| Картинка | Что с ней делать |
|---|---|
| Баннер в первом экране | Обычная загрузка |
| Логотип | Обычная загрузка |
| Обложка статьи | Обычная загрузка |
| Главное фото товара | Обычная загрузка |
| Остальные фото галереи | Отложенная |
| Картинки в тексте ниже | Отложенная |
| Изображения в подвале | Отложенная |
Граница проходит по первому экрану, а он разный на телефоне и на мониторе. Проверять стоит на узком экране: там в первый экран попадает меньше, и ошибка обходится дороже. Про показатель отрисовки — в статье о том, как улучшить LCP.
Зачем указывать размеры
Браузер узнаёт пропорции заранее
До загрузки файла.
Отводит место под картинку
Ещё пустое.
Текст не прыгает при появлении
Макет остаётся на месте.
Показатель сдвига не портится
Отложенная загрузка не вредит.
Документация рекомендует указывать ширину и высоту всем изображениям, а не только отложенным. Без них отложенная загрузка сама становится причиной прыжков макета: картинка появляется позже и раздвигает содержимое. Про это — в статье о том, как исправить сдвиг макета CLS.
Что при отключённом JavaScript
| Ситуация | Что происходит |
|---|---|
| JavaScript включён | Загрузка откладывается |
| JavaScript отключён | Откладывания не происходит |
| Картинки при этом | Загружаются обычным образом |
| Содержимое | Остаётся доступным |
Это важное отличие встроенной отложенной загрузки от самодельной на скриптах. Самодельная при отключённом JavaScript обычно не показывает картинки вообще, потому что настоящий адрес лежит в подменном атрибуте; встроенная в этом случае просто перестаёт откладывать, и страница остаётся полной. Про индексацию скриптовых сайтов — в статье про JavaScript-сайты и SEO.
Как проверить внедрение
Откройте страницу на узком экране
Как на телефоне.
Посмотрите, что загрузилось сразу
В панели разработчика.
Убедитесь, что главная картинка среди них
Она не должна откладываться.
Прокрутите и проверьте догрузку
Картинки появляются заранее.
Сравните показатель отрисовки до и после
Он не должен ухудшиться.
Третий шаг — единственная проверка, которую нельзя пропускать. Если главное изображение оказалось отложенным, показатель отрисовки ухудшится, и внедрение, сделанное ради ускорения, даст обратный результат. Про отчёт — в статье про отчёт PageSpeed Insights.
Частые ошибки
| Ошибка | Последствие |
|---|---|
| Атрибут добавили всем картинкам | Отложилась и главная |
| Не указали размеры | Макет прыгает |
| Оставили и скрипт, и атрибут | Двойная логика, конфликты |
| Отложили картинки в подменном атрибуте | Поиск может не увидеть |
| Проверили только на мониторе | На телефоне другой первый экран |
Третья строка встречается при переходе со старого решения на встроенное. Скрипт отложенной загрузки после внедрения атрибута обычно нужно убрать: вместе они дают непредсказуемый порядок загрузки и лишнюю работу браузеру. Про ускорение целиком — в статье про скорость загрузки сайта.
Частые вопросы
Каким картинкам нельзя ставить отложенную загрузку?
Тем, которые видны при загрузке страницы, особенно изображению, по которому считается показатель отрисовки. Это прямая рекомендация документации.
Нужен ли скрипт для отложенной загрузки?
Нет, поддержка встроена в браузеры. Браузеры без поддержки просто игнорируют атрибут, отрицательных последствий это не даёт.
Зачем указывать width и height?
Чтобы браузер заранее отвёл место под картинку и макет не прыгал при её появлении. Документация рекомендует указывать размеры всем изображениям.
Что будет при отключённом JavaScript?
Откладывания не произойдёт — картинки загрузятся обычным образом. Самодельные решения на скриптах в этом случае обычно не показывают изображения вообще.
Читайте также
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
