Как использовать WebP-изображения в WordPress

В этом руководстве я расскажу, как использовать формат WebP в WordPress😉

Правило 2-х секунд

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

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

Как использовать WebP-изображения в WordPress

Если вы столкнулись с проблемой медленной загрузки страниц и подозреваете, что причиной могут быть тяжёлые изображения, вы можете попробовать заменить их на WebP-изображения вместо привычных PNG или JPG. Лично мне это помогло😊

Скорость загрузки страницы всегда была в центре внимания Google и Яндекса. Однако сейчас, как никогда ранее, вы не можете позволить себе иметь медленно загружающийся блог. Во-первых, научно доказано, что медленно загружающиеся веб-страницы отталкивают пользователей от вашего сайта, особенно мобильных пользователей. Что ещё более важно, алгоритм Google, отвечающий за работу со страницами, был обновлён в июне 2021 года. С тех пор Google стал пессимизировать сайты с медленной загрузкой в поисковой выдаче.

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

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

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

  • * JPG;
  • * PJPG;
  • * PNG;
  • * GIF;
  • * BMP;
  • * SVG;
  • * PNM;
  • * TIFF.

Формат изображений WEBP

Однако формат WEBP стоит рассмотреть отдельно. Это современный формат изображений, который Google и Яндекс разработали и рекомендуют для ускорения загрузки страниц.

Зачем нужны файлы WebP?

Файлы WebP — это особый формат изображений, который позволяет уменьшить размер файлов на 25–34% по сравнению с другими популярными форматами, такими как PNG и JPG, без значительной потери качества изображения.

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

Размеры изображения 870 на 475 px. Формат Jpg и вес после сжатия через сервис Tinypng составляет 134 КБ

Как использовать WebP-изображения в WordPress

Размеры изображения 870 на 475 px. Формат PNG и вес после сжатия через сервис Tinypng составляет 250 КБ. Как мы видим вес PNG значительно больше Jpg.

Как использовать WebP-изображения в WordPress

Размеры изображения 870 на 475 px. Формат WebP и вес после сжатия через сервис Tinypng составляет 83.5 КБ

Как использовать WebP-изображения в WordPress

И мы видим, что вес WebP значительно меньше любого из других форматов.

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

Некоторые преимущества и недостатки WebP-файлов

Преимущество использования формата WebP мы уже оценили. Но есть и небольшой недостаток, который нужно учесть, прежде чем вы начнете работать с этим форматом изображений. Есть мнение, что файлы WebP поддерживаются не всеми браузерами. Большинство основных браузеров, таких как Chrome, Firefox, Edge, Opera, Яндекс и другие, предоставляют поддержку WebP-изображений по умолчанию. Другие браузеры, такие как Safari, этого не делают. (Лично я проверила в Safari и вижу, что в настоящий момент и браузер Safari осуществляет поддержку формата WebP.)

Чтобы не быть голословной и убедиться окончательно, стоит ли использовать данный формат, идем на сервис Caniuse и вводим в строку поиска формат «WebP».

Как использовать WebP-изображения в WordPress

Мы выяснили, что не все браузеры поддерживают формат WebP.

Это не значит, что вам нужно выбирать между быстрым сайтом и привлекательным контентом для пользователей, которые не могут просмотреть изображения в новом формате.
Вам нужно просто подготовить две версии изображений — в формате WebP и в форматах PNG/JPG — и показывать разные версии разным группам пользователей в зависимости от их браузера.

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

Как добавить WebP-изображения в WordPress

Хотя WordPress теперь позволяет загружать изображения в формате WebP, вам не обязательно использовать этот формат для прямой загрузки. Я рекомендую сначала загружать изображения в формате PNG или JPG, а затем преобразовывать их в WebP. Так мы и добьемся того, что разным типам пользователей будут показаны картинки разного формата.

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

  •  Imagify– это бесплатный плагин для оптимизации изображений, который я рекомендую использовать для преобразования ваших изображений в формат WebP. Чтобы начать работу с Imagify, сначала установите плагин из репозитория WordPress и активируйте его. После активации вам будет предложено создать учётную запись (вам нужно будет указать только свой адрес электронной почты). Затем вам будет отправлен ключ API. Войдите в API и приступайте к настройке плагина. По умолчанию большинство необходимых вам опций уже настроены. Однако вам нужно не забыть включить опцию отображения изображений в формате WebP.
Как использовать WebP-изображения в WordPress
  • Smush это универсальный плагин для оптимизации изображений, разработанный специально для WordPress. С его помощью вы можете сжимать файлы в форматах PNG и JPG, а также преобразовывать их в WebP. Smush предлагает множество полезных функций, которые помогут увеличить скорость вашего сайта. Например, плагин поддерживает отложенную загрузку изображений и предоставляет 45-точечный CDN для их хранения. Хотя многие функции Smush доступны бесплатно, преобразование изображений в формат WebP доступно только в Pro-версии. Стоимость пакетов Smush Pro составляет 6, 14 и 29 долларов в месяц в зависимости от количества веб-сайтов, с которыми вы работаете. На данный момент оплата доступна только при наличии карты Европейского банка
Как использовать WebP-изображения в WordPress
  • Optimole – это плагин для сжатия изображений, который предлагает преобразование в формат WebP и возможность динамического отображения этих изображений с помощью Amazon CloudFront. Плагин также обеспечивает оптимальный пользовательский опыт для каждого посетителя вашего сайта, автоматически изменяя размер изображений в зависимости от размера экрана. Это важная функция для основных веб-функций, поэтому её можно использовать с пользой. Вы можете начать использовать Optimole с бесплатного тарифа, который позволяет обслуживать до 5000 посетителей в месяц. Если вам нужно больше возможностей, вы можете перейти на платный тариф, который позволяет обслуживать до 25 000 посетителей в месяц. Чтобы воспользоваться бесплатным тарифом, просто установите и активируйте плагин. После этого вам будет предложено открыть учётную запись, чтобы получить ключ API. После того как вы введёте свой ключ API, остальная часть процесса будет выполнена за вас по умолчанию. Optimole автоматически оптимизирует ваши изображения и предоставит поддержку WebP по умолчанию, а также другие рекомендации по оптимизации изображений.
Как использовать WebP-изображения в WordPress

Резюме по работе с WebP-изображениями

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

 Помните о цели — стремиться к тому, чтобы страница загружалась за 2 секунды.

Последний совет: чтобы полностью оптимизировать ваш сайт, начните с изучения курса «Полный курс внутренней SEO оптимизации WordPress». Если вы действительно заботитесь о скорости работы вашего сайта и его конкурентоспособности, попробуйте!

Используете ли вы изображения в формате WebP? Как вы считаете, они влияют на скорость загрузки вашей страницы?  Поделитесь своими мыслями и опытом работы с WebP с новичками! 

Если у вас возникнут вопросы, я всегда рядом и готова помочь ❤️

👍 Поделиться с друзьями
MarketBox— Юлия Литвина
Добавить комментарий или задать вопрос