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

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

39 472 просмотров

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

Модуль входит в пакет модулей SpeedUP для CS-Cart проектов (поставляется бесплатно в составе пакета).

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

Модуль ленивой загрузки изображений призван решить сразу несколько проблем:

• Уменьшает время начальной загрузки — отложенная загрузка веб-страницы снижает ее вес, что позволяет ускорить загрузку страницы;
• Сохранение пропускной способности — отложенная загрузка сохраняет пропускную способность, доставляя контент пользователям только по запросу;
• Сохранение системных ресурсов — ленивая загрузка экономит ресурсы как сервера, так и клиента, потому что только некоторые изображения, JavaScript и другой код действительно нуждаются в визуализации или выполнении, все остальные должны подгружаться при необходимости;
• Улучшает показатели Google PageSpeed Insights для страниц сайта. Почему наша реализация функции lazy load предпочтительна для использования?

• мы используем технологию, которая максимально широко поддерживается современными браузерами и рекомендуется специалистами Google;
• наш подход максимально широко поддерживается современными браузерами;
• наш модуль не вредит поисковой оптимизации изображений (да, изображения все также индексируются и участвуют в поисковой выдаче).

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

Для функции предзагрузки у нас предусмотрен модуль Прелоад для CS-Cart.

Тип программного обеспечения:

• CS-Cart
• CS-Cart Ultimate
• CS-Cart Multi-Vendor
• CS-Cart Multi-Vendor Plus
• CS-Cart Multi-Vendor Ultimate

Функциональное назначение:

• СЕО оптимизация

Совместимость версии:

• 4. 13.2
• 4.13.3
• 4.14.1
• 4.14.2
• 4.14.3
• 4.15.1
• 4.15.2

Включенный период обновлений:

• 6 месяцев (доступно платное продление по окончанию)

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

Поддержка включает:

• Ответы автора на технические вопросы работы решения
• Помощь в решении багов и проблем
• Выпуск версий, поддерживающих новые редакции CS-Cart а также решающие баги предыдущих версий

Поддержка не включает:

• Сервисы кастомизации
• Сервисы инсталляции
• Сервисы адаптации для работы с решениями и модулями третьих сторон
• Сервисы обновлений

 

Техническая поддержка

Полный перечень условий технической поддержки и ее регламенты доступны по ссылке

Релиз №3

v1. 0.2 от 06-Июл-2022

Новые возможности и улучшения:
[+] Добавлена совместимость с CS-Cart 4.15.1.

Исправления ошибок:
[!] Не загруженные баннеры в шаблоне «Карусель» смещали контент, расположенный ниже. Исправлено.

Релиз №2

v1.0.1 от 03-Ноя-2021

Исправления ошибок:
[!] Модуль «Поддержка HiDPI». При просмотре исходного кода страницы клик на ссылку изображения в атрибуте srcset(base64) не открывал изображение. Исправлено.
[!] Тема UniTheme2. В некоторых случаях не работал механизм отложенной загрузки для скроллеров (скроллер брендов). Исправлено.
[!] Тема UniTheme2. При активном модуле «Увеличенные изображения товаров» не переключались изображения при клике на галерею изображений. Исправлено.

Релиз №1

v1.0.0 от 08-Окт-2021

Новые возможности и улучшения:
[+] Разработка основного функционала модуля.

Ленивая загрузка — веб-производительность

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

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

По мере развития Интернета мы наблюдаем огромный рост количества и размера ресурсов, отправляемых пользователям. В период с 2011 по 2019 год, средний вес ресурса увеличился с ~ 100 КБ до ~ 400 КБ для настольных компьютеров и с ~ 50 КБ до ~ 350 КБ для мобильных устройств. В то время как размер изображения увеличился с ~ 250 КБ до ~ 900 КБ на настольных компьютерах и с ~ 100 КБ до ~ 850 КБ на мобильных устройствах.

Один из методов, который мы можем использовать для решения этой проблемы, — сократить длину критического пути рендеринга за счет ленивой загрузки ресурсов, которые не являются критическими для первого рендеринга. Практическим примером может быть случай, когда вы попадаете на домашнюю страницу сайта электронной коммерции, на которой есть ссылка на страницу/раздел корзины, и все его ресурсы (JS, CSS, изображения…) загружаются.0003 только , когда пользователь переходит на эту страницу корзины.

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

