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

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

[tonit]

Как всегда годно и полезно) Алексей, большое спасибо. Скорее уже следующий видос)

[TymurYunusov]

Огромное спасибо! Как всегда круто, лучший канал по веб-разработке! Очень жду видео про google page speed и Optimized HTML 5

[ilnurtak]

Огонь! Огонь! Огонь! Гугл оптимизацию в массы! =)

[ykmcgbe]

Круто! Подписался) Больше бы таких видео

[wdm]

UPD: Тип плейсхолдера (Dummy Image Generator) был изменён с PNG на GIF для лучшего сжатия.
UPD 2: Расчёт CSS Hack был добавлен в Lazy Load Placeholder Generator.
UPD 3: Обязательно проверяйте, корректно ли настроена отложенная загрузка на вашем сайте. Я делаю это с помощью инструмента puppeteer-examples, который рекомендует Google как раз для этих целей.

Установить puppeteer-examples довольно просто.

1. Клонируйте puppeteer-examples в любой каталог:

2. Перейдите в каталог и установите модули:
cd puppeteer-examples; npm i

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

3. Проверьте интересующую страницу:

Отчёт и рендер будет загружен в папку puppeteer-examples.

Я рекомендую использовать CSS Hack для формовки изображений, если не используется отложенная загрузка, а Lazy Load применять с осторожностью и всегда проверять, как работает данный приём с помощью puppeteer-examples.

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

[kuzmult]

Вот это видео, только вчера интересовался этим!

[michael_ya_]

Отличный урок, большое спасибо за Вашу работу)

[volodymyrhetsko]

Вижу новые твои видео, сразу лайкаю, потом смотрю. Спасибо за работу.

[SheenisSheen]

Осталось, сделать ленивую загрузку ещё ленивей при самом процессе верстки, пора делать плагин для vsc, что бы во время разметки писал imgsrc/1.png и жмакал tab вставлялся уже тег со всем прописаным и сделанным :D

[mcvvsxu]

Как ты меня выручил, мне как раз это нужно было

[kirik]

Здравствуйте. Вопрос не по теме (если не трудно): "Какой программкой делаете вывод названия нажатых клавиш на экран?"

[wbkwset]

Привествую! А как подключить lazyload для тега div c background-imgae, а также где высота равна 100% ??

[TyrboCreed]

Ахах, как раз сейчас поставлена задача по оптимизации загрузки сайта) Спасибо за оперативное видео)

[cbqwnls]

Ля как красиво получилось. Чмавки-лавки

[yuliasereda]

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

[sergiiche]

Привет! Поможет ли это в работе lazyload с masonry? Когда включаю в nginx pagespeed lazyload filter - masonry срабатывает раньше загрузки изображений, ну и как следствие получаем большие отступы между некоторыми плитками, т.к. изображения разные по высоте. Спасибо!

[StarkElessar]

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

[wehxiof]

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

[cvkmfrw]

Как всегда Респект!!! Побольше уроков!

[xray]

Спасибо за видео))) А что если написать какой-то скрипт, чтобы считал разрешение или через Sass выражения. Если такое возможно конечно)) Или попробовать прикрутить SVG)
Поздравляю с Ребрендингом!🙂👍 Всегда жду новый контент, и лайкаю со всех аккаунтов))) Желаю успехов!!!