- Атрибут loading=»lazy» — это еще одна жертва проблемы, с которой сталкивается каждый front-end: совместимость между браузерами. Поймите, почему вы, возможно, пока не хотите его использовать.
- Что такое Lazyload?
- Почему важна ленивая загрузка?
- Производительность
- SEO
- Потребление полосы пропускания
- Поведение атрибута loading=»lazy»
- Текущая проблема с атрибутом loading=»lazy»
- Обратный звонок
Атрибут loading=»lazy» — это еще одна жертва проблемы, с которой сталкивается каждый front-end: совместимость между браузерами. Поймите, почему вы, возможно, пока не хотите его использовать.
Никаких разногласий.
Я не против атрибута loading="lazy"
. Я думаю, что это здорово, потому что это так:
- Простой
- Родина
- И это работает так, как я себе представляю.
На самом деле я настолько за него, что мне бы очень хотелось, чтобы он работал во всех браузерах. Но, к сожалению, так не бывает.
Вот в чем дело, и это нормально.
Для начала я расскажу об эффекте lazyload, его важности и о том, почему вы можете пока не использовать атрибут loading="lazy"
.
Что такое Lazyload?
Я начну с перевода.
Мне нравится делать это всякий раз, когда я узнаю новый термин в программировании или хочу закрепить уже известный:
- ленивый = ленивый
- нагрузка = нагрузка
Другими словами, lazyload — это то же самое, что lazyload.
Элементы с lazyload не загружаются вместе с остальными. Вместо этого они ждут, пока пользователь прокрутит страницу вниз и приблизится к области просмотра.
Разница между элементами, расположенными выше и ниже сгиба, показана на рисунке ниже:
Рекомендуется применять это поведение к 3 конкретным элементам, которые являются самыми тяжелыми элементами на странице:
- Изображения
- Видео
- Iframes
Смотрите пример.
Эта страница — просто список с фотографиями котят. Когда он загружается, вы видите первые два (или максимум три) изображения, потому что они находятся над сгибом:
Поэтому я спрашиваю вас, почему браузер должен загружать изображения под сгибом, если вы их еще не просматривали?
И здесь на помощь приходит lazyload, который просит браузер загружать изображения только тогда, когда они приближаются к области просмотра.
И есть несколько довольно интересных причин, по которым изображения не загружаются все сразу.
Почему важна ленивая загрузка?
Производительность
Первый ответ, который я даю на это, — повышение производительности сайта.
Помимо того, что изображения, видео и iframe являются самыми тяжелыми элементами, они обычно замедляют полную загрузку страницы. Если они загружаются только тогда, когда пользователю необходимо их просмотреть, первоначальная загрузка происходит быстрее.
Это улучшает впечатления пользователей и снижает вероятность того, что они покинут ваш сайт.
SEO
Я также могу отметить улучшение SEO сайта.
Всегда хорошо, когда вы нравитесь Google. Таким образом, он будет лучше оценивать вас в соответствии с метриками Web Vitals.
Потребление полосы пропускания
Еще одним большим преимуществом является снижение потребления пропускной способности Интернета.
Представьте, что пользователь открывает длинную страницу с несколькими изображениями, но перед закрытием страницы видит только первые фотографии. Все остальные фотографии сайта потребляли полосу пропускания, но даже не были визуализированы.
Хорошо, хорошо. Вы уже знаете:
- Что такое lazyload
- как это работает
- Насколько это важно
Теперь посмотрим, как реализовать это на вашем сайте.
Поведение атрибута loading=»lazy»
Браузеры уже поддерживают lazyload нативно.
Все, что вам нужно сделать, это добавить атрибут loading="lazy"
.
Я всегда буду приводить примеры с изображениями, но вы можете без проблем применить ту же концепцию к видео и iframe.
Посмотрите на код для изображения:
<img src="cat.png" alt="Sweet cat" />
Когда браузер читает этот HTML-код, отправленный сервером, файл изображения загружается немедленно. Если вы посмотрите на вкладку DevTools Network, вы увидите, что все изображения загружаются одновременно:
Теперь посмотрим, что произойдет, когда я добавлю атрибут loading="lazy"
:
<img src="cat.png" alt="Sweet cat" loading="lazy" />
Здесь происходит именно то, о чем я говорил в начале статьи: изображение загружается только тогда, когда оно приближается к области просмотра. Благодаря этому первая загрузка происходит быстрее.
Браузер сам показывает это:
Вы можете видеть, что страница с атрибутом loading="lazy"
:
- Делает меньше запросов при первой загрузке
- легче
- Имеет более короткое время загрузки события
loading
- Завершает погрузку за меньшее время
Событие DOMContentLoaded
также происходило быстрее, но не из-за ленивой загрузки, а скорее из-за изменения соединения.
Конечно, эта разница может показаться небольшой, поскольку все изображения в этом тесте в среднем имеют размер 20 Кб.
«Так что просто добавьте атрибут *loading="lazy"
, чтобы замедлить загрузку изображений и улучшить производительность?
Довольно много.
Текущая проблема с атрибутом loading=»lazy»
До появления собственного атрибута lazyload все было немного сложнее.
Единственной альтернативой для создания эффекта lazyload было создание его вручную с помощью Javascript или библиотек. Они до сих пор существуют и широко используются.
Однако есть небольшая проблема с атрибутом loading="lazy"
: он работает только в Chromium.
В соответствии со страницей атрибутов загрузки на странице «Можно ли использовать», он будет работать, как ожидается, только в 3 браузерах:
- Хром
- Край
- Опера
В настоящее время Firefox поддерживает встроенную ленивую загрузку только для изображений (за исключением видео и iframe). Safari (другой вид) поддерживает lazyload только для изображений и только если пользователь включит его в настройках.
Если изображения содержат атрибут loading="lazy"
, ничего особенного не происходит. Все они загружаются напрямую, как я показал в первом рисунке в главе Поведение атрибута loading=»lazy».
Именно поэтому название этой статьи — «Возможно, вам не стоит использовать атрибут loading="lazy"
«. Потому что, возможно, вам пока не стоит использовать атрибут loading="lazy"
.
Но я считаю, что из этого есть исключение. Дело:
- Ваша аудитория не использует Safari, или только небольшая ее часть использует.
- И вы хотите применить lazyload только к изображениям
Тогда эта статья настоятельно рекомендуется, и я рад, что вы дочитали до этого места.
Но если вы не подходите под вышеперечисленные критерии, вам придется воспользоваться библиотекой или создать свой собственный lazyload.
В следующем посте я покажу вам, как сделать эффект lazyload, не полагаясь на атрибут loading="lazy"
.
Обратный звонок
Lazyload — это интеллектуальный эффект, который загружает изображения, видео и iframe только тогда, когда пользователь их просматривает.
Это улучшает производительность сайта и SEO, он загружается быстрее даже на медленных соединениях.
Атрибут loading="lazy"
является хорошим. Но она станет еще лучше, когда Apple реализует ее в Safari 🙂 🙂 🙂 🙂 🙂