15+ способов оптимизации изображений для ускорения сайта на WordPress

15+ способов оптимизации изображений для ускорения сайта на WordPress

Хотите, чтобы изображения вашего сайта загружались быстрее?

GTmetrix и PageSpeed ​​Insights показывают несколько вариантов оптимизации изображений, но не все. Это руководство поможет оптимизировать изображения в WordPress, чтобы они загружались еще быстрее. В данной статье вы найдете практически все – от WebP до ShortPixel, адаптивных изображений, правильной настройки их размеров и обслуживания через CDN.

Большинство программ для редактирования изображений (например, Photoshop или GIMP) позволяют оптимизировать изображения перед их загрузкой: они позволяют обрезать/изменять размеры изображений, сжимать их и удалять данные EXIF. Используйте все возможности графических редакторов при подготовке картинок для своего веб-ресурса.

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

Содержание


1. Найдите неоптимизированные изображения в GTmetrix и PSI

После обновления GTmetrix и GTmetrix, и PageSpeed ​​Insights показывают одинаковые варианты оптимизации для изображений.

  • Исправьте размер изображений (Properly size images) – измените размеры больших изображений до нужной величины.
  • Отложите закадровые изображения  (Defer offscreen images) – отложенная загрузка изображений (в том числе, фоновых).
  • Предоставляйте изображения в форматах следующего поколения (Serve images in next-gen formats) – конвертируйте JPEG и PNG в WebP.
  • Эффективно кодируйте изображения (Efficiently code images) – настройте сжатие изображений без потерь с помощью плагина.
  • Объединяйте изображения с помощью CSS-спрайтов (Combine images using CSS sprites) – объедините множество небольших изображений в один файл.
15+ способов оптимизации изображений для ускорения сайта на WordPress

2. Используйте Legacy GTmetrix Reports, чтобы получить еще больше возможностей для оптимизации изображений

Legacy GTmetrix Reports (устаревшие отчеты), в отличии от обновленного отчета, показывает ошибки, касающиеся неправильных размеров изображений. Чтобы прогнать свой сайт через устаревшую версию GTmetrix необходимо: создать бесплатную учетную запись и войти в нее > перейти в раздел Analysis options” > активировать опцию “Legacy Reports”:

оптимизация изображений
Перейдите в раздел “Analysis options”
15+ способов оптимизации изображений для ускорения сайта на WordPress
Активируйте опцию “Legacy Reports”
  • Укажите размеры изображения (Specify image dimensions): добавьте высоту и ширину к HTML или CSS изображения.
  • Минимизируйте редиректы (Minimize redirects) – показывайте изображения из правильной версии www и http(s).
  • Используйте сеть доставки контента (Use a content delivery network) – предоставляйте изображения из CDN.
  • Используйте кеширование браузера (Leverage browser caching) – убедитесь, что изображения кэшируются.
  • Сделайте фавикон сайта небольшого размера и кешируемым (Make favicon small and cacheable) – используйте фавикон размером 16×16 пикселей и кешируйте его.
15+ способов оптимизации изображений для ускорения сайта на WordPress

3. Исправьте размеры изображений

Это означает, что нужно заменить большеразмерные картинки изображениями поменьше. 

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

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

Как исправить ошибку “Properly Size Images” в GTmetrix

  • Запустите проверку страницы посредством Legacy GTmetrix Reports.
  • Разверните рекомендацию “Serve scaled images” на вкладке PageSpeed.
  • Найдите изображения, которые необходимо масштабировать и их правильные размеры (предоставленные GTmetrix).
  • Измените размер изображения до рекомендованных, после чего замените старую картинку новой.
15+ способов оптимизации изображений для ускорения сайта на WordPress

Советы по снятию скриншотов

Расширение для браузера Chrome Zoom позволяет делать скриншоты c заданными уровнями масштабирования. Допустим, полноразмерные изображения на вашем сайте имеют ширину 680 пикселей. Вы можете воспользоваться Zoom (а также стандартными уровнями масштабирования своего компьютера), чтобы получить практически идеальные скриншоты с заявленными размерами. После чего остается только обрезать края при помощи GIMP (при необходимости). Для снятия самих скриншотов рекомендуем использовать Awesome Screenshot или Lightshot.

Шпаргалка по размерам изображений для сайта

Изучите различные области своего веб-сайта и создайте что-то вроде шпаргалки. Так вы будете знать точные размеры каждого изображения, а значит сможете избежать проблем с большими изображениями и потерями качества.

