TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как обслуживать изображения WebP в SiteGround?

39

SiteGround – одна из рекомендуемых хостинговых компаний официальным WordPress.org. За последние годы хостинг SiteGround перерос на другой уровень. Они заменили традиционную настройку cPanel и перенесли все существующие учетные записи в свои собственные настройки Site Tools. Благодаря этому вы можете использовать изображения WebP вместо PNG или JPEG, чтобы повысить скорость загрузки вашего сайта. В этой статье мы объясним, как обслуживать изображения WebP в SiteGround и проверять их в браузере.

Связанный: Как использовать WebP в WordPress для исправления ошибки обслуживания изображений в форматах следующего поколения в инструменте Google PageSpeed ​​Insights?



Почему изображения WebP?

Всякий раз, когда вы проверяете оценку скорости страницы в инструменте Google PageSpeed ​​Insights, он покажет вам множество возможностей, которые могут улучшить скорость сайта. Одно из важных предложений, которое вы не можете легко решить, – «Обслуживайте изображения в форматах следующего поколения». Форматы следующего поколения включают WebP, JPEG 2000 или JPEG XR для замены традиционных форматов изображений PNG и JPEG.

Как обслуживать изображения WebP в SiteGround?

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

Следовательно, использование изображения WebP поможет вам решить проблему Google PageSpeed ​​Insights. Более того, он уменьшает размер изображения более чем на 75% при том же качестве, что улучшает скорость загрузки страницы.

Как это работает с SiteGround?

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

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

Как обслуживать изображения WebP в SiteGround?

Если вы не используете SG Optimizer, вам необходимо сначала установить плагин.

Как обслуживать изображения WebP в SiteGround?

Установите плагин SG Optimizer

После установки SG Optimizer перейдите в меню «SG Optimizer», а затем в раздел «Оптимизация мультимедиа». Здесь у вас есть параметры для включения изображений WebP на вашем сайте.

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

Включить WebP для новых изображений

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

Как обслуживать изображения WebP в SiteGround?

Создание изображений WebP в SiteGround

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

Как обслуживать изображения WebP в SiteGround?

Создание WebP с потерями в SiteGround

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

Массовое создание файлов WebP

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

Изменение качества

В любой момент вы можете решить изменить качество с без потерь на с потерями или наоборот. Вы также можете изменить качество изображений WebP с потерями в любой момент позже. Всякий раз, когда вы меняете качество, нажимайте ссылку «повторно сгенерировать», чтобы восстановить изображения с новым качеством. Или нажмите кнопку «Удалить все файлы WebP», а затем нажмите «Массовое создание файлов WebP», чтобы регенерировать изображения с новым качеством.

Тестирование изображений WebP в браузере

Откройте свой сайт в Google Chrome и проверьте исходный код в консоли разработчика. Вы по-прежнему будете видеть изображения PNG или JPEG, загружаемые вместо изображений WebP. Однако это неправильный способ проверки.

Как обслуживать изображения WebP в SiteGround?

Источник, показывающий изображение PNG

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

  • Откройте Google Chrome и откройте раздел Инструменты разработчика Chrome. Вы можете получить доступ к инструментам разработчика, нажав F12 в Windows и выбрав «Option + Command + I» в Mac.
  • Щелкните вкладку «Сеть» и откройте веб-страницу в адресной строке. Если вы уже открыли страницу, нажмите кнопку обновления, чтобы перезагрузить страницу.
  • Теперь вы можете увидеть, что сетевая активность записывается, и щелкните вкладку «Img».
  • Здесь вы можете увидеть тип ресурса, загруженного с вашего сайта.
  • Вы можете отсортировать столбец «Имя» или «Тип», чтобы проверить тип изображения. Он должен отображаться как «WebP».
  • Это способ подтвердить, что изображения WebP обслуживаются с вашего веб-сайта.

Как обслуживать изображения WebP в SiteGround?

Проверьте SiteGround WebP в браузере

Альтернативный способ тестирования

Другой способ проверки прост.

Как обслуживать изображения WebP в SiteGround?

Сохранить изображение как

  • Вы должны увидеть формат изображения как «Google WebP».

Как обслуживать изображения WebP в SiteGround?

Сохранить изображение WebP

Хотя исходное изображение – PNG (или JPEG), вы должны увидеть формат как «Google WebP», так как это формат изображения, доступный на вашем сайте.

Кэшированные изображения WebP

Некоторые плагины кеширования, такие как WP Rocket, позволяют кэшировать изображения WebP. Если вы кэшируете изображения WebP, вы можете найти версии .png.webp или .jpg.webp на своем сервере хостинга в каталоге загрузок. Это не стандартное поведение службы SiteGround WebP, и когда вы отключите плагин кеширования, создание кеша будет остановлено, и вы должны использовать один из вышеуказанных методов для проверки.

Как обслуживать изображения WebP в SiteGround?

Кэширование WebP в WP Rocket

Какой размер я могу сэкономить?

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

  • Исходный размер изображения PNG – 139 КБ
  • Размер изображения WebP – 31 КБ

Тестирование с помощью Google PageSpeed ​​Insights

Теперь вернитесь к инструменту Google PageSpeed ​​Insights и протестируйте одну из своих веб-страниц. Предложение для обслуживания изображений в формате следующего поколения должно исчезнуть.

Пункты, на которые следует обратить внимание

Обязательно обратите внимание на следующие моменты при использовании WebP на своем сайте:

  • Не все браузеры поддерживают WebP, обязательно проверьте свой сайт в Google Chrome или любом поддерживаемом браузере.
  • Плагины кеширования, такие как WP Rocket, предлагают кэшировать изображения WebP для повышения скорости загрузки страницы. Однако эти плагины кеширования не обнаруживают изображения WebP на сервере SiteGround. Вы можете согласовать с разработчиком плагина, прежде чем включать кеширование изображений WebP.
  • Сервисы CDN, такие как Cloudflare, будут без проблем работать с SiteGround. Однако, если у вас есть отдельная настройка CNAME для обслуживания медиафайлов через CDN, уточните у своего провайдера CDN, могут ли они обслуживать изображения WebP.
  • Параметр WebP недоступен для сайтов, все еще использующих настройку cPanel. Вам нужно дождаться, пока SiteGround перенесет вашу учетную запись в Инструменты сайта.
  • Вы должны использовать плагин SG Optimizer, чтобы включить WebP, без плагина вы не сможете включить его из своей учетной записи хостинга.
  • Обязательно обновляйте изображения всякий раз, когда вы меняете качество изображений WebP.

Заключительные слова

Скорость сайта становится важным фактором, поскольку Google анонсировал Core Web Vitals, который будет влиять на рейтинг в будущем. Веб-сайты SiteGround уже находятся на платформе Google Cloud, и с WebP вы значительно опередите своих конкурентов, размещенных в других компаниях.

Источник записи: www.webnots.com

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