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


Оглавление (нажмите, чтобы открыть):

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

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

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

В WordPress процесс создания такой загрузки гораздо легче из-за использования плагинов.

Плагины для создания ленивой загрузки

  • Lazy Load for V >

Также по этой теме:

1 комментарий

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

Как сделать постепенную (ленивую) загрузку изображений в WordPress?

Видели ли такие блоги, в которых есть большое количество картинок. Если да, то возможно вы видели, что они загружаются не спеша. Это сделано для того, чтобы быстрее загрузить саму страницу. Если вы установите Lazy Load, то она загрузит лишь те участки, к которым уже получила доступ. Так, на странице с 25 GIFками с различными фейлами, лишь пара первых изображений будет загружено, а остальные будут грузиться лишь когда пользователь будет проматывать страницу. Тем самым, сама страница загрузится быстрее. Такая техника используется на множестве сайтов. В этой статье, мы покажем вам, как применить её к вашим картинкам в WordPress.

Для начала, вам нужно установить и активировать плагин Lazy Load.

Плагин создан VIP командой WordPress.com, командой TechCrunch 2011 Redesign и Джейком Голдманом. Он использует скрипт jQuery.sonar от Дейва Артца.

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

Вкупе с MaxCDN и W3 Total Cache, этот плагин позволит сайту грузиться ещё быстрее.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected] , +371 29394520

Как сделать отложенную загрузку (Lazy) на сайте в WordPress?

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

Что такое отложенная (lazy) загрузка?

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

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

Не отображается в кэше Google,

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

Ленивые загруженные объекты будут убраны прочь

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

Теряет ли оптимизация сайта из-за отложенной загрузки?

Это миф! Оптимизация сайта имеет мало общего с отложенной загрузкой. Сценарий Ajax все равно будет выполняться. Единственное отличие состоит в том, что он будет выполняется в фоновом режиме. Сайт будет загружаться быстрее! Нет сомнения в этом! На оптимизацию сайта не влияет.

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

Отложенная загрузка мешает вам, раздражает ощущение “ожидания”

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

Веб-страница загружает гораздо быстрее.

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

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

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

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

Более быстрый доступ к содержимому на WordPress

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

Смотрите только содержание, что касается вас

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

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

Лучшие плагины для отложенной загрузки

1. Image Lazy Load

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

2.BJ Lazy Load

Этот ленивый плагин загрузки позволяет пользователям выбрать в постах изображения и эскизы, Gravatar, фреймы и заменяет содержимое с заполнителем. При выборе конкретного заполнителя вы можете пропустить изображения с разными классами. BJ Lazy Load также обслуживает различные размеры оптимизированных изображений и автоматически служит HiDPI изображениям для различных экранов HiDPI, как у сетчатке отображения Apple.

3. Jquery image lazy load

Jquery image lazy load добавляет Jquery отложенной загрузки различных изображений. Лучшая часть об этом плагине является то, что она очень проста в использовании. Все, что вам нужно сделать, это просто установить его и активировать. Изображения на сайте, которые вы посещаете будет автоматически загружаться, как вы прокрутите вниз до нижней части страницы. Вам не нужно ждать, чтобы изображения загружались в течение длительного времени. Как и при открытии веб-страницы и прокрутите до конца страницы, изображения уже загружены!

4. Rocket lazy load

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

WordPress.org

Русский

Lazy Load Optimizer

Описание

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

Характеристики

  • Lazy loading images;
  • Ленивая загрузка iframe;
  • улучшает показатели PageSpeed Insights;
  • легкий и быстрый;

Скриншоты

  • Настройки плагина

Установка

  1. Разорхивируйте скаченный zip файл.
  2. Загрузите папку плагина в wp-content/plugins/ директорию вашего WordPress сайта..
  3. Активируйте Lazy Load Optimizer на странице плагинов.

Часто задаваемые вопросы

Просто активируйте плагин в панели управления WordPress. Дополнительных настроек не требуется.

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

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

How To minimize content jumping or unpredictable behavior images before loading?

Add width and height attributes to image.

Как добавить ленивую загрузку к фоновым изображениям?

В случае, если вы загружаете фоновое изображение через класс, вам нужно привязать фон к классу lazyloaded:

