Хотите узнать, как отложенно загружать изображения в WordPress?

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

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

Зачем нужна ленивая загрузка изображений в WordPress?

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

Никто не любит медленные сайты. Фактически, исследование производительности показало, что задержка загрузки страницы на 1 секунду приводит к уменьшению конверсий на 7%, уменьшению количества просмотров страниц на 11% и снижению удовлетворенности клиентов на 16%.

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

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

Один из способов справиться с этой ситуацией — использовать службу CDN, например BunnyCDN. CDN позволит пользователям загружать изображения с ближайшего к ним веб-сервера и снизить скорость загрузки веб-сайта.

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

Как работает отложенная загрузка изображений?

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

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

Отложенная загрузка может быть очень полезна для вашего блога WordPress:

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

В версии WordPress 5.5 в качестве функции по умолчанию добавлена ​​отложенная загрузка.

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

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

Метод 1: ленивая загрузка изображений в WordPress с помощью WP Rocket

Мы рекомендуем использовать плагин WP Rocket для отложенной загрузки изображений в WordPress. Это лучший плагин кеширования WordPress на рынке, который позволяет легко включить отложенную загрузку изображений.

Кроме того, это очень мощный плагин, который поможет вам оптимизировать скорость вашего сайта, не зная сложных технических терминов и не настраивая экспертные настройки.

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

Первое, что вам нужно сделать, это установить и активировать плагин WP Rocket. Для получения более подробной информации вы можете ознакомиться с нашим руководством по установке плагина WordPress.

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

Все, что вам нужно сделать, это зайти Настройки » WP Rocket в панели управления WordPress и нажмите вкладку «Медиа». Затем вы можете перейти к разделу «LazyLoad» и установить флажки рядом с «Включить для изображений» и «Включить для iframe и видео».

Для получения более подробной информации см. наше руководство о том, как правильно установить и настроить WP Rocket в WordPress.

Метод 2: ленивая загрузка изображений в WordPress с помощью Optimole

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

Если у вас более 5000 посетителей в месяц, вам понадобится премиум-версия Optimole.

Сначала вам необходимо установить и активировать плагин Optimole. Более подробную информацию можно найти в нашем пошаговом руководстве по установке плагина WordPress.

После активации вы увидите экран с просьбой подписаться на получение ключа API. Вы также можете найти этот экран, перейдя к Оптимол в меню администратора.

Вам необходимо убедиться, что указанный адрес электронной почты правильный, а затем нажать кнопку «Создать и подключить свою учетную запись». Альтернативно, если вы уже являетесь пользователем, просто нажмите кнопку «У меня уже есть ключ API».

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

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

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

Затем нажмите на пункт меню «Дополнительно» и выберите «Lazyload». На этом экране есть несколько различных настроек, которые позволяют настроить отложенную загрузку изображений.

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

Вы можете установить значение 0, если хотите, чтобы каждое изображение загружалось отложенно.

В Optimole есть еще несколько расширенных настроек отложенной загрузки, которые вы можете проверить. Эти настройки включены по умолчанию.

Первый — это настройка «Масштабировать изображения». Это позволит масштабировать изображения до размера экрана посетителя и ускорить загрузку страницы.

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

Другая настройка — отложенная загрузка встроенных видео и iframe. Если у вас много встроенного видеоконтента, вам следует оставить этот параметр включенным. Вместо видео будет загружено изображение-заполнитель. При нажатии на заполнитель загрузится полное видео.

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

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

Бонусные советы по оптимизации изображений WordPress

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

Например, мы рекомендуем сжимать изображения перед загрузкой их на свой веб-сайт с помощью такого инструмента, как КрошечныйPNG или JPEGмини. Альтернативно вы можете использовать плагин автоматического сжатия изображений, например Optimole или EWWW Image Optimizer.

Также важно выбрать правильный размер изображения WordPress и формат файла для ваших изображений. JPEG лучше всего подходит для фотографий или изображений с множеством цветов, PNG подходят для простых или прозрачных изображений, а GIF подходят только для анимированных изображений.

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

Если вам понравилась эта статья, то подписывайтесь на нашу рассылку YouTube канал для видеоуроков по WordPress. Вы также можете найти нас на Твиттер и Фейсбук.