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

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

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

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

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

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

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

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

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

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

• Войдите на свой сайт WordPress и перейдите в раздел «Плагины> Добавить новый».
• Найдите «SG Optimizer», чтобы найти плагин.
• Установите и активируйте плагин на своем сайте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Откройте свою веб-страницу в Chrome и щелкните правой кнопкой мыши любое изображение.
• Выберите вариант «Сохранить изображение как…».

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

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

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

Это действительно зависит от качества, которое вы выбираете для своих изображений 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.