Эта статья о отложенной загрузке для WordPress была первоначально опубликована журналом Torque Magazine и воспроизводится здесь с разрешения.
Добавление отложенной загрузки на ваш сайт WordPress — эффективный инструмент для ускорения вашего сайта WordPress. Мы много писали (мы даже сделали пример ) о том, как медленная скорость загрузки страницы негативно влияет на конверсии, SEO и другие показатели успеха в Интернете. Чем быстрее ваш сайт загружается, тем лучше.
Двумя наиболее важными факторами, которые замедляют работу сайтов, являются HTTP-запросы и вес страницы. Естественно, чем больше запросов браузер должен отправить на сервер, тем больше времени потребуется для обработки сайта. В то же время, чем больше ваша страница (например, потому что она содержит много изображений), тем дольше она будет загружаться.
Ленивая нагрузка — это метод, который учитывает оба этих фактора. Это означает задержку загрузки некоторых частей веб-страницы до тех пор, пока они действительно не понадобятся. Это также тема этого блога. Далее вы узнаете, как работает отложенная загрузка, каковы ее преимущества и недостатки, а также как добавить отложенную загрузку в WordPress.
Надеюсь, вы не поленились продолжать читать!
Что такое Lazy Load и для чего вы можете его использовать?
Как уже упоминалось, отложенная загрузка — это способ не дать браузеру изначально загружать части веб-страниц — обычно изображения — и заменять их заполнителями. Таким образом, страница становится меньше, и от сервера к браузеру требуется меньше данных.
Результат: более быстрая загрузка сайта и более счастливые пользователи.
Но подождите, вам не нужны эти части вашего сайта? Если бы вы этого не сделали, их бы там не было, верно? Не испортит ли это страницу?
Ну, вот где ленивый в ленивой нагрузке вступает в игру. Техника не просто запрещает браузеру загружать ресурсы и изображения, но просто задерживает его до тех пор, пока он действительно не понадобится.
Например, изображение не обязательно должно быть на странице, пока посетитель не прокрутит его достаточно далеко, чтобы увидеть его. Как следствие, браузеру не нужно загружать его до тех пор, пока это не произойдет. Это именно то, что делает ленивая нагрузка.
(Кстати, существуют другие способы оптимизации изображений на вашем сайте, чтобы они быстрее загружались.)
Случаи использования Lazy Load
В Интернете ленивая нагрузка чаще всего используется для изображений. Вы, вероятно, видели это на популярных сайтах, таких как Buzzfeed, которые используют эту технику, чтобы их списки появлялись быстрее в браузерах их пользователей.
Однако, это не единственное, что ленивая нагрузка способна задержать. Другими примерами являются видео, сценарии и комментарии. На самом деле, перемещение файлов JavaScript в нижний колонтитул страницы является обычной техникой для ускорения загрузки страницы .
Вам также может быть известно, что YouTube загружает комментарии только тогда, когда вы прокручиваете их вниз. Таким образом, платформа гарантирует, что вы сможете смотреть видео быстрее. Если это достаточно хорошо для них, почему не для вас?
Также есть специальное приложение для отложенной загрузки, называемое бесконечной прокруткой. Это альтернатива классической нумерации страниц, когда дополнительные посты загружаются всякий раз, когда пользователь достигает нижней части страницы. Вы можете увидеть это на Pinterest или если вы являетесь пользователем Pocket.
Это исключает много кликов и может быть очень удобно для пользователя. Тем не менее, бесконечная прокрутка не без противоречий и не будет в центре внимания этой статьи.
Преимущества Lazy Load
Главное преимущество ленивой загрузки уже очевидно: более быстрое время загрузки. Когда вы сможете сократить большую часть веса вашей страницы, она, естественно, появится в браузере гораздо быстрее.
Приятным побочным эффектом этого является то, что вы экономите своим посетителям значительную пропускную способность. Особенно те, кто использует подключение для передачи данных на своем мобильном устройстве, будут благодарны. В дополнение к более быстрому просмотру вашего сайта, им также не нужно тратить свой план на изображения, которые они могут даже не увидеть.
Недостатки использования Lazy Load на вашем сайте
Тем не менее, использование ленивых нагрузок не все солнце и радуга. Техника также имеет некоторые недостатки.
Во-первых, это не всегда дружественный для поисковых систем. Когда вы задерживаете загрузку ресурсов для посетителей, вы делаете то же самое для поисковых систем. Как следствие, они могут не индексировать часть вашего контента, что, конечно, не очень хорошо для SEO. Даже если обходные пути существуют . Естественно, это более серьезная проблема при использовании отложенной загрузки для сообщений, а не только для изображений (именно поэтому многие избегают этого).
Второе беспокойство — пользовательский опыт. При очень быстрой прокрутке сайта замена изображений-заполнителей фактическими визуальными эффектами может вызвать скачок содержимого страницы, что может раздражать.
Итак, каков вердикт о ленивой нагрузке? Вкратце: при использовании в определенных пределах эта техника может значительно ускорить загрузку вашего сайта WordPress, однако вам нужно следить за SEO и пользовательским опытом.
Как добавить Lazy Load в WordPress через плагин
Хотя можно добавить ленивую загрузку в WordPress вручную (см . Учебное пособие Джея Хоффмана в Elegant Themes), гораздо более простой альтернативой является использование одного из плагинов ниже. Многие из перечисленных здесь предложений представляют собой простые решения типа «установи и забудь», которые нужно активировать только без какой-либо настройки. Большинство из них также очень легкие.
По этой причине добавление отложенной загрузки в WordPress без плагина просто кажется мне ненужным усилием (если только вы не сделаете это для улучшения своих технических возможностей, что является законной причиной). Для большинства пользователей лучше выбрать один из множества плагинов ленивой загрузки, которые предлагает сфера WordPress.
Ленивая нагрузка
Наш первый кандидат — самое популярное бесплатное решение для отложенной загрузки изображений. Он имеет более 90 000 установок и солидный 4-звездочный рейтинг. Его популярность может быть частично объяснена тем фактом, что команда Automattic является его вкладчиком.
Плагин Lazy Load использует jQuery.sonar для загрузки изображений только тогда, когда они появляются в области просмотра (которая является частью сайта, которую вы видите на вашем устройстве). Разархивированный плагин имеет размер всего 20 КБ, и все, что вам нужно сделать, это установить и активировать его. Нет необходимости в настройке.
BJ Lazy Load
Второе место на троне лучших плагинов WordPress с отложенной загрузкой занимает BJ Lazy Load. Он может похвастаться более чем 60 000 установок и такими же хорошими оценками.
Плагин заменяет все изображения и iframes (включая видео YouTube и Vimeo) в вашем контенте заполнителем до просмотра. Установите, активируйте и все готово.
Ленивая нагрузка от WP Rocket
Здесь у нас есть плагин того же производителя, что и популярный кеширующий плагин WP Rocket. Он может лениво загружать изображения и / или фреймы, включая миниатюры, содержимое виджетов, аватары и смайлики. Более того, плагин не использует библиотеки JavaScript. Вероятно, это одна из причин, по которой он весит менее 10 КБ.
Более 10000 веб-сайтов доверяют Lazy Load от WP Rocket, так что, похоже, все делает правильно. Сайт плагинов в каталоге WordPress также содержит код для выборочной деактивации отложенной загрузки страниц или изображений или изменения порога загрузки. В противном случае параметры конфигурации недоступны.
ленивая нагрузка а3
a3 Lazy Load утверждает, что это «наиболее полнофункциональный, невероятно простой в настройке плагин для отложенной загрузки для WordPress». Это также одна из немногих записей в этом списке, которая на самом деле поставляется с некоторыми настройками.
Плагин подходит для ленивой загрузки изображений, видео и фреймов в сообщениях, страницах, виджетах, миниатюрах и / или аватарах. Он также работает для встраивания после публикации и совместим с WooCommerce (см. Наше руководство для начинающих по WooCommerce ).
a3 Lazy Load даже предлагает эффекты изображений, которые появляются на сайте. Как будто этого недостаточно, он также позволяет вам выбрать, загружать ли его скрипт в верхний или нижний колонтитул (ленивый загрузочный плагин, который загружается сам, как мета) и игнорировать изображения или видео.
Наконец, он совместим с целым рядом мобильных и кэширующих плагинов, а также с сетями доставки контента. Я начинаю понимать, что их утверждение не может быть полностью необоснованным.
Сумасшедший Ленивый
Одной из основных причин, по которой я включил этот плагин, является его потрясающий логотип. Посмотри на эту улитку!
Однако, кроме этого, это также ленивый плагин загрузки изображений, который использует очень мало ресурсов. Crazy Lazy поставляется с обычной функциональностью и предотвращает загрузку изображений до того, как их увидит пользователь. Нет необходимости в настройке, просто включите его, и все хорошо.
Если вы хотите что-то настроить, вы можете установить собственные изображения-заполнители с помощью CSS (на странице плагина есть код для этого) и исключить изображения (для этого тоже есть код).
Ускорение — Ленивая нагрузка
Еще один плагин, который удерживает изображения и фреймы от загрузки до необходимости. Только 5 КБ света (конкурируют ли эти разработчики в том, кто может сделать самый маленький плагин?) И без какой-либо необходимости в настройке. Он имеет короткий код для деактивации отложенной загрузки везде, где он не нужен, и позволяет отключить его для отдельных изображений. Пока только 3000 установок, однако, он имеет полный 5-звездочный рейтинг.
WordPress Infinite Scroll — Ajax Загрузить еще
Раньше мы говорили о бесконечной прокрутке, теперь вот плагин, чтобы добавить его на свой сайт.
WordPress Infinite Scroll позволяет лениво загружать посты, отдельные посты, страницы, комментарии и другие элементы страницы, создавая собственные шорткоды. Вы можете запрашивать различные типы контента по типу или формату сообщения, дате, категории, тегу и многому другому. После этого вы можете добавить шорткоды в редакторе WordPress или в шаблонах.
Плагин также работает с WooCommerce и Easy Digital Downloads и предлагает ряд премиум-дополнений.
WP YouTube Lyte
Наша последняя запись — плагин для отложенной загрузки только для видеоконтента. Он позволяет вам вводить специальные ссылки на YouTube, которые загружают проигрыватель YouTube только после нажатия, но не раньше.
По сути, все, что вам нужно сделать, это изменить одну букву в вашей ссылке, чтобы она заработала. Кроме того, вы можете использовать шорткоды для ввода видеоконтента или иметь плагин для автоматического анализа ссылок YouTube. Кроме того, он позволяет вставлять только аудио часть, если это необходимо.
В качестве альтернативы, проверьте Ленивая загрузка для видео .
Ленивая загрузка и WordPress в двух словах
Поскольку скорость загрузки страниц продолжает оставаться важным фактором для пользовательского опыта и SEO, ленивая загрузка является еще одним инструментом в вашем наборе инструментов для ее улучшения. Техника уменьшает вес страницы и HTTP-запросы, позволяя посетителям быстрее увидеть желаемую страницу.
Выше мы говорили о том, как работает отложенная загрузка и для чего ее можно использовать. Помимо основного приложения для изображений, вы также можете применять его к видео, сценариям, комментариям и даже постам и страницам.
Хотя вам нужно обратить внимание на SEO, если использовать его правильно, ленивая загрузка все еще является хорошим вариантом, чтобы сделать ваш сайт WordPress быстрее. Если вы хотите попробовать, один из плагинов в этом списке наверняка сможет удовлетворить ваши потребности.