Пример:

  • Фавикон: 16×16 пикселей.
  • Изображения в виджетах: 414 (ш)
  • Карусель изображений: 115 (в)
  • Изображения слайдера: 1900 (ш) x 400 (в)
  • Избранные изображения: 250 (ш) x 250 (в)
  • Полноразмерные изображения постов в блоге: 680 (ш)
  • Изображение Twitter OG: 1024 (ш) x 512 (в)
  • Изображение Facebook OG: 1200 (ш) x 628 (в)
Обязательно используйте адаптивные изображения для правильного отображения изображений на мобильных устройствах (пункт 11).

4. Отложите закадровые изображения

Под откладыванием закадровых изображений подразумевается не что иное, как их отложенная, или ленивая загрузка (lazy load).

Отложенная загрузка изображений была добавлена в WordPress версии 5.5, поэтому, по большому счету, нет никакой необходимости включать ее в другом плагине. Большинство ошибок, связанных с lazy load возникают из-за того, что отложенная загрузка фоновых изображений CSS не срабатывает должным образом. В этом случае необходимо прибегнуть к помощи плагина Elementor Lazy Load Background Images.

Как исправить ошибку “Defer OffScreen Images”

  • Настройте отложенную загрузку изображений.
  • Настройте отложенную загрузку фоновых изображений.
  • Узнайте, как ваш плагин кеширования (например, WP Rocket) работает с отложенной загрузкой изображений.

Изображения, находящиеся выше “линии сгиба” следует исключить из отложенной загрузки, так как пользователи видят их сразу после загрузки страницы.

15+ способов оптимизации изображений для ускорения сайта на WordPress

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

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

Большинство плагинов для оптимизации изображений (например, ShortPixel, WP Smush) делают это. В противном случае используйте для этой цели отдельный плагин, вроде WebP Converter For Media. Пользователям, у которых установлен WP Rocket, почти всегда следует отключать опцию “Включить кеширование WebP”, если только ваш плагин WebP не обслуживает образы WebP (что он обычно и делает). Она также должна быть отключена, если вы используете Cloudflare, элемент <picture> или правило для .htaccess.

Как исправить “Fix Serve Images In Next-Gen Formats” в GTmetrix

  • Включите WebP через плагин оптимизации изображений.
  • Выберите наиболее распространенный метод конвертации в WebP – с элементом <picture>.
  • В качестве альтернативы можно использовать отдельный плагин из репозитория WordPress.
15+ способов оптимизации изображений для ускорения сайта на WordPress

6. Эффективное кодирование изображений

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

Обычно это делается с помощью плагина для оптимизации изображений или программы для ПК (Photoshop, GIMP и т. д.). Lighthouse тестирует изображения с 85%-ным сжатием и сравнивает их с оригинальной версией. Если экономия составляет 4 килобайта и более, Lighthouse помечает изображение как нуждающееся. Поэтому, если хотите исправить эту рекомендацию, установите уровень сжатия изображений примерно на 85%.

Как исправить “Efficiently Encode Images”

  • Выберите плагин для оптимизации изображений (например, ShortPixel).
  • Установите уровень сжатия на 85% (этот же уровень использует Lighthouse).
  • Настройте массовое сжатие существующих изображений и возможность их оптимизации при загрузке.
15+ способов оптимизации изображений для ускорения сайта на WordPress

7. Укажите размеры изображений

Пункт подразумевает добавление ширины/высоты к HTML или CSS изображения.

Рекомендация доступна только в устаревших отчетах GTmetrix, но от этого она не менее полезна. Изображения, не имеющие атрибута высоты, могут привести к более повышенному CLS в PageSpeed ​​Insights. Визуальный редактор и большинство конструкторов страниц автоматически добавляют атрибуты ширины/высоты, поэтому вам обычно не нужно об этом беспокоиться. Но изображения, жестко закодированные в HTML/CSS, необходимо редактировать вручную.

Как исправить “Specify Image Dimensions” в GTmetrix

  • Прогоните страницу через устаревший отчет GTmetrix.
  • Узнайте, какие изображения содержат ошибки, связанные с размерами.
  • Обратите внимание на размеры изображений, предоставленные GTmetrix.
  • Откройте редактор, найдите на странице изображение и просмотрите его HTML или CSS.
  • Добавьте атрибут ширины и высоты к изображению (скриншот экрана ниже).
15+ способов оптимизации изображений для ускорения сайта на WordPress

15+ способов оптимизации изображений для ускорения сайта на WordPress

 

8. Используйте CDN для обслуживания изображений

Это означает, что необходимо активировать перезапись CDN.

