web-standards.ru
web-standards.ru copied to clipboard
Добавлять на изображения в статьях loading=lazy
Недавно свойство завезли в Firefox, уже есть в Chrome и на подходе в мобильном Safari. Желательно это автоматизировать.
Есть два варианта:
- Расставить вручную или автоматически эти атрибуты в маркдауне
- Расставлять их автоматически при сборке
Какой бы вариант мы ни выбрали, нужно решить с какой картинки начать. То есть прикинуть после какого объёма текста начинаются картинки, которые можно отложить.
Плюс кажется для этого важно иметь картинки с размерами. Нужно ещё проверить, есть ли размеры в атрибутах на нашей графики.
Нет двух вариантов. У нас статический сайт, поэтому весь HTML и его CSS придут до запроса за картинкой. Картинка начнёт грузиться сразу же, как попадёт во вьюпорт, пусть и с приоритетом Low (баг чинится в https://bugs.chromium.org/p/chromium/issues/detail?id=992526). Так что можно смело ставить атрибут вообще на всех картинках в статьях.
Размеры можно получать на этапе сборки. Или взять лучшие техники из https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ и использовать не размеры, а пропорции.
Могу сделать в рамках #25.
Можешь подробнее объяснить про баг с loading=lazy?
Источник: https://web.dev/native-lazy-loading/#is-there-a-downside-to-lazy-loading-images-or-iframes-that-are-within-the-device-viewport
Если я правильно всё понял, то загрузка изображений с loading=lazy начинается только после события window.onload. Для нас это не проблема, так как на страницах нет ничего тяжёлого и опасного, кроме самих картинок. (Да, укол в сторону фреймворков)
Мне кажется, или задача потеряла актуальность? Вроде же дефолт уже сменился на lazy
. Или не во всех браузерах пока?
Дефолт, насколько я знаю, не сменился на lazy, откуда информация?
Чтение новостей по диагоняли за несколько месяцев в купе с вечным стремлением мозга выдавать желаемое за действительное привело к такому заблуждению. Поискал в новостях и в поисковиках, нашёл подобное только про мобильный хром. А жаль, было бы хорошо. Прошу прощения.
@MeFoDy продолжишь работу над задачей?=)
Если кто-нибудь перехватит — сопротивляться не буду :) Сейчас завал, не смогу в опенсорс.
Привет!
Если никто не против я могу попробовать.
Я предлагаю использовать addTransform для поиска тега img в статье и добавления loading="lazy"
Я бы добавлял ленивую загрузку только картинкам/видео/айфреймам, которые ниже первого экрана. Тут либо как-то определять количество текста до картинки, либо топорно первую грузить всегда, а остальные — лениво.
Как по мне, здесь топорный вариант предпочтительнее - вряд ли мы реализуем хорошую эвристику определения высоты текста и с учетом вариативности вьюпортов куда-то не попадем. А всегда грузить первую картинку, а остальные - лениво - максимально простой способ, который покроет подавляющее большинство статей
Хорошо тогда первая катинка это всегда изображение из заголовка. А на все изображения в статье тогда добавляем loading аттрибут.
Работает примерно так: