Простой способ ленивой загрузки изображений без плагинов: Как настроить отложенную загрузку картинок: lazy loading изображений

Lazy load или ленивая загрузка изображений – что это, и как ее сделать на сайте

Здравствуйте, дорогие друзья!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если бы не было ленивой загрузки, то эти 10 – 15 секунд ушли бы на открытие страницы. Смотреть в белый экран браузера не очень приятно, так что, скорее всего, человек просто бы закрыл сайт. А тут он будет занят изучением контента и вряд ли заметит какие-то проблемы.

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

Такой вид lazy load обеспечивает высокую скорость отображения страницы, но вместе с тем у пользователя появляется необходимость в дополнительных действиях. Согласитесь, не каждый человек захочет прокликивать все фото, когда их очень много на странице.

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

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

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

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

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

Любой из вышеперечисленных вариантов ускоряет загрузку сайта и улучшает поведенческие факторы. Самым популярным и общепризнанным видом lazy load считается вариант со скроллингом. Однако никто не запрещает использовать другие вариации этого функционала. В каких-то особенных условиях использование способов с загрузкой по клику или фоновой загрузкой будет более оправдано.

Теперь мы расскажем о том, как можно реализовать ленивую загрузку изображений на ресурсе с 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.

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

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

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

Этот скрипт работает очень просто: вы заменяете все атрибуты src в теге img на data-src (можно использовать с каким-либо другим префиксом), после чего добавляете в CSS-код несколько строчек. Они и будут отвечать за отображение графики при скроллинге. Также вам необходимо будет использовать JS-код, который будет заменять все атрибуты с префиксом на обычные после того, как все картинки на странице будут загружены.

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

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

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

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

Что такое lazy load или ленивая загрузка изображений, и как ее сделать

Доброго времени суток, дорогие друзья!

