Lazy loading: What is Lazy Loading | Lazy vs. Eager Loading

alexxlab

Содержание

Как Lazy Load убивает ваши сайты и что с этим делать — SEO на vc.ru

Одним из важных факторов ранжирования в Google является скорость загрузки страниц сайта, которую измеряют с помощью теста PageSpeed Insight (PSI). Мы в WP Booster давно занимаемся оптимизацией сайтов на WordPress под требования Google PageSpeed и к нам периодически обращаются за консультациями.

42 323 просмотров

Просматривая чужие сайты, мы видим, что вебмастера, в погоне за “зелёненькими” цифрами, устанавливают плагины, которые улучшают показатели в тесте PSI, но при этом нарушают индексацию изображений. Типичный случай — установка одного из плагинов для отложенной загрузки (Lazy Load) изображений.

Как Lazy Load нарушает индексацию изображений

Если на странице много картинок, то установка плагина отложенной загрузки может значительно увеличить баллы. Проблема в том, что все эти плагины подставляют в атрибут src тега <img> заглушку типа placeholder.svg. И только после прокручивания страницы скрипт подставляет в src ссылку на нужное изображение. Но бот Google не умеет прокручивать страницу! В итоге вместо картинок бот “видит” на странице примерно следующее:

<img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”>

вместо:

<img src=”notebook.jpg”> <img src=”smartphone.jpg”> <img src=”televizor.jpg”> <img src=”stiralka.jpg”> <img src=”fen.jpg”>

Владельцы интернет-магазинов и статейных сайтов стараются, делают картинки, фотографируют товары, добавляют их на сайт, но Google о них никогда не узнает, потому что в погоне за баллами PSI они напрочь убили индексацию изображений установкой неправильного Lazy Load.

Вы подумаете что я нагнетаю и проблемы нет? Давайте проанализируем типичные сайты.

Пациент 1. Сантехника-Тут.Ру

Не прокручивая страницу жмём ctrl+U и смотрим исходный код:

Вместо ссылок на изображения в src стоят заглушки preloadbox. png! Хотите узнать как они выглядят? А вот так:

Именно их “увидит” бот Google вместо изображений унитаза, смесителя и кухонной мойки.

То же самое на внутренних страницах:

Пациент 2. Связной

Смотрим исходный код:

У “Связного” не то что заглушки, даже атрибута src нет!

Пациент 3. Мастер ремонта

Смотрим исходный код:

Опять нет атрибута src!

Проверим индексацию картинок на этой странице через оператор site:https://mastera-remonta.com/remont-novostrojka/chistovoj-remont/remont-2-k-kvartiry/ на вкладке Картинки:

На момент проверки на данной странице проиндексировано всего 15 изображений. Хотя в слайдерах и вкладках 49 изображений. И это без учёта фотографий сотрудников (которые в принципе и не должны ранжироваться на этой странице). То есть из-за Lazy Load

проиндексировалось менее 50% изображений в этом конкретном примере.

Пациент 4. Santechsklad.com.ua

https://santehsklad. com.ua/krany-i-ventili/krany-dlya-vody.html

Опять открываем исходный код:

Судя по всему это Bitrix и в src мы видим заглушку ajax-loader.gif. Тем же способом, что и выше проверяем индексацию картинок. Кроме логотипа не проиндексировалось ни одной картинки!

Единственное, что хоть как-то спасает эти сайты — наличие микроразметки и sitemap.xml, благодаря которым можно сообщить поисковым системам о наличии этих изображений.

Как видите, это не единичный случай. Так что, прямо сейчас проверьте свои сайты, не используете ли Вы неправильный Lazy Load и тем самым “улучшаете” ранжирование сайта в Google.

Как сделать “правильный” Lazy Load?

Так как мы занимаемся в основном оптимизацией сайтов на WordPress, то буду приводить примеры для этой CMS, хотя данная проблема касается сайтов на Bitrix, Opencart и т.д. …..

Для начала грустная новость — в репозитории WordPress нет ни одного плагина, который реализует правильный Lazy Load. Неважно что Вы поставите: Lazy Load от Smush, Lazy Load от WP Rocket или a3 Lazy Load — они все подставляют в src заглушки. Из всех скриптов отложенной загрузки только 2-3 реализуют её правильно.

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

Вот так должно быть до прокручивания страницы:

<img src=»/full-img.jpg» alt=»» srcset=»placeholder.svg» data-srcset=» /full-img-300×169.jpg 300w, /full-img-768×432.jpg 768w, /full-img.jpg 1200w»>

Вот так после прокручивания страницы:

