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).
Осталось, сделать ленивую загрузку ещё ленивей при самом процессе верстки, пора делать плагин для vsc, что бы во время разметки писал imgsrc/1.png и жмакал tab вставлялся уже тег со всем прописаным и сделанным :D
Хотел спросить, вот на мобильной версии мы все равно будем уменьшать картинки, а Вы говорите что нужно юзать его когда картинка будет занимать свой размер. Стоит ли использовать тогда lazy-load? Например когда картинка резиновая, эта пиксельная заглушка под неё будет такой же?
Спасибо за видео))) А что если написать какой-то скрипт, чтобы считал разрешение или через Sass выражения. Если такое возможно конечно)) Или попробовать прикрутить SVG) Поздравляю с Ребрендингом!🙂👍 Всегда жду новый контент, и лайкаю со всех аккаунтов))) Желаю успехов!!!
Слышал про такую проблему что роботы поисковые когда парсят страницу не видят эти изображения, тоесть при использовании Lazy Load, SEO по картинкам становится не возможным. Хотел-бы услышать мнения по этому поводу.
Не верю слухам. Верю пруфам. Всё работает. www.google.ru/search?tbm=isch&q=site:webdesign-master.ru yandex.ru/images/search?text=site:webdesign-master.ru
Круто! Спс. Мало инфы по этой тебе. Я изучаю PSpeed давно по немногу. Нашел костыль на JS, допилил его но такого эффекта не добился(хотя 99-100 выдал GPSpeed). Но этот плагин* огонь ) Спс
Алексей, огромное спасибо! Очень нужная вещь! Вопрос не в тему: сильно тормозит загрузку сайта счетчик Яндекс Метрики... Ты может думал над этим? Может есть способ отложить (ускорить) загрузку счетчика... или еще как?
Думаю, это не из-за этого. PageSpeed рассчитывает показатель из реального использования с недавнего времени. Если у вас свежий сайт, он делает примерные замеры. Не стоит на эти мелочи обращать внимание. Просто оптимизируйте максимально возможно.
Алексей спасибо еще раз за уроки! Круто! Один вопрос... Все реализовал по твоему гайду у себя на сайте... Все хорошо... Для изображений... Но у меня есть еще блок с видео отзывами... Реализованы (по желанию клиента) с помощью тега video (т.е. не ссылка на ютуб)... С добавлением видео скорость загрузки сайта сразу рухнула... Вопрос, что нужно сделать (добавить), чтобы работала также ленивая загрузка видео...?
Привет! Поможет ли это в работе lazyload с masonry? Когда включаю в nginx pagespeed lazyload filter - masonry срабатывает раньше загрузки изображений, ну и как следствие получаем большие отступы между некоторыми плитками, т.к. изображения разные по высоте. Спасибо!
Это получается, что для сайта с большим количеством картинок сидит верстальщик и генерирует код для каждой картинки? А как в соц сетях это реализовано?
Darth Revan я генерирую один раз, если использую dummy images. Для неопределенных и заранее неизвестных изображений достаточно 1x1 изображение. Форма теряется, но это единственный возможный способ. По соцсетям - Посмотрите, у браузеров есть DevTools. Принцип везде одинаков, разница в триггерах загрузки. Сейчас становится популярным метод Intersection Observer. Однако, я специально не акцентировал внимание на конкретном триггере или плагине, тк их довольно много и нельзя сказать, что какой-то из них плох.
В примере data-src прописан руками, а как быть если контент размещает например контент менеджер просто из админки, а нужно чтобы этот контент тоже лениво грузился и такой момент, контент менеджер не знает html. Идеи и решения есть, но интересно именно вас послушать, как вы бы поступили в этой ситуации?
Василий Коннов да, в общем-то также. Есть src, есть srcset. Разница невелика изменён только селектор и появилась вложенность. Но вот что самое главное - есть доступная и понятная документация на русском.
Не совсем понятно откуда в демо берутся классы loading и loaded? Я скопировала пример, но классы не добавляются, и, видимо из-за этого все картинки загружаются сразу, а не по мере прокрутки страницы.
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
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).
Рассмотренный способ не позволяет делать lazy load для background'ов?
@@vwusr2533
Вижу новые твои видео, сразу лайкаю, потом смотрю. Спасибо за работу.
Осталось, сделать ленивую загрузку ещё ленивей при самом процессе верстки, пора делать плагин для vsc, что бы во время разметки писал imgsrc/1.png и жмакал tab вставлялся уже тег со всем прописаным и сделанным :D
Как всегда годно и полезно) Алексей, большое спасибо. Скорее уже следующий видос)
Огонь! Огонь! Огонь! Гугл оптимизацию в массы! =)
Огромное спасибо! Как всегда круто, лучший канал по веб-разработке! Очень жду видео про google page speed и Optimized HTML 5
Отличный урок, большое спасибо за Вашу работу)
Как ты меня выручил, мне как раз это нужно было
Круто! Подписался) Больше бы таких видео
Вот это видео, только вчера интересовался этим!
Подача информации супер)Спасибо!
Спасибо за полезный урок
net slow klass prosto !!!
Как всегда круто!
Ахах, как раз сейчас поставлена задача по оптимизации загрузки сайта) Спасибо за оперативное видео)
Как всегда Респект!!! Побольше уроков!
не ну это однозначно лайк господа
Спасибо, как раз актуально )
Ля как красиво получилось. Чмавки-лавки
Полезно. спасибо!
Однозначно лайк!)))
Спасибо за урок. С отложенной загрузкой быстрее загрузится сайт, но по скроллу вниз придется подождать пока загрузятся новые картинки.
Сразу лайк))
Cool!
Спасибо
Что за шрифты стоят у тебя на винде?
Лайк.
Thanks
Хотел спросить, вот на мобильной версии мы все равно будем уменьшать картинки, а Вы говорите что нужно юзать его когда картинка будет занимать свой размер. Стоит ли использовать тогда lazy-load?
Например когда картинка резиновая, эта пиксельная заглушка под неё будет такой же?
Верстка 8 части джедаи верстки будет? Очень жду так как много вопросов.
Да, джедай верстки 8 уже вышел, там много интересного: ruclips.net/video/3PzzZ5eHHig/видео.html
Спасибо за видео))) А что если написать какой-то скрипт, чтобы считал разрешение или через Sass выражения. Если такое возможно конечно)) Или попробовать прикрутить SVG)
Поздравляю с Ребрендингом!🙂👍 Всегда жду новый контент, и лайкаю со всех аккаунтов))) Желаю успехов!!!
Привествую! А как подключить lazyload для тега div c background-imgae, а также где высота равна 100% ??
I love you
Здравствуйте. Вопрос не по теме (если не трудно): "Какой программкой делаете вывод названия нажатых клавиш на экран?"
подскажите плиз, динамическую погрузку с бэкенда возможно настроить с помощью lozad?
Слышал про такую проблему что роботы поисковые когда парсят страницу не видят эти изображения, тоесть при использовании Lazy Load, SEO по картинкам становится не возможным. Хотел-бы услышать мнения по этому поводу.
Не верю слухам. Верю пруфам. Всё работает.
www.google.ru/search?tbm=isch&q=site:webdesign-master.ru
yandex.ru/images/search?text=site:webdesign-master.ru
Алексей, а как отложить загрузку изображений, которые прописаны не в html, а в css, например, на ::after или ::before?
Вопрос: почему вместо подстановки tumb нельзя объявить display: block; и задать высоту?
В адаптивной верстке изображения не имеют фиксированной высоты. К тому-же, img без src невалидны.
Круто! Спс. Мало инфы по этой тебе. Я изучаю PSpeed давно по немногу. Нашел костыль на JS, допилил его но такого эффекта не добился(хотя 99-100 выдал GPSpeed). Но этот плагин* огонь ) Спс
Супер))
Алексей, огромное спасибо! Очень нужная вещь! Вопрос не в тему: сильно тормозит загрузку сайта счетчик Яндекс Метрики... Ты может думал над этим? Может есть способ отложить (ускорить) загрузку счетчика... или еще как?
Привет. Не сталкивался с проблемой. У меня не сильно тормозят загрузку. Отъедает 1-2% в Google PageSpeed. Это не критично.
@@wdm ... блин, у меня пунктов 10 так точно...
Думаю, это не из-за этого. PageSpeed рассчитывает показатель из реального использования с недавнего времени. Если у вас свежий сайт, он делает примерные замеры. Не стоит на эти мелочи обращать внимание. Просто оптимизируйте максимально возможно.
@@wdm Спасибо!
Как быть если оригинальное изображение у меня прописано в css стилях как фоновое, как его лениво подгрузить?
Алексей спасибо еще раз за уроки! Круто! Один вопрос... Все реализовал по твоему гайду у себя на сайте... Все хорошо... Для изображений... Но у меня есть еще блок с видео отзывами... Реализованы (по желанию клиента) с помощью тега video (т.е. не ссылка на ютуб)... С добавлением видео скорость загрузки сайта сразу рухнула... Вопрос, что нужно сделать (добавить), чтобы работала также ленивая загрузка видео...?
Здравствуйте. Спасибо. О загрузке фреймов и виджетов готовится видео.
Привет! Поможет ли это в работе lazyload с masonry? Когда включаю в nginx pagespeed lazyload filter - masonry срабатывает раньше загрузки изображений, ну и как следствие получаем большие отступы между некоторыми плитками, т.к. изображения разные по высоте. Спасибо!
какой lazy load используеться в вашем последнем оптимайзе?? дайте ссылочку пожалуйста
Это получается, что для сайта с большим количеством картинок сидит верстальщик и генерирует код для каждой картинки? А как в соц сетях это реализовано?
Darth Revan я генерирую один раз, если использую dummy images. Для неопределенных и заранее неизвестных изображений достаточно 1x1 изображение. Форма теряется, но это единственный возможный способ. По соцсетям - Посмотрите, у браузеров есть DevTools. Принцип везде одинаков, разница в триггерах загрузки. Сейчас становится популярным метод Intersection Observer. Однако, я специально не акцентировал внимание на конкретном триггере или плагине, тк их довольно много и нельзя сказать, что какой-то из них плох.
В примере data-src прописан руками, а как быть если контент размещает например контент менеджер просто из админки, а нужно чтобы этот контент тоже лениво грузился и такой момент, контент менеджер не знает html. Идеи и решения есть, но интересно именно вас послушать, как вы бы поступили в этой ситуации?
Антон Антонов изменил бы темплейт вывода.
Как работать с тегом pictures в нем мы несколько вариантов изображений можем перечислить для ретины, для мобильных и прочее и как тогда быть с ними?
Как работать с тегом picture? Всё очень просто и гуглится на РАЗ: www.w3schools.com/tags/tag_picture.asp
@@wdm я о том как работать с этим тегом во всей его мощи + lazy load ?
Василий Коннов да, в общем-то также. Есть src, есть srcset. Разница невелика изменён только селектор и появилась вложенность. Но вот что самое главное - есть доступная и понятная документация на русском.
Не совсем понятно откуда в демо берутся классы loading и loaded? Я скопировала пример, но классы не добавляются, и, видимо из-за этого все картинки загружаются сразу, а не по мере прокрутки страницы.
Эти классы раздаёт плагин Lazy Load. Для работы нужен сервер, не достаточно просто открыть index.html в браузере.
Жаль, что заглушки постепенно не меняются на изображение по мере загрузки оригинала, а ждут полностью и только затем меняются
Дмитрий Мякишев можно сделать плавный fade-in или использовать прогрессивный jpeg.
Инетересно как ты реализовал этот генератор
Тоже задумался
добрый день. напишите пожалуйста свою почту, есть коммерческое предложение к Вам.