Блог по продвижению сайтов Блог по SEO

Блог Сергея Арсентьева

Создание и продвижение сайтов с нуля.
Только реальные способы заработка в сети.
Проверено на личном опыте.

Как использовать новый формат Webp на своём сайте

Жили - не тужили и тут Google опять огорошил веб-сообщество: используйте современные форматы изображений. А разве JPG или PNG уже не катят?

Да, увы, с точки зрения Google нужно использовать новые форматы, такие как Webp, которые при том же качестве занимают в несколько раз меньше места, а значит, быстрее грузятся и меньше жрут трафика. Итак, Webp что за формат и самое главное, как его включить на своём сайте.

webp что за форматСам формат Webp продвигается Google уже лет 10, но только сейчас, с момента появления его в качестве важного параметра для оптимизации скорости загрузки сайта, он стал активно внедряться в сайты и просмотрщики, а до этого его толком и просмотреть-то было нечем.

 

Есть ли эффект от Webp?

Да, на личном опыте скажу, что эффект от применения формата Webp на сайте очевиден.

Google Page Speed убирает ошибку про современные форматы изображений.

используйте современные форматы изображений google

Да и сайт грузится быстрее (особенно заметно на мобильном интернете когда много тяжелых картинок). Но даже если картинок всего 4, то всё равно несколько дополнительных баллов в Google Page Speed можно получить.

webp увеличивает скорость

Внешне я сколько не смотрел никакого ухудшения качества при использовании Webp не заметил.

Попробуйте найти разницу:

webp что за формат сравнение с jpg разница в несколько раз

Причем JPG был хорошо сжат в Photoshop и занимал всего около 200Кб, без дополнительного сжатия насколько я помню около 400Кб, а png этой же картинки - 1.3 М.
Если ужимать в сервисе tinypng.com - то исходный jpg занимал около 185Кб, но качество падало прямо ощутимо заметно, особенно красных оттенков.

Короче, я думал, что ужал по-максимуму.
Но Webp ужал еще в 2 раза!

Проблемы Webp

  • Не все браузеры поддерживают Webp (Safari и IE не поддерживают этот формат).
  • Нет возможности загрузить Webp в WordPress или Opencart напрямую в интерфейсе CMS.
  • Стандартные просмотрщики в компьютере обычно не воспринимают формат *.webp и отказываются просматривать картинки в нем, приходиться пользоваться сторонними решениями, благо это несложно сделать (смотрите ниже).
  • По отзывам многих специалистов этот формат уже устарел и есть более прогрессивные алгоритмы сжатия, однако Google продвигает в первую очередь именно его.

Как задействовать Webp в WordPress

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

Да и радости перелопачивать сотни картинок особенной нет.

Поэтому я остановился на плагине для автоматического конвертирования Jpg и Png в Webp для WordPress, который называется Webp Express.

  1. Устанавливаем как обычный плагин WordPress.
  2. Переходим в Настройки - Webp Express
  3. Я использую примерно такие настройки:

настройки webp плагин webp express wordpress

Наиболее важные пункты, на которые нужно обратить основное внимание:

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

Именно по этой причине у меня не получилось прямо сейчас поставить использовать Webp Express на своем собственном блоге, так как на моем дешевом VPS (читайте как я купил сервер за 1000р в месяц) просто нет нужных библиотек и придется вникать и как-то ставить их.

Впрочем, в ближайший месяц я думаю, что найду время и переведу блог на Webp, а пока что перевел на этот формат своих клиентов по СЕО продвижению.

Alter HTML - поставить галку, иначе у меня не работало.

И выбрать по возможности первый режим «Replace <img> tags with <picture> tags, adding the webp to srcset» и посмотреть на сайте - если всё ок, то его и оставляйте.

Если не сработало и показываются старые картинки в форматах jpg или png, а не webp - то включите второй режим, «Replace image URLs» и обязательно поставьте ниже галку «Only do the replacements in webp enabled browsers», иначе картинки не будут показываться в iPhone и т.п.

