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

2 min


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



Предупреждение в Google PageSpeed ​​Insights

Перейдите на страницу инструмента Google PageSpeed ​​Insights и проверьте URL-адрес своей веб-страницы. Вы должны увидеть возможность, показывающую «Серверные изображения в форматах следующего поколения», как показано ниже. Вы можете увидеть потенциальную экономию размера для каждого изображения и приблизительную экономию времени загрузки страницы.

Предупреждение о скорости загрузки PageSpeed ​​Обслуживайте изображения в форматах следующего поколения

Примечание: Google говорит, что это возможность и не повлияет на оценку производительности PageSpeed. Однако удаление этого предупреждения значительно увеличивает счет в реальности.

Форматы изображений Next-Gent

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

  • Joint Photography Experts Group (JPEG или JPG) – поддерживает сжатие с потерями
  • Portable Network Graphics (PNG) – поддерживает прозрачное сжатие без потерь и замену GIF
  • Формат обмена графикой (GIF) – формат растрового изображения поддерживает зацикливание нескольких кадров.

Теперь для веб-сайтов рекомендуются новые форматы следующего поколения:

  • WebP – разработан Google для лучшего сжатия
  • JPEG 2000 – улучшение по сравнению со стандартами JPEG в сжатии изображений
  • JPEG XR – формат расширенного диапазона JPEG, разработанный Microsoft

Вы можете проверьте галерею Google для визуального сравнения различных изображений. Форматы следующего поколения помогают значительно уменьшить размер изображений, тем самым увеличивая скорость загрузки страницы. Согласно Википедия, 92% браузеров поддерживают формат WebP, что делает его многообещающей заменой традиционному формату. Поэтому вам нужно начать использовать формат WebP, чтобы избавиться от предупреждений об отображении изображений в форматах следующего поколения в инструменте PageSpeed ​​Insights.

Преобразование форматов изображений

Хотя Google продвигает облегченный формат изображений, они не очень популярны среди разработчиков приложений. Многие приложения не поддерживают создание изображений в этих форматах. Например, SnagIt – популярный инструмент для создания снимков экрана для блогеров – не предлагает никаких возможностей для создания изображений в формате следующего поколения. Вы можете создавать в традиционном формате, например PNG или JPEG.

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

Поскольку Google является владельцем формата WebP, многие плагины поддерживают преобразование традиционных изображений в формат WebP. Здесь мы объясним, как преобразовать ваши изображения в WebP и исправить «показывать изображения в формате следующего поколения» в инструменте PageSpeed ​​Insights.

Плагины WebP для WordPress

Для преобразования WebP доступно довольно много популярных плагинов.

Оптимизатор SG для SiteGround

Если вы размещаете на SiteGround, лучший вариант – использовать плагин SG Optimizer. Это будет работать из коробки для преобразования и обслуживания изображений WebP с вашего сервера. Вы можете выбрать уровень сжатия, чтобы контролировать качество преобразованных изображений, сохраняя при этом все исходные изображения. Ознакомьтесь с нашей предыдущей статьей о том, как обслуживать изображения WebP в SiteGround.

  • Вы можете просто включить опцию «Генерировать WebP копии новых изображений» в разделе «SG Optimizer> Оптимизация изображений».
  • Нажмите кнопку «Массовое создание файлов WebP», чтобы сгенерировать изображения WebP для всех существующих изображений с уровнем сжатия без потерь или с заранее заданным уровнем сжатия с потерями.
Опция WebP в плагине SG Optimizer
Опция WebP в плагине SG Optimizer

Предложение SEO: Оптимизируйте свой сайт с помощью специальной 14-дневной бесплатной пробной версии SEMrush Pro.

Smush Pro

Smush – еще один популярный плагин для сжатия изображений с более чем 1 миллионом активных установок. Однако WebP – это опция премиум-класса в этом плагине, и вы должны платить подписку 5 долларов в месяц (годовой план) за использование этой функции.

Вариант Smush Pro WebP
Вариант Smush Pro WebP

Автоматическая оптимизация

Этот плагин предлагает оптимизацию изображений на лету с преобразованием WebP с помощью службы ShortPixel CDN. Хотя это хороший вариант сочетания CDN и WebP, есть загвоздка. У вас есть ограничение на бесплатное обслуживание до 100 изображений в месяц. Если вам нужно больше, вы должны платить 3,99 доллара в месяц, чтобы начать премиум-план до 5000 изображений. Это будет дорогостоящим вариантом, если вы захотите сжать и обслужить большое количество изображений. Если вы хотите протестировать автоматическую оптимизацию, после установки и активации плагина перейдите в раздел «Настройки> Автоматическая оптимизация> Изображения».

  • Установите флажок «Оптимизировать изображения».
  • Выберите уровень оптимизации изображения: глянцевое, без потерь или с потерями.
  • Установите флажок «Загрузить WebP или AVIF в поддерживаемых браузерах?»
  • Включить “Ленивую загрузку изображений?” флажок.
