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

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

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

Без лишних слов, мы приглашаем вас ознакомиться с нашим списком Темы WordPress. Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Что такое ленивая загрузка?

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

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

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

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

Преимущества и недостатки отложенной загрузки WordPress

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

Avantages:

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

против:

  • Вызывает буферизацию контента, что влияет на скорость загрузки.
  • Замедляет быструю прокрутку.

Как добавить ленивую загрузку на ваш сайт WordPress: 3 метода

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

1. Обновите WordPress до версии 5.4 или выше.

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

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

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

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

2. Включите нативную ленивую загрузку через браузер

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

В нативной отложенной загрузке WordPress атрибут загрузки поддерживает следующие три значения:

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

Вот пример использования:

<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>

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

3. Установите плагин WordPress

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

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

Улучшите скорость загрузки вашего сайта

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

реализовать ленивую загрузку

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

Этот бесплатный плагин позволяет оптимизировать изображения до 5 посещений в месяц. Приобретение плана Pro позволит вам лениво загружать изображения для 000 25 активных посетителей в месяц и более. Образы для обоих планов обслуживаются через CDN AWS ​​Cloudfront.

скачать | Демонстрация | веб-хостинг

Smush

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

реализовать ленивую загрузку

Другими полезными функциями являются определение неправильного размера изображения, поддержка мультисайтовой и инструменты сжатия изображений. Обновление до Smush Pro позволяет оптимизировать большие изображения без ограничений по размеру, сохранять исходные изображения и получать доступ к другим плагинам WPMU Pro. Цены начинаются от 5 $ / месяц.

скачать | Демонстрация | веб-хостинг

a3 Ленивая загрузка

a3 Lazy Load — бесплатный плагин для отложенной загрузки, ориентированный на мобильные устройства. Он полностью совместим с WordPress 5.9 и рядом популярных инструментов, включая плагины WebP и AMP.

реализовать ленивую загрузку

Помимо базовой функции ленивой загрузки, a3 Lazy Load также позволяет лениво загружать видео, включая видео, встроенные в страницы, сообщения, настраиваемые типы сообщений и виджеты. Также доступны эффекты отложенной загрузки и возможность загрузки скриптов из верхнего или нижнего колонтитула.

Другие примечательные функции, такие как поддержка нескольких сайтов, поддержка изображений WebP и отложенная загрузка iframe — это относится к iframe, которые не загружает ядро ​​​​WordPress, таким как Google Maps и встроенные медиа.

скачать | Демонстрация | веб-хостинг

Советы по ленивой загрузке WordPress

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

  • Не лениво загружать изображения заголовков. Так как изображения, размещенные в верхней части страницы, видны при загрузке, их ленивая загрузка не имеет смысла.
  • Выберите подходящие заполнители. Мы рекомендуем использовать сплошной цвет или изображение низкого качества в качестве заполнителя для ваших изображений.
  • Добавьте буферное время для загрузки изображения. Таким образом, ваши изображения будут готовы непосредственно перед входом в окно просмотра посетителя, что исключает время ожидания.
  • Определите размеры контейнеров изображений. Это поможет вам избежать внезапных изменений макета, из-за чего ваша веб-страница будет выглядеть аккуратно при загрузке.
  • Реализуйте ленивую загрузку только на длинных страницах. К длинным страницам относятся те, которые занимают более двух оборотов, чтобы дойти до конца, и содержат более пяти изображений.

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

Другие рекомендуемые ресурсы

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

Заключение

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

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

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

В то же время, поделитесь этой статьей в разных социальных сетях.   

...