По умолчанию при настройке CDN ваши URL-адреса не изменяются. А значит нужно включить CDN перезапись, что можно сделать, к примеру, в плагинах Perfmatters или WP CDN Rewrite. Так изображения будут обслуживаться не только с вашего сервера, но и из сети доставки содержимого. Некоторые плагины для оптимизации изображений, например Flying Images, могут обслуживать картинки из бесплатного CDN, такого как Statically. Cloudflare не использует URL-адреса для CDN. Он изменяет УРЛы изображений на URL-адреса CDN гарантируя тем самым, их обслуживание из сети доставки контента.

Как обслуживать изображения из CDN (Serve Images From A CDN)

  • Настройте CDN (например, BunnyCDN). Лично я использую Cloudinary.
  • Включите перезапись CDN (в Perfmatters или через другой плагин).
  • Или выберите плагин для оптимизации изображений со встроенным CDN.

URL старого изображения (без перезаписи CDN):  https://site.ru/wp-content/uploads/2021/01/Widget.png

URL нового изображения (с перезаписью CDN):  https://site.b-cdn.net/wp-content/uploads/2021/01/Widget.png

9. Избегайте редиректов URL-адресов изображений

Появление этой рекомендации может быть вызвано тем, что изображения подаются с неправильных URL-адресов.

Если вы перешли на HTTPS или WWW версию, следует массово обновить все изображения (и ссылки), чтобы они использовали правильный путь. В противном случае, вы столкнетесь с рекомендацией “Minimize redirects”.

15+ способов оптимизации изображений для ускорения сайта на WordPress
15+ способов оптимизации изображений для ускорения сайта на WordPress

Используйте плагин Better Search Replace для массового обновления URL-адресов изображений:

15+ способов оптимизации изображений для ускорения сайта на WordPress

15+ способов оптимизации изображений для ускорения сайта на WordPress

10. Объедините  изображения с помощью CSS-спрайтов

С помощью этого CSS-спрайта, который можно объединить несколько изображений (обычно более мелких декоративных картинок, таких как логотипы или значки) в одно. В результате уменьшается количество не только изображений, но и запросов. То же самое можно сделать с помощью генератора CSS-спрайтов.

15+ способов оптимизации изображений для ускорения сайта на WordPress

11. Используйте адаптивные изображения для мобильных устройств

Адаптивные изображения служат для передачи изображений меньшего размера на мобильные устройства.

Если вы прогоните свой сайт через старую версию отчета GTmetrix (Legacy Report) выбрав браузер ОС Android (премиум-функция), вы, вероятно, увидите множество ошибок, связанных с масштабированием изображений. А все потому, что размер изображений для мобильных устройств не изменяется. Существует множество плагинов для создания адаптивных изображений (один из самых популярных – ShortPixel Adaptive Images).

Как создавать адаптивные изображения

  • Установите плагин для реализации адаптивных изображений.
  • Повторно протестируйте свой сайт на наличие ошибок в размерах изображений на мобильных устройствах.
15+ способов оптимизации изображений для ускорения сайта на WordPress

12. Отключите хотлинкинг изображений

Отключение хотлинкинга запрещает людям копировать/вставлять ваши изображения на свои веб-сайты.

Если они это сделают, изображение по-прежнему будет размещено на вашем сервере, а значит будет использовать его пропускную способность. WP Rocket (отключить встраивания), Cloudflare и многие хостинги имеют возможность отключить эту опцию.

15+ способов оптимизации изображений для ускорения сайта на WordPress

13. Удалите данные EXIF

Удаление данных EXIF позволяет стереть бесполезную информацию, хранящуюся в изображениях.

Удаление может сделать изображения немного легче. Скорее всего вам, совсем не нужны сведения о диафрагме, выдержке, ISO, фокусном расстоянии, модели камеры, даты съемки, хранящиеся в изображениях. Большинство плагинов для оптимизации изображений имеют возможность удалять данные EXIF ​​(ниже отображены настройки для ShortPixel).

15+ способов оптимизации изображений для ускорения сайта на WordPress

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

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

15+ способов оптимизации изображений для ускорения сайта на WordPress

15. Кешируйте изображения

Кеширование изображений обычно выполняется через плагин кеширования.

WP Rocket и LiteSpeed ​​Cache (то, что использую я) – золотые стандарты плагинов для кеширования. Правильный выбор такой утилиты также важен, как и использование плагинов, не замедляющих работу сайта на Вордпресс.

16. Кешируйте граватары

