Как отложить загрузку скрытых изображений

Отложенная загрузка изображений в WordPress

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

Обновлено: 2023-06-07 19:28:28 Ангелина Писанюк автор материала

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

Отложенная загрузка – это способ увеличения скорости отображения страницы путем отложенной загрузки некритичных ресурсов, которые расположены ниже видимой области окна браузера. К таким ресурсам относятся изображения, которые мы пока не видим.

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

При ленивой загрузке ресурсы не загружаются, пока они не нужны. А если пользователь не прокрутит веб-страницу до конца, то они не будут отображаться на странице вообще.

Почему отложенная загрузка лучше?

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

При этом браузер сперва создает DOM, чтобы пользователь мог начать взаимодействовать с сайтом, даже если веб-страница еще не загружена целиком.

При ленивой загрузке файлы изображений и веб-страница не уменьшаются. Если «вес» страницы составляет 3 МБ, то такой она и останется с ленивой загрузкой или без нее.

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

Перед использованием отложенной загрузки с помощью Smush Pro

Я создал веб-страницу с несколькими огромными изображениями. Затем провел аудит своего тестового сайта в Google PageSpeed ​​Insights. Его показатель увеличился с 89 до 91 после того, что я добавил ленивую загрузку в Smush Pro.

После активации отложенной загрузки с помощью Smush Pro

А еще ленивая загрузка уменьшает объем передаваемых данных. Посетители с медленным интернет-соединением буду вам благодарны за это.

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

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

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

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

Запретите обычную загрузку изображений

При использовании ленивой загрузки на сайте необходимо предотвратить загрузку обычным способом. Один из способов сделать это для тегов состоит в удалении URL-адреса изображения из атрибута src и перемещении этого адреса в атрибут data-src для временного хранения.

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

Нужно определить, как браузер будет находить изображения в области просмотра. Для этого можно использовать обработчик событий Javascript или API-интерфейс Intersection Observer.

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

Использование обработчиков событий JavaScript scroll, resize и orientationchange ‒ это идеальный способ определить, достиг ли элемент области просмотра. Так как этот подход совместим со всеми браузерами. Но также нужно реализовать идентификацию видимости элемента с помощью getBoundingClientRect. Это может вызвать небольшую задержку при рендеринге изображений. Пример можно увидеть здесь.

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

Intersection Observer API ‒ самый эффективный способ для браузеров определять, когда изображение попало в область просмотра. Данный подход работает быстрее, чем использование обработчиков событий. Для его реализации зарегистрируйте наблюдатель, чтобы просмотреть элементы и установить действие браузера, когда изображение попадет в область окна просмотра.

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

Переместите URL-адрес изображения в атрибут src

Как только браузер обнаружит, что изображение появилось, ему необходимо будет вставить URL-адрес в атрибут src или srcset для загрузки и отображения рисунка. После этого нужно удалить классы, добавленные к изображению, чтобы помочь Javascript его идентифицировать. Затем удалить наблюдатель.

Как использовать отложенную загрузку в WordPress

Можно добавить ленивую загрузку на WordPress- сайт с помощью плагинов или Javascript. Оба варианта дают схожие результаты.

Вариант 1. Использование JavaScript для отложенной загрузки скрытых изображений в WordPress

Лучший способ сделать это ‒ создать плагин для вашего JavaScript кода. На этой странице есть два примера. Один показывает, как использовать обработчики событий, а другой – как применять API-интерфейс Intersection Observer.

Вариант 2. Использование JavaScript-библиотеки ленивой загрузки

Если вы хотите использовать JavaScript- библиотеку, есть много вариантов:

• react-lazyload – библиотека отложенной загрузки React, не использует Intersection Observer.
• js – использует только Intersection Observer, суперлегкая.
• blazy – тоже легкая, но не использует Intersection Observer.
• js – использует Intersection Observer и обработчики событий.
• lazysizes – подходит для ленивой загрузки видео и фреймов.

Также можно использовать jQuery, так как эта библиотека уже содержится в ядре ​​WordPress.

Вариант 3. Использование плагина отложенной загрузки

Самый простой способ добавить ленивую загрузку на свой сайт – это использовать специализированный WordPress- плагин. Большинство платных плагинов для оптимизации изображений (например, Smush Pro) имеют встроенный функционал ленивой загрузки. Также мы добавили ее в бесплатную версию Smush, размещенную на WordPress.org.

Мы сделали процесс активации ленивой загрузки в плагине Smush предельно простым. Все, что нужно сделать, это перейти в раздел « Ленивая загрузка » плагина Smush Pro и нажать кнопку « Активировать ».

Установите Smush Pro и активируйте ленивую загрузку меньше, чем за две минуты

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

• Ленивая загрузка не добавляет сайту лишнего веса. Но при неправильной реализации она может мешать поисковым системам сканировать сайт.
• Имейте ввиду, что линия сгиба веб-страницы меняется в зависимости от пользовательского устройства.
• Используйте атрибут placeholder вместо того, чтобы оставлять атрибут src пустым. И укажите высоту и ширину изображения, чтобы контент не сдвигался при его загрузке.
• Используйте разметку для указания действия, которое должно произойти, если у посетителя отключен JavaScript.

Заключение

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

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

А вы уже использовали ленивую загрузку на своем сайте? Это повысило показатели сайта в Google Pagespeed Insights?

5 приёмов ленивой загрузки изображений

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

Что такое Lazy Loading (ленивая загрузка)?

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

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

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

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

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

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

Вряд ли существует идеальный вариант.

Если вы живете и дышите JavaScript, реализация собственного lazy load решения не должна быть проблемой. Ничто не даёт вам больше контроля, чем кодирование чего-либо самостоятельно. Кроме того, вы можете просматривать веб-страницы для поиска подходящих подходов и поэкспериментировать с ними.

№1 Нативный lazy load

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

Как видите, нет JavaScript, нет динамической подмены значения атрибута src , просто “старый, тёплый, ламповый” HTML.

Атрибут loading даёт возможность задерживать скрытые за пределами окна изображения и фреймы, пока пользователь не прокрутит страницу до них. loading может принимать любое из этих трёх значений:

• lazy : отличный вариант для ленивой загрузки
• eager : указывает браузеру не ждать и загружать контент сразу
• auto : оставляет опцию включения отложенной загрузки на усмотрение браузера

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

№2 Ленивая загрузка с использованием API Intersection Observer

Intersection Observer API – это современный интерфейс, который вы можете использовать для отложенной загрузки изображений и другого контента. Вот как MDN представляет этот API:

Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport.

Тут всё понятно: асинхронно отслеживается пересечение одного элемента с другим. Допустим, вы хотите лениво загрузить галерею изображений. Разметка для каждого изображения будет выглядеть так:

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

В CSS вы указываете каждому изображению значение минимальной высоты, скажем, 100px . Это резервирует место каждому изображению (элемент img без атрибута src ):

В JavaScript вы добавляете объект с конфигурацией и регистрируете его в экземпляре intersectionObserver :

// конфиг: rootMargin и порог срабатывания // два свойства, представленные интерфейсом const config = < rootMargin: '0px 0px 50px 0px', threshold: 0 >; // регистрируем config с экземпляром // intersectionObserver let observer = new intersectionObserver(function(entries, self) < // перебираем записи entries.forEach(entry => < // обрабатывать только изображения, которые пересекают // isIntersecting - это свойство предоставляется интерфейсом if(entry.isIntersecting) < // функция, которая копирует путь к IMG // из data-src в src preloadImage(entry.target); // изображение теперь на месте, прекращаем наблюдение self.unobserve(entry.target); >>); >, config);

Затем, надо перебрать все изображения и добавить их в этот экземпляр iterationObserver:

const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => < observer.observe(img); >);

Преимущества этого решения: его легко внедрить, оно эффективно и перекладывает выполнение тяжелых вычислений на API intersectionObserver.

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

Вы можете узнать больше об API Intersection Observer и подробностях реализации в этой статье.

№3 Lozad.js

Быстрая и простая альтернатива реализации для ленивой загрузки изображений – позволить выполнить большую часть работы готовой JS-библиотеке.

Lozad.js – это высокопроизводительный, легкий и настраиваемый ленивый загрузчик на чистом JavaScript и без каких-либо зависимостей. Его можно использовать для отложенной загрузки изображений, видео, iframe и т.д. И он использует API Intersection Observer.

Lozad.js можно подключить с помощью npm/yarn:

npm install --save lozad // или yarn add lozad

и импортировать его:

import lozad from 'lozad';

Кроме того, вы можете просто загрузить библиотеку с помощью CDN и добавить ее в конец HTML-страницы в теге :

Далее, для базовой реализации, добавьте css-класс lozad html-элементам в разметке:

Наконец, в JS создайте экземпляр Lozad:

const observer = lozad(); observer.observe();

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

Только следует помнить о поддержке маргинальных браузеров, для API Intersection Observer всё еще требуется polyfill.

№4 Отложенная загрузка с эффектом размытия

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

Лениво загружать изображения с этим интересным эффектом размытия можно несколькими способами. Вот один из них:

• Небольшой объём: всего 463 байта CSS и 1 007 байтов минимизированного JS
• Поддержка ретины
• Нет зависимостей: не использует jQuery или другие библиотеки и фреймворки

№5 Yall.js

Yall.js – это многофункциональный скрипт для ленивой загрузки изображений, видео и iframe. Он использует Intersection Observer API и, при необходимости, использует интеллектуальные методы обработки событий.

Для использования Yall его нужно инициализировать так:

Затем, для ленивой загрузки элемента img , нужно написать в разметке:

На что следует обратить внимание:

• Элементу надо добавить css-класс lazy
• В значение src надо указать путь к картинке-заглушке
• Путь к картинке, которую надо будет загрузить, надо написать в атрибуте data-src

• хорошая производительность за счет использования Intersection Observer API
• поддержка маргинальных браузеров (в т.ч. IE11)
• не использует внешние зависимости

Как настроить отложенную загрузку картинок: lazy loading изображений

Каким сайтам нужен lazy loading изображений, какие браузеры поддерживают отложенную загрузку, и как внедрить эту функцию на сайт.

В статье:

1. Что такое lazy loading изображений
2. Каким сайтам нужно внедрять отложенную загрузку
3. Как настроить отложенную загрузку изображений на сайте
4. Плагины для настройки lazy loading
5. Как проверить работу lazy loading

Отложенную или по-другому ленивую загрузку изображений используют довольно много сайтов. В октябре 2019 команда Backlinko провела исследование, в котором проанализировала скорость загрузки 5,2 млн десктопных и мобильных страниц. Они подсчитали, какие способы оптимизации загрузки практикуют самые быстрые страницы.

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

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

Разберем, как работает lazy loading, каким сайтам нужно внедрять эту функцию, и как это сделать.

Что такое lazy loading изображений

Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.

Способ работает для картинок img и фреймов iframe. У этих элементов есть атрибут src, указывающий на источник.

Варианты отложенного отображения контента:

1. По скроллингу
   Изображения и фреймы подгружаются, когда пользователь до них доскролливает. Обычно используют в блогах с бесконечной лентой, в интернет-магазинах с большими листингами.
2. По клику
   Контент подгружается, когда пользователь переходит по ссылке. К примеру, большое изображение загружается, когда пользователь нажимает на миниатюру.
3. В фоновом режиме
   Контент подгружается фоново, к примеру, когда пользователь загрузил документ и оставил его открытым. Этот способ обычно используют для документов, которые нужны для работы — картинок больших размеров, чертежей, схем.

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

На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:

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

Как ПС относятся к отложенной загрузке

Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.

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

В пятом выпуске рубрики «Спроси PR-CY» один из пользователей задал эксперту вопрос о способах оптимизации картинок на сайте:

«Стоит ли на сайте интернет магазина внедрять lazy loading изображений? Слышал, что Google прочитает фото, находящиеся за пределом экрана, а вот Яндекс — нет. Общался с популярными SEO конторами, 7 из 10 уверяют, что не стоит, обрушу SEO.

И еще вопрос по поводу WebP, jpeg2000 — стоит ли внедрять на сайт? На сайте уже 25000 фото, сам процесс конвертации не быстрый».

Ответил Михаил Шакин, автор SEO-блога и специалист по продвижению сайтов в рунете и англоязычном интернете:

«Если есть хороший трафик с изображений, то реализовывать lazy loading не стоит.

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

По поводу новых форматов изображений — пока можно не тратить на это время. А вот оптимизировать для быстрой загрузки без потери качества очень желательно».

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

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

Почитать по теме:
Как использовать WebP для оптимизации картинок на сайте

В каких случаях стоит внедрять lazy loading:

1. На страницах много больших изображений.
2. Картинки составляют основную часть контента — вы продвигаете сервисы с фотографиями, фотостоки, статейники с большим количеством иллюстраций и фреймов.
3. Невысокий балл PageSpeed ​​Insights.
4. Много посетителей с мобильных устройств, больше 50%.
5. Конкуренты быстрее вас, хотя вы уже провели оптимизацию и ускорение страниц.
6. Сервер слабый и не может дать быструю загрузку.

Проверить скорость загрузки сайта можно с помощью сервиса «Анализ сайта». Он проверит загрузку в соответствии с новыми требованиями поисковиков и даст советы, что сделать, чтобы ее улучшить.

Как настроить отложенную загрузку изображений на сайте

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

Атрибут loading

C помощью атрибута loading веб-мастеры задают условия для загрузки. Атрибут loading можно установить для изображений с тегом img и для медиа с тегом iframe.

Он поддерживает три значения:

lazy — асинхронная загрузка по мере надобности изображения;

Если значение для атрибута 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:

1. При загрузке страницы браузер создает DOM страницы без изображений и видео.
2. С помощью JavaScript он определяет, какие изображения и видео нужно загружать, запрашивает первые 2 КБ изображений и узнает из них сведения о размерах.
3. На основе этих данных браузер создает заглушки, заполняющие места изображений, с такими же размерами, как у картинок. У атрибута src появляется временное значение, которое содержит адрес шаблона с меньшим весом, чем у оригинального исходника. Элементы, которые будут загружаться асинхронно, встраиваются на страницу с новым значением src.
4. Когда изображение нужно загрузить, в атрибут src вставляется оригинальный адрес ресурса и изображение появляется в исходном качестве. Могут быть два условия для загрузки:
   1. автоматически, когда элемент попадает в область просмотра пользователя — путем проверки события scroll или resize или orientationchange для мобильных устройств;
   2. на элементах по требованию пользователя, когда для элемента наступают события click или hover.

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

   Какие браузеры поддерживают отложенную загрузку

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

   Google Chrome обрабатывает loading начиная с 76 версии. Другие браузеры на базе Chromium 76 тоже могут работать с этим атрибутом. Для настройки отложенной загрузки в Firefox есть открытый баг.

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

   Браузеры, которые распознают lazy 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. После загрузки картинок они будут отображаться с применением плавных переходов:

   img < opacity: 1; transition: opacity 0.3s; >img[data-src]

   Затем JavaScript передает всем тегам img атрибут src, которые в итоге получают значение атрибута 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'); >; >);

   JavaScript библиотеки

   С помощью возможностей JavaScript можно загрузить соответствующую библиотеку. Библиотек много, к примеру, yall.js (Yet Another Lazy Loader), которая использует Intersection Observer API, Query Lazy, основанная на jQuery, LazySizes с поддержкой адаптивных изображений «srcset» и атрибута «sizes» и другие.

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

   Как это выглядит на примере:

   Демонстрация отложенной загрузки работы на сайте:

   

   Как настроить время отложенной загрузки

   В режиме auto скорость загрузки зависит от близости элемента к области просмотра и скорости интернета.

   В режиме lazy пороговые значения для отложенной загрузки установлены в исходном коде браузера Chrome. Команда 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://indexoid.com/speed/'

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

   canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=400,lazyImageLoadingDistanceThresholdPxOffline=400,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=400,lazyImageLoadingDistanceThresholdPx4G=400 'https://indexoid.com/speed/'

   На сайте indexoid.com/speed настроена команда со значением один пиксель, задержка в загрузке не ощущается.

   

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

   Плагины для настройки lazy loading

   Собрали несколько плагинов и решений для популярных движков.

   Настроить ленивую загрузку: скрипт bLazy.js на JavaScript

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

   1. Запускает ленивую загрузку фоновых и добавочных изображений и картинок в прокрутке.
   2. Работает со всеми элементами с атрибутом src, видео HTML5, фреймы.
   3. Поддерживает srcset и элемент picture.
   4. Загружает фотографии асинхронно с учетом разрешения и размера экрана.
   5. Поддерживается устаревшими браузерами.
   6. Весит меньше 1,4 КБ.
   7. Использует CDN для размещения.

   Реализация стандартная. Разметка:

   Размыть изображение: Craig Buckler

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

   1. Поддерживает любой тип изображений, включая CSS фоновые изображения, атрибуты srcset и sizes.
   2. Быстро загружается и работает, занимает 1350 байт JavaScript, 440 байт CSS.
   3. Не зависит от фреймворков и библиотек.
   4. Поддерживает экраны с матрицами Retina.
   5. Применяет прогрессивное улучшение для устаревших браузеров.
   6. Делает до трех попыток, если изображение по какой-то причине не загрузилось.

   Проще установить специальные плагины для 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 для отложенной загрузки

   • BJ Lazy Load — дополнительно позволяет настроить отложенную загрузку: указать класс HTML для исключений из асинхронной загрузки, который вы сможете применять к элементам страницы, указать, в какой момент загружать картинку или фрейм, добавить URL-адрес изображения для заглушки на месте картинки до ее загрузки в хорошем качестве.
   • Lazy Load XT — кроме ленивой загрузки, плагин можно использовать для минимизации файлов JS и CSS, загрузки библиотек JavaScript и CSS с помощью Cloudflare CDN, перемещения скриптов в нижний колонтитул сайта.
   • a3 Lazy Load — бесплатный плагин на 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 справился лучше.

   

   Исследование проводили в 2016 году, материал обновили в 2019, но в подборке остались плагины, которые не обновлялись по три месяца. Не смотря на это, они могут корректно работать, но вы можете подобрать другое решение, которое будет работать на вашем сайте.

   Еще популярные плагины:

   • Lazy Load Optimizer — бесплатный плагин, работает с изображениями и фреймами, использует библиотеку lazysizes, совместим с WooCommerce, переведен на русский.
   • Loading Page with Loading Screen — плагин также запускает ленивую загрузку, но вдобавок предлагает настроить эффекты для оформления — полупрозрачный экран с процентом загрузки, анимацию, настройка цвета и изображения для фона.
   • Lazy Load by WP Rocket — бесплатный и легкий, весит 6 КБ, не использует тяжелые библиотеки типа jQuery, не требует сложных настроек, работает с изображениями, фреймами, в том числе аватарками и превью. С помощью кода с репозитория можно отключить плагин для некоторых страниц.
   • Lazy Load for Videos — плагин для отложенной загрузки видео с платформ Youtube и Vimeo, работает без загрузки JavaScript. Видео с Youtube загружаются в режиме повышенной конфиденциальности с использованием встроенного URL-адреса «https://www.youtube-nocookie.com».

   1-C Битрикс

   Для этого движка удалось найти два плагина:

   • Ленивая загрузка изображений — платный плагин для отложенной загрузки на сайте, использует библиотеку lazysizes, работает с CDN Битрикса, поддерживает несколько сайтов, не требует работы с кодом и обрабатывает на лету. Поддерживается большинством версий Битрикса.
   • Отложенная загрузка изображений — бесплатный плагин, который использует метод IntersectionObserver, не загружает сайт лишним JS, совместим с CDN Битрикс и поддерживает многосайтовость.

   OpenCart

   Несколько расширений ленивой загрузки для OpenCard:

   • Lazy Load Images — бесплатный плагин, настраивает ленивую загрузку по прокрутке, работает на jQuery.
   • Lazyload Images — плагин для асинхронной загрузки с возможностью настроить визуальные эффекты для появляющихся изображений. Поддерживает Opencart версии 1.5.X + 2.X + 3.0.X + 3.1.X. Цена 20 долларов.
   • Lazy Load Images — плагин для ленивой загрузки изображений, каруселей, слайд-шоу, работает на JavaScript. Работает с версиями OpenCart v3.x. Цена 20 долларов.

   Joomla!

   Для Joomla! нашлась пара плагинов:

   • JSLazyLoading — плагин для отложенной загрузки, работает с изображениями и динамическими модулями, в том числе с Retina изображениями, AJAX навигацией, выводит уменьшенные изображения для мобильных устройств. Единственный плагин для Joomla!, который работает с отложенной загрузкой фоновых изображений. Работает на чистом JavaScript, не зависит от внешних библиотек, к примеру от jQuery. Цена — 755 рублей.
   • Lazy Load — запускает отложенную загрузку изображений для товаров, обрабатывает только фото товара virtuemart и joomshopping — картинки, в пути к которым указан «product». Использует jQuery плагин lazyload. Цена — 400 рублей.

   Drupal

   Для Drupal есть несколько модулей асинхронной загрузки.

   • Lazy-load — модуль Drupal для отложенной загрузки встроенных изображений и фреймов, работает на библиотеке lazysizes.
   • Blazy — плагин обеспечивает интеграцию с bLazy и Intersection Observer API для асинхронной загрузки изображений и фреймов.
   • Bamboo Twig — модуль на Drupal 8 для повышения производительности, в том числе в нем можно включить отложенную загрузку.
   • Image Lazyloader — модуль для ленивой загрузки картинок, подходит для версий Drupal 7.12 и выше.
   • Lazy Pane — плагин загружает картинки по требованию со стороны клиента из кэша, через AJAX.

   Как проверить ленивую загрузку

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

   Команды для проверки и запуска скрипта:

   git checkout https://github.com/GoogleChromeLabs/puppeteer-examples cd puppeteer-examples npm i node lazyimages_without_scroll_events.js -h

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

   Еще интересное:
   Как оптимизировать показатель LCP — время отрисовки самого крупного элемента страницы
   Как оптимизировать CLS — сдвиги макета страницы
   Как оптимизировать FID — еще один показатель Core Web Vitals

   Что вы думаете о методе отложенной загрузки? Будем рады, если вы поделитесь своими мыслями и опытом!

   Режим Lazy Loading для скрытых изображений с плавным появлением

   Одним из требований поисковой системы Google с недавних пор стала ленивая загрузка изображений (Lazy Load), в Google Page Speed так и пишется «Отложите загрузку скрытых изображений». Это когда картинки на сайте подгружаются не сразу, а по мере скроллинга пользователя по странице вниз.

   

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

   Особенно эффект от ленивой загрузки изображений виден на сайтах с десятками и сотнями картинок, но и на 5-7 фотках можно вырвать несколько баллов в гугл пейдж спид.

   Установка ленивой загрузки в WordPress

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

   A3 Lazy Load

   Мне больше всего понравился «A3 Lazy Load»

   1. Устанавливайте как обычный плагин WordPress (как это сделать за 5 минут).
   2. В настройках меняется минимум: вместо эффекта спиннер я предпочитаю плавное появление картинок + можно сделать 200px отступа для начала включения Lazy Load.
   3. Сохраняйте изменения, сбрасывайте кеш (если используется).

   

   Проверяем в Google:

   

   Пишет — Отложите загрузку скрытых изображений

   

   Без ошибки!

   BJ Lazy Load

   Второй модуль, который также способен быстро сделать ленивую загрузку — BJ Lazy Load.

   Читайте также: Как использовать новый формат Webp на своём сайте

   Настройки там вообще простые, ничего менять обычно не нужно.

   

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

   «Эй читатель, давай сыграем в игру Установи их все Правила простые: я кину тебе 10 ссылок из гугла, а ты давай устанавливай каждый плагин и сам выбери лучший! И да, потом в комментах напиши, не забудь!».

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

   Но я включил сюда второй плагин потому что на одном сложном шаблоне только этот модуль нормально обеспечил работу всех картинок в режиме ленивой загрузки, остальные сбоили и либо не грузили фотки (как A3), либо выводили фик пойми что, как тот же Autoptimize.

   

   Однако он не обновлялся уже пару лет, поэтому я рекомендую A3 (у меня на блоге на момент написания статьи работает именно он), если вдруг по каким-то причинам не сработает, то уже установить BJ Lazy Load.

   Почему может не работать Lazy Load на сайте

   Я наблюдал в своей практике несколько причин:

   • Перенавороченный шаблон.
     Всякие крутые штуки на Ajax выглядят отлично, но плохо оптимизируются, в том числе с помощью плагинов, призванных отложить загрузку скрытых изображений.
   • Корявый хостинг.
     Редко, но встречается такой «особенный» хостинг, на котором по неизвестным причинам не работают некоторые плагины, например, из-за особенностей сборки PHP конкретной версии. Можно попробовать поменять версию php в панели хостинга или просто сменить хостера (список проверенных хостеров есть тут).

   Читайте также: Что лучше СЕО продвижение или контекстная реклама

   Успехов в бизнесе!

   Полезный совет: Нажатие клавиш «WIN + D» позволяет быстро скрыть текущие окна и перейти к рабочему столу Windows.

   Похожие публикации:

   1. Как отобразить сетку таблицы в ворде
   2. Как поставить кубический метр в ворде знак
   3. Как сделать скрин части экрана на маке
   4. Как узнать модель айпада в настройках