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

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

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

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

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

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

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

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

Спасибо за полезный урок

Спасибо, как раз актуально )

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

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

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

Как всегда круто!

Полезно. спасибо!

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

Однозначно лайк!)))

Годно мужик лайк без сомнений!

Подача информации супер)Спасибо!

Сразу лайк))

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

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

Спасибо

UPD: Тип плейсхолдера (Dummy Image Generator) был изменён с PNG на GIF для лучшего сжатия. UPD 2: Расчёт CSS Hack был добавлен в Lazy Load Placeholder Generator. UPD 3: Обязательно проверяйте, корректно ли настроена отложенная загрузка на вашем сайте. Я делаю это с помощью инструмента puppeteer-examples, который рекомендует Google как раз для этих целей. Установить puppeteer-examples довольно просто. 1. Клонируйте puppeteer-examples в любой каталог: git clone github.com/GoogleChromeLabs/puppeteer-examples 2. Перейдите в каталог и установите модули: cd puppeteer-examples; npm i Вместе с модулями будет установлен довольно тяжеловесный движок Chromium, так что установка может занять время. 3. Проверьте интересующую страницу: node lazyimages_without_scroll_events.js -h -u yousite.ru Отчёт и рендер будет загружен в папку puppeteer-examples. Я рекомендую использовать CSS Hack для формовки изображений, если не используется отложенная загрузка, а Lazy Load применять с осторожностью и всегда проверять, как работает данный приём с помощью puppeteer-examples. Если на скриншотах представлен весь контент, который должен быть виден посетителям и индексироваться поисковыми роботами, значит все в порядке (цитата Google).

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

net slow klass prosto !!!

Что за шрифты стоят у тебя на винде?

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

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

Круто! Спс. Мало инфы по этой тебе. Я изучаю PSpeed давно по немногу. Нашел костыль на JS, допилил его но такого эффекта не добился(хотя 99-100 выдал GPSpeed). Но этот плагин* огонь ) Спс

Thanks

Хотел спросить, вот на мобильной версии мы все равно будем уменьшать картинки, а Вы говорите что нужно юзать его когда картинка будет занимать свой размер. Стоит ли использовать тогда lazy-load? Например когда картинка резиновая, эта пиксельная заглушка под неё будет такой же?

Cool!

не ну это однозначно лайк господа

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

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

Лайк.

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

Алексей, а как отложить загрузку изображений, которые прописаны не в html, а в css, например, на ::after или ::before?

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

I love you

какой lazy load используеться в вашем последнем оптимайзе?? дайте ссылочку пожалуйста

Алексей спасибо еще раз за уроки! Круто! Один вопрос... Все реализовал по твоему гайду у себя на сайте... Все хорошо... Для изображений... Но у меня есть еще блок с видео отзывами... Реализованы (по желанию клиента) с помощью тега video (т.е. не ссылка на ютуб)... С добавлением видео скорость загрузки сайта сразу рухнула... Вопрос, что нужно сделать (добавить), чтобы работала также ленивая загрузка видео...?

Верстка 8 части джедаи верстки будет? Очень жду так как много вопросов.

Алексей, огромное спасибо! Очень нужная вещь! Вопрос не в тему: сильно тормозит загрузку сайта счетчик Яндекс Метрики... Ты может думал над этим? Может есть способ отложить (ускорить) загрузку счетчика... или еще как?

Супер))

В примере data-src прописан руками, а как быть если контент размещает например контент менеджер просто из админки, а нужно чтобы этот контент тоже лениво грузился и такой момент, контент менеджер не знает html. Идеи и решения есть, но интересно именно вас послушать, как вы бы поступили в этой ситуации?

Слышал про такую проблему что роботы поисковые когда парсят страницу не видят эти изображения, тоесть при использовании Lazy Load, SEO по картинкам становится не возможным. Хотел-бы услышать мнения по этому поводу.

Вопрос: почему вместо подстановки tumb нельзя объявить display: block; и задать высоту?

Это получается, что для сайта с большим количеством картинок сидит верстальщик и генерирует код для каждой картинки? А как в соц сетях это реализовано?

Не совсем понятно откуда в демо берутся классы loading и loaded? Я скопировала пример, но классы не добавляются, и, видимо из-за этого все картинки загружаются сразу, а не по мере прокрутки страницы.

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

Инетересно как ты реализовал этот генератор

Жаль, что заглушки постепенно не меняются на изображение по мере загрузки оригинала, а ждут полностью и только затем меняются

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