Html фоновая картинка: Как добавить фоновый рисунок на веб-страницу?

Как лениво загружать закадровые изображения (5 проверенных методов)

Последнее обновление: 4 января 2023 г. | 7 мин.

TL;DR: Ленивая загрузка изображений может значительно улучшить реальную и воспринимаемую производительность вашего сайта. К сожалению, его настройка требует много времени и навыков кодирования. Чтобы найти простой способ ленивой загрузки всех изображений , не беспокоясь о технических деталях, воспользуйтесь NitroPack.

 

Обычно Google PageSpeed ​​Insights (PSI) предлагает «отложить закадровые изображения».

К сожалению, сделать это еще сложнее, чем может быть.

В то же время, вы не должны игнорировать эту возможность, так как ленивая загрузка может значительно улучшить производительность вашего сайта.

Итак, чтобы узнать больше о:

• Что означает отложенная загрузка изображений;

• Преимущества отложенной загрузки;

• Три способа вручную исправить предупреждение «Отложить закадровые изображения».

Читайте дальше.

С другой стороны, если вам просто нужен простой способ ленивой загрузки всех изображений, включая фоновые, пропустите до конца.
 

Что означает отложенная загрузка изображений

Отложенная загрузка закадровых изображений относится к использованию набора методов для загрузки только тех изображений, которые посетители просматривают в данный момент . Изображения за кадром не видны до тех пор, пока пользователь не перейдет к ним. Откладывание их гарантирует, что они загружаются после других, более важных ресурсов.

Но зачем это вообще нужно?

Ну, по умолчанию, прежде чем начать рендеринг, браузеры запрашивают все изображения на странице, даже те, которые не видны сразу.

Это проблема, так как файлы изображений имеют большой вес. Фактически, они часто больше всего влияют на размер страницы по сравнению с другими элементами, такими как файлы CSS и JavaScript.

Согласно веб-альманаху 2021, изображения остаются крупнейшим ресурсом, который в наибольшей степени способствует постоянно растущему показателю веса страницы:

Источник — Веб-альманах 2021

При этом посетителям не нужны изображения, на которые они в данный момент не смотрят. Если человек не видит его, запрос и обработка любого изображения не нужны.

Здесь на помощь приходит отложенная загрузка.

При правильном применении этот метод гарантирует, что:

Другими словами, если пользователь не прокручивает изображение, оно никогда не загружается.

В качестве бонуса отложенная загрузка с заполнителями правильного размера может улучшить воспринимаемую производительность вашего сайта и кумулятивное смещение макета. Подробнее об этом позже.

Помимо изображений, аналогичные методы можно применять к видео, JavaScript и другим активам.

Вот пример того, как работает отложенная загрузка:

 

Как вы можете видеть, изображения ниже загружаются немного раньше, чем пользователь прокручивает их.

Вы также можете проверить это на нашей домашней странице. При ленивой загрузке браузер делает 23 начальных запроса изображений, только четыре из которых относятся к изображениям в нашей CDN.

Без ленивой загрузки (добавьте ?nonitro URL) одна и та же страница вызывает 43 начальных запроса изображения!

И хотя это может быть сложно реализовать вручную, преимущества ленивой загрузки намного перевешивают недостатки.

Преимущества отложенной загрузки закадровых изображений

Задержка закадровых изображений имеет три важных преимущества:

• Скорость. Отложенная загрузка уменьшает начальную загрузку страницы за счет сокращения количества изображений, которые необходимо загрузить заранее. В результате браузеры могут отображать страницу намного быстрее;

• Экономия ресурсов. Отложенные изображения обрабатываются только в том случае, если они нужны посетителю. Это уменьшает общее количество байтов, доставляемых на страницу для пользователей, которые немедленно отказываются от просмотра или не прокручивают страницу вниз. Если ваш провайдер CDN взимает плату за передачу данных и HTTP-запросы, ленивая загрузка может буквально сэкономить вам деньги. То же самое относится и к посетителям с ограниченными тарифными планами;

• Лучшее использование ресурсов. Поскольку некоторые изображения никогда не загружаются, ленивая загрузка также экономит ресурсы, такие как батарея и время обработки.

Короче говоря, ленивая загрузка ускоряет начальную загрузку страницы и помогает более эффективно использовать ресурсы.

Присоединяйтесь к NitroPack: получите быстрый веб-сайт за 3 минуты на уровне браузера) отложенная загрузка. Самый простой вариант. Сейчас его поддерживают самые популярные браузеры (Chrome, Edge, Opera, Firefox). Реализация для Safari все еще продолжается.

Используйте наблюдатель перекрестков. Немного сложнее, так как требует навыков JavaScript и опыта работы с API. Работает во всех основных браузерах, кроме Internet Explorer.

Использовать обработчики событий JavaScript. Самый трудоемкий способ сделать это. Работает во всех браузерах. В основном используется как запасной вариант метода Intersection Observer.

У каждого варианта есть свои плюсы и минусы. Я расскажу обо всех и предоставлю ссылки на подробные руководства.

