Возможно, вам не следует использовать атрибут 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 🙂 🙂 🙂 🙂 🙂