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

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

39

Большинство из нас уже знают, что оптимизация изображений очень важна, поскольку она играет огромную роль в общем времени загрузки вашего веб-сайта 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.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

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

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

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

Имя файлаОригинальный PNGСжатый PNGФормат WebPРазница в размере%
png-в-webp-1.png44 KB34 KB30 KB32%
png-в-webp-2.png46 KB35 KB33 KB28%
png-в-webp-3.png43 KB31 KB25 KB42%
png-в-webp-4.png30 KB24 KB18 KB40%
png-в-webp-5.png15 KB11 KB8 KB47%
png-в-webp-6.png34 KB24 KB18 KB47%
png-в-webp-7.png15 KB13 KB8 KB47%
png-в-webp-8.png63 KB47 KB44 KB30%
png-в-webp-9.png48 KB36 KB33 KB31%
png-в-webp-10.png17 KB14 KB11 KB35%
png-в-webp-11.png18 KB13 KB9 KB50%
png-в-webp-12.png61 KB45 KB39 KB36%
png-в-webp-13.png32 KB25 KB21 KB35%
png-в-webp-14.png26 KB21 KB17 KB35%
png-в-webp-15.png14 KB12 KB9 KB36%
png-в-webp-16.png36 KB27 KB24 KB33%
png-в-webp-17.png14 KB12 KB8 KB43%
png-в-webp-18.png21 KB18 KB13 KB38%
png-в-webp-19.png42 KB30 KB27 KB36%
png-в-webp-20.png23 KB20 KB18 KB22%

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

Резюме

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

Источник записи: https://www.wpexplorer.com

Leave A Reply

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