Советы по созданию собственной ленивой загрузки картинок

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

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

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

Мы рассмотрим следующие темы:

Вот что мы будем строить:

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

В настоящее время не все браузеры поддерживают отложенную загрузку. Хотя в некоторых браузерах ситуация должна измениться в ближайшее время с выпуском Chrome 75, целью которого является включение поддержки отложенной загрузки изображений и фреймов. До тех пор отложенную загрузку придется реализовывать с использованием JavaScript. Существует множество библиотек и структур, которые могут нам помочь с этим.

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

Типичная механика для ленивой загрузки

Большинство подходов следуют следующей схеме.

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

Когда должна происходить загрузка изображения?

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

Создание intersection observer выглядит следующим образом:

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

Отлично. Нашим изображениям будет назначен правильный src, когда они появятся, что приведет к их загрузке. Но какие изображения? Нам нужно сообщить API Intersection Observer, какие элементы нам нужны. Для этой цели каждому из них был присвоен класс CSS .lazy.

Хорошо. Но так ли это идеально?

Кажется, что это хорошо работает, но есть некоторые недостатки, которые следует учитывать:

  1. Пока JavaScript не появится и не будет успешно работать, у нас на странице будет куча элементов изображения, которые не будут отображены. Мы намеренно отменили их, удалив атрибут src. Это результат, который мы хотели получить, но теперь мы зависим от JavaScript для загрузки этих изображений. Хотя верно то, что JavaScript довольно широко распространен в наши дни в Интернете. Но JavaScript может стать дорогостоящим дополнением к нашим бюджетам на производительность, особенно если он участвует в доставке и рендеринге. содержания страницы. Как однажды заметил Джейк Арчибальд, все ваши пользователи не являются JS, пока они загружают ваш JS.
  2. Даже когда это хорошо работает, у нас на странице есть пустые элементы, которые могут вызвать некоторую визуальную проблему, когда они загружаются. Возможно, нам нужно сначала отобразить изображение по умолчанию. Мы вернемся к этому в ближайшее время.

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

Проект новой спецификации HTML включает в себя поддержку различных режимов загрузки::

  • Браузер загрузит это изображение лениво.
  • Браузеру загрузить это изображение немедленно.
  • Браузеру сам сделает выбор как загрузить это изображение.

Браузеры без этой поддержки будут игнорировать новые атрибуты HTML и загрузят изображение в обычном режиме.

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

Как компаньон для адаптивных изображений

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

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

HTML дает нам несколько способов реализации адаптивных изображений, которые связывают разные источники изображений с различными условиями области просмотра. Мне нравится использовать picture :

Вы заметите, что у каждого source есть атрибут srcset, который указывает URL-адрес изображения, и атрибут media, который определяет условия, при которых этот источник должен использоваться. Браузер выбирает наиболее подходящий источник из списка в соответствии с условиями media со стандартным элементом img, действующим как значение по default/fallback.

Можем ли мы объединить эти два подхода для создания лениво загруженных адаптивных изображений?

Конечно, мы можем! Давай сделаем это.

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

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

Итак, изначально наш элемент изображения может выглядеть так:

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

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

Браузер может увеличить крошечное предварительное изображение для нас с помощью CSS, чтобы оно соответствовало всему элементу изображения, а не была бы просто 20 пикселей. Объекты станут немного … пикселированными, как вы можете себе представить, когда изображение с низким разрешением раздувается до больших размеров.

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

Переключение source с помощью JavaScript

С небольшой адаптацией мы можем использовать ту же технику, что и раньше, чтобы установить правильные URL для наших атрибутов srcset и src.

Последний шаг для завершения эффекта: удаление эффекта размытия изображения после загрузки нового source. Мы сделаем это через event listener события load на каждом новом ресурсе изображения.

Так же мы можем сделать хороший переход, который устраняет размытие с помощью CSS.

Маленький помощник от наших друзей

Отлично. С помощью всего лишь небольшого кода JavaScript, нескольких строк CSS и очень удобного кода HTML мы создали метод отложенной загрузки, который также обслуживает адаптивные изображения. Итак, почему мы не счастливы?

