Инструкция по установке и настройке плагина True Image & Lazy Load.

Установка плагина

После оплаты лицензии у вас в Личном Кабинете (Мой аккаунт) будет доступна ссылка на скачивание плагина и номер лицензии:

Лицензия и ссылка на скачивание файла.

После клика по кнопке "Скачать версию ..." сохраниться архив с плагином вида true-image-lazyload.2.3.14-3783u9.zip. Установка стандартная:

  1. Переходите в меню Плагины.
  2. Выбираете Добавить новый.
  3. Далее Загрузить плагин.
  4. Далее выбрать Загрузить файл и указать путь к zip архиву на диске.

Активация лицензии

Чтобы активировать лицензию выберите в административном меню WP Booster > True Image Lazyload и перейдите на вкладку Лицензия. Здесь введите лицензию и нажмите Activate Licence. Подождите. Активация может занять 5-10 сек. Если активация не произошла, попробуйте обновить страницу (F5) и заново ввести лицензию.

Вкладка Лицензия

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

Чтобы настроить плагин выберите в административном меню WP Booster > True Image Lazyload.

Основные

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

Использовать атрибут decoding. Добавляет атрибут decoding=”async” для асинхронной загрузки изображений. Рекомендуется - смотрите видео.

Использовать атрибут loading. Добавляет атрибут loading=”lazy” для нативного lazyload изображений. Не рекомендуется включать. Почему? Смотрите видео.

Использовать самое большое фото в src. Формирует тег <img> в котором в атрибуте src находиться ссылка на изображение максимального качества.

Use passive events. Убирает замечание ”Пассивные прослушиватели событий не используются для улучшения производительности при прокрутке”

Placeholder URL. Можно выбрать из библиотеки или загрузить собственный уникальную анимированную картинку-лоадер, которую видно при загрузке. Не рекомендуем устанавливать собственную картинку (кроме случаев когда Вы действительно понимате что делаете). Наш лоадер (placeholder), хотя и не выделяется, но является оптимальным для показателей PageSpeed.
Если добавляли свой пользовательский плейсхолдер для картинок при загрузке, то для того чтобы вернуться к настройкам по-умолчанию, очистите поле выбора изображения и нажмите "Сохранить".
Отдельный случай если на сайте преобладают квадратные картинки или картинки в портретной ориентации. Для таких оптимальным будет плейсхолдер в виде gif размером в 1px (Скачать 1px gif).

  • Если хотите установить к качестве плейсхолдера svg, то наш плагин автоматически включает поддержку этого типа картинок
  • Чтобы установить дефолтную картинку-лоадер из плагина просто очистите строку ввода и нажмите "Сохранить"

Основные настройки.

Логотип

Отдельные настройки для логотипа понадобились потому, что во-первых это тоже картинка, во-вторых она может стать важным элементом микроразметки Schema.org. На многих "seo" блогах советуют разметку schema.org/Organization (которая нужна для разметки schema.org/Article и других) прописывать где-то в середине шаблона, дублируя при этом там ссылку на логотип. Но зачем, если логотип и так уже есть в шапке сайта? Дважды загружать одну и ту же картинку? Мы предлагаем разметить существующий логотип в шапке, получить валидную микроразметку и правильный srcset.

Отключить ссылку. Данная настройка убирает на Главной странице сайта циклическую ссылку из логотипа. Во многих темах WordPress логотип "обёрнут" в ссылку, ведущую на Главную страницу сайта. Но когда вы сами находитесь на Главной, то эта ссылка ведёт сама на себя. Получается так называемая циклическая ссылка. Её вред не доказан, но считается правилом хорошего тона не иметь на странице таких ссылок.

Использовать микроразметку. Подключает к логотипу микроразметку schema.org/Organization (описано выше)

Телефон. Неотъемлемая часть микроразметки schema.org/Organization. Укажите реальный или любой другой

Адрес. Неотъемлемая часть микроразметки schema.org/Organization. Укажите реальный или любой другой

Вкладка Логотип

Фото записей

Фото записи это настройка Превью статьи (Миниатюрка, Обложка, Thumbnail....) - первой картинки, которая идёт обычно после заголовка статьи

Использовать микроразметку. Включить разметку schema.org/ImageObject

