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