Настройки WebP в плагине Autoptimize
Настройки WebP в плагине Autoptimize

Нажмите кнопку «Сохранить изменения» и протестируйте инструмент PageSpeed ​​Insights на своем сайте. Вы должны увидеть, что предупреждение «Показывать изображения в форматах следующего поколения» исчезло. Однако вы начнете видеть предупреждающее сообщение в панели администратора WordPress о том, что ваша квота ShortPixel используется, и с просьбой обновить план.

Бесплатные плагины WebP

К счастью, доступно несколько бесплатных плагинов, таких как WebP Express и WebP Converter for Media. В этой статье мы объясним процесс с плагином WebP Converter for Media.

Установите плагин WebP Converter for Media

Войдите в панель администратора WordPress и перейдите в раздел «Плагины> Добавить». Введите «webp» в поле поиска, чтобы отфильтровать результаты и найти подключаемый модуль WebP Converter for Media. Нажмите кнопку «Установить», а затем активируйте плагин на своем сайте.

Установите плагин WebP Converter for Media
Установите плагин WebP Converter for Media

Включить преобразование изображений WebP

После активации плагина вы увидите сообщение, подобное приведенному ниже, и нажмите кнопку «Ускорить мой сайт». Кроме того, вы можете перейти в меню «Настройки> Конвертер WebP», чтобы перейти на страницу настроек плагина.

  • Выберите режим загрузки изображения «через .htaccess (рекомендуется)».
  • Выберите JPEG, JPG и PNG для поддерживаемых расширений файлов.
Режим загрузки изображений и расширения файлов
Режим загрузки изображений и расширения файлов
  • Чтобы просмотреть список поддерживаемых каталогов, выберите параметр «/ uploads». Убедитесь, что вы используете изображения из папки загрузок WordPress по умолчанию. Если вы переместили свои изображения в поддомен, выберите этот каталог, чтобы плагин работал правильно.
  • Для метода преобразования выберите вариант «GD (рекомендуется)».
  • Наконец, выберите качество изображения в соответствии с вашими потребностями. Плагин использует 85% в качестве значения качества по умолчанию для преобразования WebP.
Преобразование каталогов и качество
Преобразование каталогов и качество

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

Дополнительные возможности
Дополнительные возможности

Восстановить изображения

Плагин WebP Converter for Media также предлагает возможность регенерировать все ваши изображения для преобразования их в формат WebP. Это полезно, если у вас есть изображения, загруженные на сайт перед установкой плагина.

Регенерировать изображения WebP
Регенерировать изображения WebP

Проверьте в Google Chrome

После регенерации всех существующих изображений вы можете открыть веб-сайт в Google Chrome и проверить. Вы должны увидеть, что изображения WebP подаются из раздела инструментов разработчика. Вы можете проверить эту статью о том, как проверить, отображаются ли изображения WebP в браузере Chrome. Если вы включили кеширование в браузере, просто скопируйте URL-адрес изображения и увидите, что имя файла содержит .webp.

Проблема с поддержкой сервера

К сожалению, не все веб-серверы поддерживают преобразование WebP. Вы можете найти это, если в настройках плагина отключен раздел «Метод преобразования». На вашем сервере должна быть установлена ​​поддерживаемая библиотека GD или Imagick для поддержки формата WebP. В противном случае плагин покажет ошибку, и вы не сможете использовать преобразование WebP. Насколько мы проверили, серверы виртуального хостинга Bluehost не поддерживают преобразование WebP, и вы увидите сообщение об ошибке, подобное приведенному ниже.

Ошибка конфигурации сервера для WebP
Ошибка конфигурации сервера для WebP

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

Включение кеширования изображений WebP с помощью WP Rocket

Как уже упоминалось, плагин WebP Converter for Media предлагает возможность включить кеширование в браузере для изображений WebP. Это поможет вам ускорить загрузку страницы, указав браузерам кэшировать изображения, когда пользователь снова откроет те же изображения. Однако эта опция недоступна для многих других плагинов, и вы должны комбинировать ее с настройками вашего плагина кэширования. Например, если вы используете WP Rocket, не забудьте установить флажок для кеширования браузера в разделе «Изображения». Это позволит плагину кэшировать изображения WebP и работать в поддерживаемых браузерах.

Включить поддержку WebP в WP Rocket
Включить поддержку WebP в WP Rocket


0 Comments

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