Общий

Разделение кода JavaScript, CSS и HTML можно разделить на более мелкие фрагменты. Это позволяет заранее отправлять минимальный код, необходимый для предоставления ценности, что сокращает время загрузки страницы. Остальные могут быть загружены по запросу.

• Разделение точек входа: разделяет код по точкам входа в приложении
• Динамическое разделение: разделяет код, в котором используются операторы динамического импорта ()

JavaScript

Модуль типа сценария Любой тег скрипта с type="module" рассматривается как модуль JavaScript и по умолчанию откладывается.

CSS

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

Для этого можно выполнить некоторые оптимизации CSS.

Шрифты

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

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

См. также: Element Link

Изображения и фреймы

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

Атрибут загрузки загружает атрибут на (или загрузка атрибута в

Событие load срабатывает, когда загружено все нетерпеливо загруженное содержимое; в то время вполне возможно (или даже вероятно), что могут быть лениво загруженные изображения, которые находятся в визуальном окне просмотра, но еще не загружены.

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

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

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

Обработчики событий Когда совместимость браузера имеет решающее значение, есть несколько вариантов:

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

Блокировка CSS

Спецификация
Стандарт HTML # lazy-loading-attributes

• Оптимизация загрузки и рендеринга
• Ленивая загрузка изображений и видео

Последнее изменение: 000Z»> 6 октября 2022 г. , участниками MDN

Что такое ленивая загрузка | Ленивый против нетерпеливой загрузки

96,8 тыс. просмотров

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

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

Преимущества отложенной загрузки включают:

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

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

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

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

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

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

• blazy.js  — blazy.js — это легкая библиотека JavaScript для отложенной загрузки и многократного показа изображений. , фреймы, видео и другие ресурсы.
• LazyLoad  – LazyLoad – это скрипт, который автоматически загружает изображения при их появлении в окне просмотра.

Методы реализации отложенной загрузки в вашем коде включают:

• Ленивая инициализация  – этот метод устанавливает для объектов значение null. Данные объекта загружаются только после и всякий раз, когда они вызываются, проверяйте, являются ли они нулевыми, и если да, загружайте данные объекта.
• Виртуальный прокси  – при доступе к объекту вызывать виртуальный объект с тем же интерфейсом, что и реальный объект. Когда вызывается виртуальный объект, загрузите реальный объект, а затем делегируйте ему полномочия.
• Ghost  – загрузить объект в частичном состоянии, только используя идентификатор. При первом вызове свойства объекта загрузите полные данные.
• Держатель значения  – создайте универсальный объект, который обрабатывает отложенную загрузку. Этот объект должен появиться вместо полей данных объекта.

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

Для ленивой загрузки изображения отобразите облегченное изображение-заполнитель и замените его реальным полноразмерным изображением при прокрутке.

Существует несколько технических подходов к отложенной загрузке изображений:

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

Отложенная загрузка видео

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

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

 <автовоспроизведение видео с отключенным звуком, петля playsinline poster="placeholder-image.jpg">
 

Рекомендации по отложенной загрузке

При выполнении отложенной загрузки учитывайте следующие советы:

• Отложенная загрузка только тех ресурсов, которые отображаются ниже сгиба или за пределами области просмотра пользователя. В коде отложенная загрузка только тех объектов, которые не нужны для начальных или важных системных операций.
• При ленивой загрузке изображения асинхронно декодируйте его с помощью метода JavaScript decode() перед вставкой в ​​DOM. В противном случае большие изображения могут привести к зависанию браузера.
• Обработка ошибок в случае, если изображение или объект не загружаются.
• Предложите noscript  в случае, если JavaScript недоступен. В противном случае пользователи с отключенным JavaScript не увидят ресурсы с отложенной загрузкой.

Отложенная загрузка и CDN

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

Как ленивая загрузка сравнивается с CDN для оптимизации производительности веб-сайта?

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

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