Отложенная загрузка изображений (lazy loading). Intersection Observer и немного велосипедов

Разбираемся как сделать так, чтобы картинки и видео грузились только, если пользователь их видит (в том числе по скроллу страницы). Избавляемся от ошибок оптимизации изображений в Google Page Speed. 00:00 - Весёлое вступление 01:58 - Заглушки для изображений на сайте (, ) 03:04 - HTML CSS код страницы с ленивой загрузкой 04:01 - Первый тест на оптимизацию при помощи Google Lighthouse и первое разочарование 04:15 - Модификация HTML и максимальная оптимизация (спойлер: на самом деле нет) 04:59 - Знакомство с Intersection Observer 05:57 - Настройка прелодеров 07:11 - Логика отложенной загрузки при помощи #IntersectionObserver, опции, callback, события пересечения с элементом и загрузки контента 11:23 - Тест на оптимизацию с lazy loading 12:00 - Краткая инструкция, как настоить отложенную загрузку 13:04 - Поддержка Intersection Observer браузерами 13:17 - Решение на чистом JavaScript от #BlondieCode 16:57 - Бьюти-фильтры и сотонина // -------------------------------------------- // Живая демка - Исходники проекта - Уменьшение размера изображений на лету: NGINX Image Filter (Предыдущее видео ;)) - base64 preloaders - base64 pixels - Intersection Observer API - // -------------------------------------------- // ➣ Telegram --- ➣ GitHub --- ➣ Facebook --- // -------------------------------------------- // Больше видео на тему IT можно найти по тегу #ityoutubersru