Как настроить отложенную загрузку картинок: lazy loading изображений
Отложенную или по-другому ленивую загрузку изображений используют довольно много сайтов. В октябре 2019 команда Backlinko провела исследование, в котором проанализировала скорость загрузки 5,2 млн десктопных и мобильных страниц. Они подсчитали, какие способы оптимизации загрузки практикуют самые быстрые страницы.
Оказалось, что чаще всего используют адаптивные изображения, но ленивая загрузка не сильно отстает и занимает второе место.
Исследователи посмотрели, какой подход используют сайты, получившие высокие оценки инструмента для измерения скорость загрузки Lighthouse. Таблица похожа на предыдущую, lazy loading на втором месте после адаптивных изображений:
Разберем, как работает lazy loading, каким сайтам нужно внедрять эту функцию, и как это сделать.
Что такое lazy loading изображений
Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.
Способ работает для картинок img и фреймов iframe. У этих элементов есть атрибут src, указывающий на источник.
Варианты отложенного отображения контента:
- По скроллингу
Изображения и фреймы подгружаются, когда пользователь до них доскролливает. Обычно используют в блогах с бесконечной лентой, в интернет-магазинах с большими листингами. - По клику
Контент подгружается, когда пользователь переходит по ссылке. К примеру, большое изображение загружается, когда пользователь нажимает на миниатюру. - В фоновом режиме
Контент подгружается фоново, к примеру, когда пользователь загрузил документ и оставил его открытым. Этот способ обычно используют для документов, которые нужны для работы — картинок больших размеров, чертежей, схем.
Метод ленивой загрузки позволяет увеличить скорость отображения страницы, потому что загрузка элементов растянута на время, пока пользователь изучает контент.
На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:
Отображение загрузки картинок на странице при скроллинге 
Код страницы indexoid.com/speed
Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.
Как ПС относятся к отложенной загрузке
Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.
Каким сайтам нужно внедрять отложенную загрузку
В пятом выпуске рубрики «Спроси PR-CY» один из пользователей задал эксперту вопрос о способах оптимизации картинок на сайте:
«Стоит ли на сайте интернет магазина внедрять lazy loading изображений? Слышал, что Google прочитает фото, находящиеся за пределом экрана, а вот Яндекс — нет. Общался с популярными SEO конторами, 7 из 10 уверяют, что не стоит, обрушу SEO.
И еще вопрос по поводу WebP, jpeg2000 — стоит ли внедрять на сайт? На сайте уже 25000 фото, сам процесс конвертации не быстрый».
Ответил Михаил Шакин, автор SEO-блога и специалист по продвижению сайтов в рунете и англоязычном интернете:
«Если есть хороший трафик с изображений, то реализовывать lazy loading не стоит.
Если на вашем сайте много больших по размеру изображений, которые замедляют скорость загрузки страниц и они по этому параметру значительно уступают конкурентам, то для эксперимента можно реализовать.
По поводу новых форматов изображений — пока можно не тратить на это время. А вот оптимизировать для быстрой загрузки без потери качества очень желательно».
Ориентируйтесь на целесообразность внедрения функции на ваш сайт. С одной стороны, использование такой оптимизации ускорит загрузку сайта, уменьшит время ожидания пользователей и сэкономит им трафик, поскольку они будут использовать его только для картинок, которые видят.
С другой, веб-мастеру нужно прикладывать дополнительные усилия по настройке функции, которая пока будет работать не на всех браузерах.
В каких случаях стоит внедрять lazy loading:
- На страницах много больших изображений.
- Картинки составляют основную часть контента — вы продвигаете сервисы с фотографиями, фотостоки, статейники с большим количеством иллюстраций и фреймов.
- Невысокий балл PageSpeed Insights.
- Много посетителей с мобильных устройств, больше 50%.
- Конкуренты быстрее вас, хотя вы уже провели оптимизацию и ускорение страниц.
- Сервер слабый и не может дать быструю загрузку.
Проверить скорость загрузки сайта можно с помощью сервиса «Анализ сайта». Он проверит загрузку в соответствии с новыми требованиями поисковиков и даст советы, что сделать, чтобы ее улучшить.
Фрагмент проверки скорости
Как настроить отложенную загрузку изображений на сайте
Разберем, какие есть способы для настройки отложенной загрузки, и что проще применить на практике.
Атрибут loading
C помощью атрибута loading веб-мастеры задают условия для загрузки. Атрибут loading можно установить для изображений с тегом img и для медиа с тегом iframe.
Он поддерживает три значения:
- lazy — асинхронная загрузка по мере надобности изображения;
- eager — загрузка элемента немедленно;
- auto — порядок загрузки по усмотрению браузера.
Если значение для атрибута loading не указали, браузер воспримет его как auto.
Для iframe код аналогичный.
Иногда на сайте используют скрытые фреймы, к примеру, для аналитики, для них отложенная загрузка не действует. Chrome определяет, является ли фрейм скрытым, по критериям:
- высота и ширина фрейма — 4px или меньше;
- применяются свойства display: none или visibility: hidden;
- расположение за пределами экрана с помощью отрицательного позиционирования по осям X или Y.
Если хоть одно условие соблюдено, Chrome считает фрейм скрытым и не будет загружать его асинхронно.
Как работает lazy loading
Без внедрения lazy loading браузер делает запросы по адресам из атрибутов, и когда картинок много, он одновременно делает много запросов ко внешним источникам. Это замедляет загрузку страницы.
Ленивая загрузка позволяет делать запросы не синхронно, а порциями — по мере просмотра страницы пользователем. При первой загрузке страницы браузер делает один запрос к временному шаблону, указанному в атрибуте src, закэшированному браузером. И потом при необходимости для элементов возвращает их оригинальный src.
Для отложенной загрузки картинок и фреймов есть два работающих способа настройки:
- с помощью Intersection Observer API;
- с помощью обработчиков событий scroll, resize или orientationchange.
Как это работает в Chrome:
- При загрузке страницы браузер создает DOM страницы без изображений и видео.
- С помощью JavaScript он определяет, какие изображения и видео нужно загружать, запрашивает первые 2 КБ изображений и узнает из них сведения о размерах.
- На основе этих данных браузер создает заглушки, заполняющие места изображений, с такими же размерами, как у картинок. У атрибута src появляется временное значение, которое содержит адрес шаблона с меньшим весом, чем у оригинального исходника. Элементы, которые будут загружаться асинхронно, встраиваются на страницу с новым значением src.
- Когда изображение нужно загрузить, в атрибут src вставляется оригинальный адрес ресурса и изображение появляется в исходном качестве. Могут быть два условия для загрузки:
- автоматически, когда элемент попадает в область просмотра пользователя — путем проверки события scroll или resize или orientationchange для мобильных устройств;
- на элементах по требованию пользователя, когда для элемента наступают события click или hover.
Если изображения внедрены через CSS, настроить отложенную загрузку тоже можно. Это делают через JavaScript: нужно определить, когда элемент находится в области просмотра, и также загрузить фоновое изображение. Теги img загружаются вне зависимости от их видимости, а в загрузке CSS есть много предположений, так что сначала браузер проверяет применение CSS к документу, а потом запрашивает внешние ресурсы.
Какие браузеры поддерживают отложенную загрузку
Раньше для этой функции в любом случае приходилось писать специальный код или использовать отдельную библиотеку JavaScript, но сейчас есть такие браузеры, которые не нуждаются в сторонней библиотеке. Отложенная загрузка будет работать в них, даже если на стороне клиента отключен JavaScript.
Google Chrome обрабатывает loading начиная с 76 версии. Другие браузеры на базе Chromium 76 тоже могут работать с этим атрибутом. Для настройки отложенной загрузки в Firefox есть открытый баг.
Атрибут loading воспринимают пока не все браузеры, но его можно использовать для расширения возможностей страницы.
Как настроить кроссбраузерную функцию lazy loading
Сначала нужно проверить, поддерживает ли браузер атрибут:
Для браузеров, которые не поддерживают встроенный режим отложенной загрузки, можно реализовать его с помощью полифила или сторонней библиотеки. Можно настроить, чтобы библиотеку загружал только браузер, который не поддерживает loading.
Изображения на первом экране просмотра
Изображения, которые должны быть видны сразу после загрузки страницы, нужно описать с помощью тегов img и указать атрибут src. Если использовать для них атрибут data-src без src, изображения не будут показаны.
Изображения на остальных экранах в ленивой загрузке
Если браузер поддерживает атрибут ленивой загрузки, используем src.
Если браузер не поддерживает lazy loading, нужно, чтобы обычная одновременная загрузка не сработала для изображений на всех экранах, кроме первого. Для этого в работе с изображениями на остальных экранах в разметке нужно использовать img data-src=image.png /, а не src, srcset или source.
Это можно сделать с помощью скрипта Lazy loading от David Walsh. Скрипт заменяет атрибут src на data-src в теге img:
Элементы img с атрибутами data-src скрыты в CSS. После загрузки картинок они будут отображаться с применением плавных переходов:
Затем JavaScript передает всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:
JavaScript библиотеки
С помощью возможностей JavaScript можно загрузить соответствующую библиотеку. Библиотек много, к примеру, yall.js (Yet Another Lazy Loader), которая использует Intersection Observer API, Query Lazy, основанная на jQuery, LazySizes с поддержкой адаптивных изображений «srcset» и атрибута «sizes» и другие.
В случае с популярной библиотекой LazySizes нужно использовать чтобы указать библиотеке на изображения, которые должны загружаться асинхронно.
Как это выглядит на примере:
Демонстрация отложенной загрузки работы на сайте:
Загрузка картинок при быстром скроллеКак настроить время отложенной загрузки
В режиме auto скорость загрузки зависит от близости элемента к области просмотра и скорости интернета.
В режиме lazy пороговые значения для отложенной загрузки установлены в исходном коде браузера Chrome. Команда Chrome экспериментирует с разными пороговыми расстояниями, так что оно может измениться в будущем.
В своем браузере значения времени загрузки можно настроить средствами командной строки. К примеру, это настройки по умолчанию:
Допустим, нужно настроить, чтобы загрузка изображений начиналась, если от позиции прокрутки до изображения 400 пикселей Тогда все значения в этой команде нужно поменять на 400.
На сайте indexoid.com/speed настроена команда со значением один пиксель, задержка в загрузке не ощущается.
Загрузка изображений при скроллингеДля сайтов на CMS настраивать отложенную загрузку проще всего с помощью плагинов, которые все сделают автоматически.
Плагины для настройки lazy loading
Собрали несколько плагинов и решений для популярных движков.
Настроить ленивую загрузку: скрипт bLazy.js на JavaScript
Скрипт для отложенной загрузки, работает на чистом JavaScript и не зависит от сторонних библиотек.
- Запускает ленивую загрузку фоновых и добавочных изображений и картинок в прокрутке.
- Работает со всеми элементами с атрибутом src, видео HTML5, фреймы.
- Поддерживает srcset и элемент picture.
- Загружает фотографии асинхронно с учетом разрешения и размера экрана.
- Поддерживается устаревшими браузерами.
- Весит меньше 1,4 КБ.
- Использует CDN для размещения.
Реализация стандартная. Разметка:
Размыть изображение: Craig Buckler
Перед загрузкой в высоком качестве можно настроить разное отображение для картинки — сжатие, размытие, шаблонная заглушка. Плагин Craig Buckler позволяет настроить размытое отображение перед загрузкой.
- Поддерживает любой тип изображений, включая CSS фоновые изображения, атрибуты srcset и sizes.
- Быстро загружается и работает, занимает 1350 байт JavaScript, 440 байт CSS.
- Не зависит от фреймворков и библиотек.
- Поддерживает экраны с матрицами Retina.
- Применяет прогрессивное улучшение для устаревших браузеров.
- Делает до трех попыток, если изображение по какой-то причине не загрузилось.
Проще установить специальные плагины для CMS, которые запустят отложенную загрузку. Некоторые вообще не требуют настройки.
WordPress
В конце января 2020 команда разработчиков новой версии WordPress 5.4 поделилась планами. Начиная с этой версии, функция отложенной загрузки начнет работать по умолчанию: HTML-атрибут «loading» со значением «lazy» будет применяться ко всем элементам IMG. Веб-мастер может легко удалить атрибуты, если не хочет, чтобы ленивая загрузка работала.
Запуск WordPress 5.4 планируется в конце марта 2020 года, а пока можно справляться с помощью плагинов. Мы собрали самые лучшие плагины отложенной загрузки для WordPress.
Лучший плагин для lazy load WordPress: исследование
Хостинг Kinsta провел исследование популярных плагинов для lazy loading, чтобы выяснить, какие работают эффективнее.
Исследователи создали легкую страницу с темой TwentySixteen, она весила меньше 155 КБ и загружалась меньше, чем за полсекунды. Для теста ускорения загрузки страницу наполнили большими фото и видео с YouTube, вес увеличился до 1,7 МБ, а скорость уменьшилась до 1,28 секунд.
Тест скорости без плагинов для ленивой загрузкиКоманда проанализировала несколько десятков плагинов и выбрала три лучших, которые дают ощутимые изменения в производительности.
3 лучших плагина WordPress для отложенной загрузки
-
— дополнительно позволяет настроить отложенную загрузку: указать класс HTML для исключений из асинхронной загрузки, который вы сможете применять к элементам страницы, указать, в какой момент загружать картинку или фрейм, добавить URL-адрес изображения для заглушки на месте картинки до ее загрузки в хорошем качестве.
— кроме ленивой загрузки, плагин можно использовать для минимизации файлов JS и CSS, загрузки библиотек JavaScript и CSS с помощью Cloudflare CDN, перемещения скриптов в нижний колонтитул сайта.
— бесплатный плагин на WP, совместим с плагинами WooCommerce, AMP, WPTouch, WP Super Cache, W3 Total Cache и CDN. Позволяет настроить типы объектов для асинхронной загрузки и выбрать миниатюры, виджеты, граватары и другие, настроить загрузки видео и iframe. Переведен на русский.Плагин a3 Lazy Load смог довести размер изображений до 150 КБ. У BJ Lazy Load и Lazy Load XT получились схожие результаты — размер страницы 2,0 МБ. Сравнение результатов внедрения плагинов показало, что a3 Lazy Load справился лучше.
Сравнение плагинов для lazy loadИсследование проводили в 2016 году, материал обновили в 2019, но в подборке остались плагины, которые не обновлялись по три месяца. Не смотря на это, они могут корректно работать, но вы можете подобрать другое решение, которое будет работать на вашем сайте.
Еще популярные плагины:
-
— бесплатный плагин, работает с изображениями и фреймами, использует библиотеку lazysizes, совместим с WooCommerce, переведен на русский.
— плагин также запускает ленивую загрузку, но вдобавок предлагает настроить эффекты для оформления — полупрозрачный экран с процентом загрузки, анимацию, настройка цвета и изображения для фона.
— бесплатный и легкий, весит 6 КБ, не использует тяжелые библиотеки типа jQuery, не требует сложных настроек, работает с изображениями, фреймами, в том числе аватарками и превью. С помощью кода с репозитория можно отключить плагин для некоторых страниц.
— плагин для отложенной загрузки видео с платформ Youtube и Vimeo, работает без загрузки JavaScript. Видео с Youtube загружаются в режиме повышенной конфиденциальности с использованием встроенного URL-адреса «https://www.youtube-nocookie.com».1-C Битрикс
Для этого движка удалось найти два плагина:
-
— платный плагин для отложенной загрузки на сайте, использует библиотеку lazysizes, работает с CDN Битрикса, поддерживает несколько сайтов, не требует работы с кодом и обрабатывает на лету. Поддерживается большинством версий Битрикса.
— бесплатный плагин, который использует метод IntersectionObserver, не загружает сайт лишним JS, совместим с CDN Битрикс и поддерживает многосайтовость.OpenCart
Несколько расширений ленивой загрузки для OpenCard:
-
— бесплатный плагин, настраивает ленивую загрузку по прокрутке, работает на jQuery.
— плагин для асинхронной загрузки с возможностью настроить визуальные эффекты для появляющихся изображений. Поддерживает Opencart версии 1.5.X + 2.X + 3.0.X + 3.1.X. Цена 20 долларов.
— плагин для ленивой загрузки изображений, каруселей, слайд-шоу, работает на JavaScript. Работает с версиями OpenCart v3.x. Цена 20 долларов.Joomla!
Для Joomla! нашлась пара плагинов:
-
— плагин для отложенной загрузки, работает с изображениями и динамическими модулями, в том числе с Retina изображениями, AJAX навигацией, выводит уменьшенные изображения для мобильных устройств. Единственный плагин для Joomla!, который работает с отложенной загрузкой фоновых изображений. Работает на чистом JavaScript, не зависит от внешних библиотек, к примеру от jQuery. Цена — 755 рублей.
— запускает отложенную загрузку изображений для товаров, обрабатывает только фото товара virtuemart и joomshopping — картинки, в пути к которым указан «product». Использует jQuery плагин lazyload. Цена — 400 рублей.Drupal
Для Drupal есть несколько модулей асинхронной загрузки.
-
— модуль Drupal для отложенной загрузки встроенных изображений и фреймов, работает на библиотеке lazysizes.
— плагин обеспечивает интеграцию с bLazy и Intersection Observer API для асинхронной загрузки изображений и фреймов.
— модуль на Drupal 8 для повышения производительности, в том числе в нем можно включить отложенную загрузку.
— модуль для ленивой загрузки картинок, подходит для версий Drupal 7.12 и выше.
— плагин загружает картинки по требованию со стороны клиента из кэша, через AJAX.Как проверить ленивую загрузку
При настройке lazy loading нужно убедиться, что поисковые системы распознают и индексируют контент, которые загружается асинхронно. Обычно для локальной проверки используют скрипт Puppeteer.
Команды для проверки и запуска скрипта:
По окончанию проверки посмотрите на получившиеся скриншоты — на них должен быть виден весь контент, который должен индексировать гуглбот.
Что вы думаете о методе отложенной загрузки? Будем рады, если вы поделитесь своими мыслями и опытом!
Ленивая загрузка изображений средствами браузера
Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов <img> и <iframe> loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.
Если вам не терпится узнать о том, как использование нового атрибута выглядит в коде, то взгляните на этот пример:
Сейчас мы поговорим о том, как будет работать атрибут loading .
Предварительные сведения
Веб-страницы часто включают в себя множество изображений, что влияет на размер страниц, приводит к его чрезмерному увеличению, и влияет на скорость загрузки страниц. Многие из изображений, выводимых на страницах, находятся за пределами их видимой области. Для того чтобы увидеть подобные изображения, пользователю нужно прокрутить страницу.
Исторически сложилось так, что для того чтобы ограничить воздействие на время загрузки страниц изображений, расположенных за пределами видимой области страниц, программистам приходилось использовать JavaScript-библиотеки (вроде LazySizes). Эти библиотеки позволяют отложить загрузку подобных изображений до того момента, когда пользователь, прокручивая страницу, не подберётся к ним достаточно близко.
Страница, загружающая 211 изображений. Версия страницы, при создании которой ленивая загрузка изображений не используется, сразу загружает 10 Мб графических данных. Та же страница, использующая ленивую загрузку (с помощью LazySizes) предварительно загружает лишь 250 Кб графической информации. Всё остальное подгружается по мере продвижения пользователя по странице. Подробности об этом эксперименте можно посмотреть на webpagetest.org.
Что если бы браузер мог бы помочь программисту избежать загрузки изображений, которые находятся за пределами видимой области страниц? Это благотворно сказалось бы на скорости загрузки данных в видимой области страницы, снизило бы, на маломощных устройствах, общий объём передаваемых по сети данных, уменьшило бы потребление памяти. Скоро всё это будет возможно благодаря новому атрибуту элементов <img> и <iframe> loading .
Атрибут loading
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов <img> и <iframe> , находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам. Этот атрибут поддерживает три значения:
- lazy : указывает на материалы, которые являются хорошими кандидатами на ленивую загрузку.
- eager : материалы в элементах с таким значением атрибута нужно загрузить без промедления.
- auto : браузер самостоятельно примет решение о том, применять ли к материалам с этим значением атрибута ленивую загрузку.
В настоящее время работа над атрибутом loading для элементов <img> и <iframe> ведётся в рамках стандарта HTML
Примеры
Атрибут loading работает с элементами <img> (в том числе с атрибутом srcset и внутри элемента <picture> ), а также с элементами <iframe> .
Надо отметить, что мы используем тут формулировки наподобие следующей: «когда пользователь прокрутит страницу так, что её видимая область окажется поблизости от элемента». Точный момент начала загрузки изображения браузер определяет самостоятельно. В целом мы можем надеяться на то, что браузер начнёт загрузку материалов, загрузка которых была отложена, за некоторое время до того, как область страницы, содержащая их, окажется видимой пользователю. Это увеличит шансы того, что загрузка и вывод соответствующих материалов завершатся к тому моменту, когда пользователь их увидит.
Обратите внимание на то, что я предложил, чтобы атрибут, о котором идёт речь, назвали бы именно loading , так как такой подход к его именованию соответствует тому, что использовался при выборе имени для атрибута decoding. Предыдущие предложения, наподобие lazyload , не подошли, так как нужно было, чтобы этот атрибут поддерживал бы несколько значений ( lazy , eager и auto ).
Проверка поддержки атрибута loading браузерами
Мы принимали во внимание важность возможности применения JavaScript-библиотек для организации ленивой загрузки материалов (для кросс-браузерной поддержки этой возможности). Проверить, поддерживает ли браузер атрибут loading , можно так:
Обратите внимание на то, что атрибут loading можно использовать для прогрессивного расширения возможностей страницы. Браузеры, которые поддерживают этот атрибут, смогут организовать ленивую загрузку материалов при использовании loading=lazy , а браузеры, которые эту возможность не поддерживают, будут просто, как и прежде, загружать эти материалы.
Кросс-браузерная ленивая загрузка изображения
Если важна кросс-браузерная поддержка ленивой загрузки изображений, тогда недостаточно просто определить то, поддерживает ли браузер эту возможность, и, если это не так, воспользоваться соответствующей библиотекой, если при описании изображения в разметке используется конструкция наподобие <img align=»center» src=unicorn.jpg loading=lazy /> .
В разметке нужно использовать что-то наподобие <img data-src=unicorn.jpg /> (а не src , srcset или <source> ) для того чтобы избежать срабатывания обычной загрузки изображения браузерами, которые не поддерживают новый атрибут. Для того чтобы менять подобные атрибуты на те, которые нужно использовать при поддержке браузером атрибута loading , или для загрузки соответствующей библиотеки в том случае, если этот атрибут не поддерживается, можно использовать возможности JavaScript.
Вот пример того, как это может выглядеть:
Рассмотрим некоторые особенности этого кода:
- Изображения, которые видны пользователю сразу после загрузки страницы, описаны с помощью обычных тегов <img> . Использование атрибута data-src без src приведёт к тому, что изображения, сразу после загрузки страницы, показаны не будут, поэтому, настраивая те изображения, которые должны быть видны сразу же после загрузки страницы, мы должны указывать атрибут src .
- При описании изображений, которые, сразу после загрузки страницы, пользователю не видны, мы используем атрибут data-src . Делается это для того чтобы предотвратить их обычную загрузку в браузерах, не поддерживающих атрибут loading . Если браузер этот атрибут поддерживает, мы меняем data-src на src .
- Если атрибут loading не поддерживается, мы загружаем вспомогательную библиотеку (lazySizes) и инициализируем её. Здесь мы используем class=lazyload для того чтобы указать библиотеке LazySizes на изображения, с которыми мы хотим работать, используя методику ленивой загрузки.
Демонстрационный пример
Тут можно посмотреть на пример страницы, на которой выполняется ленивая загрузка 100 изображений кошек. А вот, если интересно, видео загрузки этой страницы.
Особенности реализации поддержки атрибута loading в Chrome
Мы настоятельно рекомендуем, прежде чем пользоваться атрибутом loading в продакшне, дождаться появления его поддержки в стабильном релизе Chrome. Если же вам не терпится испытать эту возможность, тогда, возможно, вам будет интересно то, о чём мы сейчас поговорим.
Испытание атрибута loading
Для того чтобы прямо сейчас испытать новый атрибут, перейдите к странице настройки флагов Chrome ( chrome://flags ), включите флаги Enable lazy frame loading и Enable lazy image loading , и перезагрузите браузер.
Настройки браузера
Реализация методики ленивой загрузки материалов в Chrome основана не только на том, насколько близко видимая область страницы находится к этим материалам, но и на скорости соединения. Пороговые значения срабатывания ленивой загрузки материалов для разных скоростей соединения жёстко заданы в коде, но эти значения можно переопределить средствами командной строки. Вот пример переопределения настроек для изображений:
Вышеприведённая команда соответствует текущим настройкам, применяемым по умолчанию. Для того чтобы загрузка изображений начиналась бы в том случае, если позиция прокрутки страницы находится на расстоянии в 400 пикселей от изображения, все значения в этой команде нужно поменять на 400. Ниже приведён пример 1-пиксельной вариации этой команды (такая настройка используется в вышеупомянутом видео).
Весьма вероятно то, что стандартная конфигурация ленивой загрузки в Chrome изменится по мере стабилизации реализации этой возможности в ближайшие недели.
Инструменты разработчика
Особенности реализации поддержки атрибута loading в Chrome заключаются в том, что браузер, при загрузке страницы, запрашивает первые 2 Кб изображений у сервера в том случае, если он поддерживает технологию range request (запрос на диапазон). В первых 2 Кб изображений, наверняка, содержатся сведения об их размерах. Это позволяет браузеру генерировать местозаполнители, имеющие размеры, соответствующие размерам изображений. Кроме того, в эти 2Кб, если речь идёт о небольших изображениях вроде значков, весьма вероятно, входит всё изображение.
Загрузка фрагментов графических файлов
Chrome загружает оставшиеся данные изображений в тот момент, когда пользователь близок к тому, чтобы их увидеть. При работе с инструментами разработчика это может привести к тому, что в панели Network может «появиться» информация о двух загрузках изображения, а в панели Resource Timing будут выведены сведения о двух запросах, выполняемых для загрузки каждого изображения.
Определение сервером поддержки браузером атрибута loading
Если бы мы жили в совершенном мире, то для того чтобы узнать о том, нужно ли, для правильного вывода страницы в некоем браузере, использовать вспомогательную библиотеку, можно было бы не полагаться на анализ браузера средствами клиентского JavaScript. При таком подходе сервер, заранее зная, нужна такая библиотека или нет, включил бы (или не включил бы) её в состав страницы, отправляемой браузеру. Подобную проверку может сделать возможной использование технологии HTTP Client Hint, благодаря которой клиент способен передавать серверу «подсказки» о своих возможностях.
Соответствующая «подсказка», касающаяся поддержки атрибута loading , находится сейчас на ранней стадии рассмотрения.
Итоги
Автор этого материала предлагает всем, кто заинтересован в использовании атрибута loading при работе с элементами <img> и <iframe> , опробовать его, и поделиться с ним впечатлениями. Особенно ему интересно узнать о том, как, с точки зрения разработчиков, выглядят предложенные здесь механизмы кросс-браузерной поддержки ленивой загрузки данных, и о том, не упустил ли он, рассказывая о таких механизмах, какие-то пограничные случаи.
Уважаемые читатели! Планируете ли вы использовать атрибут loading в своих проектах?
Отложенная загрузка изображений для веб-сайтов на уровне браузера
Наконец-то появилась поддержка отложенной загрузки изображений для веб-сайтов на уровне браузера! В этом видео показана демонстрация функции:
Начиная с Chrome 76, можно использовать атрибут loading для отложенной загрузки изображений без необходимости писать собственный код отложенной загрузки или использовать отдельную библиотеку JavaScript. Давайте разберем подробнее.
Совместимость с браузером #
<img loading=lazy> поддерживается большинством популярных браузеров на базе Chromium (Chrome, Edge, Opera) и Firefox. Реализация для WebKit (Safari) находится на стадии разработки. На сайте caniuse.com есть подробная информация о кросс-браузерной поддержке. Браузеры, не поддерживающие атрибут loading , просто игнорируют его без каких-либо побочных эффектов.
Зачем нужна отложенная загрузка на уровне браузера? #
По данным Интернет-архива, изображения являются наиболее востребованным типом ресурсов для большинства веб-сайтов и обычно занимают большую часть полосы пропускания. В 90-м процентиле сайты отправляют около 4,7 МБ изображений на настольные и мобильные устройства. Это очень много картинок с котиками.
- использование API Intersection Observer;
- использование обработчиков событий scroll , resize или orientationchange .
Любой из этих вариантов позволяет разработчикам добавить функциональность отложенной загрузки. Кроме того, многие разработчики создали сторонние библиотеки, предоставляющие слои абстракций, которые еще проще использовать. Однако если отложенная загрузка поддерживается непосредственно браузером, то необходимость во внешней библиотеке отпадает. Отложенная загрузка изображений на уровне браузера гарантирует, что эта функция будет работать, даже если JavaScript отключен на клиенте.
Атрибут loading #
Chrome уже умеет загружать изображения с разными приоритетами в зависимости от их расположения относительно области просмотра устройства. Изображения, расположенные ниже области просмотра, имеют более низкий приоритет загрузки, но всё равно загружаются как можно быстрее.
В Chrome 76+ можно использовать атрибут loading чтобы полностью отложить загрузку скрытых изображений, которые можно получить с помощью прокрутки:
- auto : поведение браузера при отложенной загрузке по умолчанию, равносильно отсутствию атрибута;
- lazy : загрузку ресурса отлаживается до тех пор, пока он не достигнет расчетного расстояния от области просмотра;
- eager : ресурс загружается немедленно, независимо от его расположения на странице.
Внимание
Пороговые значения расстояния от области просмотра #
Все изображения, которые находятся в верхней части страницы, то есть доступны для немедленного просмотра без прокрутки, загружаются в обычном режиме. Изображения ниже области просмотра устройства подгружаются только тогда, когда пользователь прокручивает страницу почти до них.
Реализация механизма отложенной загрузки в Chromium направлена на то, чтобы скрытые изображения загружались до того, как пользователь докрутит страницу до них. Подгружая соседние изображения заранее, мы увеличиваем вероятность того, что они уже будут загружены до момента попадания в область просмотра.
Пороговые значения в Chromium заданы более строго, чем в JavaScript-библиотеках для отложенной загрузки изображений, чтобы соответствовать ожиданиям разработчиков.
- тип получаемого ресурса изображения;
- использование упрощенного режима в Chrome для Android;.
Значения по умолчанию для различных типов эффективных соединений можно найти в исходном коде Chromium. Эти цифры и даже подход, при котором выборка выполняется только при достижении определенного расстояния от области просмотра, могут измениться в ближайшем будущем, поскольку команда Chrome совершенствует эвристику для определения момента начала загрузки.
Улучшенная экономия данных и пороговые значения расстояния от области просмотра #
По состоянию на июль 2020 года Chrome внес значительные улучшения в выравнивание пороговых значений расстояния до области просмотра при отложенной загрузке изображений, чтобы больше соответствовать ожиданиям разработчиков.
- <img loading=lazy> больше соответствует тому, что предлагают библиотеки отложенной загрузки JavaScript;
- новые пороговые значения расстояния от области просмотра по-прежнему обеспечивают загрузку изображений к тому моменту, когда они попадают в область просмотра в результате прокрутки.
Ниже приведено сравнение между старыми и новыми пороговыми значениями расстояния от области просмотра для одной из наших демонстраций при быстром соединении (4G):
Сравнение старых и новых пороговых значений:
Сравнение новых пороговых значений с LazySizes (популярной JavaScript-библиотекой для отложенной загрузки):
Мы сотрудничаем с сообществом веб-стандартов, чтобы лучше согласовать подходы к пороговым значениям расстояния от области просмотра в разных браузерах.
Изображения должны включать атрибуты размеров #
Когда браузер загружает изображение, он не сразу узнает его размеры, если они не указаны явно. Чтобы браузер мог зарезервировать достаточно места на странице для изображений, рекомендуется, чтобы все теги <img> включали атрибуты width и height . Без указания размеров могут произойти смещения макета, более заметные на страницах, которые загружаются дольше.
В качестве альтернативы укажите значения размеров непосредственно во встроенном стиле:
Метод установки размеров применяется к тегам <img> независимо от того, используется ли отложенная загрузка, но в этом случае полезность данного метода возрастает. Установка width и height также позволяет современным браузерам определять внутренний размер изображений.
В большинстве сценариев отложенная загрузка изображений применяется, даже если размеры изображений не указаны, но есть несколько нестандартных ситуаций, о которых следует знать. Без задания width и height размеры изображения сначала равны 0×0 пикселей. Если у вас есть галерея таких изображений, браузер может решить, что все они изначально помещаются в область просмотра, так как практически не занимают места и не вытесняются за пределы экрана. В этом случае браузер определяет, что все они видны пользователю, и решает загрузить эти изображения.
Кроме того, задание размеров изображения снижает вероятность смещения макета. Если у вас нет возможности указать размеры изображений, их отложенная загрузка может стать компромиссом между экономией сетевых ресурсов и потенциально большим риском смещения макета.
Хотя отложенная загрузка в Chromium реализована таким образом, что изображения, вероятно, будут загружены, как только они станут видимыми, всё же существует небольшая вероятность того, что этого не произойдет. В этом случае отсутствие width и height на таких изображениях увеличивает их влияние на совокупное смещение макета.
Для изображений, определенных с помощью <picture> , также можно применять отложенную загрузку:
Хотя браузер решает, какое изображение загружать из любого из элементов <source> , атрибут loading должен быть включен только в резервный элемент <img> .
Избегайте отложенной загрузки изображений, которые находятся в первой видимой области просмотра #
Вам следует избегать установки loading=lazy для любых изображений, которые находятся в первой видимой области просмотра.
Рекомендуется добавлять loading=lazy только к изображениям, расположенным под областью просмотра, если это возможно. При безотложной загрузке изображения могут быть получены сразу, в то время как при отложенной загрузке браузеру необходимо узнать, где именно на странице расположено изображение, что зависит от наличия IntersectionObserver.
Как правило, любые изображения в области просмотра должны загружаться безотлагательно, используя настройки браузера по умолчанию. Вам не нужно указывать loading=eager для изображений из области просмотра.
Отказоустойчивость #
Браузеры без поддержки атрибута loading будут игнорировать его наличие. Хотя эти браузеры не получат преимуществ отложенной загрузки, включение атрибута не окажет на них негативного влияния.
Часто задаваемые вопросы #
Планируется ли автоматическая отложенная загрузка изображений в Chrome? #
Если в Chrome для Android включен упрощенный режим, то Chromium уже автоматически выполняет отложенную загрузку любых изображений, подпадающих под эту категорию. Это в первую очередь предназначено для пользователей, которые заботятся об экономии данных.
Можно ли изменить расстояния до изображения, при которых запускается загрузка? #
Эти значения жестко запрограммированы и не могут быть изменены через API. Однако они могут измениться в будущем, поскольку браузеры экспериментируют с разными пороговыми расстояниями и переменными.
Можно ли атрибут loading использовать для изображений, заданных через CSS-свойство background? #
Нет, в настоящее время его можно использовать только с тегами <img> .
Есть ли негативные аспекты отложенной загрузки изображений, которые находятся в пределах области просмотра устройства? #
Безопаснее избегать добавления loading=lazy в верхней части страницы, поскольку сканер предварительной загрузки в Chrome не будет предварительно загружать изображения с loading=lazy .
Как атрибут loading работает с изображениями, которые находятся в области просмотра, но не видны сразу (например, находятся за каруселью или скрыты для определенных размеров экрана с помощью CSS)? #
В отложенном режиме загружаются только изображения, которые находятся на определенном расстоянии от нижней границы области просмотра устройства. Все изображения над областью просмотра, независимо от того, видны ли они в данный момент, загружаются в обычном режиме.
Что делать, если я уже использую стороннюю библиотеку или скрипт для отложенной загрузки изображений? #
- Если сторонний загрузчик пытается загрузить изображения или фреймы раньше, чем их будет загружать Chrome в обычном режиме, то есть, на расстоянии, превышающем пороговые значения расстояния от области просмотра, их загрузка всё равно будет отсрочена и они загрузятся согласно стандартным правилам браузера.
- Если сторонний загрузчик использует меньшее расстояние для определения времени загрузки определенного изображения, чем браузер, то браузер будет загружать изображения в отложенном режиме согласно настройкам загрузчика.
Одна из важных причин продолжить использовать стороннюю библиотеку параллельно с loading=»lazy» заключается в предоставлении полизаполнения для браузеров, не поддерживающих данный атрибут.
Как работать с браузерами, которые еще не поддерживают отложенную загрузку? #
Создайте полизаполнение или используйте стороннюю библиотеку для отложенной загрузки изображений на сайт. Свойство loading можно использовать, чтобы определить, поддерживается ли эта функция в браузере:
- Замените <img src> на <img data-src> , чтобы избежать безотложной загрузки в неподдерживаемых браузерах. Если loading поддерживается, замените data-src на src .
- Если loading не поддерживается, загрузите запасной вариант (lazysizes) и инициируйте его. Согласно документации по lazysizes, класс lazyload используется как способ указать lazysizes, какие изображения требуют отложенной загрузки.
Вот демонстрация этого паттерна. Запустите его в Firefox или Safari, чтобы увидеть резервный вариант в действии.
Поддерживается ли отложенная загрузка для тега iframe в Chrome? #
Значение <iframe loading=lazy> недавно стандартизировано и уже реализовано в Chromium. Это позволяет настроить отложенную загрузку iframe с помощью атрибута loading . Отдельная статья об отложенной загрузке iframe будет вскоре опубликована на web.dev.
- ширина и высота iframe не более 4 пикселей;
- применяются display: none или visibility: hidden ;
- iframe помещается за пределы экрана с использованием отрицательного позиционирования по оси X или Y.
Если iframe соответствует любому из этих условий, Chrome считает его скрытым и в большинстве случаев не загружает его в отложенном режиме. Не скрытые iframe загружаются только тогда, когда они находятся в пределах порогового расстояния от области просмотра. Для встроенных фреймов, которые всё еще загружаются в режиме отложенной загрузки, отображается плейсхолдер.
Как отложенная загрузка на уровне браузера влияет на рекламу на веб-странице? #
Вся реклама, представленная в виде изображений или встроенных фреймов, также загружается в отложенном режиме.
Как обрабатываются изображения при печати веб-страницы? #
Существует нерешенная проблема, связанная с тем, что при печати страницы Chrome должен незамедлительно загрузить все изображения и встроенные фреймы.
Распознает ли Lighthouse отложенную загрузку на уровне браузера? #
В более ранних версиях Lighthouse по-прежнему подчеркивалось, что для страниц, использующих loading=lazy для изображений, требуется стратегия загрузки закадровых изображений. Lighthouse 6.0 и более новые версии лучше учитывают подходы к отложенной загрузке закадровых изображений, которые могут использовать разные пороговые значения, что позволяет пройти проверку Defer offscreen images (Отложите загрузку закадровых изображений).
Заключение #
Включение поддержки отложенной загрузки изображений может значительно облегчить задачу повышения производительности веб-страниц.
Заметили необычное поведение при включении этой функции в Chrome? Сообщите об ошибке!
Режим Lazy Loading для скрытых изображений с плавным появлением
Одним из требований поисковой системы Google с недавних пор стала ленивая загрузка изображений (Lazy Load), в Google Page Speed так и пишется «Отложите загрузку скрытых изображений». Это когда картинки на сайте подгружаются не сразу, а по мере скроллинга пользователя по странице вниз.
Понятно, что чем меньше картинок загружается при вызове сайта, тем быстрее он загружается и меньше запросов к базе он делает.
Особенно эффект от ленивой загрузки изображений виден на сайтах с десятками и сотнями картинок, но и на 5-7 фотках можно вырвать несколько баллов в гугл пейдж спид.
Установка ленивой загрузки в WordPress
Если ваш шаблон изначально не поддерживает отложенную загрузку изображений, то нужно установить плагин Lazy Loading для скрытых изображений.
A3 Lazy Load
Мне больше всего понравился «A3 Lazy Load»
- Устанавливайте как обычный плагин WordPress (как это сделать за 5 минут).
- В настройках меняется минимум: вместо эффекта спиннер я предпочитаю плавное появление картинок + можно сделать 200px отступа для начала включения Lazy Load.
- Сохраняйте изменения, сбрасывайте кеш (если используется).
Проверяем в Google:
Пишет — Отложите загрузку скрытых изображений
Без ошибки!
BJ Lazy Load
Второй модуль, который также способен быстро сделать ленивую загрузку — BJ Lazy Load.
Настройки там вообще простые, ничего менять обычно не нужно.
Вы наверняка знаете, что я терпеть не могу когда предлагают в обзорах десяток модулей, типа:
«Эй читатель, давай сыграем в игру Установи их все Правила простые: я кину тебе 10 ссылок из гугла, а ты давай устанавливай каждый плагин и сам выбери лучший! И да, потом в комментах напиши, не забудь!».
Я считаю, что автор должен потратить личное время, протестировать и выбрать оптимальный вариант, который он проверил на нескольких проектах и затем уже его предлагать.
Но я включил сюда второй плагин потому что на одном сложном шаблоне только этот модуль нормально обеспечил работу всех картинок в режиме ленивой загрузки, остальные сбоили и либо не грузили фотки (как A3), либо выводили фик пойми что, как тот же Autoptimize.
Однако он не обновлялся уже пару лет, поэтому я рекомендую A3 (у меня на блоге на момент написания статьи работает именно он), если вдруг по каким-то причинам не сработает, то уже установить BJ Lazy Load.
Почему может не работать Lazy Load на сайте
Я наблюдал в своей практике несколько причин:
- Перенавороченный шаблон.
Всякие крутые штуки на Ajax выглядят отлично, но плохо оптимизируются, в том числе с помощью плагинов, призванных отложить загрузку скрытых изображений. - Корявый хостинг.
Редко, но встречается такой «особенный» хостинг, на котором по неизвестным причинам не работают некоторые плагины, например, из-за особенностей сборки PHP конкретной версии. Можно попробовать поменять версию php в панели хостинга или просто сменить хостера (список проверенных хостеров есть тут).
Успехов в бизнесе!
Полезные цитаты: Богатые люди покупают предметы роскоши в последнюю очередь, в то время, как бедные и средний класс стремятся приобретать их в первую очередь.