В этой статье я расскажу про ленивую загрузку изображений (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 от “А” до “Я”, раскрывая все секреты и особенности вебмастеринга. По ссылке выше вы найдете более подробную информацию.

Как Lazy Load убивает ваши сайты и что с этим делать — SEO на vc.ru

Одним из важных факторов ранжирования в Google является скорость загрузки страниц сайта, которую измеряют с помощью теста PageSpeed Insight (PSI). Мы в WP Booster давно занимаемся оптимизацией сайтов на WordPress под требования Google PageSpeed и к нам периодически обращаются за консультациями.

38 928 просмотров

Просматривая чужие сайты, мы видим, что вебмастера, в погоне за “зелёненькими” цифрами, устанавливают плагины, которые улучшают показатели в тесте PSI, но при этом нарушают индексацию изображений. Типичный случай — установка одного из плагинов для отложенной загрузки (Lazy Load) изображений.

Как Lazy Load нарушает индексацию изображений

Если на странице много картинок, то установка плагина отложенной загрузки может значительно увеличить баллы. Проблема в том, что все эти плагины подставляют в атрибут src тега <img> заглушку типа placeholder.svg. И только после прокручивания страницы скрипт подставляет в src ссылку на нужное изображение. Но бот Google не умеет прокручивать страницу! В итоге вместо картинок бот “видит” на странице примерно следующее:

<img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”>

вместо:

<img src=”notebook.jpg”> <img src=”smartphone.jpg”> <img src=”televizor.jpg”> <img src=”stiralka.jpg”> <img src=”fen.jpg”>

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

Вы подумаете что я нагнетаю и проблемы нет? Давайте проанализируем типичные сайты.

Пациент 1. Сантехника-Тут.Ру

Не прокручивая страницу жмём ctrl+U и смотрим исходный код:

Вместо ссылок на изображения в src стоят заглушки preloadbox.png! Хотите узнать как они выглядят? А вот так:

Именно их “увидит” бот Google вместо изображений унитаза, смесителя и кухонной мойки.

То же самое на внутренних страницах:

Пациент 2. Связной

Смотрим исходный код:

У “Связного” не то что заглушки, даже атрибута src нет!

Пациент 3. Мастер ремонта

Смотрим исходный код:

Опять нет атрибута src!

Проверим индексацию картинок на этой странице через оператор site:https://mastera-remonta.com/remont-novostrojka/chistovoj-remont/remont-2-k-kvartiry/ на вкладке Картинки:

На момент проверки на данной странице проиндексировано всего 15 изображений. Хотя в слайдерах и вкладках 49 изображений. И это без учёта фотографий сотрудников (которые в принципе и не должны ранжироваться на этой странице). То есть из-за Lazy Load проиндексировалось менее 50% изображений в этом конкретном примере.

Пациент 4. Santechsklad.com.ua

https://santehsklad.com.ua/krany-i-ventili/krany-dlya-vody.html

Опять открываем исходный код:

Судя по всему это Bitrix и в src мы видим заглушку ajax-loader.gif. Тем же способом, что и выше проверяем индексацию картинок. Кроме логотипа не проиндексировалось ни одной картинки!

Единственное, что хоть как-то спасает эти сайты — наличие микроразметки и sitemap.xml, благодаря которым можно сообщить поисковым системам о наличии этих изображений.

Как видите, это не единичный случай. Так что, прямо сейчас проверьте свои сайты, не используете ли Вы неправильный Lazy Load и тем самым “улучшаете” ранжирование сайта в Google.

Как сделать “правильный” Lazy Load?

Так как мы занимаемся в основном оптимизацией сайтов на WordPress, то буду приводить примеры для этой CMS, хотя данная проблема касается сайтов на Bitrix, Opencart и т. д. …..

Для начала грустная новость — в репозитории WordPress нет ни одного плагина, который реализует правильный Lazy Load. Неважно что Вы поставите: Lazy Load от Smush, Lazy Load от WP Rocket или a3 Lazy Load — они все подставляют в src заглушки. Из всех скриптов отложенной загрузки только 2-3 реализуют её правильно.

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

Вот так должно быть до прокручивания страницы:

<img src=»/full-img.jpg» alt=»» srcset=»placeholder.svg» data-srcset=» /full-img-300×169.jpg 300w, /full-img-768×432.jpg 768w, /full-img.jpg 1200w»>

Вот так после прокручивания страницы:

<img src=»/full-img.jpg» alt=»» srcset=»/full-img.jpg» data-srcset=» /full-img-300×169.jpg 300w, /full-img-768×432.jpg 768w, /full-img.jpg 1200w»>

В этом видео специалист по техническому SEO под ником Demi Murych объясняет, как правильно сделать Lazy Load .

смотреть с 8 минуты 44 сек

Скрипт рекомендованный в видео для правильного Lazy Load:

Плагин для WordPress, реализующий “правильный” Lazy Load

Если у Вас нет навыков программирования и разработки, то для WordPress Вы можете установить платный плагин True Image & Lazy Load.

Возможности плагина:

• Правильный Lazy Load — отложенная загрузка изображений на JS, которая не нарушает их индексации.
• Добавление к изображениям атрибута decoding=”async” (асинхронная загрузка изображений).
• Добавление ко всем изображениям микроразметки https://schema.org/ImageObject.
• Добавление к логотипу сайта микроразметки https://schema.org/Organization.
• И многое другое …..

Мы всегда готовы ответить на Ваши вопросы и бесплатно проконсультировать по оптимизации Ваших сайтов. Пишите в Telegram чат WP Boost.

Lazy Load для ускорения сайта на WordPress

• Что такое Lazy Load и как она работает?
• WordPress Lazy Load
• Ускорение загрузки страницы с помощью плагинов Lazy Load для WordPress
• Влияние Lazy Load на SEO

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

Lazy Load — это метод оптимизации, который загружает видимый контент, но задерживает загрузку и рендеринг контента, который находится ниже области видимости. Это одна из рекомендаций по призводительности от Google и этот метод следует использовать, если на страницах сайта много встроенных видео и изображений с высоким разрешением.

Как работает Lazy Load:

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

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

WordPress Lazy Load

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

Действительно ли загрузка изображений и видео замедляет работу сайта?

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

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

Вот как тест Pingdom оценивает сайт перед добавлением каких-либо картинок или видео.

Как видим, страница очень легкая, ее размер составляет менее 155 КБ, и она загружается менее чем за полсекунды. Трудно придраться к этим оценкам. Что произойдет, если мы вставим на страницу большие файлы изображений и встроим видео YouTube?

Размер страницы увеличился до 1,7 МБ, а время загрузки страницы почти утроилось до почти 1,3 секунды. TwentySixteen — хорошо написанная легкая тема, поэтому даже после добавления нескольких изображений и видео на YouTube этот сайт все еще довольно легкий и быстро загружается.  Тем не менее, мы видим, что добавление изображений и видео сделало размер страницы намного больше и значительно замедлило скорость загрузки страницы.

Повышение скорости загрузки страницы с помощью плагинов Lazy Load

Рассмотрим плагины, которые значительно ускорят загрузку этой страницы: BJ Lazy Load, Lazy Load XT, a3 Lazy Load и Lazy Load. Проверим производительность каждого из них. Мы также протестировали еще несколько плагинов, но они не дали ощутимого улучшения производительности сайта. Когда вы выбираете плагины для Lazy Load, обязательно сделайте проверку скорости до и после их установки и активации, чтобы убедиться, что они дают результаты.

• BJ Lazy Load
• Lazy Load XT
• Lazy Load а3
• Lazy Load
• Lazy Load для видео

1. BJ Lazy Load

BJ Lazy Load — очень популярный плагин. Он активирован на более чем 70 000 сайтах WordPress и имеет рейтинг 4,1 из 5 звезд благодаря более чем 60 обзорам.

Установка и настройка плагина проста и понятна. Найдите плагин через встроенный установщик плагинов WordPress, установите его и активируйте. После активации в админпанели появится новый пункт Настройки > BJ Lazy Load. Все необходимые опции Lazy Load включены по умолчанию.

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

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

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

Посмотрим, как быстро загружается наша страница с включенным плагином BJ Lazy Load.

Это очень быстро. Сайт тестировался несколько раз в течение дня, а время загрузки постоянно составляло от 300 до 400 миллисекунд.

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

После некоторого расследования ситуации вот что выяснилось.

Как WordPress обрабатывает изображения?

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

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

Как BJ Lazy Load меняет поведение WordPress?

BJ Lazy Load переопределяет поведение WordPress по умолчанию. Атрибут srcset был заменен data-lazy-srcsetатрибутом , который работает совместно со скриптами плагина. Однако конечный результат заключается в том, что вместо загрузки уменьшенной версии изображения
в конечном итоге загружается и отображается изображение с полным разрешением .

Это не идеальное решение, но если вы оптимизируете файлы изображений перед их загрузкой в ​​WordPress — тогда вы не столкнетесь с этой проблемой.

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

2. Lazy Load XT

Lazy Load XT хорошо показал себя в наших тестах и ​​является еще одним хорошим плагином для отложенной загрузки WordPress, который стоит рассмотреть. С более чем 4000 активных установок этот плагин не так популярен, как BJ Lazy Load. Тем не менее, у него высокий рейтинг 4,9 из 5,9. Только один из 22 опубликованных обзоров составляет менее 5 звезд.

После активации плагин настраивается путем перехода в меню  Настройки > Lazy Load XT. Этот плагин делает нечто большее, чем просто отложенная загрузка изображений и видео.  Вы также можете использовать этот плагин для минимизации файлов JS и CSS, загрузки библиотек JavaScript и CSS с помощью Cloudflare CDN и перемещения скриптов в футер сайта.

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

Страница по-прежнему занимает 2 МБ, и время загрузки страницы не такое быстрое, как с BJ Lazy Load, но мы все же достигли 50-процентного сокращения времени загрузки страницы по сравнению со временем без Lazy Load.

Беглый взгляд на список загружаемых файлов в результатах теста показывает, что с активированным плагином Lazy Load XT происходит то же самое, что и с BJ Lazy Load. Вместо загрузки оптимизированной версии изображения при активированном плагине загружается и отображается версия изображения в полном разрешении.

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

3. a3

a3 Lazy Load — еще один популярный плагин Lazy Load для WordPress. Этот плагин активирован на более чем 50 000 веб-сайтов WordPress и имеет высокий рейтинг 4,7 из 5.

Активация плагина добавляет меню настроек в Настройки > a3 Lazy Load . В целях тестирования оставим настройки по умолчанию за одним исключением. Настроим параметр «Цвет фона», чтобы цвет заполнителя совпадал с цветом фона страницы. После внесения этого изменения и применения настроек по умолчанию сайт работал очень хорошо.

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

Сравнение результатов теста

Можно заметить, что размер страницы и количество запросов значительно сократились. Что создает эту разницу? Pingdom предоставляет информацию о размере контента. Во-первых, вот как выглядит список содержимого страницы с активированным плагином a3 Lazy Load .

Размер изображений крошечный — чуть более 150 кб. И BJ Lazy Load, и Lazy Load XT создали размер страницы 2,0 МБ. Вот как выглядит скриншот контента с общей полезной нагрузкой 2,0 МБ.

Скрипты, HTML, CSS и размеры другого содержимого практически идентичны. Однако размер изображения составляет 1,86 МБ — это размер полной версии самого первого изображения на странице, а не 150 КБ. Так что происходит? Как упоминалось ранее, WordPress автоматически предоставляет изображения различных размеров, а браузер выбирает и отображает наименьшую возможную версию в зависимости от размера на экране.

И BJ Lazy Load, и Lazy Load XT переопределяют это поведение и в результате выдают изображение с полным разрешением. А плагин a3 Lazy Load оставляет обработку изображений WordPress без изменений, и в результате мы получаем гораздо меньший файл изображения.

Любопытно, что, несмотря на разницу в размерах страниц, сайт загружается быстрее при активированном BJ Lazy Load, чем при активированном a3 Lazy Load. Сайт был протестирован несколько раз с каждым установленным плагином. Разница заключается в количестве HTTP-запросов, необходимых для загрузки страницы. На первый взгляд кажется, что BJ Lazy Load требует больше запросов. Однако, если мы посмотрим на список файлов, то увидим, что происходит на самом деле.

Страница сайта с активированным BJ Lazy Load включает в себя около двадцати запросов, которые начинаются с data:image/gif. Это data-URI, а не HTTP-запросы. По сути, они говорят браузеру создавать GIF локально, а не запрашивать этот GIF с сервера.  В результате BJ Lazy Load действительно нужно только 17 HTTP-запросов для построения страницы по сравнению с 27, необходимыми для a3 Lazy Load. Это объясняет, почему страница загружается молниеносно.

Lazy Load XT использует аналогичную тактику, но все же требует больше запросов, чем BJ Lazy Load, что объясняет, почему он не дает таких же результатов.

4. Lazy Load

И четвертый вариант — Lazy Load , бесплатный плагин, созданный командой из WP Rocket. В настоящее время он активен на более чем 10000 установок с рейтингом 4 из 5 звезд.

Этот плагин работает с миниатюрами, всеми изображениями на странице или в текстовом виджете, аватарами и смайликами. Большим преимуществом этого плагина является отсутствие библиотек JavaScript, таких как jQuery, а скрипт весит менее 10 КБ. У плагина нет никаких настроек, просто установите его и Lazy Load заработает.

5. Lazy Load для видео на WordPress

Если вам нужно реализовать отложенную загрузку видео, рекомендуем воспользоваться плагином Lazy Load for Videos .  Хотя некоторые из вышеперечисленных плагинов в том числе работают и с видео, это хорошее решение только для видео контента.

Влияние Lazy Load на SEO

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

1. Убедитесь, что Google все еще может сканировать изображения, которые загружаются с помощью Lazy Load. Это можно проверить с помощью инструмента «Fetch as Google» в разделе сканирования в Google Search Console . Если вы видите свои изображения в исходном коде, то, скорее всего, у вас все в порядке.
2. Убедитесь, что изображения имеют заполненный атрибут alt, так как это важно для ранжирования в поиске картинок Google.

Выводы и рекомендации

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

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

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

Ленивая загрузка для WordPress: как добавить его на свой сайт

Эта статья о отложенной загрузке для 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 быстрее. Если вы хотите попробовать, один из плагинов в этом списке наверняка сможет удовлетворить ваши потребности.

Оптимизация wordpress: 15 способов | CodeTahiche

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

Как измерить производительность вашего сайта WordPress?

Что такое “Core Web Vitals” ?

Важно: создайте резервную копию своего сайта

1/ Установка плагина кэша WordPress и предзагрузчика веб-страниц

– Плагин WP Rocket

– Плагин WP-Optimize

2/ Использование CDN (сеть доставки контента)

3/ Оптимизация изображений и активировать ленивую загрузку

– Плагины для оптимизации изображений

– Активация ленивой загрузки ваших изображений

4/ Выбор наиболее подходящего типа веб-хостинга

5/ Supprimer les plugins et thèmes WordPress inutiles

Обновить плагины и темы WordPress

7/ Обновление версии PHP для ускорения работы WordPress

8/ Минификация файлов CSS, HTML и JavaScript

9/ Использование оптимизированной темы WordPress

– Тема GeneratePress

– Тема OceanWP

10/ Сократите количество перенаправлений

11/ Использование сжатия GZIP

12/ Оптимизация базы данных WordPress

13/ Отключение горячих ссылок в WordPress

14/ Увеличить количество работников PHP

15/ Не используйте слишком много кастомизированных шрифтов

Заключение

Как измерить производительность вашего сайта WordPress?

Для измерения этих параметров и улучшения SEO вашего сайта доступно несколько бесплатных инструментов, наиболее популярными из которых являются PageSpeed поскольку он разработан компанией Google и имеет особенность измерять как производительность на настольных компьютерах, так и скорость загрузки сайта с мобильного устройства. Лично я предпочитаю использовать GTmetrix, поскольку он дает множество очень точных и легко выполнимых рекомендаций по ускорению времени загрузки.

Что такое “Core Web Vitals” ?

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

• Largest Contentful Paint (LCP): измеряет производительность загрузки веб-страницы. Чтобы обеспечить хороший пользовательский опыт, LCP должен произойти в течение 2,5 секунд после начала загрузки страницы.
• Задержка первого ввода (FID): измеряет первое впечатление пользователя об интерактивности и отзывчивости вашего сайта. Это время между первым взаимодействием пользователя с элементом страницы (например, нажатием на ссылку) и моментом, когда начинается обработка данных в ответ на действие пользователя. Чтобы обеспечить хороший пользовательский опыт, задержка первого входа на страницы должна составлять не более 100 миллисекунд.
• Cumulative Layout Shift (CLS): измеряет визуальную стабильность. Google указывает, что различные объекты и элементы не должны перемещаться на странице во время ее рендеринга и/или загрузки для пользователя. Чтобы обеспечить хороший пользовательский опыт, страницы должны иметь CLS не более 0,1.

Важно: создайте резервную копию своего сайта

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

• плагин UpdraftPlus (см. нашу подробную статью о UpdraftPlus здесь),
• плагин WPvivid (см. нашу подробную статью о WPvivid здесь).

1/ Установка плагина кэша WordPress и предзагрузчика веб-страниц

Известным решением для ускорения работы WordPress является установка плагина кэширования для кэширования ваших страниц и постов. Кэширование позволяет создавать статические копии веб-страниц и показывать их посетителям. Это решение позволит сократить количество HTTP-запросов и улучшить время загрузки веб-страниц.

– Плагин WP Rocket

WP Rocket, без сомнения, является одним из самых популярных плагинов кэширования и оптимизации на рынке. Бесплатной версии нет, а базовая платная версия стоит $49 в год и позволяет оптимизировать 1 сайт.

– Плагин WP-Optimize

WP-Optimize – это универсальное решение для ускорения сайта WordPress и перехода от медленного к быстрому всего за несколько кликов: этот плагин поможет вам очистить вашу базу данных, удалив десятки, даже сотни или тысячи файлов, которые стали бесполезными. WP-Optimize также может сжимать изображения и кэшировать веб-страницы. Не забудьте предварительно сделать резервную копию вашего сайта!

2/ Использование CDN (сеть доставки контента)

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

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

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

Самой популярной CDN является Cloudflare, и она предлагает очень удовлетворительный бесплатный план для большинства веб-сайтов. Оптимизировать кэш для вашего сайта можно с помощью плагина, разработанного специально для дополнения CDN Cloudflare: плагин Super page Cache For Cloudflare.

3/ Оптимизация изображений и активировать ленивую загрузку

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

– Плагины для оптимизации изображений

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

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

Другие преимущества заключаются в том, что эти плагины предлагают свои собственные CDN в качестве опции и могут работать в синергии с WP Rocket. В этом случае особенно эффективно использовать функцию Lazy Loading.

– Активация ленивой загрузки ваших изображений

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

4/ Выбор наиболее подходящего типа веб-хостинга

Как вы можете ускорить свой сайт WordPress, если вы уже используете CDN и плагин кэширования, а также позаботились об оптимизации изображений? Большинство веб-хостингов – это виртуальный хостинг. Но есть и другие типы, Hostinger предлагает облачный хостинг, VPS-хостинг и управляемый WordPress хостинг.

Компания Cloudways специализируется, как следует из названия, на облачном хостинге и предлагает услуги, аналогичные управляемому хостингу WordPress.

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

Другое решение – использовать Elementor Cloud. Конструктор страниц Elementor построен на облачной платформе Google, что является гарантией скорости и надежности. Предложение Cloud – это услуга “все в одном”, которая берет на себя не только хостинг, но и технические аспекты создания веб-сайта:

• Веб-хостинг, полностью управляемый компанией Elementor,
• Elementor Cloud позволяет управлять вашим сайтом с единой платформы,
• Вы пользуетесь лицензией Elementor Pro,
• Бесплатный домен с бесплатным SSL-сертификатом,
• WordPress и Elementor предустановлены,
• Активирована тема WordPress Hello,
• Ежедневное и автоматическое резервное копирование вашего сайта,
• Оптимизация с помощью Cloudflare CDN,
• Отличная служба поддержки.

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

5/ Supprimer les plugins et thèmes WordPress inutiles

Как бесплатно и просто оптимизировать скорость вашего сайта? Чем больше у вас тем и плагинов, тем больше вероятность того, что они замедлят работу вашего сайта. Минимизируйте использование плагинов, особенно тех, которые добавляют ненужный код или делают лишние HTTP-запросы (если, конечно, у вас нет эмоциональной зависимости от плагина Hello Dolly). Если вы не уверены, начните с простой деактивации (на время) плагина, который вы считаете бесполезным.

Обновить плагины и темы WordPress

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

7/ Обновление версии PHP для ускорения работы WordPress

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

8/ Минификация файлов CSS, HTML и JavaScript

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

Опять же, плагины WP Rocket и WP-Optimize могут решить эти проблемы очень легко.

9/ Использование оптимизированной темы WordPress

– Тема GeneratePress

Для повышения производительности WordPress выбор темы, безусловно, имеет решающее значение. GeneratePress особенно легок по сравнению со своими конкурентами, поэтому он сосредоточен на скорости и стабильности, что является ключевым фактором для производительности вашего сайта. Эта тема wordpress проста в использовании и имеет множество функций, которые делают ее идеальной для создания любого типа сайта. Существует бесплатная версия, а также версия Premium с еще большими возможностями настройки ($59 в год или $249 пожизненно).

– Тема OceanWP

Тема OceanWP – это красивая и современная тема WordPress с более чем 200 готовыми к использованию шаблонами, идеально подходящая для любого типа бизнес-сайта (торговля, малый бизнес). Эта тема WordPress оснащена множеством функций и опций, которые позволят вам легко настраивать и контролировать свой сайт. OceanWP имеет отзывчивый дизайн, который отлично смотрится на любом устройстве, включая планшеты и смартфоны.

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

Самая дешевая платная версия темы OceanWP стоит $35 и позволяет управлять в общей сложности 3 сайтами. Пакеты бывают годовыми или пожизненными. Благодаря партнерству с хостинговой компанией Cloudways, развернуть шаблоны OceanWP можно в несколько кликов. Вы можете посетить веб-сайт OceanWP здесь.

10/ Сократите количество перенаправлений

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

Еще один способ уменьшить количество перенаправлений – избегать использования сократителей URL, также известных как сократители ссылок, таких как Bitly, Cuttly или TinyUrl, поскольку они создают дополнительное перенаправление, когда пользователь нажимает на сокращенную ссылку через эти приложения.

11/ Использование сжатия GZIP

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

Поэтому данное решение предполагает изменение файла “.htaccess”. Это можно сделать вручную или с помощью плагина, например, WP Rocket, Wp-Optimize, W3 Total Cache или Wp Fastest Cache: на веб-серверах Apache или LiteSpeed эти плагины автоматически добавят правила сжатия gzip. Сжатие Gzip также доступно на веб-серверах Nginx, если следовать этой процедуре.

Существует также сжатие Brotli: преемник gzip, оно поддерживается всеми основными веб-браузерами. Это алгоритм сжатия данных без потерь, разработанный компанией Google. Этот формат сжатия становится все более популярным, поскольку он обеспечивает лучшее сжатие, чем gzip: файлы JavaScript, сжатые с помощью Brotli, примерно на 15% меньше, файлы HTML – примерно на 20%, а файлы CSS – примерно на 16%.

Вы можете проверить, включено ли сжатие gzip или Brotli на вашем сайте, посетив сайт giftofspeed.com.

12/ Оптимизация базы данных WordPress

Настоятельно рекомендуется создавать резервные копии базы данных перед началом работы с ней. Одним из способов оптимизации WordPress является использование таких плагинов, как WP-Optimize, Database Cleaner или WP Rocket. Чтобы увеличить производительность базы данных и тем самым ускорить работу сайта, эти плагины очищают базу данных, удаляя неиспользуемые данные, такие как старые редакции статей, мусорные комментарии и переходные опции. Поступая таким образом, вы также можете уменьшить размер своей базы данных. Более подробную информацию вы можете найти в нашей статье:3 плагина для оптимизации базы данных WordPress.

13/ Отключение горячих ссылок в WordPress

Горячая ссылка – это использование пропускной способности другого сайта путем показа одного из его файлов (например, изображения, видео или аудиофайла) на другом сайте по прямой веб-ссылке.

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

Большинство провайдеров CDN, таких как Cloudflare, имеют отличную защиту от горячих ссылок, даже если у вас бесплатный тарифный план. Вы также можете включить защиту от горячих ссылок на своем домашнем сервере, независимо от того, работает ли он под управлением Apache или NGINX, поскольку для этого необходимо изменить файл “. htaccess” на вашем веб-сервере. Есть и другие решения, например, отключение правой кнопки мыши на веб-страницах или установка специального плагина. Вы можете прочитать эту подробную статью в блоге Kinsta.com.

14/ Увеличить количество работников PHP

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

15/ Не используйте слишком много кастомизированных шрифтов

Использование пользовательских шрифтов в темах WordPress стало обычным делом. Существует несколько библиотек шрифтов, например, Google Fonts, Typekit или Fonts.com. Но они, к сожалению, могут значительно замедлить работу вашего сайта. Чтобы не снижать производительность сайта слишком сильно, рекомендуется менять только интересующий вас шрифт, а не все шрифты, которые могут быть доступны для вашей темы WordPress. Читайте большев этой подробной статье от GTmetrix об оптимизации WordPress.

Заключение

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

Отложенная загрузка изображений — Полное руководство

Содержание

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

Согласно последним данным HTTP-архива, средний размер страницы на настольных компьютерах составляет 1511 КБ. Изображения составляют почти 650 КБ этого размера, примерно 45% от общего размера страницы. Теперь, поскольку мы не можем избавиться от изображений, нам нужно сделать так, чтобы наши веб-страницы загружались с ними быстрее.

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

Получите это руководство в виде электронной книги. Прямо в почтовый ящик!

Содержание

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

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

Вот короткое видео, которое поможет вам лучше понять:

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

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

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

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

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

Имеет два основных преимущества.

1. Улучшение производительности

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

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

2. Снижение затрат

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

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

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

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

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

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

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

Методы ленивой загрузки изображений

Изображения на веб-странице можно загружать двумя способами — с помощью тега или с помощью свойства CSS background. Давайте сначала рассмотрим более распространенный из двух тегов , а затем перейдем к фоновым изображениям CSS.

Общая концепция ленивой загрузки изображений в теге

Ленивая загрузка изображений может быть разбита на два этапа:

Первый шаг — предотвратить предварительную загрузку изображения. Для изображений, загруженных с использованием тега , браузер использует атрибут src тега для запуска загрузки изображения. Независимо от того, является ли это 1-м или 1000-м изображением в вашем HTML и находится далеко за пределами экрана, если браузер получит атрибут src , он вызовет загрузку изображения.

Таким образом, чтобы лениво загружать такие изображения, поместите URL-адрес изображения в атрибут, отличный от src . Допустим, мы указываем URL-адрес изображения в поле 9.0073 data-src атрибут тега изображения. Теперь, когда src пуст, браузер не запускает загрузку изображения

Теперь это мы остановили предварительную загрузку, нам нужно сообщить браузеру, когда загружать изображение.

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

Проверить, когда изображение попадает в окно просмотра, можно двумя способами:

Инициировать загрузку изображения с помощью событий Javascript

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

Когда происходит любое из этих событий, мы находим на странице все изображения, которые должны быть загружены отложенно и которые еще не были загружены. По этим изображениям мы проверяем, какие из них сейчас находятся в окне просмотра. Это делается с использованием верхнего смещения изображения, верхнего края прокрутки текущего документа и высоты окна. Если он вошел в область просмотра, мы выбираем URL-адрес из атрибута data-src и помещаем его в атрибут src . Это запускает загрузку изображения. Мы также удаляем класс lazy , который идентифицирует изображения для ленивой загрузки для событий, которые запускаются позже. Как только все изображения загружены, мы удаляем прослушиватели событий.

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

Вот рабочий пример такого подхода.

Если вы заметили, первые 3 изображения в примере загружаются вперед. URL-адрес присутствует непосредственно в атрибуте src вместо атрибута data-src . Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JS, чтобы загрузить их.

Использование Intersection Observer API для запуска загрузки изображений

Intersection Observer API — относительно новый API в браузерах. Это позволяет очень просто определить, когда элемент входит в область просмотра, и выполнить действие, когда это произойдет. В предыдущем методе нам приходилось привязывать события, помнить о производительности и реализовывать способ вычисления того, был ли элемент в области просмотра или нет. Intersection Observer API делает это действительно простым, помогает избежать математики и обеспечивает отличную производительность.

Пример использования Intersection Observer API для ленивой загрузки изображений:

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

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

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

Встроенная отложенная загрузка

В своем последнем обновлении Google добавила поддержку встроенной отложенной загрузки в последнюю версию браузера Chrome — Chrome 76. Все браузеры на основе Chromium, т. е. Chrome, Edge и Safari, а также Firefox. Вы можете найти более подробную информацию о поддержке браузерами встроенной отложенной загрузки на caniuse.com.

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

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

Теперь код будет выглядеть так:

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

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

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

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

Получите это руководство в виде электронной книги. Прямо в почтовый ящик!

Ленивая загрузка фоновых изображений CSS

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

С фоновыми изображениями CSS все не так просто. Чтобы загрузить фоновые изображения CSS, браузеру необходимо построить дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, браузер не загружает фоновое изображение. Если правило CSS применимо к элементу в текущем документе, браузер загружает изображение.

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

Вот рабочий пример ленивой загрузки фонового изображения CSS.

Здесь следует отметить, что код Javascript для отложенной загрузки остался прежним. Мы используем метод Intersection Observer API с откатом к слушателям событий. Хитрость заключается в CSS.

Элемент с идентификатором bg-image имеет фоновое изображение , указанное в CSS. Однако когда к этому элементу добавляется класс lazy , в CSS мы переопределяем фоновое изображение 9.0074 и установите для него значение none.

Поскольку правило, объединяющее #bg-image с классом .lazy , имеет более высокий приоритет в CSS, чем просто #bg-image , браузер изначально применяет свойство background-image: none к элементу . Когда мы прокручиваем вниз, Intersection Observer (или прослушиватели событий) обнаруживает, что изображение находится в области просмотра, и удаляет класс lazy . Это изменяет применимый CSS и применяет фактическое фоновое изображение 9.0074 к элементу, запускающему загрузку фонового изображения.

Более удобный пользовательский интерфейс с отложенной загрузкой изображений

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

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

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

1. Использование правильных заполнителей изображений

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

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

Посмотрите на некоторые примеры лучших заполнителей для наших изображений:

 
 imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" alt="исходное изображение" />