Использовать "ленивую загрузку" на JS (рекомендуем - Нет). Подключение правильной Lazy Load для Превью статьи. Если у Вас Превью (Миниатюрка, Обложка, Thumbnail....) на первом экране, то лучше выбрать Нет. Да, тест PageSpeed будет указывать на неё как на проблему. Но картинки на первом экране откладывать нет смысла. Они должны загрузится как можно быстрее. Чтобы решить проблему с этими картинками используйте preload.

Использовать автозаполнение Alt (рекомендуем - Да). Автоматическая генерация атрибута alt для всех изображений при их загрузке в Медиатеку. Теперь достаточно, перед загрузкой на сайт, назвать изображение "Как забить гвоздь..jpg" и при загрузке к нему автоматически прописывается alt "Как забить гвоздь" .
Так решается сразу несколько проблем:

  • Мы получаем seo-friendly URL картинки типа kak-zabit-gvozd..jpg
  • Мы сразу получаем нужные alt и title, которые согласуются с URL картинки. Естественно alt и title можно подредактировать для каждой конкретной страницы.
  • В целом это очень ускоряет работу при постинге новых статей.

Как установить и настроить плагин True Image &#038; Lazy Load

Примечание 1 для разработчиков:
Обычно Фото (Обложка статьи) выводиться в файле single.php. Для максимальной совместимости с плагином, рекомендуется выводить Обложку через:

the_post_thumbnail( 'full' );
или
echo get_the_post_thumbnail( null, 'full' );

Использование конструкций типа:

echo get_the_post_thumbnail( null, 'large', array('class' => 'post_thumbnail img-responsive post-thumbnail' );

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

Видимый размер картинки необходимо регулировать не выбором параметров функции the_post_thumbnail (такими как 'thumbnail', 'medium' ....), а задавать в стилях блока, внутри которого находится Обложка статьи.

Примечание 2 для разработчиков:
Изменять путь плейсхолдеру можно с помощью фильтра:

true_image_lazyload_placeholder_url

Фото внутри записи

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

Использовать микроразметку (Да, если отключено добавление микроразметки сторонними плагинами). Включить разметку schema.org/ImageObject в формате Microdata. Не влияет на микроразметку в формате JSON.

Использовать "ленивую загрузку" на JS (Да). Подключение правильной Lazy Load для изображений статьи

Использовать попапы (Да). Использовать правильный lightbox для увеличения изображений. Все сторонние плагины lightbox нужно отключить.

Отключить ссылку. На большинстве сайтов на WordPress применяется так называемый "неправильный" Lightbox. Его суть сводится к тому, что картинка низкого качества обёрнута в ссылку на картинку высокого качества. И по клику мы видим в модальном окне эту картинку.
Что не так с этим Lightbox? Во-первых у нас в теге src всегда должна быть ссылка на картинку максимального качества, во-вторых картинка обёрнутая в ссылку, это уже не картинка. Это анкор ссылки. Который ведёт нас (зачем?) на картинку в высоком качестве. Конечно на вновь созданных сайтах Вы сможете сразу вставить изображения правильно. Но на старых, где уже есть 100-200-300 статей делать это вручную долго. Данная настройка автоматически уберёт эти ссылки.

Отключить тег <figure> (Да). Обычно на сайтах картинки обёрнуты в тег <figure> Эта настройка автоматически уберёт эти теги (зачем? смотрите видео https://www.youtube.com/watch?v=Ma_AAQzapwM).

Использовать автозаполнение Alt (Да). Автоматическая генерация атрибута alt для всех изображений при их загрузке в Медиатеку. Аналогично этой же функции для Фото записей.

Фото внутри записи.

Лицензия

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

Функции плагина без настроек

Автоматическое добавление атрибута alt к обложкам (превью, миниатюрам) записи. Если на вашем сайте есть давно загруженные изображения без alt, то в них alt заполнится автоматически (при выводе на страницу). Логика такая: если alt нет, он берётся из title картинки, если title нет - то название статьи, лишь бы не пустой. В целом это лучше, чем просто вписывать название статьи, так как title изображений чаще всего уже прописан.

Совместимость разных тем оформления с плагином

Тема Совместимость
GeneratePress полная
Twenty Twenty полная
OceanWP Уже внедрена разметка Brand. Разметку Organization в плагине необходимо отключить
При отсутствии у картинки alt, тема вписывает название статьи.

Astra Уже внедрена разметка Organization. Разметку Organization в плагине необходимо отключить
Simpatika для поддержки lightbox необходимо доавить стили:
.bg-dark {
    background-color: transparent !important;
}
.picture-big {
background-color: rgb(8 8 8 / 70%);
}

 
 

FAQ

Вместо картинок просто лоадер или пустое место

Скорее всего у вас установлен плагин для отложенной загрузки скриптов или плагин добавляющий атрибут async="async" (WP Rocket, Autoptimize, Async Javascript .... ). Чтобы вернуть работоспособность плагина, нужно добавить его в исключения.
В WP Rocket:

Как установить и настроить плагин True Image &#038; Lazy Load

Пример, как добавить исключения для скриптов jQuery, True Image, Mihdan: Lite YouTube Embed:

/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
/true-image-lazyload/assets/js/(.*).js
/mihdan-lite-youtube-embed/assets/dist/js/(.*).js

В Autoptimize (тут вместо async можно добавлять атрибут defer. В принципе сейчас использовать асинхронную загрузку бессмысленно для улучшения показателей PageSpeed):

Как установить и настроить плагин True Image &#038; Lazy Load

У меня нарушилась верстка ( микроразметка, всё пропало ...)

  1. В некоторых премиум темах или плагинах может добавляться своя микроразметка Microdata к картинкам. В этом случае необходимо найти эти настройки темы (плагина) и отключить. Наш плагин добавляет всю необходимую разметку.
  2. Если не применяется микроразметка (не добавляются атрибуты, не работает Lazy Load....) в Галереях, то это также зависит от применяемого плагина Галерей. Плагин отлично работает с галереей из блоков редактора Gutenberg и стандартной галерей TinyMCE. Примеры несовместимых плагинов: Photo Gallery by Supsystic, Portfolio Gallery – Image Gallery Plugin.

True Image & Lazy Load работает практически с любым плагином для изображений, который соблюдает следующие условия:

  1. Код рендерится на серверной стороне (PHP), не на клиенте (javascript)
  2. В коде присутствует тег img с прописанными атрибутами src и srcset: <img src="" srcset="" />
  3. Нет других плагинов, которые меняют микроразметку для изображений
  4. Нет других плагинов, которые меняют атрибуты тегов
  5. Нет других плагинов, которые реализуют LazyLoad
  6. Нет скриптов в functions.php или в папке /wp-content/mu-plugins, которые делают, что описано выше

Для каких картинок включать Lazy Load, а для каких нет?

В настройках Вы найдёте страницу с выбором изображений, для которых нужно включить Lazy Load:

vybrat razmery izobrazheniya

Мы уже описывали в статье как правильно настроить Lazy Load для каких изображений не нужно включать отложенную загрузку. Если совсем кратко - его не нужно включать для картинок на первом экране, то есть для тех, которые видны сразу после загрузки страницы сайта. Чаще всего это Post thumbnails - обложки поста.

Если Вы не знаете какой размер изображения у картинки на первом экране в Вашей теме, просто включайте по очереди в настройках, обновляйте страницу и смотрите исходный код. Если у картинки есть класс mihdan-lozad , например : class="post-top-featured mihdan-lozad wp-post-image", то значит для неё включена отложенная нагрузка. Если нет класса mihdan-lozad - отключена. Таким образом включая/отключая можно понять для какого размера нужно отключить Lazy Load.
Второй способ сделать тоже самое - присвоить таким картинкам класс till-exclude-img (об этом написано ниже ). Но в этом случае кроме Lazy Load, будет отключено добавление микроразметки и т.д.

До установки плагина я уже добавил много картинок в низком разрешении. Что делать?

Простых массовых способов нет. Можно конечно выгрузить все картинки по FTP и массово увеличить. Но из картинки 300х200 получить качественную в разрешении 1920х1080 почти невозможно .

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

Если предпочитаете менять изображения прямо из админки, то Вам поможет плагин Enable Media Replace. Он позволит менять картинки сохраняя её имя и alt. То есть если было moya-kartinka.jpg, то так и останется.

Как исключить из обработки отдельное изображение

Для того чтобы на каком-либо изображении не применялись настройки плагина (lazy load, decoding="async", микроразметка ...) необходимо к этому изображению добавить класс till-exclude-img.

Как установить своё изображение для картинки-лоадера

Чтобы установить свой собственный лоадер при загрузке картинок (виден при скролле страницы), используйте настройку на вкладке Основные.
Внимание! Ищите изображения в формате svg! Изображения в формате png и jpg могут отразиться на показателях PageSpeed.

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

Разработчики могут применить фильтр true_image_lazyload_placeholder_url для изменения пути к плейсхолдеру