Ну, мы создали две проблемы:

  1. Наша разметка для добавления изображений стала сложнее, чем раньше. Раньше жизнь была простой, когда все, что нам было нужно, это один тег img со старым добрым атрибутом src.
  2. Нам также потребуется создавать несколько версий каждой картинки, чтобы получить каждый размер и плюс предварительно загруженное состояние. Это потребует значительное время на создание всего того что будет нужно.

Но не бойтесь. Мы можем упростить обе эти проблемы.

Генерация элементов HTML

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

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

  • Jekyll позволяет создавать собственные плагины
  • Hugo дает вам специальные шорткоды
  • У Eleventy есть шорткоды для всех шаблонных движков, которые он поддерживает
  • и т. д…

В качестве примера я сделал шорткод lazypicture в своем примере проекта, созданного с помощью Eleventy. Шорткод используется так:

Чтобы сгенерировать HTML, который нам нужен во время сборки:

Генерация изображений

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

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

Вариант 1. Создание изображений во время сборки

Для этого существуют популярные утилиты. Независимо от того, запускаете ли вы свои сборки с помощью Grunt, Gulp, webpack, Make или чего-то еще, скорее всего, для вас есть уже созданные плагины.

Пример ниже использует gulp-image-resize в задаче Gulp как часть процесса сборки. Он может разбирать каталог с изображениями и генерировать нужные вам варианты. У него есть куча опций, которыми вы можете управлять, и вы можете комбинировать их с другими утилитами Gulp, чтобы делать такие вещи, как называть разные варианты в соответствии с выбранными вами соглашениями.

Сайт CSS-Tricks использует аналогичный подход (благодаря функции нестандартных размеров в WordPress) для автоматической генерации всех его различных размеров изображения. (О да! CSS-Tricks – в тренде!) ResponsiveBreakpoints.com предоставляет веб-интерфейс для экспериментов с различными настройками и опциями для создания наборов изображений и даже генерирует код для вас.

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

Альтернативой является преобразование этих ресурсов во время запроса, а не на этапе сборки. Это второй вариант.

Вариант 2: преобразования изображений по требованию

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

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

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

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

Сервис преобразования изображений Netlify построен на основе чего-то, называемого Netlify Large Media. Это функция, созданная для управления большими ресурсами в вашем VCS. Git не очень хорош в этом по умолчанию, но Git Large File Storage может расширить Git, чтобы позволить включать большие ресурсы в ваши репозитории, не засоряя их и не делая их неуправляемыми.

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

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

Netlify ищет параметры строки запроса querystring при преобразовании изображений. Вы можете указать высоту, ширину и тип обрезки, которую хотите выполнить. Например:

  • Необработанное изображение без преобразований:
    /images/apple3.jpg
  • Изображение размером 300 пикселей в ширину:
    /images/apple3.jpg?nf_resize=fit&w=300
  • Изображение обрезается до 500 на 500 пикселей с автоматическим определением фокуса:
    /images/apple3.jpg?nf_resize= smartcrop&w=500&h=500

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

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

Завершение

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

Этот демонстрационный сайт объединяет ряд этих концепций и использует сервис преобразования изображений Netlify.

Что такое ленивая загрузка и как её сделать на WordPress

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

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

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

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

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

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

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

Ленивая загрузка на WordPress создаётся с помощью плагина BJ Lazy Load. Он является одним из самых популярных, простых, и эффективных. Он даже не нуждается в настройке, поэтому пользуется спросом у новичков. Скачайте плагин по ссылке ниже и установите на свой сайт.

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

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

Кроме того в редакторе записей/страниц плагин создаёт специальную опцию, которая позволяет отключать ленивую загрузку для конкретной записи/страницы.

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

Чтобы не быть голословным, давайте посмотрим, насколько хорошо работает плагин BJ Lazy Load, насколько он улучшает скорость загрузки сайта.

Итак, пока плагин BJ Lazy Load не установлен, создайте страницу с изображениями или видео высокого качества (если у вас такой ещё нет). Перейдите на сервис измерения скорости загрузки страниц. В поле URL вставьте ссылку на страницу с тяжеловесным контентом и нажмите на кнопку «Start test».

Дождитесь завершения теста и запомните показатель «Load time». Например, у меня он 2,66 секунды.

