💥 Все курсы в одном комплекте 👇👇👇 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).

@vwusr2533

5 жыл бұрын

Рассмотренный способ не позволяет делать lazy load для background'ов?

@andrandr7771

5 жыл бұрын

@@vwusr2533

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сразу лайк))

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

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

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

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

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

Спасибо

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

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

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

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

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

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

Thanks

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

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

@wdm

Жыл бұрын

Да, джедай верстки 8 уже вышел, там много интересного: kzread.info/dash/bejne/ZYSu3Lxulauumco.html

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

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

@wdm

5 жыл бұрын

Здравствуйте. Спасибо. О загрузке фреймов и виджетов готовится видео.

Cool!

Лайк.

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

@wdm

5 жыл бұрын

В адаптивной верстке изображения не имеют фиксированной высоты. К тому-же, img без src невалидны.

net slow klass prosto !!!

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

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

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

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

@wdm

5 жыл бұрын

Не верю слухам. Верю пруфам. Всё работает. www.google.ru/search?tbm=isch&q=site:webdesign-master.ru yandex.ru/images/search?text=site:webdesign-master.ru

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

@wdm

5 жыл бұрын

Привет. Не сталкивался с проблемой. У меня не сильно тормозят загрузку. Отъедает 1-2% в Google PageSpeed. Это не критично.

@user-cq8bt8bp8e

5 жыл бұрын

@@wdm ... блин, у меня пунктов 10 так точно...

@wdm

5 жыл бұрын

Думаю, это не из-за этого. PageSpeed рассчитывает показатель из реального использования с недавнего времени. Если у вас свежий сайт, он делает примерные замеры. Не стоит на эти мелочи обращать внимание. Просто оптимизируйте максимально возможно.

@user-cq8bt8bp8e

5 жыл бұрын

@@wdm Спасибо!

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

@wdm

5 жыл бұрын

Антон Антонов изменил бы темплейт вывода.

I love you

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

@wdm

5 жыл бұрын

Эти классы раздаёт плагин Lazy Load. Для работы нужен сервер, не достаточно просто открыть index.html в браузере.

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

@wdm

5 жыл бұрын

Darth Revan я генерирую один раз, если использую dummy images. Для неопределенных и заранее неизвестных изображений достаточно 1x1 изображение. Форма теряется, но это единственный возможный способ. По соцсетям - Посмотрите, у браузеров есть DevTools. Принцип везде одинаков, разница в триггерах загрузки. Сейчас становится популярным метод Intersection Observer. Однако, я специально не акцентировал внимание на конкретном триггере или плагине, тк их довольно много и нельзя сказать, что какой-то из них плох.

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

@wdm

5 жыл бұрын

Как работать с тегом picture? Всё очень просто и гуглится на РАЗ: www.w3schools.com/tags/tag_picture.asp

@vasiliy_konnov

5 жыл бұрын

@@wdm я о том как работать с этим тегом во всей его мощи + lazy load ?

@wdm

5 жыл бұрын

Василий Коннов да, в общем-то также. Есть src, есть srcset. Разница невелика изменён только селектор и появилась вложенность. Но вот что самое главное - есть доступная и понятная документация на русском.

Супер))

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

@wdm

5 жыл бұрын

Дмитрий Мякишев можно сделать плавный fade-in или использовать прогрессивный jpeg.

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

@maxengio

5 жыл бұрын

Тоже задумался

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