Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов и loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных. 
Если вам не терпится узнать о том, как использование нового атрибута выглядит в коде, то взгляните на этот пример:
Сейчас мы поговорим о том, как будет работать атрибут loading.
Предварительные сведения
Веб-страницы часто включают в себя множество изображений, что влияет на размер страниц, приводит к его чрезмерному увеличению, и влияет на скорость загрузки страниц. Многие из изображений, выводимых на страницах, находятся за пределами их видимой области. Для того чтобы увидеть подобные изображения, пользователю нужно прокрутить страницу.
Исторически сложилось так, что для того чтобы ограничить воздействие на время загрузки страниц изображений, расположенных за пределами видимой области страниц, программистам приходилось использовать JavaScript-библиотеки (вроде LazySizes).
Эти библиотеки позволяют отложить загрузку подобных изображений до того момента, когда пользователь, прокручивая страницу, не подберётся к ним достаточно близко.
Страница, загружающая 211 изображений. Версия страницы, при создании которой ленивая загрузка изображений не используется, сразу загружает 10 Мб графических данных. Та же страница, использующая ленивую загрузку (с помощью LazySizes) предварительно загружает лишь 250 Кб графической информации. Всё остальное подгружается по мере продвижения пользователя по странице. Подробности об этом эксперименте можно посмотреть на webpagetest.org.
Что если бы браузер мог бы помочь программисту избежать загрузки изображений, которые находятся за пределами видимой области страниц? Это благотворно сказалось бы на скорости загрузки данных в видимой области страницы, снизило бы, на маломощных устройствах, общий объём передаваемых по сети данных, уменьшило бы потребление памяти. Скоро всё это будет возможно благодаря новому атрибуту элементов и loading.
Атрибут loading
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов и , находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам.
Этот атрибут поддерживает три значения:
- lazy: указывает на материалы, которые являются хорошими кандидатами на ленивую загрузку.
- eager: материалы в элементах с таким значением атрибута нужно загрузить без промедления.
- auto: браузер самостоятельно примет решение о том, применять ли к материалам с этим значением атрибута ленивую загрузку.
Если значение атрибута loading не указывать — это будет равносильно установке его в значение auto. 
В настоящее время работа над атрибутом loading для элементов и ведётся в рамках стандарта HTML
Примеры
Атрибут loading работает с элементами (в том числе с атрибутом srcset и внутри элемента ), а также с элементами .
jpg” loading=”auto” alt=”..”/>
html” loading=”lazy”> Надо отметить, что мы используем тут формулировки наподобие следующей: «когда пользователь прокрутит страницу так, что её видимая область окажется поблизости от элемента». Точный момент начала загрузки изображения браузер определяет самостоятельно.
В целом мы можем надеяться на то, что браузер начнёт загрузку материалов, загрузка которых была отложена, за некоторое время до того, как область страницы, содержащая их, окажется видимой пользователю.
Это увеличит шансы того, что загрузка и вывод соответствующих материалов завершатся к тому моменту, когда пользователь их увидит.
Обратите внимание на то, что я предложил, чтобы атрибут, о котором идёт речь, назвали бы именно loading, так как такой подход к его именованию соответствует тому, что использовался при выборе имени для атрибута decoding. Предыдущие предложения, наподобие lazyload, не подошли, так как нужно было, чтобы этот атрибут поддерживал бы несколько значений (lazy, eager и auto).
Проверка поддержки атрибута loading браузерами
Мы принимали во внимание важность возможности применения JavaScript-библиотек для организации ленивой загрузки материалов (для кросс-браузерной поддержки этой возможности).
Проверить, поддерживает ли браузер атрибут loading, можно так: Обратите внимание на то, что атрибут loading можно использовать для прогрессивного расширения возможностей страницы.
Браузеры, которые поддерживают этот атрибут, смогут организовать ленивую загрузку материалов при использовании loading=lazy, а браузеры, которые эту возможность не поддерживают, будут просто, как и прежде, загружать эти материалы.
Кросс-браузерная ленивая загрузка изображения
Если важна кросс-браузерная поддержка ленивой загрузки изображений, тогда недостаточно просто определить то, поддерживает ли браузер эту возможность, и, если это не так, воспользоваться соответствующей библиотекой, если при описании изображения в разметке используется конструкция наподобие .
В разметке нужно использовать что-то наподобие (а не src, srcset или ) для того чтобы избежать срабатывания обычной загрузки изображения браузерами, которые не поддерживают новый атрибут. Для того чтобы менять подобные атрибуты на те, которые нужно использовать при поддержке браузером атрибута loading, или для загрузки соответствующей библиотеки в том случае, если этот атрибут не поддерживается, можно использовать возможности JavaScript.
Вот пример того, как это может выглядеть:
Рассмотрим некоторые особенности этого кода:
- Изображения, которые видны пользователю сразу после загрузки страницы, описаны с помощью обычных тегов . Использование атрибута 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 основана не только на том, насколько близко видимая область страницы находится к этим материалам, но и на скорости соединения.
Пороговые значения срабатывания ленивой загрузки материалов для разных скоростей соединения жёстко заданы в коде, но эти значения можно переопределить средствами командной строки.
Вот пример переопределения настроек для изображений: canary –user-data-dir=”$(mktemp -d)” –enable-features=LazyImageLoading –blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy' Вышеприведённая команда соответствует текущим настройкам, применяемым по умолчанию. Для того чтобы загрузка изображений начиналась бы в том случае, если позиция прокрутки страницы находится на расстоянии в 400 пикселей от изображения, все значения в этой команде нужно поменять на 400. Ниже приведён пример 1-пиксельной вариации этой команды (такая настройка используется в вышеупомянутом видео). canary –user-data-dir=”$(mktemp -d)” –enable-features=LazyImageLoading –blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy' Весьма вероятно то, что стандартная конфигурация ленивой загрузки в Chrome изменится по мере стабилизации реализации этой возможности в ближайшие недели.
Инструменты разработчика
Особенности реализации поддержки атрибута loading в Chrome заключаются в том, что браузер, при загрузке страницы, запрашивает первые 2 Кб изображений у сервера в том случае, если он поддерживает технологию range request (запрос на диапазон). В первых 2 Кб изображений, наверняка, содержатся сведения об их размерах.
Это позволяет браузеру генерировать местозаполнители, имеющие размеры, соответствующие размерам изображений. Кроме того, в эти 2Кб, если речь идёт о небольших изображениях вроде значков, весьма вероятно, входит всё изображение. 
Загрузка фрагментов графических файлов Chrome загружает оставшиеся данные изображений в тот момент, когда пользователь близок к тому, чтобы их увидеть. При работе с инструментами разработчика это может привести к тому, что в панели Network может «появиться» информация о двух загрузках изображения, а в панели Resource Timing будут выведены сведения о двух запросах, выполняемых для загрузки каждого изображения.
Определение сервером поддержки браузером атрибута loading
Если бы мы жили в совершенном мире, то для того чтобы узнать о том, нужно ли, для правильного вывода страницы в некоем браузере, использовать вспомогательную библиотеку, можно было бы не полагаться на анализ браузера средствами клиентского JavaScript.
При таком подходе сервер, заранее зная, нужна такая библиотека или нет, включил бы (или не включил бы) её в состав страницы, отправляемой браузеру. Подобную проверку может сделать возможной использование технологии HTTP Client Hint, благодаря которой клиент способен передавать серверу «подсказки» о своих возможностях.
Соответствующая «подсказка», касающаяся поддержки атрибута loading, находится сейчас на ранней стадии рассмотрения.
Итоги
Автор этого материала предлагает всем, кто заинтересован в использовании атрибута loading при работе с элементами и , опробовать его, и поделиться с ним впечатлениями.
Особенно ему интересно узнать о том, как, с точки зрения разработчиков, выглядят предложенные здесь механизмы кросс-браузерной поддержки ленивой загрузки данных, и о том, не упустил ли он, рассказывая о таких механизмах, какие-то пограничные случаи.
Уважаемые читатели! Планируете ли вы использовать атрибут loading в своих проектах?
Как настроить отложенную загрузку картинок: 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
Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.
Как ПС относятся к отложенной загрузке
Отложенная загрузка изображений. 5 техник ленивой загрузки
От автора: изображения составляют целых 65% всего веб-контента, и время загрузки сайта легко может стать проблемой. Даже при правильной оптимизации изображения могут быть увесистыми. Это может отрицательно сказаться на времени, которое люди будут тратить на ожидание, чтобы получить доступ к чему-либо.
Скорее всего, посетители не вытерпят и уйдут куда-то в другое место, если вы не придумаете решение для загрузки изображений таким образом, чтобы не мешать восприятию скорости.
В этой статье вы познакомитесь с 5 техниками ленивой загрузки, которые сможете добавить в свой набор инструментов для оптимизации пользовательского опыта на сайте.
Что такое ленивая загрузка?
При ленивой загрузке изображения на сайте загружаются асинхронно, т.е. после полной загрузки видимой части страницы или вообще по условию только при появлении во вьюпорте. Это значит, что если пользователь не долистает страницу до конца, изображения в нижней части вообще не загрузятся.
Данный подход используется на некоторых сайтах, но особенно заметен на сайтах с большим количеством изображений. Зайдите на любимую онлайн-площадку фотографий в высоком разрешении, и вы сразу же поймете, как сайт загружает ограниченное количество изображений.
По мере прокрутки вниз будет видно, как плейсхолдеры быстро заменяются на реальные изображения. Например, обратите внимание на загрузчик на сайте Unsplash.
com: прокрутка этой части страницы в видимую часть экрана вызывает замену плейсхолдера фотографией высокого разрешения:
Зачем вообще думать о ленивой загрузке изображений?
Есть, как минимум, две замечательные причины, почему стоит подумать об использовании ленивой загрузки изображений на вашем сайте:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Если ваш сайт отображает контент или дает пользователям какой-либо функционал с помощью JS, то загрузка DOM имеет решающее значение. Обычно скрипты ждут полной загрузки DOM перед выполнением. На сайте с большим количеством изображений ленивая загрузка (асинхронная загрузка) может стать решающим фактором того, останется ли пользователь или покинет сайт.
Большинство решений по ленивой загрузке загружают изображения только, если пользователь прокрутил страницу до того места, где оно попадает во вьюпорт.
Если пользователь никогда не докрутит страницу до этой точки, изображения не будут загружены.
Это значительно экономит трафик, за что большинство пользователей, особенно пользователи мобильных устройств и пользователи на слабых соединениях, скажут вам спасибо.
Итак, ленивая загрузка изображений улучшает производительность сайта, но как лучше всего это сделать?
Идеального способа не существует. Если вам нравится JS, то для вас не составит труда написать свой собственный скрипт по ленивой загрузке. Или же можно найти в сети подходящие решения и поэкспериментировать с ними. Я сделал именно так и нашел эти пять интересных техник.
№1 Простая ленивая загрузка и появление от David Walsh
David Walsh предложил свой скрипт для ленивой загрузки изображений. Упрощенная версия:
Атрибут src в теге img заменяется на data-src:
В CSS элементы img с атрибутом data-src скрыты. После загрузки изображения плавно появляются с помощью переходов:
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
| transition: opacity 0.3s; |
Далее JS добавляет атрибут src ко всем img и дает значение соответствующего атрибута data-src. Как только все изображения загрузились, скрипт удаляет атрибут data-src из тегов img:
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
| [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); |
David Walsh также предлагает фолбек на случай, когда JS не сработал. Фолбек можно посмотреть в его блоге. Плюс этого решения: легко реализовывается и эффективное.
С другой стороны, этот метод не включает в себя функционал загрузки по прокрутке страницы. Другими словами, браузер загружает все изображения, независимо от того, прокрутил пользователь страницу или нет. Страница загружается быстрее, так как изображения загружаются после HTML. Тем не менее, вы не экономите трафик.
№2 Ленивая загрузка с прогрессивным улучшением от Robin Osborne
Robin Osborne предлагает супер гениальное решение на основе прогрессивного улучшения. В его методе ленивая загрузка на JS считается улучшением для обычного HTML и CSS.
Почему именно прогрессивное улучшение? Если вы будете показывать изображения с помощью JS, что будет, если JS отключить, или если возникнет ошибка, которая заблокирует выполнение скрипта? В таком случае без прогрессивного улучшения пользователи вообще не увидят изображений. Не очень хорошо.
Более подробно с решением Osborne можно ознакомиться в Pen. Есть еще один расширенный Pen, где учтен случай поломки JS.
У этой техники ряд преимуществ:
Техника прогрессивного улучшения гарантирует пользователям доступ к контенту.
Метод подходит не только под ситуации с недоступным JS, но и под ситуации, когда JS сломан: все мы знаем, как могут быть подвержены ошибкам скрипты, особенно в среде с большим количеством запущенных скриптов.
Работает ленивая загрузка изображений по прокрутке. Если пользователь не прокрутит страницу до нужного места, изображения не загрузятся.
Метод не опирается на внешние зависимости, т.е. не нужны фреймворки и плагины.
Более подробно с подходом Robin Osborne можно ознакомиться в его блоге.
№3 Lazy Load XT jQuery плагин
Быстрая и простая альтернатива написанию собственной ленивой загрузки — JavaScript/jQuery плагин, который сделает всю самую сложную работу за вас.
Lazy Load XT – многофункциональный jQuery плагин. Можно скачать упрощенную версию jquery.lazyloadxt.js, в которой доступна только ленивая загрузка. Или же можно использовать расширенную версию плагина jquery.lazyloadxt.extra.js. В расширенной версии с помощью ленивой загрузки можно загружать iframe, видео и все теги с атрибутом src.
Чтобы подключить Lazy Load XT в проект, добавьте jQuery-библиотеку перед закрывающим тегом
Lazy Load для изображений на сайте — полное руководство
Для каждого современного сайта и приложения изображения имеют важное значение. Будь то рекламные баннеры, изображения продуктов или логотипы, невозможно представить сайт без изображений. К сожалению, картинки имеют большой размер, что делает их крупнейшими файлами при загрузке страницы. Согласно последним данным HTTP Archive , средний размер страницы сайта на десктопном компьютере составляет 1511 КБ. Изображения составляют почти 650 КБ от этого размера, то есть примерно 45% от общего размера страницы. Поскольку мы не можем отказаться от использования изображений на сайте, нам нужно заставить страницы с ними загружаться очень быстро. В этом руководстве мы поговорим об отложенной загрузке изображений — lazy load, технике, которая помогает сократить время загрузки страницы и уменьшить ее размер, сохраняя при этом все изображения на странице.
Что дает Lazy Load?Видео ниже демонстрирует работу отложенной загрузки изображений на странице. Обратите внимание, что при прокрутке страницы серый заполнитель заменяется реальным изображением.
Что такое Lazy Load — отложенная загрузка изображений?
Отложенная загрузка изображений относится к набору методов в веб-разработке и разработке приложений, которые откладывают загрузку изображений на странице на более поздний момент времени — когда эти изображения действительно нужны, вместо их предварительной загрузки. Эти методы помогают повысить производительность, оптимизировать использование ресурсов устройства и снизить связанные с этим расходы.
Аналогичным образом, отложенная загрузка откладывает загрузку ресурсов на странице сайта, если они не нужны. Вместо того, чтобы загружать их сразу после загрузки страницы, мы переносим загрузку этих ресурсов на более позднее время, когда они действительно необходимы.
Техника отложенной загрузки может применяться практически ко всем ресурсам на странице. Например, в одностраничном приложении, если файл JS пока не нужен, лучше не загружать его сразу. Если изображение не нужно заранее, можно загрузить его позже, когда оно действительно понадобится.
Зачем откладывать загрузку картинок?
Lazy Load откладывает загрузку изображения, которое пока не нужно на странице. Изображение, которое не видно пользователю при загрузке страницы, загружается позже, когда пользователь прокручивает, и изображение становится видимым. Если пользователь никогда не выполняет прокрутку, изображение, которое не видно пользователю, никогда не загружается.
Это дает два основных преимущества.
- 1. Оптимизация производительности
Самый важный эффект — лучшая производительность и время загрузки. При отложенной загрузке уменьшается количество изображений, которые необходимо загрузить на страницу изначально. Это гарантирует, что устройство сможет загружать и обрабатывать оставшиеся ресурсы намного быстрее. Также страница становится доступной для взаимодействия намного раньше.
Второе преимущество — это стоимость загрузки. Как упоминалось ранее, при отложенной загрузке, если изображение не видно, оно никогда не загружается.
Таким образом, вы уменьшаете общее количество байт, доставляемых на страницу. Особенно для пользователей, которые отключаются от страницы или взаимодействуют только с верхней частью страницы.
Это сокращает трафик, передаваемый с вашей CDN или сервера, и снижение затрат на доставку.
Загрузка каких изображений может быть отложена?
Основная идея отложенной загрузки довольно проста — отложите загрузку всего, что сейчас не нужно. Любое изображение, которое не видно пользователю, может быть загружено потом. Когда пользователь прокручивает страницу, заполнители появляются в области просмотра (видимая часть веб-страницы). И когда эти изображения становятся видимыми, запускается их загрузка .
Детальное описание техники ленивой загрузки изображений (Lazy Load)
Ленивая (или отложенная) загрузка картинок – это популярный метод асинхронного обращения к адресу изображения, по мере необходимости его загрузки, а не сразу после того, как HTML страницы был проанализирован браузером. Вы, скорее всего, уже видели эту реализацию в действии, поскольку этот метод используется на многих популярных сайтах.
Сегодня невозможно представить себе Интернет без картинок и видео. Мы все привыкли к этому. Плюс, если на странице сайта нет каких-то графических элементов, нам тяжелее будет уловить смысл послания, которое заложено в этой странице. А один только текст нагоняет тоску.
Обратной стороной медали является то, что графические элементы и медиа-данные (картинки, видео, аудио) – это очень «тяжелые» файлы, которые замедляют скорость загрузки страницы.
Выходит, что нам всем нужны картинки, но мы должны заботиться и о скорости загрузки сайта, на котором эти картинки размещаются.
В сегодняшнем практическом руководстве мы рассмотрим все основные моменты Lazy Load загрузки изображений (техника «ленивой» или отложенной загрузки).
Этот метод позволяет сократить время загрузки страницы сайта, откладывая загрузку изображений до того момента, когда они будут нужны.
Сегодня мы рассмотрим следующие пункты:
- Что такое ленивая загрузка (Lazy Load) изображений и как она работает?
- Теория реализации отложенной загрузки
- Практические примеры достижения отложенной загрузки:
- с помощью событий JavaScript
- с помощью API Intersection Observer
- Зависимость отложенной загрузки от JavaScript
- Популярные JavaScript библиотеки для ленивой загрузки
- Как протестировать отложенную загрузку?
Вот что мы будем сегодня реализовывать:
Что такое ленивая загрузка (Lazy Load) изображений и как она работает?
Вместо того, чтобы загружать все изображения одновременно, Lazy Load загрузка загружает только те изображения, которые видны на экране пользователя. А все другие изображения заменяются заполнителем (например, цветовой заливкой или размытой копией изображения низкого качества).
Когда пользователь прокручивает страницу вниз, сайт загружает изображения, которые в данный момент видны в области просмотра браузера.
Слово «ленивый» у нас ассоциируется с человеком, который как можно дольше избегает работы, или у которого явное желание вообще ничего не делать.
В данном же контексте речь идет о том, что ленивая загрузка откладывает загрузку ресурсов на странице до тех пор, пока они не нужны. Вместо того, чтобы загружать все картинки на странице сразу, мы разрешаем им загружаться позже, когда эти ресурсы действительно будут нужны. Поэтому, данная техника называется ленивой или отложенной загрузкой (Lazy Load).
Техника отложенной загрузки может применяться не только к картинкам, но и практически к любым ресурсам на странице. Это могут быть JavaScript файлы, видео, iframe и даже текст.
Эффективность техники ленивой загрузки
Если посетитель вашего сайта не прокручивает страницу до большой картинки, например, в футере, соответственно он ее не увидит, а значит и загружать ее не нужно. Здесь можно добиться двух позитивных моментов: увеличения скорости загрузки сайта и снижения нагрузки на сервер.
Если мы не загружаем картинки на странице, соответственно эта страница будет загружаться быстрее. Поскольку браузер не будет загружать эти картинки с сервера, сайт будет рендериться (визуализироваться) быстрее. Также это гарантирует, что на сервер будет меньшая нагрузка.
Теория реализации отложенной загрузки
Типичная HTML-разметка для изображения выглядит так:
Браузер использует атрибут src тега img, чтобы найти адрес хранения изображения и начать его загрузку. Когда браузер получает атрибут src, он запускает одновременную загрузку всех изображений на странице. И неважно, сколько картинок вы разместили на странице: одну или тысячу.
Соответственно, первая задача для достижения отложенной загрузки – это предотвратить загрузку изображений. Чтобы отложить загрузку, нужно поместить URL-адрес изображения в атрибут, который отличается от src. Допустим, если для этих целей мы будем использовать атрибут data-src, тогда код будет выглядеть так:
Теперь, когда атрибут src пустой, браузер не будет запускать загрузку изображения.
После этого нам нужно сообщить браузеру, когда нужно запускать загрузку. В противном случае этого никогда не случится. Мы проверяем вхождение изображения (т.е., его заполнителя) в область просмотра (видимую часть экрана), после чего запускаем загрузку.
Есть два способа проверить, когда изображение попадает в видимую часть экрана. Давайте рассмотрим эти способы на практике, с примерами рабочего кода.
Практические примеры достижения отложенной загрузки
Рассмотрим практические примеры достижения отложенной загрузки для изображений.
Способ №1: Отложенная загрузка изображения с помощью событий JavaScript
Этот метод использует слушатели событий в браузере для событий scroll, resize и directionChange.
Событие прокрутки (scroll) является довольно эффективным, поскольку оно отслеживает, где пользователь находится на странице, когда происходит прокрутка.
События resize (изменение размера окна браузера) и directionChange (поворот устройства из альбомного в портретное, и наоборот) также довольно эффективны.
Мы можем использовать эти три события, чтобы распознать изменения на экране и определить количество изображений, которые становятся видимыми на экране, и соответственно инициировать их загрузку.
Когда происходит любое из этих событий, мы находим все изображения на странице, которые не были загружены (были отложены), и на основе этих изображений мы проверяем, какие из них в настоящее время находятся в области просмотра. Это делается с использованием верхнего смещения изображения, текущей верхней позиции документа и высоты окна.
Если изображение вошло в область просмотра, мы выбираем URL из атрибута data-src и перемещаем его в атрибут src, в результате чего изображение загружается.
Обратите внимание, что с помощью JavaScript мы выбираем только те изображения, которые содержат класс lazy. Как только изображение загрузится, мы удалим этот класс, поскольку здесь больше не нужно вызывать событие. И, как только все изображения будут загружены, мы также удалим слушатели событий.
Когда мы пролистываем страницу, событие прокрутки срабатывает несколько раз и быстро. Таким образом, нужно добавить небольшой тайм-аут в скрипт, который будет ограничивать выполнение отложенной загрузки, чтобы она не блокировала другие задачи, которые выполняются в том же потоке.
Вот рабочий пример этого подхода:
Обратите внимание, что первое изображение в данном примере загружается без отложенной загрузки. Поскольку это изображение находится в самой верхней части страницы, его следует сделать видимым как можно скорее. Поэтому, не стоит загружать его с помощью JavaScript.
Способ №2: Отложенная загрузка изображения с помощью API Intersection Observer
Intersection Observer API появился относительно недавно. Этот программный интерфейс приложения упрощает процесс обнаружения момента, когда элемент появляется в области просмотра, и упрощает выполнение действия, когда это событие происходит.
В предыдущем методе нам приходилось связывать события, помнить о производительности и реализовывать способ вычисления, находился ли элемент в области просмотра или нет.
API Intersection Observer не имеет недостатков предыдущего способа, а также снабжен отличной производительностью.
Ниже приведен рабочий пример использования API для отложенной загрузки изображений.
Здесь мы прикрепляем наблюдатель ко всем изображениям, которые нужно загружать «лениво».
Как только API обнаруживает, что элемент вошел в область просмотра, используя свойство isIntersecting, мы извлекаем URL из атрибута data-src и перемещаем его в атрибут src, чтобы инициировать загрузку изображения в браузере. После этого мы удаляем у изображения класс lazy, а также удаляем наблюдателя для этого изображения.
Важно! Учтите, что поддержка API Intersection Observer доступна не во всех браузерах.
Зависимость отложенной загрузки от JavaScript
Реализация отложенной загрузки изображений на сайте зависит от того, включен ли JavaScript и доступен ли он в браузере пользователя. Хотя у большинства пользователей JavaScript включен, важно учесть случаи, когда это не так. Вы можете показать сообщение, объясняющее, почему изображения не загружаются, и предложить им либо использовать современный браузер, либо включить JavaScript.
Популярные JavaScript библиотеки для ленивой загрузки
Поскольку среда разработки и детали реализации могут различаться в разных браузерах и на разных устройствах, вы можете использовать проверенные JavaScript библиотеки для отложенной загрузки, а не создавать что-либо с нуля для этого.
Рассмотрим лучшие и популярные скрипты, которые используются для отложенной загрузки, и которые позволят сделать это с минимальными усилиями. А многие из них делают отложенную загрузку не только картинок, но и видео, объектов iframe, простого текста и других элементов.
(библиотеки представлены в алфавитном порядке)
- BLazy.js
- Echo.js
- lazySizes
- jQuery Lazy
- jQuery Lazy Load XT
- yall.js (Yet Another Lazy Loader)
Как протестировать отложенную загрузку?
После того, как вы внедрили отложенную загрузку, вы, вероятно, захотите убедиться, что она работает так, как задумано. Самый простой способ – открыть инструменты разработчика в вашем браузере (нажмите F5 или Ctrl+Shift+I).
Оттуда перейдите в Сеть > Изображения (Network > Images). Обновите страницу и вы должны увидеть только загруженные изображения в этом списке.
Затем, когда вы начнете прокручивать страницу вниз, сработают другие запросы и будут загружены остальные картинки.
Статья по теме: Как сделать отложенную загрузку для HTML, iframe и встроенного видео
Подведение итогов
Сегодня мы рассмотрели много вопросов, которые касаются ленивой загрузки картинок. Ленивая (или отложенная) загрузка, если она реализована правильно, может значительно повысить производительность вашего сайта, увеличить скорость загрузки страницы, а также снизить нагрузку на сервер.
Поскольку изображения являются основным фактором, влияющим на время загрузки веб-страниц, ленивая загрузка изображений – это подход, который вы можете эффективно использовать на своем сайте.
Надеемся, что сегодняшняя информация была для вас практически полезной и нужной. Спасибо, что читаете нас!
Lazy loading – Web Performance | MDN
Lazy loading (ленивая загрузка) – это стратегия, направленная на определение ресурсов как неблокирующих (не критических) для того, чтобы отложить загрузку этих ресурсов на тот момент, когда они действительно необходимы. Так можно сократить длину критических этапов рендеринга, что приводит к уменьшению времени загрузки приложения.
Ленивая загрузка может происходить в разные моменты работы приложения, но, как правило, она запускается во время взаимодействия пользователя и системы, например, при скроллинге или навигации.
Вместе с ростом web-приложений драматически вырос объем и размеры ресурсов, отправляемых клиентскому приложению.
С 2011 по 2019 медианный рост размеров ресурсов вырос с ~100KB до ~400KB для настольных компьютеров и с ~50KB до ~350KB для мобильных.
А размер изображений вырос с ~250KB до ~900KB для настольных компьютеров и со ~100KB до ~850KB для мобильных.
Очевидно, что такое повышение объёмов способствует увеличению длительности загрузки приложения. Один из способов её сократить – это отложить загрузку ресурсов, которые не являются критически важными для приложения.
Например, вы посещаете приложение интернет-магазина, которое состоит из списка товаров и корзины.
Очевидно, что вам не нужны изображения товаров, которые сейчас находится за пределами экрана; очевидно так же, что вам не нужно грузить все данные о содержимом корзины до тех пор, пока пользователь не перешёл к ней.
Ленивая загрузка (Lazy loading) может применяться к разным ресурсам и разными подходами.
Разделение кода (code splitting) JavaScript, CSS и HTML могут быть разделены на небольшие части, называемые чанками (chunks).
При первоначальной загрузке приложения вы можете отправлять не цельное приложение, а только необходимые части, например, только каркас разметки.
Данные для заполнения этого каркаса могут быть подгружены позже, например, с помощью AJAX. Есть два вида разделения кода:
- Разделение по точкам входа (entrypoint)
- Динамическое (dynamic import())
Указание типа “module” Любой тег скрипта с type=”module” рассматривается как JavaScript module, а его загрузка откладывается по умолчанию.
По умолчанию CSS считается ресурсом, блокирующим рендеринг (render blocking). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (CSSOM).
Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно.
Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.
Также в целях ускорения CSS можно применять оптимизации (CSS optimizations).
По умолчанию, загрузка шрифтов откладывается на тот момент, пока дерево рендера (render tree) не сформировано полностью. Это приводит к тому, что текст страницы может появиться не сразу.
- Вы можете переопределить такое поведение и загрузить шрифты заранее, используя , CSS font-display свойство или Font Loading API.
Загрузка...