Если у вас есть посты с большим количеством комментариев, подумайте об оптимизации граватаров (gravatar – от англ. globally recognized avatar — глобально распознаваемый аватар).

Например, можно использовать плагин WP User Avatar для локального размещения граватаров (замены на пользовательское изображение). Дополнительно можно отложить скрипты комментариев (к примеру, если используете wpDiscuz) и граватаров через WP Rocket. Это позволит минимизировать влияние комментариев на время загрузки вашего веб-ресурса.

15+ способов оптимизации изображений для ускорения сайта на WordPress

17. Измените размер GIF-файлов

Точно так же, как вы изменяли изображения до нужных размеров, GIF-файлы  тоже нужно оптимизировать. Используйте для этого сервис GIF GIF:

Шаг 1. Загрузите гифку и измените его размеры:

15+ способов оптимизации изображений для ускорения сайта на WordPress

Шаг 2 : Настройте сжатие:

15+ способов оптимизации изображений для ускорения сайта на WordPress

Наслаждайтесь :)

15+ способов оптимизации изображений для ускорения сайта на WordPress

18. Избегайте встраивания изображений

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

19. Инструменты для оптимизации изображений

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

Основные инструменты для оптимизации изображений

  • ShortPixel – сжатие без потерь, удаление EXIF, изменение размера.
  • ShortPixel Adaptive Images – подача изображений меньшего размера на мобильные устройства.
  • BunnyCDN – сеть доставки контента для обслуживания изображений и других ресурсов. Я использую Cloudinary и вполне доволен.
  • WebP Converter For Media – конвертирует JPEG/PNG в WebP.
  • Elementor Lazy Load Background Images – отложенная загрузка для фоновых изображений.
  • GTmetrix Legacy Reports – показывает ошибки изображений, не отображаемые в новых отчетах.
  • Perfmatters – включает перезапись CDN для обслуживания изображений из вашего CDN. Имеет другие функции по оптимизации скорости, к примеру, удаление раздутия и выгрузка ресурсов на определенных страницах.

Еще несколько инструментов для оптимизации изображений

  • Awesome Screenshot  – расширение Chrome для создания скриншотов.
  • Better Search Replace – массовое редактирование изображений, которые необходимо оптимизировать.
  • Cloudflare – включает несколько опций для оптимизации изображений: защита от хотлинков, mirage, polish.
  • CSS Sprite Generator – объедините несколько изображений в один CSS-спрайт.
  • Flying Images – плагин оптимизации, обслуживающий изображения из Statically CDN.
  • WP User Avatar – локальное размещение граватаров.
  • WP Rocket – премиальный плагин кеширования с функциями оптимизации изображений.
  • Zoom  – расширение Chrome, которое обеспечивает идеальные уровни масштабирования во время снятия скриншотов.

Часто задаваемые вопросы

Как оптимизировать изображения в WordPress?

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

Как правильно изменить размер изображений в WordPress?

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

Как мне создавать WebP-изображения в WordPress?

Большинство плагинов для оптимизации изображений имеют опцию конвертации файлов JPEG и PNG в формат WebP. В противном случае поищите в репозитории WordPress плагин WebP.

Как отложить закадровые изображения?

Настройте отложенную загрузку изображений. Если вы видите эту ошибку в PageSpeed ​​Insights, скорее всего, это связано с фоновыми изображениями в CSS, отложенная загрузка которых несколько затруднена.

Как эффективно кодировать изображения?

Сжатие изображений вам в помощь. PageSpeed ​​Insights использует уровень сжатия 85%, чтобы проверить, составит экономия 4 КБ и более или нет, поэтому попробуйте сжать изображения примерно до этого уровня.

Перечисленные выше советы помогли вам хоть немного улучшить показатели GTmetrix? Дай мне знать в комментариях! 

На основе статьи 15+ Ways To Optimize Images In WordPress For Faster Speeds

Вам может быть интересно:

что такое интернет-маркетинг онлайн-маркетинг виды интернет-марктинга присутствие в интернете интернет-реклама
заработок на буксе wmzona
Инстаграм Сторис
Приложение для инстаграм
заработок на арбитраже криптовалют
5 способов использования Instagram
реклама синдром упущенной выгоды черная пятница маркетинг шопинг терапия
заработок на файлообменниках
как найти удаленную работу работа на дому фриланс удаленная работа

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 6

Оценок пока нет. Поставьте оценку первым.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписывайтесь на нашу новостную рассылку,

Подписывайтесь на нашу новостную рассылку,

чтобы получать последние новости и обновления нашего сайта.

Вы успешно подписались!

Пролистать наверх

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: