7 способов оптимизации изображений в WordPress для повышения скорости загрузки страницы

Изображения являются неотъемлемой частью любого веб-сайта. Как гласит популярная цитата: «Картинка стоит тысячи слов». Изображения очень полезны для выражения мышления, особенно для учебных пособий, фотографий и сайтов. В современных социальных сетях вам необходимо иметь изображение для каждого отдельного сообщения, чтобы делиться им привлекательно. Теперь у вас может возникнуть вопрос – я использую много изображений на своем сайте WordPress и какую оптимизацию мне следует сделать?

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

Как узнать о проблемах оптимизации изображений?

Это очень просто, и есть множество бесплатных инструментов для проверки скорости загрузки страницы. У Google есть специальный Инструмент PageSpeed ​​Insights для измерения проблем на странице, влияющих на скорость загрузки. Введите URL своей страницы в инструмент, чтобы увидеть результаты, как показано ниже:

Оптимизируйте изображения в Google PageSpeed ​​Insights

Вы должны увидеть «Оптимизировать изображения» как первоочередную задачу, когда ваши изображения не сжаты. Сжатие изображений – одна из основных проблем, с которыми вы столкнетесь в инструменте Google PageSpeed ​​Insights. Но есть много других проблем, которые вы можете найти при использовании таких инструментов, как пингдом и GTmetrix как показано ниже.

  • Распараллеливайте загрузки по именам хостов
  • Показывать статический контент из домена без файлов cookie
  • Укажите размеры изображения
  • Показывать масштабированные изображения

Все эти проблемы можно легко решить с помощью плагинов и следуя простым рекомендациям.

Как оптимизировать изображения в WordPress, чтобы повысить скорость загрузки страницы?

Вот краткое изложение методов оптимизации для повышения скорости загрузки страницы:

  1. Уменьшить количество изображений на сервере
  2. Используйте плагин для сжатия изображений для сохранения размера
  3. Показывать изображения из поддомена
  4. Используйте правильный размер изображения
  5. Избегайте изменения размера в HTML / CSS
  6. По возможности используйте векторные иконки
  7. Выберите подходящий формат изображения

1. Уменьшите количество изображений

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

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

2. Сжимайте изображения, чтобы сохранить размер.

Браузеру необходимо загружать изображения с вашего сервера при загрузке страницы. Уменьшение размера каждого КБ будет зависеть от производительности; следовательно, убедитесь, что изображения обслуживаются после соответствующего сжатия. Например, изображения содержат метаданные, такие как местоположение, сведения о камере и т. Д. Если вам явно не нужно, удалите эти данные с помощью плагинов, чтобы уменьшить размер изображений.

Изображения можно сжимать двумя способами – с потерями и без потерь. Проще говоря, сжатие с потерями является необратимым способом и удаляет некоторые пиксели данных из изображения. Сжатие без потерь – это обратимый способ сжатия изображения без удаления пикселей. В зависимости от формата изображения (PNG / JPEG / GIF), качества и требуемого сжатия вам может потребоваться попробовать разные плагины, чтобы увидеть, что вам подходит.

Если у вас мало веб-страниц или изображений для оптимизации, мы рекомендуем сделать это с помощью инструментов сжатия изображений. Ниже приведены некоторые из инструментов сжатия изображений, которые вы можете использовать:

  • гифка – для создания и оптимизации изображений GIF
  • optipng – использовать сжатие без потерь, чтобы уменьшить размер изображения PNG
  • pngquant – использовать сжатие с потерями для уменьшения размера изображения PNG
  • jpegtran – сжимать изображения JPEG

WordPress имеет множество бесплатных и премиальных плагинов для сжатия изображений. Два таких популярных плагина: Оптимизатор изображения EWWW и WP-Smushit. EWWW Image Optimizer имеет множество настроек и выполняет сжатие на вашем собственном сервере. Хотя WP-Smushit прост и понятен, он сжимает изображения на внешнем сервере. После установки и активации эти плагины помогут автоматически сжимать изображения при их загрузке. Вот полное руководство по использованию плагина WP-Smushit.

Плагин WP Smush WordPress

Плагин WP Smush WordPress

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

3. Показывать изображения из субдомена

Рекомендуется размещать изображения на отдельном поддомене. Это поможет загружать изображения параллельно с контентом из основного домена. Контент на вашей странице будет загружаться быстрее, поскольку изображения загружаются из другого места.

Обслуживание контента с разных серверов

Обслуживание контента с разных серверов

Ознакомьтесь с нашей статьей о том, как переместить папку изображений WordPress в поддомен.

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

Готовьте изображения именно в том размере, как они будут отображаться на сайте. Если вам нужно изображение 600 × 350, не готовьте размер 1200 × 700. Браузеру требуется много времени для загрузки файлов изображений большего размера из-за их размера. Плагин WP-Smushit также имеет возможность установить максимальный размер загружаемых изображений. Это поможет изменить размер загружаемых изображений до максимального размера и уменьшить размер изображения.

5. Избегайте изменения размера в HTML / CSS

Люди используют HTML и CSS для изменения размера изображения после его загрузки в браузер. Это только добавит время загрузки, так как браузеру требуется дополнительное время для рендеринга изображения до требуемого размера.

Например, не рекомендуется загружать изображение размером 90 × 90 пикселей и пытаться уменьшить его размер с помощью приведенного ниже HTML-кода.

<img src="https://www.webnots.com/how-to-optimize-images-in-wordpress-to-improve-page-loading-speed/your image URL" height=45 width=45>

6. Используйте векторные иконки

Обычные изображения (называемые растровыми изображениями) имеют другой формат и не будут правильно отображаться при увеличении до большего размера. Лучший способ – использовать значки масштабируемых шрифтов SVG, например значки font awesome, вместо изображений. Например, значки в меню навигации должны использовать значки шрифтов SVG. Использование изображений для таких меньших значков не только исказит внешний вид, но и увеличит время загрузки страницы. Ниже приведен пример использования значка шрифта:

Я значок шрифта, используйте меня вместо изображения.

Убедитесь, что сжатие GZIP включено на сервере, чтобы уменьшить размер файлов изображений SVG и другого содержимого.

7. Выберите подходящий формат изображения.

Существует три универсально поддерживаемых формата изображений – GIF, PNG и JPEG. У каждого есть свои плюсы и минусы.

  • Используйте GIF, когда вам нужна анимация
  • PNG можно использовать для изображений высокого разрешения и высокого качества, таких как фотографии. Но изображения PNG будут больше по размеру.
  • JPEG больше подходит для обычных снимков экрана и веб-изображений с меньшим размером изображения и более низким качеством (по сравнению с PNG).

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

Заключение

Когда вы запускаете веб-сайт, мы рекомендуем попробовать несколько комбинаций и проверить, какая из них работает для вас. Если у вас уже есть сайт с большим количеством изображений, используйте плагины для сжатия всех существующих изображений. Используйте инструмент Google PageSpeed ​​Insight, чтобы проверить, устранена ли проблема «Оптимизация изображений» и улучшена ли скорость вашей страницы. Следуя всем вышеперечисленным методам оптимизации, вы сможете значительно улучшить показатель загрузки страницы до зеленой зоны.

Похожие записи

Добавить комментарий

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