Теперь произведите ту же процедуру, только когда ленивая загрузка работает, то есть после установки и активации плагина BJ Lazy Load. Результат очевиден. У меня стало 1,96 секунды.

Кому подойдёт ленивая загрузка

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

Lazy load или ленивая загрузка изображений – что это, и как ее сделать на сайте

Доброго времени суток, дорогие друзья!

В этой статье я расскажу про ленивую загрузку изображений (lazy load), а также о том, как ее можно реализовать на сайте с WordPress. Помимо этого, мы обсудим значение ленивой загрузки для поисковой оптимизации.

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

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

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

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

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

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

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

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

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

Ленивая загрузка изображений позволит отобразить текстовый контент, поэтому пользователь не будет сразу покидать ресурс. Возможно, он заинтересуется и начнет изучать его. В процессе изучения текста подгрузятся и картинки, и вот уже перед пользователем будет полноценная статья. Он не покинет ресурс, и поисковые системы не будут считать это отказом. Именно поэтому lazy load – это функционал, который рекомендуется многими SEO-специалистами для коммерческих и информационных ресурсов.

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

Виды lazy load

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

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

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

Если бы не было ленивой загрузки, то эти 10 – 15 секунд ушли бы на открытие страницы. Смотреть в белый экран браузера не очень приятно, так что, скорее всего, человек просто бы закрыл сайт. А тут он будет занят изучением контента и вряд ли заметит какие-то проблемы.

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

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

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

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

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

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

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

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

Как сделать lazy load на WordPress

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

С помощью функционала в шаблонах

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

Из бесплатных можно выделить тему Hueman. Ее можно найти в бесплатном каталоге WordPress, также эту тему можно установить прямо из панели управления WP.

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

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

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

С помощью плагинов

Если вы не хотите менять шаблон, то вам помогут плагины. В каталоге WordPress их очень много, вам просто нужно перейти в него и ввести ключевые слова в строку поиска. Здесь я расскажу о самых популярных и востребованных расширениях, которые помогут вам сделать lazy load на сайте с WP.

Довольно популярный плагин, который имеет более 100 000 активных установок по данным WordPress.org. Установить его можно прямо из панели управления в несколько кликов. Сам плагин имеет огромное количество преимуществ и подойдет для использования почти на любом проекте.

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

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

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

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

Еще один популярный плагин, который позволит вам сделать отложенную загрузку картинок. Модуль имеет более 40 000 активных установок и продолжает набирать популярность. Его можно рассматривать как неплохую альтернативу предыдущему плагину.

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

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

Небольшое расширение, которое помогает настроить отложенную загрузку фотографий на вашем ресурсе. Он также бесплатно доступен в каталоге WP, установить можно прямо из панели администратора WordPress. Сейчас плагин не особо популярен, всего 4 000+ активных установок. Однако отзывы он имеет довольно положительные.

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

Простенькое расширение с 80 000+ активных установок. Доступен прямо в панели управления WordPress и имеет сравнительно простой интерфейс.

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

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

Как сделать lazy load без плагинов

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

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

Этот скрипт работает очень просто: вы заменяете все атрибуты src в теге img на data-src (можно использовать с каким-либо другим префиксом), после чего добавляете в CSS-код несколько строчек. Они и будут отвечать за отображение графики при скроллинге. Также вам необходимо будет использовать JS-код, который будет заменять все атрибуты с префиксом на обычные после того, как все картинки на странице будут загружены.

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

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

Заключение

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

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

Ну а если вы хотите научиться зарабатывать на своем сайте с помощью разных способов, то я советую вам обратить внимание на курс от Василия Блинова. В нем автор рассматривает создание блога на WordPress от “А” до “Я”, раскрывая все секреты и особенности вебмастеринга. По ссылке выше вы найдете более подробную информацию.

Ленивая загрузка изображений средствами браузера

Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов и loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.

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

Сейчас мы поговорим о том, как будет работать атрибут loading .

Предварительные сведения

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

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

Страница, загружающая 211 изображений. Версия страницы, при создании которой ленивая загрузка изображений не используется, сразу загружает 10 Мб графических данных. Та же страница, использующая ленивую загрузку (с помощью LazySizes) предварительно загружает лишь 250 Кб графической информации. Всё остальное подгружается по мере продвижения пользователя по странице. Подробности об этом эксперименте можно посмотреть на webpagetest.org.

Что если бы браузер мог бы помочь программисту избежать загрузки изображений, которые находятся за пределами видимой области страниц? Это благотворно сказалось бы на скорости загрузки данных в видимой области страницы, снизило бы, на маломощных устройствах, общий объём передаваемых по сети данных, уменьшило бы потребление памяти. Скоро всё это будет возможно благодаря новому атрибуту элементов и loading .

Атрибут loading

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

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

Если значение атрибута loading не указывать — это будет равносильно установке его в значение auto .

В настоящее время работа над атрибутом loading для элементов и ведётся в рамках стандарта HTML

Примеры

), а также с элементами .

Надо отметить, что мы используем тут формулировки наподобие следующей: «когда пользователь прокрутит страницу так, что её видимая область окажется поблизости от элемента». Точный момент начала загрузки изображения браузер определяет самостоятельно. В целом мы можем надеяться на то, что браузер начнёт загрузку материалов, загрузка которых была отложена, за некоторое время до того, как область страницы, содержащая их, окажется видимой пользователю. Это увеличит шансы того, что загрузка и вывод соответствующих материалов завершатся к тому моменту, когда пользователь их увидит.

Обратите внимание на то, что я предложил, чтобы атрибут, о котором идёт речь, назвали бы именно loading , так как такой подход к его именованию соответствует тому, что использовался при выборе имени для атрибута decoding. Предыдущие предложения, наподобие lazyload , не подошли, так как нужно было, чтобы этот атрибут поддерживал бы несколько значений ( lazy , eager и auto ).

Проверка поддержки атрибута loading браузерами

Мы принимали во внимание важность возможности применения JavaScript-библиотек для организации ленивой загрузки материалов (для кросс-браузерной поддержки этой возможности). Проверить, поддерживает ли браузер атрибут loading , можно так:

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

Кросс-браузерная ленивая загрузка изображения

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

В разметке нужно использовать что-то наподобие (а не src , srcset или ) для того чтобы избежать срабатывания обычной загрузки изображения браузерами, которые не поддерживают новый атрибут. Для того чтобы менять подобные атрибуты на те, которые нужно использовать при поддержке браузером атрибута loading , или для загрузки соответствующей библиотеки в том случае, если этот атрибут не поддерживается, можно использовать возможности JavaScript.

Вот пример того, как это может выглядеть:

Рассмотрим некоторые особенности этого кода:

  • Изображения, которые видны пользователю сразу после загрузки страницы, описаны с помощью обычных тегов . Использование атрибута data-src без src приведёт к тому, что изображения, сразу после загрузки страницы, показаны не будут, поэтому, настраивая те изображения, которые должны быть видны сразу же после загрузки страницы, мы должны указывать атрибут src .
  • При описании изображений, которые, сразу после загрузки страницы, пользователю не видны, мы используем атрибут data-src . Делается это для того чтобы предотвратить их обычную загрузку в браузерах, не поддерживающих атрибут loading . Если браузер этот атрибут поддерживает, мы меняем data-src на src .
  • Если атрибут loading не поддерживается, мы загружаем вспомогательную библиотеку (lazySizes) и инициализируем её. Здесь мы используем > для того чтобы указать библиотеке LazySizes на изображения, с которыми мы хотим работать, используя методику ленивой загрузки.

Демонстрационный пример

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

Особенности реализации поддержки атрибута loading в Chrome

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

Испытание атрибута loading

