Подготовил тезисную инфу про SEO и Lazy Load по просьбе коллег...

Подготовил тезисную инфу про SEO и Lazy Load по просьбе коллег, ну и на канале не могу этим не поделиться.

Кто не в курсе: Lazy Load - это технология отложенной загрузки изображений, нужна для того, чтобы сайты открывались быстрее.

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

Инфа в сжатом виде, но чуть позже может запилю статью-инструкцию с примерами и +/- подробным описанием.

Пример корявого LazyLoad, который убивает индексацию изображений: вместо картинок (либо всех, либо тех, которые не в 1-3 экранах видимости) в src вставляется изображение-заглушка

<img src=”placeholder.svg”> оптимизация скорости идет за счет того, что грузится во-первых маленькая картинка, а во-вторых она загружается только 1 раз, вместо кучи обращений для загрузки отдельных картинок.

Как итог: поисковики видят на сайте только <img src=”placeholder.svg”> вместо всех картинок т.к. боты не скролят страницу

Пример правильного LazyLoad

в src должна оставаться ссылка на картинку, а заглушку нужно грузить через srcset

пример до прокрутки

<img src="/full-img.jpg" srcset="placeholder.svg">

и после

<img src="/full-img.jpg" srcset="/full-img.jpg">

Есть так же браузерный (или нативный) LazyLoad

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

Данная фича работает только в браузере ГуглХром, для этого надо к картинкам дописать loading="lazy"

<img src="/full-img.jpg" loading="lazy">

В чем прикол: в зависимости от качества соединения (хорошее, нормальное, стрёмное) браузер подгружает картинки для разного числа экранов. Например, если у нас хорошее соединение, то подгрузятся все картинки, которые расположены примерно на 1800 пикселей (примерно 3 телефонных экрана), если соединение среднее, то порядка 3100 пикселей, а если соединение стрёмное (обычная сеть), то 6400 пикселей - это примерно 10 экранов.

GPSI тестит именно на стрёмном соединении, то есть он загрузит ВСЕ изображения в пределах первых 10 экранов.

Резонный вопрос: а много у вас на сайте страниц больше 10 экранов и много ли там изображений? А сколько изображений в первых 10 экранах?

В общем, с точки зрения оптимизации под GSPI профит сомнительный.

НО! Реальная польза все же может иметь место.

Пользователи иногда заходят с wifi, в этом случае профит уже будет т.к. грузиться будут только первые 1800 пикселей. Но есть метрики LightHouse или как там их, которые снимаются с живых пользователей, значит ли это, что поисковик-таки будет видеть улучшение скорости?

Кто ответит. При оценке скорости Гугл какие берет данные - усредненную солянку по Лайтхаусу или данные по PageSpeed?

Еще философский нюанс: а если пользователь взял и пролистал 10 экранов сразу,а там было 100500 изображений, но конкретно сейчас он видит только одно - нужно ли грузить все 100500 изображений или подгрузить только одно, которое он видит?

Правильнее, конечно, второй вариант.

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

#техничка #эксперименты

Источник новости https://t.me/seo_stepanov/63...