Статьи

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

Большинство из нас уже знают, что оптимизация изображений очень важна, поскольку она играет огромную роль в общем времени загрузки вашего веб-сайта WordPress. Сегодня мы хотим поделиться с вами простой альтернативой того, как интегрировать файлы Google WebP в ваш сайт WordPress. Некоторые пользователи заметили уменьшение размера файлов изображений более чем на 70%!

Что такое WebP?

Если вы не знакомы с WebP, это формат файла изображения, созданный командой веб-производительности в Google с целью создания изображений, которые меньше и быстрее. Он был впервые анонсирован в 2010 году и поддерживает методы сжатия с потерями и без потерь. Изображения доставляются в веб-браузер с веб-сервера в зависимости от типа MIME, который он использует image/webp.

Изображения WebP без потерь на 26% меньше по размеру по сравнению с PNG, а изображения WebP с потерями на 25-34% меньше, чем JPEG.

Такие компании, как YouTube и eBay, уже используют WebP для бесшумного управления многими своими сайтами. Ниже приведен пример с сайта eBay, где на своей домашней странице в среднем размещается около 30 файлов WebP.

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

Почему WebP так важен? Согласно httparchive, по состоянию на август 2016 года изображения составляют более 64% среднего веса веб-страницы. Обычно это больше, чем ваши CSS, JS и HTML вместе взятые. Поэтому выбор надежного метода оптимизации изображения и формата изображения, такого как WebP, имеет решающее значение, чтобы вы могли максимально уменьшить вес своей страницы. Как правило, чем меньше размер вашей страницы, тем быстрее она загружается. И это порадует не только ваших посетителей, но и Google, поскольку скорость страницы является фактором ранжирования.

Поддержка WebP

Хотя WebP очень интересен, важно также упомянуть поддержку браузера. На данный момент не все современные браузеры поддерживают WebP. Согласно caniuse, в настоящее время WebP поддерживается в Chrome 23+, Opera 39+, всех версиях Opera mini, браузере Android 4.3+ и Chrome для Android.

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

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

Согласно W3Schools, Chrome имеет монополию на долю рынка браузеров, составляющую немногим более 70%. Но не принимайте долю рынка как твердое доказательство, посмотрите на данные ваших посетителей и посмотрите, какие браузеры они используют, поскольку они могут отличаться в зависимости от вашей ниши. Вы можете быть удивлены тем, насколько искажена статистика. В Google Analytics в разделе «Аудитория» вы можете нажать «Браузер и ОС» и посмотреть, какие браузеры используют люди, когда заходят на ваш сайт. Мы выбрали случайный веб-сайт, и, как вы можете видеть ниже, 67% посетителей из Chrome и еще 1% из Opera. Таким образом, 68% этих людей могут просматривать и извлекать выгоду из формата файлов изображений WebP!

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

Как использовать файлы WebP в WordPress

В сегодняшнем примере мы собираемся использовать комбинацию двух разных плагинов WordPress для запуска и запуска WebP в WordPress. Они создаются и разрабатываются командой KeyCDN, глобальной сети доставки контента (CDN ).

  1. [премия] Optimus Image Optimizer: плагин сжатия изображений без потерь для WordPress, конвертирует изображения в WebP
  2. [бесплатно] WordPress Cache Enabler: плагин кеширования, который позволяет вам обслуживать WebP в поддерживаемых браузерах.

Optimus Image Optimizer

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

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

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

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

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

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

Активатор кеширования WordPress

Итак, теперь, когда у вас есть изображения WebP, вам нужен способ сообщить WordPress, чтобы он обслуживал изображения WebP для поддерживаемых браузеров и PNG / JPG для других браузеров. Это можно сделать с помощью бесплатного плагина WordPress Cache Enabler. Вы можете загрузить плагин из репозитория WordPress или установить его из панели управления плагином. После установки вы можете включить «Создать дополнительную кэшированную версию WebP» в настройках плагина.

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

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

Как использовать файлы WebP в WordPress и уменьшить время загрузки страницы

Вот и все! Теперь на вашем сайте WordPress должны быть запущены файлы WebP.

Сравнение JPG с WebP

Мы провели сравнение JPG с WebP, чтобы показать различия, которых вы можете достичь.

ИМЯ ФАЙЛА ОРИГИНАЛЬНЫЙ JPG СЖАТЫЙ JPG ФОРМАТ WEBP РАЗНИЦА РАЗМЕРОВ%
jpg-to-webp-1.jpg 758 KB 685 KB 109 KB 86%
jpg-to-webp-2.jpg 599 KB 529 KB 58.8 KB 90%
jpg-to-webp-3.jpg 960 KB 881 KB 200 KB 79%
jpg-to-webp-4.jpg 862 KB 791 KB 146 KB 83%
jpg-to-webp-5.jpg 960 KB 877 KB 71.7 KB 93%

WebP привел к уменьшению среднего размера изображения на 85,87%.

PNG и WebP Сравнение

Опять же, мы также сравнили PNG с WebP, чтобы показать различия, которых вы можете достичь.

Имя файла Оригинальный PNG Сжатый PNG Формат WebP Разница в размере%
png-в-webp-1.png 44 KB 34 KB 30 KB 32%
png-в-webp-2.png 46 KB 35 KB 33 KB 28%
png-в-webp-3.png 43 KB 31 KB 25 KB 42%
png-в-webp-4.png 30 KB 24 KB 18 KB 40%
png-в-webp-5.png 15 KB 11 KB 8 KB 47%
png-в-webp-6.png 34 KB 24 KB 18 KB 47%
png-в-webp-7.png 15 KB 13 KB 8 KB 47%
png-в-webp-8.png 63 KB 47 KB 44 KB 30%
png-в-webp-9.png 48 KB 36 KB 33 KB 31%
png-в-webp-10.png 17 KB 14 KB 11 KB 35%
png-в-webp-11.png 18 KB 13 KB 9 KB 50%
png-в-webp-12.png 61 KB 45 KB 39 KB 36%
png-в-webp-13.png 32 KB 25 KB 21 KB 35%
png-в-webp-14.png 26 KB 21 KB 17 KB 35%
png-в-webp-15.png 14 KB 12 KB 9 KB 36%
png-в-webp-16.png 36 KB 27 KB 24 KB 33%
png-в-webp-17.png 14 KB 12 KB 8 KB 43%
png-в-webp-18.png 21 KB 18 KB 13 KB 38%
png-в-webp-19.png 42 KB 30 KB 27 KB 36%
png-в-webp-20.png 23 KB 20 KB 18 KB 22%

WebP привел к уменьшению среднего размера изображения на 42,8%.

Резюме

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

Кнопка «Наверх»