<img src=»/full-img.jpg» alt=»» srcset=»/full-img.jpg» data-srcset=» /full-img-300×169.jpg 300w, /full-img-768×432.jpg 768w, /full-img.jpg 1200w»>

В этом видео специалист по техническому SEO под ником Demi Murych объясняет, как правильно сделать Lazy Load .

смотреть с 8 минуты 44 сек

Скрипт рекомендованный в видео для правильного Lazy Load:

Плагин для WordPress, реализующий “правильный” Lazy Load

Если у Вас нет навыков программирования и разработки, то для WordPress Вы можете установить платный плагин True Image & Lazy Load.

Возможности плагина:

  • Правильный Lazy Load — отложенная загрузка изображений на JS, которая не нарушает их индексации.
  • Добавление к изображениям атрибута decoding=”async” (асинхронная загрузка изображений).
  • Добавление ко всем изображениям микроразметки https://schema.org/ImageObject.
  • Добавление к логотипу сайта микроразметки https://schema.org/Organization.
  • И многое другое …..

Мы всегда готовы ответить на Ваши вопросы и бесплатно проконсультировать по оптимизации Ваших сайтов. Пишите в Telegram чат WP Boost.

Оптимизация загрузки изображений

tilda help center

О технологии Lazy Load.

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

Внедрение технологии Lazy Load — это один из этапов оптимизации сайтов на Тильде для более быстрой загрузки. Технологии развиваются, и мы постоянно работаем над тем, чтобы сделать загрузку еще быстрее.

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

Возьмем стандартную страницу в темплейтах и опубликуем. http://project130385.tilda.ws/

Откроем инспектор браузера, включим в настройках имитацию медленной скорости интернета — 3G и перезагрузим страницу.

DOMContentLoaded: 628 миллисекунд
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.

Finish: 1.65 секунд
параметр, который показывает, за какое время загрузился весь сайт.

Transferred: 263 kb
параметр, который показывает сколько байт информации было передано.

Цифры очень оптимистичные! Но все познается в сравнении. Перейдем в Настройки сайта > Еще и отключим режим Lazy Load. Протестируем страницу еще раз.

DOMContentLoaded: 697 миллисекунд
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.

Finish: 10.14 секунд
параметр, который показывает, за какое время загрузился весь сайт.

Transferred: 1.8 mb
параметр, который показывает сколько байт информации было передано.

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

Давайте посмотрим, что скажет PageSpeed Google. Проверим страницу с выключенной оптимизацией:

И включим Lazy Load:

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

Кроме режима Lazy Load нужно обязательно оптимизировать изображения, загруженные на сайт. Больше всего на результаты теста PageSpeed Google влияют именно вес изображений. Чтобы уменьшить вес, можно использовать специальные инструменты, например Tinypng.

Примечание

Как удалить код JavaScript и CSS, блокирующий отображение верхней части страницы?

Это довольно частый вопрос, который появляется после прохождения теста. Google очень строго ругается на наличие скриптов в верхней части страницы.

Теоретически удалить скрипты можно, но нужно делать скидку на то, что это автоматический анализ, он не точен. Как мы посмотрели раньше, с включенным режимом Lazy Load страницы загружаются очень быстро — все, что можно уже оптимизировано. Мы проанализировали и пришли к выводу, что удаление скриптов даст выгоду в условные 0.3 секунды, которые принципиально ничего не изменят.

Поэтому наша позиция: мы игнорируем замечание автоматического теста Google о скриптах в начале страницы.

Кстати, а как Google проходит собственный тест?

Отложенная загрузка изображений — Полное руководство

Содержание

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

Согласно последним данным HTTP-архива, средний размер страницы на настольных компьютерах составляет 1511 КБ. Изображения составляют почти 650 КБ этого размера, примерно 45% от общего размера страницы. Теперь, поскольку мы не можем избавиться от изображений, нам нужно сделать так, чтобы наши веб-страницы загружались с ними быстрее.

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

Получите это руководство в виде электронной книги. Прямо в почтовый ящик!

Содержание

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

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

Вот короткое видео, которое поможет вам лучше понять:

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

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

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

Зачем вообще ленивая загрузка изображений?

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

Имеет два основных преимущества.

1. Улучшение производительности

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

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

2. Снижение затрат

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

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

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

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

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

Вы можете узнать, какие изображения являются кандидатами на отложенную загрузку и сколько байтов вы можете сэкономить при начальной загрузке страницы, используя инструмент аудита Google Lighthouse. Аудит, выполняемый этим инструментом, имеет раздел, посвященный закадровым изображениям. Вы также можете использовать анализатор веб-сайтов ImageKit, чтобы определить, использует ли ваш веб-сайт ленивую загрузку или нет, в дополнение к другим важным оптимизациям, связанным с изображениями на вашей странице.

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

Методы ленивой загрузки изображений

Изображения на веб-странице можно загружать двумя способами — с помощью тега или с помощью свойства CSS `background`. Давайте сначала рассмотрим более распространенный из двух тегов , а затем перейдем к фоновым изображениям CSS.

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

Ленивая загрузка изображений может быть разбита на два этапа:

Первый шаг — предотвратить предварительную загрузку изображения. Для изображений, загруженных с использованием тега , браузер использует атрибут src тега для запуска загрузки изображения. Независимо от того, является ли это 1-м или 1000-м изображением в вашем HTML и находится далеко за пределами экрана, если браузер получит атрибут src , он вызовет загрузку изображения.

Таким образом, чтобы лениво загружать такие изображения, поместите URL-адрес изображения в атрибут, отличный от src . Допустим, мы указываем URL изображения в поле 9.0073 data-src атрибут тега изображения. Теперь, когда src пуст, браузер не запускает загрузку изображения

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

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

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

Инициировать загрузку изображения с помощью событий Javascript

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

Когда происходит любое из этих событий, мы находим на странице все изображения, которые должны быть загружены отложенно и которые еще не были загружены. По этим изображениям мы проверяем, какие из них сейчас находятся в окне просмотра. Это делается с использованием верхнего смещения изображения, верхнего края прокрутки текущего документа и высоты окна. Если он вошел в область просмотра, мы выбираем URL-адрес из атрибута data-src и помещаем его в атрибут src . Это запускает загрузку изображения. Мы также удаляем класс lazy , который идентифицирует изображения для ленивой загрузки для событий, которые запускаются позже. Как только все изображения загружены, мы удаляем прослушиватели событий.

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

Вот рабочий пример такого подхода.

Если вы заметили, первые 3 изображения в примере загружаются вперед. URL-адрес присутствует непосредственно в атрибуте src вместо атрибута data-src . Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JS, чтобы загрузить их.

Использование Intersection Observer API для запуска загрузки изображений

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

Пример использования Intersection Observer API для ленивой загрузки изображений:

Мы прикрепляем наблюдатель ко всем изображениям, подлежащим ленивой загрузке. Как только API обнаружит, что элемент вошел в область просмотра, используя свойство isIntersecting , мы выбираем URL-адрес из атрибута data-src и перемещаем его в атрибут src , чтобы браузер инициировал загрузку изображения. Как только это будет сделано, мы удалим ленивый класс из изображения, а также удалим наблюдателя из этого изображения.

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

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

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

В своем последнем обновлении Google добавила поддержку встроенной отложенной загрузки в последнюю версию браузера Chrome — Chrome 76. Все браузеры на основе Chromium, т. е. Chrome, Edge и Safari, а также Firefox. Вы можете найти более подробную информацию о поддержке браузерами встроенной отложенной загрузки на caniuse.com.

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

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

Теперь код будет выглядеть так:

 ...

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

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

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

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

 …
…

Получите это руководство в виде электронной книги. Прямо в почтовый ящик!

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

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

С фоновыми изображениями CSS все не так просто. Чтобы загрузить фоновые изображения CSS, браузеру необходимо построить дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, браузер не загружает фоновое изображение. Если правило CSS применимо к элементу в текущем документе, браузер загружает изображение.

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

Вот рабочий пример ленивой загрузки фонового изображения CSS.

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

Элемент с идентификатором bg-image имеет фоновое изображение , указанное в CSS. Однако когда к этому элементу добавляется класс lazy , в CSS мы переопределяем фоновое изображение 9.0074 и установите для него значение none.

Поскольку правило, объединяющее #bg-image с классом .lazy , имеет более высокий приоритет в CSS, чем просто #bg-image , браузер изначально применяет свойство background-image: none к элементу . Когда мы прокручиваем вниз, Intersection Observer (или прослушиватели событий) обнаруживает, что изображение находится в области просмотра, и удаляет класс lazy . Это изменяет применимый CSS и применяет фактическое фоновое изображение 9.0074 к элементу, запускающему загрузку фонового изображения.

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

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

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

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

1. Использование правильных заполнителей изображений

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

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

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

a) Заполнитель доминирующего цвета

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

Этот метод уже довольно давно используется в результатах поиска картинок Google и Pinterest.

Образец изображения, взятый с сайта Manu.ninja

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

Используя ImageKit, заполнитель доминирующего цвета можно получить с помощью связанного преобразования в ImageKit, как показано здесь:

Пример URL-адреса изображения-заполнителя доминирующего цвета с использованием ImageKit 

 
 imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" alt="исходное изображение" />

заполнитель доминирующего цвета

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

Вот видео, демонстрирующее, как этот эффект работает для пользователя:

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

b) Заполнитель изображения низкого качества (LQIP)

Мы можем расширить изложенную выше идею использования заполнителя доминирующего цвета.

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

Этот метод использовался такими компаниями, как Facebook и Medium.com, для изображений на своих веб-сайтах и ​​в приложениях.

Пример URL-адреса изображения LQIP с использованием ImageKit 

 
исходное изображение

заполнитель доминирующего цвета

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

Вот видео, демонстрирующее, как этот эффект работает для пользователя:

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

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

2. Добавление буфера для загрузки изображения

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

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

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

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

С API-интерфейсом Intersection Observer вы можете использовать параметр root вместе с параметром rootMargin (работает как стандартное правило полей CSS), чтобы увеличить эффективную ограничивающую рамку, используемую для поиска «пересечения».

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

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

Как видно из видео ниже (следите за сетевыми запросами, которые появляются внизу), при прокрутке, когда видно третье изображение, загружается пятое изображение. Когда в поле зрения появляется 4-е изображение, загружается 6-е изображение. Таким образом, мы даем достаточно времени для полной загрузки изображений, и в большинстве случаев пользователь вообще не увидит заполнитель.

Если вы еще не заметили, во всех наших примерах третье изображение (image3.jpg) всегда загружается впереди, даже если оно находится за пределами области просмотра. Это также было сделано по тому же принципу — загружать немного заранее, а не загружать точно на пороге для лучшего взаимодействия с пользователем.

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

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

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

Проблема
Когда изображения нет, браузер не знает размеров контента, который должен отображаться в охватывающем его контейнере. И если мы не укажем его с помощью CSS, вмещающий контейнер не будет иметь размеров, т.е. 0 x 0 пикселей. Итак, когда изображение загружено, браузер изменит размер окружающего контейнера, чтобы он соответствовал изображению.
Это внезапное изменение макета приводит к перемещению других элементов, и это называется смещением содержимого. Как показано в этой статье и видео о смене контента из журнала Smashing Magazine, это довольно неприятный опыт для пользователя, поскольку контент внезапно перемещается при загрузке изображения.

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

4. Не лениво загружать все изображения

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

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

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

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

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

c) Если страница не слишком длинная, может состоять из одного-двух скроллов, или если вне области просмотра менее 5 изображений, то ленивой загрузки можно вообще избежать.

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

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

Вся идея отложенной загрузки зависит от наличия возможностей выполнения Javascript в браузере пользователя. Хотя нативная ленивая загрузка обещает устранить эту зависимость, а поддержка браузерами по-прежнему близка к 70%, если вы хотите обеспечить одинаковый опыт во всех браузерах, вам все равно придется использовать библиотеки JS.

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

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

Эта ветка на Stack Overflow отлично справляется с этими проблемами, и ее рекомендуется прочитать всем, кто хочет решить эту группу пользователей.

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

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

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

yall.js (еще один отложенный загрузчик)

  • Использует Intersection Observer и возвращается к отложенной загрузке на основе событий.
  • Поддерживает все основные типы элементов HTML, но не фоновые изображения.
  • Также работает в IE11+.

lazysizes

  • Очень популярный и обширный функционал.
  • Поддерживает srcset и атрибуты размеров адаптивных изображений.
  • Высокая производительность даже без Intersection Observer.

jQuery Lazy

  • Простая библиотека отложенной загрузки на основе jquery.

WeltPixel Lazy Loading Enhanced

  • Расширение Magento 2 для отложенной загрузки изображений.

Magento Lazy Image Loader

  • Расширение Magento 1.x для отложенной загрузки изображений.

Shopify Плагин Lazy Image

  • Расширение Shopify для ленивой загрузки изображений.
  • Хотя платный.

WordPress A3 Lazy Load

  • Плагин отложенной загрузки изображений для WordPress.

Как проверить, работает ли отложенная загрузка?

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

Перейдите на вкладку «Сеть» > «Изображения».

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

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

Другим способом может быть запуск аудиторского отчета Google Chrome Lighthouse на вашей странице после внесения изменений и поиск предложений в разделе «Закадровые изображения».

Заключение

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

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

Вы оптимизируете изображения на своем веб-сайте? Нет? Начните работу с CDN и инструментом оптимизации изображений ImageKit бесплатно прямо сейчас!

Ленивая загрузка — NativeScript Docs

  • Оптимизация производительности
  • Ленивая загрузка

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

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

