Оптимизация скорости сайта: ленивая/отложенная загрузка для изображений

  • Дата:05.08.2020
  • Автор:Команда TurboSeo

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

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

Почему скорость загрузки так важна?

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

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

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

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

Суть техники и кому она нужна

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

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

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

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

Разные техники работы ленивой загрузки

Отложенная загрузка медиафайлов может иметь несколько вариантов их отображения на сайте:

  • Scrolling - контент подгружается по мере пролистывания страницы. Этот способ часто используют новостные сайты, интернет-магазины, онлайн-каталоги с бесконечной лентой прокрутки. Изначально картинки отображаются на веб-странице в виде блока, потом на его место загружается картинка или другой элемент в высоком качестве.
  • Click - файлы отображаются при нажатии. К примеру, если вы видите миниатюру картинки с анкорной ссылкой или подписью "Подробнее" внизу и нажимаете на нее, вас автоматически перебрасывает на медиафайл.
  • Background - картинки, видео и другие элементы грузятся в фоновом режиме. Такой метод полезен только в тех случаях, когда медиафайлы действительно нужны пользователю для работы. Это касается различных документов, чертежей, схем и прочих элементов.

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

Сервис Google о внедрении ленивой загрузки для медиафайлов

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

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

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

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

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

Как реализовать Lazy loading - ТОП 5 готовых решений

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

Используйте скрипт от Дэвида Волша

Этот вариант является самым простым в плане реализации. Данный скрипт замещает атрибут src (импортирует файл со скриптами из внешнего файла) на data-src в метатеге , который предназначен для отображения на странице картинок в форматах GIF, JPEG или PNG.

скрипт от Дэвида Волша

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

скрипт Дэвида Волша

После этого ко всем HTML-элементам img прикрепляется атрибут src, по итогу получается новое значение data-src. Когда загрузка картинок будет завершена, значение атрибута из img уберется.

скрипт Дэвида Волша

Прога Робина Осборна

В этом случае ленивая загрузка на JavaScript станет апгрейдом для языков программирования HTML и CSS. Техника будет работать через скроллинг без использования дополнительных плагинов и фреймворков.

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

Опробуйте плагин bLazy.js

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

плагин blazy.js

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

Lazy Load ХТ jQuery- еще один отличный плагин

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

Как же использовать этот плагин? Добавьте через него jQuery-библиотеку перед закрывающимся метатегом и укажите значение jquery.lazyloadxt.js.

jquery.lazyloadxt.js

Также можно использовать Lazy Load XT jQuery частично и применять лайтовый вариант скрипта jqlight.lazyloadxt.min.js. Делается это таким образом:

qlight.lazyloadxt.min.js

Lazy Load XT jQuery начинает работать автоматически. В некоторых случаях может потребоваться ручная активация, осуществляется она так:

Lazy Load XT jQuery

Плагины от WP

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

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

  1. BJ Lazy Load. Программный модуль, который отлаживает загрузку миниатюрных изображений, картинок в постах, пользовательских фото. Медиафайлы подгружаются при скроллинге или приближении к браузерному окну.
  2. Lazy Load by WP Rocket. Работает со всеми типами картинок. Медиафайлы подгружаются по мере появления их в поле зрения пользователя. Плагин не задействует JS и jQuery.
  3. Loading Page with Loading Screen. Во время подгрузки картинок на сайте на экране пользователя отображается экран с процентом завершения загрузки. После ее завершения он исчезает.

Самым популярным и простым по мнению пользователей считается плагин BJ Lazy Load.

Размытые медиа от разработчика Крэга Баклера

Преимущества этого метода:

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

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

Если хотите детальнее изучить этот метод, перейдите по ссылке https://github.com/craigbuckler/progressive-image.js.

Распространенные проблемы при использовании ленивой загрузки

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

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

плагин Puppeteer

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

Заключение

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

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

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