Доброго времени суток, дорогие друзья!
В этой статье я расскажу про ленивую загрузку изображений (lazy load), а также о том, как ее можно реализовать на сайте с WordPress. Помимо этого, мы обсудим значение ленивой загрузки для поисковой оптимизации.
Я расскажу о том, почему этот функционал должен присутствовать на вашем ресурсе и какие плюсы и минусы он в себе несет. В рамках материала мы будем рассматривать преимущественно WordPress, поэтому я расскажу вам о плагинах и других решениях, которые могут помочь вам в создании lazy load. Итак, давайте начинать!
Что такое ленивая загрузка изображений
Ленивая загрузка изображений подразумевает, что они будут загружаться только при необходимости. Допустим, если на сайте есть длинная статья, внутри которой есть фотографии, они не будут загружаться все сразу, как это бывает обычно. Вместо этого, все картинки будут подгружаться асинхронно – это значит независимо от остальных фрагментов ресурса.
На деле это выглядит так. Сайт открывается, и если это статья, то сначала появляется текст, а уже после изображения, которые находятся в поле зрения пользователя. Если пользователь начинает прокручивать страницу вниз, те картинки, которые находились далее, тоже начинают загружаться. Если же он не делает этого, предпочитая просматривать только верхнюю часть материала, те фото не будут загружаться.
Благодаря этому скорость открытия страницы сайта увеличивается. В стандартных ситуациях браузер загружает абсолютно все картинки, которые есть на странице. Они будут весить довольно много, поэтому в некоторых случаях от подобного страдает скорость отображения.
Если на таком сайте активировать lazy load, то скорость отображения будет намного выше. Изначально будет загружаться только текстовой контент, а вот уже изображения начнут грузиться в процессе изучения сайта пользователем.
Подобное решение очень ценится поисковыми системами, потому что скорость отображения – один из важнейших критериев качества ресурса. Если сайт грузится слишком медленно, то велика вероятность, что пользователи будут покидать его, так и не дождавшись окончательного отображения контента.
В случае с изображениями, особенно на тех проектах, где их очень много, это тоже актуально. Только представьте, что на странице есть несколько десятков фото в высоком разрешении. Каждое такое фото может весить несколько мегабайт, и людям с медленным интернетом будет очень сложно их все прогрузить.
А если они не смогут прогрузить графику, то и сама страница сайта не будет отображаться корректно. В таком случае пользователь просто предпочтет покинуть ресурс, потому что нет смысла ждать, возможно, в поисковой выдаче есть более быстрые сайты, на которых нет таких проблем.
Ленивая загрузка изображений позволит отобразить текстовый контент, поэтому пользователь не будет сразу покидать ресурс. Возможно, он заинтересуется и начнет изучать его. В процессе изучения текста подгрузятся и картинки, и вот уже перед пользователем будет полноценная статья. Он не покинет ресурс, и поисковые системы не будут считать это отказом. Именно поэтому lazy load – это функционал, который рекомендуется многими SEO-специалистами для коммерческих и информационных ресурсов.
То есть это помогает улучшить поведенческие факторы и является одним из основных факторов поискового ранжирования. ПС сейчас особенно сильно стараются учитывать показатели ПФ при формировании результатов поиска. Если ваш ресурс имеет плохие показатели, он улетает на дно, если хорошие, наоборот, повышается в топе, постепенно доходя до самых верхних позиций.
Виды lazy load
У этого функционала есть несколько разновидностей. Каждая из них предполагает определенную модель взаимодействия пользователя и сайта. Выше я рассмотрел самую популярную – скроллинг. Она подразумевает, что все картинки будут загружаться в процессе прокрутки страницы. Обычно ее используют на контентных сайтах, интернет-магазинах и т. д.
Это довольно удобно, потому что не требует от пользователя никаких действий. Он просто просматривает страницу и в процессе этого его браузер загружает все нужные изображения. При этом в большинстве случаев он не испытывает каких-то проблем с ожиданием загрузки изображения и т. д. Если все реализовано на должном уровне, то все картинки будут загружаться в течение секунды.
В отдельных случаях особенно когда у пользователя медленный интернет или слабое устройство, закачивание изображений может занимать до 10 – 15 секунд. Это не так много, учитывая, что в это время перед пользователем будет текстовый контент.
Если бы не было ленивой загрузки, то эти 10 – 15 секунд ушли бы на открытие страницы. Смотреть в белый экран браузера не очень приятно, так что, скорее всего, человек просто бы закрыл сайт. А тут он будет занят изучением контента и вряд ли заметит какие-то проблемы.
Следующий вид ленивой загрузки подразумевает, что фото будет загружаться только после клика пользователем по какой-нибудь области или ссылке. То есть все картинки будут изначально скрыты (не будут загружаться), однако если пользователю захочется увидеть какую-то (будет специально размеченная область), то он сможет на нее кликнуть, после чего только эта картинка будет загружена.
Такой вид lazy load обеспечивает высокую скорость отображения страницы, но вместе с тем у пользователя появляется необходимость в дополнительных действиях. Согласитесь, не каждый человек захочет прокликивать все фото, когда их очень много на странице.
Этот вариант подойдет больше для каких-то блогов или небольших информационных порталов, где картинки не несут в себе особо много информации. Тогда пользователю действительно не нужно будет тратить время на клики в случаях, когда ему это не интересно. Он вполне сможет обойтись текстовым контентом.
Еще один вид ленивой загрузки, который довольно часто используется на разных ресурсах, – догрузка фото в фоновом режиме. Когда человек заходит на страницу и оставляет ее открытой, предположим, отойдя куда-то или остановившись на чтении, браузер продолжает загружать контент в фоновом режиме.
На самом деле этот способ очень похож на вариант со скроллингом, за тем лишь исключением, что сама догрузка происходит независимо от того, скроллит человек страницу или нет. Все фотографии в любом случае загружаются, только происходит это в отложенном фоновом режиме. Сначала грузится текст и скелет сайта, и уже после начинают грузиться изображения.
Вариант довольно удобный, но не везде его нужно применять. Фоновая догрузка будет актуальна для проектов с изображениями в большом разрешении. Тогда загрузка в фоновом режиме будет действительно оправдана. Однако если вы будете наполнять свой сайт бесполезными материалами, которые не вызывают никакого интереса у аудитории, то все старания будут напрасны.
В таком случае подойдет способ со скроллингом. Если люди будут прокручивать страницу, то картинки начнут загружаться. Если же нет, то никакой необходимости в загрузке фото в высоком разрешении нет.
Любой из вышеперечисленных вариантов ускоряет загрузку сайта и улучшает поведенческие факторы. Самым популярным и общепризнанным видом lazy load считается вариант со скроллингом. Однако никто не запрещает использовать другие вариации этого функционала. В каких-то особенных условиях использование способов с загрузкой по клику или фоновой загрузкой будет более оправдано.
Как сделать lazy load на WordPress
Теперь я расскажу о том, как можно реализовать ленивую загрузку изображений на ресурсе с WordPress. Пользоваться мы будем дополнительными решениями.
С помощью функционала в шаблонах
Итак, сделать ленивую загрузку графики в WP можно с помощью функционала, который есть в шаблонах. Очень много шаблонов сейчас имеют дополнительные встроенные особенности. Как правило, это какие-то специальные визуальные улучшения, блоки с текстом и т. д. Есть шаблоны, которые предлагают кастомную возможность активации ленивой загрузки фото. Обычно такое есть в платных премиум-шаблонах, но вы можете поискать и бесплатные.
Из бесплатных можно выделить тему Hueman. Ее можно найти в бесплатном каталоге WordPress, также эту тему можно установить прямо из панели управления WP.
В основном этот шаблон используется на блогах. По скриншоту выше вы можете видеть, что для этого там есть все необходимые особенности. Сама тема довольно быстрая, но вы можете сделать ее еще быстрее с помощью встроенного инструмента, который активирует ленивую загрузку. Как только вы включите эту опцию, все картинки будут загружаться на вашем ресурсе последовательно при скроллинге страницы.
Также такой функционал есть и в других популярных шаблонах. В основном это платные решения, которые можно найти в различных магазинах или на Themeforest. В последнем магазине шаблонов можно найти очень много тем с этой функцией. Просто введите в строку поиска ключевые слова, после чего ресурс выдаст вам все результаты.
Шаблонов с таким функционалом очень много. Вы можете зайти в официальный список магазинов от WordPress.org, выбрать сайт нужного и попытаться найти там хороший шаблон.
С помощью плагинов
Если вы не хотите менять шаблон, то вам помогут плагины. В каталоге WordPress их очень много, вам просто нужно перейти в него и ввести ключевые слова в строку поиска. Здесь я расскажу о самых популярных и востребованных расширениях, которые помогут вам сделать lazy load на сайте с WP.
- a3 Lazy Load
Довольно популярный плагин, который имеет более 100 000 активных установок по данным WordPress.org. Установить его можно прямо из панели управления в несколько кликов. Сам плагин имеет огромное количество преимуществ и подойдет для использования почти на любом проекте.
С помощью этого замечательного расширения вы сможете ускорить свой ресурс на WordPress. Особенно сильно это будет заметно на мобильных устройствах, потому как именно на них обычно видны проблемы со слишком тяжелыми изображениями. Если таких фото очень много, страница начинает загружаться в несколько раз дольше.
Чтобы убедиться в работоспособности данного модуля, разработчики предлагают ознакомиться с демо-версией, на которой последовательно размещены 1 000 картинок. Вы будете прокручивать страницу, эти изображения будут загружаться в процессе. Никаких проблем нет со скоростью или неправильным отображением контента.
Помимо ленивой загрузки изображений, этот плагин может помочь реализовать ленивую загрузку видео, медиа, фреймов и т. д. То есть ваш сайт не будет тормозить, весь медиаконтент загрузится в процессе скроллинга.
Этот плагин имеет предельно простой интерфейс, с которым разберется даже новичок.
- Lazy Load by WP Rocket
Еще один популярный плагин, который позволит вам сделать отложенную загрузку картинок. Модуль имеет более 40 000 активных установок и продолжает набирать популярность. Его можно рассматривать как неплохую альтернативу предыдущему плагину.
Он умеет работать не только с картинками, но и с другими типами контента. Например, вы сможете сделать отложенную загрузку фреймов или видео. Если на сайте будет аудио, то можно проделать то же и с ним.
Сам скрипт плагина довольно легковесный. Его можно очень легко установить из каталога WordPress и настроить при помощи инструкций от разработчиков.
- Lazy Load Optimizer
Небольшое расширение, которое помогает настроить отложенную загрузку фотографий на вашем ресурсе. Он также бесплатно доступен в каталоге WP, установить можно прямо из панели администратора WordPress. Сейчас плагин не особо популярен, всего 4 000+ активных установок. Однако отзывы он имеет довольно положительные.
Этот плагин имеет простой интерфейс. Он подойдет для новичков. Вам лишь необходимо просто установить его из панели управления, после чего настроить все параметры в стандартном настройщике WordPress. Каких-то сложностей возникнуть не должно, все предельно просто и понятно.
- Lazy Load
Простенькое расширение с 80 000+ активных установок. Доступен прямо в панели управления WordPress и имеет сравнительно простой интерфейс.
Этот плагин не особо подойдет для новичков, потому как с настройкой могут возникнуть некоторые трудности. Тем не менее многие вебмастеры выбирают именно его, потому что сам плагин представляет собой небольшой скрипт, который особо не нагружает CMS.
В каталоге есть и другие решения, которые помогут вам реализовать отложенную загрузку изображений. Однако они не такие популярные и функциональные как те, что я описал.
Как сделать lazy load без плагинов
Вы можете сделать отложенную загрузку без помощи плагинов. Для этого придется использовать скрипты, с которыми нужно будет работать вручную. То есть новички вряд ли смогут осилить такое. Им придется обращаться за помощью к специалистам.
Самым популярным решением для ленивой загрузки можно считать скрипт от David Walsh, который выложил на своем сайте мануал, где в подробностях описан принцип работы этого скрипта.
Этот скрипт работает очень просто: вы заменяете все атрибуты src в теге img на data-src (можно использовать с каким-либо другим префиксом), после чего добавляете в CSS-код несколько строчек. Они и будут отвечать за отображение графики при скроллинге. Также вам необходимо будет использовать JS-код, который будет заменять все атрибуты с префиксом на обычные после того, как все картинки на странице будут загружены.
В инструкции по ссылке выше этот процесс описан более подробно, но на английском языке. С этим должен разбираться знающий человек, новичку лучше даже не пытаться.
Есть другие способы и скрипты, которые помогают реализовать отложенную загрузку на сайте. Какие-то из них просты в установке, какие-то нет. Рассматривать их я не буду, потому что исчерпывающей важной информации это все вам не даст. Работает все примерно так же, как я описал выше.
Заключение
Вариантов реализации функционала отложенной загрузки изображений очень много. Я постарался рассказать обо всех простых способах, которые подойдут вебмастерам, использующим WordPress. На других платформах также есть свои решения, которые позволят сделать lazy load на сайте. Нужно просто поискать на тематических площадках или в каталогах.
Я надеюсь, что эта статья помогла вам разобраться с этим вопросом, и теперь у вас не будет проблем, если вы захотите реализовать такое на своем ресурсе.
Ну а если вы хотите научиться зарабатывать на своем сайте с помощью разных способов, то я советую вам обратить внимание на курс от Василия Блинова. В нем автор рассматривает создание блога на WordPress от “А” до “Я”, раскрывая все секреты и особенности вебмастеринга. По ссылке выше вы найдете более подробную информацию.