В этом режиме у меня заработал Webp на всех без исключениях шаблонах, включая подгрузку картинок из CSS и JS. Но идеальный вариант - если на вашем сайте все картинки переведутся именно в первом режиме.

Convert on upload - имеет смысл снять галку чтобы не тупило при загрузке картинок на сайт.

Cache-Control header - я ставлю 1 год.

WebP +  Fastest Cache

Я использую плагины кеширования во всех проектах, которые продвигаю, особенно мне нравится именно Fastest Cache.

Но при включении изображений в формате Webp на сайте всё равно показывались закешированные старые картинки.

Итак, что нужно сделать:

  1. Включить режим CDN Friendlycnd friendly webp
  2. Не ставить галочку "Предварительная автоматическая генерация кэша".

снять галочку fastest cache и webp

Я проверил на нескольких сайтах - работает и кэш и вебп картинки.

Чем просмотреть формат Webp на компьютере

Чтобы смотреть стандартными средствами Windows (например, через просмотрщик картинок) - поставьте кодек WebpCodecSetup.exe от Google вот тут https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

что за формат webp codec setup скачать

Как еще один вариант - скачать FastStone или XnView с поддержкой формата webp.

Выводы и итоги

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

Конвертировать все картинки в webp автоматически - наиболее удобно, чем обрабатывать заранее картинки до загрузки на сайт. Потому что ни WordPress, ни тот же Opencart вообще не поддерживают загрузку в интерфейсе webp формата.

Да и просмотр файлов с расширением Webp на компьютере пока еще нестандартная задача, требующая сторонних программ и расширений.

А вот использование автоматических плагинов типа WebP Express - супер удобная вещь!

Успехов в бизнесе!

Автор блога
“Измени свои привычки, и изменится твоя жизнь..”
Специалист по созданию и продвижению сайтов (SEO и реклама), фрилансер с многолетним опытом.
Статистика блога
  • Всего материалов на сайте: 202
  • Активных комментариев: 2 952
  • Работает онлайн: 6.3 лет
  • Читателей за это время: 1 617 199

Давай, оцени статью!



🎁   Поделитесь статьей в социальных сетях   🎁
Комментарии на блоге
Комментариев | (5)
  • Виктория
    Виктория

    Добрый день! Спасибо за информацию! Очень полезная статья, хорошо, что есть такой полезный плагин для Вордпресса, вот только действительно жалко, что такие картинки не применимы к плагину Faster Cache, а к плагину YOST применимы ли? На сколько я знаю в пакете Yost тоже есть функция кеширования сайта.

    Комментировать
    • Сергей Арсентьев

      Добрый, я нашел способ подружить Fastest Cache и Webp Express, проверил несколько дней - вроде всё ок, завтра обновлю статью.

      Комментировать
    • Сергей Арсентьев

      Обновил - попробуйте так как в разделе "WebP + Fastest Cache"
      У меня на всех сайтах работает.

      Комментировать
      • Виктория
        Виктория

        Спасибо! Я попробовала. Но почемуто после установки плагина и настроек у меня пропали все картинки на странице, что делаю не так? :(

        Комментировать
        • Сергей Арсентьев

          А в Consersion Metod http://prntscr.com/paraou есть хоть один зеленый флажок?
          Если нету, то не сможете использовать webp на этом хостинге. Нужно писать провайдеру.

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

          Комментировать
Добавить свой комментарий
Подробнее в Продвижение сайтов
Вечные ссылки за полцены на бирже Trastik.com

Несмотря на все новые критерии SEO, такие как поведенческие факторы, уникальные СЕО тексты, возраст домена и т.п., ссылочное ранжирование до...

Жизнь без SEO - статистика сайтов без оптимизации

Я уже довольно давно хотел проанализировать несколько сайтов, чтобы понять: а если вообще не делать SEO, то что будет? Может...

Закрыть