Прежде чем мы начнем, обратите внимание, что изображения можно загружать с помощью тега img или вызывать с помощью CSS с помощью свойства background-image. Это различие имеет большое практическое значение, которого я коснусь чуть позже.

Встроенная отложенная загрузка

Еще в 2019 году Chrome представил отложенную загрузку на уровне браузера.

Это был большой прорыв.

Встроенная отложенная загрузка передает всю тяжелую работу браузеру . И, как вы увидите в следующих разделах, предстоит проделать немало работы.

При отложенной загрузке браузера вам нужно только добавить атрибут загрузки со значением lazy к тегу img в HTML-разметке.

loading=»lazy» — добавить к изображениям, которые должны загружаться отложенно

 

Проще говоря, все, что вам нужно сделать, это указать браузеру, какие изображения следует загружать отложенно. Не требуется JavaScript, API или расчеты.

Лучшая часть:

Поскольку это так просто, этот метод делает отложенную загрузку доступной для всех, а не только для веб-разработчиков.

Атрибут загрузки также поддерживает два других значения:

К сожалению, этот метод также имеет некоторые недостатки.

Самое главное, у него нет поддержки браузера. На момент написания этой статьи Chrome полностью поддерживает его, а Firefox и Safari поддерживают частично и не поддерживают соответственно.

Источник: caniuse. com. Обратите внимание, что информация на снимке экрана может меняться со временем. Всегда проверяйте веб-сайт на наличие актуальной информации.

Подобно работе с изображениями WebP, отсутствие поддержки браузера делает ленивую загрузку намного сложнее, чем нужно.

Другим недостатком является то, что встроенная отложенная загрузка не работает для фоновых изображений даже в Chrome. Для этого вам все равно нужно написать немного JavaScript.

Некоторые люди также критикуют нативную ленивую загрузку за то, что она слишком энергична.

Из-за этих проблем большинство людей до сих пор не используют эту технику. По состоянию на февраль 2022 года только около 20% всех изображений имеют атрибут загрузки.

Источник — состояние изображений в HTTP-архиве

Если вы хотите узнать больше, в блоге Эдди Османи подробно рассказывается о тонкостях отложенной загрузки на уровне браузера.

Загружайте все свои изображения лениво на автопилоте! Проверьте свой сайт с помощью NitroPack →

API-интерфейс Intersection Observer

API-интерфейс Intersection Observer позволяет определять, когда изображения попадают в поле зрения, и предпринимать соответствующие действия.

С помощью этого метода вы должны зарегистрировать наблюдателя для изображений, которые должны загружаться отложенно. Это требует написания небольшого количества JavaScript, но это не так сложно, как использование обработчиков событий.

Вы можете найти отличный пример Intersection Observer в действии от Рэйчел Эндрю здесь. Это весь JavaScript из этого примера:

Вот краткий обзор того, что происходит:

• Все изображения имеют прикрепленный атрибут класса с именем lazy;

• Атрибут src ссылается на некачественное изображение-заполнитель, которое появляется при первоначальной загрузке страницы. Это предотвращает смену макета и улучшает воспринимаемую производительность. Подробнее об этом позже;

• Существуют также атрибуты data-src и data-srcset, ссылающиеся на изображения, которые должны быть загружены, когда они потребуются зрителю;

• Свойство isIntersceting определяет, попало ли изображение в область просмотра. Как только это происходит, URL-адрес изображения извлекается из атрибутов data-src/data-srcset и перемещается в атрибуты src/srcset, запуская загрузку изображения;

• Наконец, наблюдатель и «ленивый» класс удаляются.

Опять же, я настоятельно рекомендую подробно рассмотреть этот пример.

Единственным недостатком этого метода является то, что Internet Explorer его не поддерживает.

Источник: caniuse.com. Обратите внимание, что информация на снимке экрана может меняться со временем. Всегда проверяйте веб-сайт на наличие актуальной информации.

Если большая часть вашей аудитории использует IE, вам следует полагаться на обработчики событий JavaScript в качестве запасного варианта.

С другой стороны, если вас устраивает отложенная загрузка в Chrome, Firefox, Safar, Edge и Opera, вы можете пропустить следующий раздел.

Для получения дополнительной информации о том, как работает наблюдатель, обратитесь к документации разработчиков Google.

Обработчики событий JavaScript

Я не буду подробно описывать этот метод, потому что он требует отдельной статьи.

Кроме того, поскольку мы делаем всю тяжелую работу, этот метод открывает двери для гораздо большего количества ошибок . Вот почему Intersection Observer намного лучше.

И как только нативная отложенная загрузка наберет больше оборотов, большинство сайтов все равно будут ее использовать.

На данный момент, вот краткий обзор:

Вы можете использовать события прокрутки, изменения размера и ориентации, чтобы увидеть, находится ли изображение в области просмотра.

Посмотрите этот пример от Рэйчел Эндрю. Он использует ту же предпосылку, что и приложение Intersection Observer, но выполняет свою работу с помощью простого JavaScript.

Опять же, когда изображения img.lazy попадают в область просмотра, их URL-адреса берутся из атрибутов data-src/data-srcset и перемещаются в атрибуты src/srcset.

Проще говоря, это очень похоже на использование Intersection Observer. Нам просто нужно написать больше JavaScript, включая тайм-аут для ограничения выполнения функций ленивой загрузки.

Пошаговое руководство можно найти в этой статье CSS Tricks.

Кроме того, вы можете попробовать эти библиотеки отложенной загрузки, чтобы облегчить себе жизнь:

• lazysizes;

• ванильная ленивая загрузка;

• lozad.js;

Ленивая загрузка фоновых (CSS) изображений

Как я уже сказал, изображения также можно вызывать с помощью CSS со свойством background-image.

Это затрудняет ленивую загрузку, поскольку DOM, CSSOM и дерево рендеринга должны быть построены до того, как браузер решит, можно ли применить фоновое изображение к элементу DOM.

Несмотря на сложность, такое спекулятивное поведение помогает нам «обмануть» браузер, заставив его не применять свойство background-image к элементу, пока он не появится в поле зрения. Таким образом, элемент никогда не загружается, пока он не понадобится пользователю.

Обратитесь к этому примеру из CSS Tricks для получения более подробной информации о том, как это сделать.

Мало чем отличается от предыдущих методов. Вам по-прежнему нужен JavaScript, чтобы определять, когда элемент появляется в поле зрения. Разница заключается в CSS.

Опять же, использование Intersection Observer с обработчиками событий в качестве запасного варианта (для пользователей IE) по-прежнему является здесь нормой.

Дополнительный прием: использование заполнителей

Использование заполнителей для изображений и видео — отличный способ улучшить реальную и воспринимаемую производительность.

Google, Facebook и Medium используют версию этой техники.

Помимо повышения воспринимаемой производительности, заполнители правильного размера помогают браузеру выделять достаточно места для каждого изображения. Это предотвращает большие сдвиги макета и плохие оценки CLS.

Здесь есть несколько вариантов, которые вы можете попробовать:

• Самый простой способ — использовать нейтральный цветной прямоугольник с такими же размерами, как и изображение. Это не самое элегантное решение, но оно работает;

• Другой способ — найти доминирующий цвет конечного изображения и применить его к заполнителю. У Мануэля Тимельталера есть фантастическая статья о том, как это сделать;

• Наконец, вы можете использовать маленькую версию финального изображения очень низкого качества для начальной загрузки. Это низкокачественное изображение похоже на финальное, поэтому переход между ними выглядит более плавным.

Похоже, что Medium использует третий вариант. Если вы просмотрите их статьи, вы найдете уменьшенную версию (около 60×38 пикселей) окончательного главного изображения:

Это маленькое изображение рендерится сразу, в то время как окончательное изображение занимает немного больше времени. Но поскольку цвета и формы обеих версий похожи, появление изображения с высоким разрешением не кажется странным.

Опять же, при правильном применении эти подходы также помогают снизить CLS. В видео ниже Эдди Османи рассказывает об оптимизации CLS для магазина электронной коммерции, который использует заполнители для изображений своих продуктов:

Техника, которую вы выберете здесь, действительно зависит от ваших предпочтений. Просто не забудьте правильно указать размер заполнителей, например, с помощью атрибутов ширины и высоты.

Краткий контрольный список для ленивой загрузки вручную

Мы только что рассмотрели много материала, поэтому давайте сделаем краткий обзор:

• Откладывать только закадровые (ниже сгиба) изображения. Изображения выше сгиба должны быть загружены немедленно;

• Помните, что вьюпорты для ПК и мобильных устройств имеют разные элементы верхней части сгиба. Учитывайте все устройства при выборе изображений для отложенной загрузки;

• Учитывайте время и усилия, которые требуются для каждого метода ленивой загрузки. Если большинство посетителей вашего сайта используют Chrome, можно просто добавить loading=»lazy» к закадровым изображениям и положить этому конец;

• Для 100% поддержки браузера используйте Intersection Observer с обработчиками событий JavaScript в качестве резервной копии;

• Используйте заполнители надлежащего размера, чтобы избежать проблем с CLS и улучшить воспринимаемую производительность;

• После задержки закадровых изображений проверьте, все ли работает должным образом. Используйте вкладку сети вашего браузера и прокрутите страницу вниз, чтобы увидеть, когда загружаются изображения.

Самый простой способ ленивой загрузки всех изображений, включая фоновые

Чтобы не делать всего, что мы только что перечислили, и по-прежнему пользоваться огромными преимуществами ленивой загрузки, ознакомьтесь с NitroPack.

• Наш сервис автоматически лениво загружает все изображения, iFrames и видео с YouTube и Vimeo;

• NitroPack также лениво загружает все фоновые изображения, даже определенные в CSS. Он обнаруживает объявления во внешних файлах на несколько уровней ниже по цепочке импорта. Это особенно полезно для некоторых тем WordPress;

• NitroPack также лениво загружает несколько изображений слайдера.

Все наши функции отложенной загрузки включены по умолчанию. Вам не нужно ничего настраивать.

Протестируйте свой сайт с помощью NitroPack и сами убедитесь в улучшении →

Если вам интересно, проверьте NitroPack для:

• WordPress;

• OpenCart;

• Мадженто.