Для того чтобы прямо сейчас испытать новый атрибут, перейдите к странице настройки флагов Chrome ( chrome://flags ), включите флаги Enable lazy frame loading и Enable lazy image loading , и перезагрузите браузер.

Настройки браузера

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

Вышеприведённая команда соответствует текущим настройкам, применяемым по умолчанию. Для того чтобы загрузка изображений начиналась бы в том случае, если позиция прокрутки страницы находится на расстоянии в 400 пикселей от изображения, все значения в этой команде нужно поменять на 400. Ниже приведён пример 1-пиксельной вариации этой команды (такая настройка используется в вышеупомянутом видео).

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

Инструменты разработчика

Особенности реализации поддержки атрибута loading в Chrome заключаются в том, что браузер, при загрузке страницы, запрашивает первые 2 Кб изображений у сервера в том случае, если он поддерживает технологию range request (запрос на диапазон). В первых 2 Кб изображений, наверняка, содержатся сведения об их размерах. Это позволяет браузеру генерировать местозаполнители, имеющие размеры, соответствующие размерам изображений. Кроме того, в эти 2Кб, если речь идёт о небольших изображениях вроде значков, весьма вероятно, входит всё изображение.

Загрузка фрагментов графических файлов

Chrome загружает оставшиеся данные изображений в тот момент, когда пользователь близок к тому, чтобы их увидеть. При работе с инструментами разработчика это может привести к тому, что в панели Network может «появиться» информация о двух загрузках изображения, а в панели Resource Timing будут выведены сведения о двух запросах, выполняемых для загрузки каждого изображения.

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

Если бы мы жили в совершенном мире, то для того чтобы узнать о том, нужно ли, для правильного вывода страницы в некоем браузере, использовать вспомогательную библиотеку, можно было бы не полагаться на анализ браузера средствами клиентского JavaScript. При таком подходе сервер, заранее зная, нужна такая библиотека или нет, включил бы (или не включил бы) её в состав страницы, отправляемой браузеру. Подобную проверку может сделать возможной использование технологии HTTP Client Hint, благодаря которой клиент способен передавать серверу «подсказки» о своих возможностях.

Соответствующая «подсказка», касающаяся поддержки атрибута loading , находится сейчас на ранней стадии рассмотрения.

Итоги

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

Уважаемые читатели! Планируете ли вы использовать атрибут loading в своих проектах?

Ускорить сайт с множеством картинок: руководство по отложенной загрузке изображений Материал редакции

Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

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

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

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

Основные возможности — вкратце

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

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

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

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

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

Инструменты

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

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

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

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

Способы реализации

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

Отложенную загрузку изображений можно разделить на два этапа.

Шаг первый — предотвратить изначальную загрузку изображения. Для изображений, загруженных с помощью тега , браузер использует атрибут тега «src» для запуска загрузки изображения. Не имеет значения, первое это или тысячное изображение в HTML и закадровое ли оно. Если браузер получит атрибут «src», это вызовет загрузку изображения.

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

Второй шаг — нужно дать установку браузеру, когда загружать изображение. Для этого устанавливаем, что как только изображение (то есть его плейсхолдер) попадает в окно просмотра, начинается загрузка. Чтобы проверить, попало ли изображение в окно просмотра, существует два способа. Рассмотрим оба с помощью рабочих примеров кода.

Загрузка изображений с помощью событий JavaScript

В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

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

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

Загрузка изображений с помощью Intersection Observer API

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

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

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

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

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

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

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

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

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

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

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

Поначалу это может показаться сложным, но такой же принцип лежит в основе техники отложенной загрузки фоновых изображений. Так мы обманываем браузер, не применяя свойство CSS «background-image» к элементу, пока этот элемент не попадёт в окно просмотра. Ниже рабочий пример отложенной загрузки фонового изображения CSS.

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

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

Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

Улучшить пользовательский опыт

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

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

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

1. Правильный дизайн плейсхолдеров

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

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

Плейсхолдер доминирующего цвета

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

Может показаться, что это сложно реализовать. Но есть простой способ — сначала уменьшить изображение до пикселя 1×1, а затем масштабировать его до размера плейсхолдера — грубое приближение, но оно помогает легко получить один доминирующий цвет. Используя ImageKit, плейсхолдер доминирующего цвета можно получить с помощью цепного преобразования, как показано ниже.

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

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

Плейсхолдер низкого качества (LQIP)

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

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

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

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

2. Добавление буферного времени

Часто пользователи быстро прокручивают страницу, и для загрузки и отображения картинки на экране требуется некоторое время. Событие «load image» может сработать с задержкой, как и плейсхолдеры. Это плохо влияет на пользовательский опыт.

Решение

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

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

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

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

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

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

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

3. Как избежать смещения содержимого

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

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

Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

Решение

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

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

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

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

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

  • Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
  • Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
  • Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

Популярные JavaScript-библиотеки

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

  • yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
  • lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
  • jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.
  • WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
  • Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
  • Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
  • WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.

Как проверить, всё ли работает

Самый простой способ — открыть инструменты разработчика в браузере Chrome. Перейдите на вкладку «Сеть» → «Изображения». Здесь при первом обновлении страницы должны загружаться только те изображения, которые должны присутствовать на странице изначально.

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

Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

Если не работает

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

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

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

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

Ничего-то вы не понимаете. Сегодня нельзя просто так взять и сверстать страничку, как это делалось 15 лет назад — чтобы она просто тупо работала, быстро и надёжно. За это никто вам денег сегодня не заплатит. И на работу вас не возьмёт. А вот когда вы научитесь обклеивать эту несчастную страничку реактами, ангулярами, анимациями, шрифтами, параллаксами и отложенными загрузками, как ёлку мишурой, и превращать её в прогрессивное и реактивное веб-приложение, способное вызвать у пользователя вопрос «Да что там, опять майнер, что ли?» — вот тогда вы профессионал, тогда у вас есть з/п и вам есть что написать в резюме.

В самое яблочко!
Желательно еще библиотеки, шрифты и картинки разложить на разных серваках — так интереснее. А у «разработчика» время экономится — ведь не надо ничего грузить и закачивать.
Роскомнадзор бесится и все подряд блокирует, а у народа сайты расползаются, джиэска не прилетела. Веселуха просто

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

Верстайте попроще, чтобы ваш продукт работал быстро, и на бОльшем числе дивайсов.

Добавлю. Недавно в работу попал интернет-магазин дилерский русского света, их домен rs24.ru
Посмотрите, как формируется контент страниц. Прилетает json, и на его основе рисуется страница категории, товара.

Вопрос был — как у вас контент забирать? Ответ — через api. Вот только один запрос — один товар. По дефолту ограничение 30000 запросов в сутки.
Конечно, могут поднять, но это полный маразм, по одной штучке дергать. А еще мне рассказали про другого дилера, который на основе запросов к их api формирует карточки товаров. Страница грузится полторы секунды, но это ж не беда 🙂 Слова их сотрудника.

Будьте проще и заходите через парадный вход. У нас есть json, который прилетает на страницу, зачем нам их куцый api?

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

Оптимизация и защита изображений на сайтах с CMS WordPress

Рассмотрим три группы плагинов, которые могут быть полезны для оптимизации и защиты изображений на сайте, реализованном на базе CMS WordPress:

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

1. Для сжатия изображений используем плагины:

WP Smush Image Compression and Optimization

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

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

Рисунок 1. Быстрая установка плагина WP Smush Image Compression and Optimization

Рисунок 2. Быстрая установка плагина WP Smush Image Compression and Optimization (продолжение)

Рисунок 3. Статистика WP Smush Image Compression and Optimization

Рисунок 4. Настройки WP Smush Image Compression and Optimization (экран 1)

Рисунок 5. Настройки WP Smush Image Compression and Optimization (экран 2)

Рисунок 6. WP Smush Image Compression and Optimization – оптимизация папки

Рисунок 7. WP Smush Image Compression and Optimization – выбор папки с изображениями (помимо uploads)

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

Рисунок 8. WP Smush Image Compression and Optimization – пример оптимизированной картинки

Compress JPEG & PNG images

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

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

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

Вам нужно указать email (рис. 9), на который придёт ссылка подтверждения и входа в личный кабинет на сайте разработчика (рис. 10).

После того как вы получите ключ, укажите его в админке в настройках плагина и сохраните. Если всё верно, в настройках вы увидите подтверждение (рис. 11).

Рисунок 11. Настройки плагина сжатия изображений

Стоит отметить, что в настройках на скриншоте выше мы видим 8 вариантов размеров, на которые обрезается каждая картинка, загруженная на сайт. Это особенности темы. Мы используем все 8 размеров редко, поэтому я бы порекомендовала отметить в настройках только 2–3 реально используемых размера изображений.

Также можно уменьшить размер оригинального изображения, как предложено, до 2048px на 2048px.

Далее, в меню «Медиафайлы» находим новый пункт Bulk Optimization и запускаем оптимизацию наших картинок (рис. 12).

Рисунок 12. Запуск оптимизации с помощью плагина оптимизации изображений от TinyPNG

На момент установки плагина у нас 650 изображений, поэтому придётся убрать часть размеров или заплатить $1,36. Удобно, что мы сразу видим стоимость в админке и можем решать – экономить или заплатить.

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

Рисунок 13. Процесс и статистика оптимизации

Под общей статистикой мы можем увидеть, насколько сжата каждая картинка (рис. 14).

Рисунок 14. Процент сжатия каждого изображения

Рисунок 15. Статистика и инструменты сжатия изображений в списке медиафайлов

В колонке Compress Images мы можем отследить, какие изображения уже сжаты и насколько, а в меню «Действия» можно выборочно сжать одно или несколько изображений.

2. Для «ленивой» загрузки – lazy load

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

A3 Lazy Load

При включении плагина все функции активированы, а именно:

  • «ленивая» загрузка изображений всех типов контента на сайте (в виджетах, записях и т. д.);
  • «ленивая» загрузка видео и фреймов;
  • вывод скриптов плагина в футере;
  • выбор эффекта загрузки (постепенное появление или лоадер (рис. 22) и фонового цвета блока, куда подгружается картинка;
  • плагин можно выводить или не выводить на мобильных версиях сайта (если используются плагины-шаблоны мобильной версии WPtouch или MobilePress);
  • можно задать «точку отсчёта», при прокрутке к которой будет активироваться «ленивая» загрузка.

Рисунок 16. Настройки плагина A3 Lazy Load

Рисунок 17. Выбираем, к каким типам изображений применить A3 Lazy Load

Рисунок 18. Настройка A3 Lazy Load для фреймов и видео

Рисунок 19. Настройка A3 Lazy Load для фреймов и видео, плагинов-шаблонов для мобильных устройств и эффекта при подгрузке картинки

Рисунок 20. Настройка начала подгрузки изображения (в пикселях)

Рисунок 21. Работа плагина на сайте

BJ Lazy Load

Принцип работы плагина аналогичный A3 Lazy Load. Доступны следующие настройки:

  • можно выбрать, к каким типам изображений применять ленивую загрузку (в записях, текстовых виджетах, к миниатюрам, граватарам – см. рис. 22);
  • постзагрузка изображений;
  • постзагрузка фреймов iframe;
  • возможность указать ссылку на свой графический плейсхолдер (тут и далее см. рис. 23);
  • можно исключить изображения, использующие определённое значение >Рисунок 22

Рисунок 24. Плагин добавляет изображениям классы, по которым скрипт lazy load (классы lazy, lazy-loaded) определяет, к каким именно картинкам нужно применить этот метод загрузки

При просмотре страницы мы так же, как и при использовании A3 Lazy Load, сначала видим спиннер, а затем картинки.

3. Для защиты от копирования

Для защиты от копирования изображений используются так называемые «водяные знаки».
Рассмотрим два плагина, очень похожих по принципу работы: Easy Watermark и Image Watermark.

Easy Watermark

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

Рисунок 25. Инструменты плагина

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

Рисунок 26. Общие настройки плагина

Среди общих настроек плагина есть следующие:

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

Рисунок 27. Общие настройки плагина (продолжение)

Рисунок 28. Установка прав по группам пользователей

Рисунок 29. Общие настройки плагина – выбор типа записей, на вложения которых будет нанесён водяной знак

Рисунок 30. Настройки изображения водяного знака

Рисунок 31. Настройки изображения водяного знака (продолжение)

Доступны следующие настройки изображения:

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

Рисунок 32. Настройки текста водяного знака

Рисунок 33. Настройки текста водяного знака (продолжение)

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

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

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

Рисунок 34. Пример изображения с водяными знаками

Image Watermark

Рассмотрим настройки плагина (рисунки 35–38). С его помощью можно:

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

Несмотря на то, что этот плагин не использует в качестве водяного знака текст, у него есть другое очень полезное свойство – защита через копирование по правому клику (рис. 38).

Рисунок 35. Настройки плагина Image Watermark

Рисунок 36. Настройки расположения водяного знака Image Watermark

Рисунок 37. Выбор и настройка изображения водяного знака

Рисунок 38. Дополнительные настройки защиты изображения

Мастер Йода рекомендует:  Выбираем нишу для WordPress-сайта
Добавить комментарий