При отложенной загрузке приложение разбивается на несколько модулей. Существует основной модуль, который в контексте приложения NativeScript будет содержать корневые компоненты (обычно называемые app.module.ts , расположенные в папке app ) и рекомендуемые модули, которые будут загружаться «по запросу» после взаимодействия с пользователем. . Каждый модуль может определять несколько компонентов, сервисов и маршрутов.

В следующих разделах мы создадим простое приложение Angular, используя шаблон Hello World, который по умолчанию не имеет модулей с отложенной загрузкой. Затем мы добавим лениво загруженный HomeModule .

  • Создайте шаблон Hello World Angular

     tns создать мое приложение --ng
cd мое приложение

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

    Хорошей практикой является использование имени модуля в качестве имени содержащей его папки. Например, создайте папку feature и добавьте feature.module.ts и необходимые компоненты, которые будут частью модуля (в нашем случае feature.component.ts с соответствующими файлами HTML и CSS).

     мое приложение
--приложение
----особенность
------feature.component.css
------feature.component.html
------feature.component.ts
------feature.module.ts
------feature.routing.ts
------feature.service.ts

  • Создать таблицу маршрутизации и лениво загружаемый модуль

    приложение/функция/функция.routing.ts 

     // приложение/функция/функция.маршрутизация
импортировать {NgModule} из "@angular/core";
импортировать {маршруты} из "@angular/router";
импортировать {NativeScriptRouterModule} из "nativescript-angular/router";
импортировать { FeatureComponent } из "./feature.component";
экспортировать постоянные маршруты: Routes = [
    {
        путь: "",
        компонент: FeatureComponent
    }
];
@NgModule({
    imports: [NativeScriptRouterModule. forChild(routes)], // устанавливаем маршруты с ленивой загрузкой, используя forChild
    экспортирует: [NativeScriptRouterModule]
})
класс экспорта FeatureRoutingModule { }

    приложение/функция/функция.модуль.тс 

     // приложение/функция/функция.модуль.тс
импортировать {NativeScriptCommonModule} из "nativescript-angular/common";
импортировать {NgModule, NO_ERRORS_SCHEMA} из "@angular/core";
импортировать { FeatureComponent } из "./feature.component"; // Импортируем все компоненты, которые будут использоваться в модуле с отложенной загрузкой
импортировать {FeatureService} из "./feature.service"; // Импорт всех сервисов, которые будут использоваться в лениво загруженном модуле
импортировать { FeatureRoutingModule } из "./feature.routing"; // импортируем модуль маршрутизации
@NgModule({
    схемы: [NO_ERRORS_SCHEMA],
    импорт: [
        NativeScriptCommonModule,
        FeatureRoutingModule
    ],
    декларации: [FeatureComponent], // объявляем все компоненты, которые будут использоваться в модуле
    провайдеры: [ FeatureService ] // предоставляют все сервисы, которые будут использоваться в модуле
})
экспорт класса FeatureModule {}

  • Добавить лениво загружаемый модуль в таблицу маршрутизации приложения

    приложение/приложение. routing.ts 

     // приложение/приложение.routing.ts
импортировать {NgModule} из "@angular/core";
импортировать {NativeScriptRouterModule} из '@nativescript/angular';
импортировать {маршруты} из "@angular/router";
импортировать { ItemsComponent } из "./item/items.component";
импортировать { ItemDetailComponent } из "./item/item-detail.component";
константные маршруты: Маршруты = [
    {путь: "", redirectTo: "/items", pathMatch: "полный" },
    { путь: "предметы", компонент: ItemsComponent },
    {путь: "item/:id", компонент: ItemDetailComponent},
    { path: "feature", loadChildren: () => import("./feature/feature.module").then(m => m.FeatureModule) }, // лениво загружаемый модуль
];
@NgModule({
    импортирует: [NativeScriptRouterModule.forRoot(маршруты)],
    экспортирует: [NativeScriptRouterModule]
})
класс экспорта AppRoutingModule { }

  • Переход к лениво загружаемому модулю

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

    приложение/элемент/items.component.html 

     
<макет стека>
    
    
    
        
            <Ярлык [nsRouterLink]="['/item', item.id]" [text]="item.name"
               >

Реальное приложение NativeScript (например, примеры Angular SDK) может содержать сотни различных компонентов. Каждый компонент может иметь свой маршрут, сервисы и несколько компонентов. Использование модулей отложенной загрузки значительно сокращает время запуска (в случае приложения SDK Examples время запуска увеличивается до 5 раз). Вместо того, чтобы загружать сотни компонентов при начальной загрузке приложения, вы можете загружать только посадочный модуль и лениво загружать все остальные подмодули.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *