Ускорение загрузки. Ленивая загрузка изображений и не грузить то, чего не видно

Вообще можете реализовать в проекте по дефолту поддержку нового тега

loading="lazy"

https://web.dev/native-lazy-loading

это на PageSpeed как-то должно повлиять? у нас почему-то "Максимальная потенциальная задержка FID" негативно увеличилась с 200 до 5200 для мобильных и с 40 до 1400 для ПК после обновления на 1.6.2

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

Не работает для картинок баннеров, по товарам вроде все ок, проверьте пожалуйста..

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

И еще момент, если активировать LazyLoad то в микроразметке разваливается картинка http://prntscr.com/p676xl

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

Про микроразметку признаем. При включении лейзилоад все src картинок заменяются на картинки в 1 пиксель (описано через base64).

Баг в том, что в микроразметку попадает картинка в 1 пиксель, а не оригинал.

Нужно иначе описать микроразметку или добавить к картинке атрибут отмены лейзилоад для неё. Исправим. Спасибо

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

Интеграция совсем не сложная, но смогла бы намного улучшить отбражение изображений:

https://webdesign-master.ru/blog/tools/2019-05-30-lazy-load.html

Пример реализации на Яндекс.Маркет:

Не знаю, как у других, но я, к сожалению, только сейчас заметил, к каким еще ужасным последствиям приводит LazyLoad - при переходе на товар с торговым предложением, открывается не картинка ТП, а первая картинка (не Детальная, а из поля Картинки) основного товара, т.е. вот так

на демо сайте Некста видимо LazyLoad отключен. У кого-нибудь есть такой нюанс?

На демо-сайте некста LazyLoad включен https://screencast.com/t/y9mevihD5

Обратитесь к нам в ТП

Попробовал. Перестает грузиться логотип, картинки товаров в категории, тизеры и т.п.

В такой реализации пользоваться не возможно.

Проявляется и на мобилке и на десктопе

Бесплатное решение по гайдлайнам гугл работает шустро - https://marketplace.1c-bitrix.ru/solutions/brainforce.lazyload/#tab-rating-link

Может стоит и к вам такое привязать?

Здравствуйте.

Если технически осуществимо, можно привязать lazyload ещё и к смайлам от отзывов. Уж их точно загружать сразу смысла особого нет:

http://joxi.ru/Vm6oNKlC4MDYY2

да просто сделайте заглушки в src используя base64 с размерами картинок которые потом подгрузятся с data-src на их место

Благодарю за совет.

Но проблема актуальна для всех, кто использует штатный функционал отзывов. Поэтому, на мой взгляд, правильнее решать ее на уровне шаблона. Идею высказал, дальше "ход" за разработчиками )

---

Также, в дополнение к теме "ленивой загрузки невидимых элементов" - было бы здорово иметь возможность прописывать этот атрибут другим элементам (по аналогии с тем же <div class="swipeignore">).

Живой пример: есть идея встроить во вкладку "Дополнительно" подгрузку виджета транспортной компании (в нашем случае - СДЭК). И так, чтобы расчет происходил именно для выбранного региона/города.

Реализовали на тестовом домене. (кстати, кому актуально и интересно, примерно так: #REGION_TAG_BEFORE# #REGION_NAME# #REGION_TAG_AFTER#). Виджет работает, города меняются, карта рисуется, всё красиво, но...

...стали сравнивать загрузку карточки товара с и без виджета - результат печальный, 4,5 сек против 7,2 сек (!)

http://joxi.ru/52alwXEiEOWGwm

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

--

С уважением, Дмитрий К.

Здравствуйте, Дмитрий! Спасибо за обратную связь. В решении ленивая загрузка распространяется только на картинки. К сожалению, LazyLoad не распространяется на информацию, карты и изображения, которые сделаны фоном (через background), например, фоновое изображение в баннере.