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

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

Основные настройки плагина

Логотип

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

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

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

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

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

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

Фото записей

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

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

Использовать «ленивую загрузку». Подключение правильной Lazy Load для Превью статьи

Вкладка Фото записи

Примечание для разработчиков:
Обычно Фото (Обложка статьи) выводиться в файле 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’ ….), а задавать в стилях блока, внутри которого находится Обложка статьи.

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

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

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

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

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

Лицензия

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

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

ТемаСовместимость
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

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

  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="https://wp-booster.com/wp-content/plugins/my-true-image/img/placeholder.svg" data-srcset="" />
  3. Нет других плагинов, которые меняют микроразметку для изображений
  4. Нет других плагинов, которые меняют атрибуты тегов
  5. Нет других плагинов, которые реализуют LazyLoad
  6. Нет скриптов в functions.php или в папке /wp-content/mu-plugins, которые делают, что описано выше

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

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

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

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

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

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