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

Зачем загружать больше данных, чем мы можем отобразить?

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

Согласно Akamai, 47 процентов посетителей ожидают, что веб-страница загрузится в течение двух секунд или меньше . Если страница загружается более 3 секунд, 40 процентов посетителей покидают веб-сайт. Кроме того, задержка в 1 секунду может стоить 7% снижения продаж. Потому что:

Никто не хочет «ждать» загрузки веб-страницы.

Кроме того, гигант поисковых систем Google также предпочитает веб-сайты, время загрузки которых составляет менее 2–3 секунд.

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

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

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

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

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

Ленивая загрузка - это метод загрузки веб-контента по мере необходимости, а не сразу.

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

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

По сути, ленивая загрузка помещает ссылочный атрибут src в лениво загружаемые ресурсы веб-страницы (изображение, видео и т. Д.) И добавляет еще один атрибут для исходного содержимого, а затем использует JavaScript для определения позиции прокрутки страницы посетителями. Когда позиция прокрутки находится ближе к эталонному объекту, он заменяет ссылочный атрибут Src с фактическим ЦСИ и загружает содержание.

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

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

Влияет ли отложенная загрузка на SEO?

Ленивая загрузка не оптимизирована для SEO (по крайней мере, на момент написания этого руководства). Поскольку контент (изображения, видео, комментарии и т. Д.) Изначально не загружается для посетителей, то же самое происходит и для пауков поисковых систем. Существует вероятность того, что часть содержимого с отложенной загрузкой (изображения, видео) может не проиндексироваться в разделе изображений / видео Google, что нехорошо с точки зрения SEO.

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

Гигант поисковой системы Google работает и готовит справочные документы о том, как можно воспользоваться преимуществами отложенной загрузки и получить доступ к содержимому с отложенной загрузкой, доступному для обнаружения роботом GoogleBot.

Медиа замедляют работу сайтов?

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

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

Поэтому всегда рекомендуется оптимизировать изображения перед их загрузкой на сайт WordPress. Вы можете использовать WP Compress, ShortPixel, WP Smush It и т. Д., Чтобы уменьшить размер изображения.

Кроме того, укажите размеры изображения, например, если у вас есть изображение размером 1000 × 1000 пикселей, но вы увеличили его до 100 × 100 пикселей, браузер загрузит в десять раз больше, чем необходимо. Кроме того, избегайте сложных форматов файлов, таких как TIFF, BMP и т. Д., Поскольку браузеры могут быстро загружать изображения JPG, PNG и GIF.

Следует ли использовать отложенную загрузку?

Это эпоха скорости!

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

В условиях стремительного роста числа мобильных пользователей более 52% мирового трафика обслуживается через смартфоны. При оптимизации сайта WordPress обязательно следует учитывать мобильных пользователей.

3 варианта использования отложенной загрузки

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

1. Середина

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

2. YouTube

По умолчанию YouTube в первую очередь показывает видео, которое вы собираетесь смотреть, и не загружает комментарии и эскизы других предлагаемых видео при начальной загрузке. Когда вы начинаете прокрутку, он начинает загружать лениво загруженные элементы, такие как эскизы и комментарии. Таким образом, посетителю не нужно ждать загрузки всей страницы. Он может сразу начать просмотр видео.

3. Google картинки

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

Добавить ленивую загрузку на сайт WordPress

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

Внедрение отложенной загрузки в контент WordPress не так уж и сложно, спасибо сообществу WordPress за их вклад.

1. Плагины для отложенной загрузки WordPress

Если вы выполните поиск « ленивая загрузка » в каталоге плагинов WordPress, вы встретите несколько плагинов ленивой загрузки. Но для этого руководства я выбрал a3 Lazy Load , один из самых популярных, многофункциональных и широко используемых плагинов для реализации техники отложенной загрузки на веб-сайте WordPress.

2. WordPress с отложенной загрузкой изображений

Образы требовательны к ресурсам и занимают много места для хранения. С помощью плагина a3 Lazy Load вы можете переключаться между ВКЛ / ВЫКЛ. Мало того, когда включена отложенная загрузка изображений, вы можете контролировать, где она должна работать, в том числе:

• Сообщения, страницы и пользовательские типы сообщений (все области содержимого)
• Виджеты (боковая панель, верхний и нижний колонтитулы)
• Применить к миниатюрам публикации
• Подать заявку на Gravatars

3. WordPress с отложенной загрузкой видео и iFrames

Функция a3 Lazy Load не ограничивается только отложенной загрузкой изображений, она также позволяет выполнять отложенную загрузку видео. Он поддерживает все встраиваемые видео WordPress, которые используют iFrames для загрузки видео при начальной загрузке. Опять же, он содержит переключатели для ВКЛ / ВЫКЛ. Если этот параметр включен, вы можете управлять следующими областями:

• Видео, встроенные по URL-адресу в сообщения и страницы (все области содержимого)
• Видео в типах виджетов, текстовых виджетах и ​​HTML-виджетах
• Полностью совместим с популярным плагином YouTube Embed.

4. Комментарии WordPress с отложенной загрузкой

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

• Для комментариев WordPress по умолчанию вы можете использовать отложенную загрузку комментариев.
• Для комментариев Disqus вы можете использовать условную загрузку Disqus
• Для комментариев в Facebook вы можете использовать ленивые комментарии в Facebook.

5. 5. Другие плагины отложенной загрузки для WordPress

Помимо a3 Lazy Load, есть ряд полезных плагинов, которые могут учитывать:

• a3 Ленивая загрузка
• Минет ленивая загрузка
• WordPress Infinite Scroll - Ajax Загрузить еще
• Ленивая загрузка от WP Rocket
• Загрузить больше продуктов для WooCommerce
• Ленивая загрузка комментариев
• Условная загрузка Disqus
• Ленивая загрузка видео

Бесконечная прокрутка WordPress

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

В WordPress вы можете реализовать это с помощью плагина Download WordPress Infinite Scroll - Ajax Load More. Он используется для отложенной загрузки сообщений, отдельных сообщений, страниц, комментариев и многого другого с помощью запросов на основе AJAX.

Не только это, но также полезно для бесконечной прокрутки с помощью популярных плагинов электронной коммерции, таких как WooCommerce и Easy Digital Downloads, которые отображают тысячи продуктов без загрузки всей веб-страницы.

Google Chrome может интегрировать отложенную загрузку по умолчанию

Google работает над тем, чтобы сделать лениво загружаемый контент более доступным. Он также экспериментирует с возможностями добавления поддержки отложенной загрузки в Google Chrome. Таким образом, он будет загружать только те части страниц, которые в настоящее время отображаются на экране, и все, что находится «ниже сгиба», будет загружаться при прокрутке вниз.

В настоящее время он доступен для тестирования в Google Chrome Canary, ранней версии, предназначенной для разработчиков и первых пользователей. Чтобы попробовать, скачайте Canary и введите в адресной строке ниже:

• хром: // флаги / # включить ленивую загрузку изображений
• хром: // флаги / # включить ленивую загрузку кадра

Когда эти флаги активны, Google Chrome не загружает изображения или кадры iFrame, которые в данный момент не отображаются на экране. Это поможет быстрее загружать веб-страницы в Google Chrome и сократит использование полосы пропускания, что сделает эту функцию особенно полезной для мобильных браузеров. Идите вперед и обслуживайте своих мобильных посетителей еще лучше!