Что мы узнали, внедряя стандартизированный атрибут loading
Цель этой статьи – убедить разработчиков CMS-платформ и тех, кто помогает им в работе, в том, что сейчас самое время реализовать поддержку отложенной загрузки изображений на уровне браузера. Я также поделюсь рекомендациями о том, как обеспечить высокое качество взаимодействия с пользователем и предоставить другим разработчикам возможность настройки при реализации отложенной загрузки. Эти рекомендации основаны на нашем опыте добавления поддержки в WordPress, а также помощи в реализации этой функции в Joomla, Drupal и TYPO3.
Независимо от того, являетесь ли вы разработчиком платформы CMS или пользователем CMS (т.е. человеком, который создает веб-сайты с помощью CMS), вы можете использовать эту публикацию, чтобы узнать больше о преимуществах отложенной загрузки на уровне браузера в вашей CMS. В разделе Дальнейшие действия вы найдете рекомендации о том, как побудить разработчиков вашей CMS-платформы реализовать отложенную загрузку.
Фон
За последний год отложенная загрузка изображений и элементов iframe с помощью атрибута loading стала частью стандарта WHATWG HTML и начала все чаще использоваться в различных браузерах.
Однако эти достижения – лишь основа для более быстрого и менее ресурсоемкого интернета.
Теперь дело за распределенной экосистемой веб-ресурсов, которая должна начать использовать атрибут loading.
Системы управления контентом используются примерно на 60% сайтов, поэтому они играют важную роль в распространении современных функций браузеров в интернете. Некоторые популярные CMS с открытым исходным кодом, такие как WordPress, Joomla и TYPO3, уже поддерживают атрибут loading для изображений. Давайте рассмотрим, как это реализовано и что можно перенять для других CMS. Отложенная загрузка медиаконтента – это ключевая функция, которая позволяет значительно повысить производительность сайта. Именно поэтому мы рекомендуем внедрять ее на уровне ядра CMS.
Почему стоит внедрить отложенную загрузку прямо сейчас
Стандартизация
Внедрение нестандартных функций браузера в CMS способствует широкому тестированию и может выявить потенциальные области для улучшения. Однако разработчики CMS сходятся во мнении, что пока функция браузера не стандартизирована, ее лучше реализовать в виде расширения или плагина для соответствующей платформы. Только после стандартизации функция может быть рассмотрена для внедрения в ядро платформы.
Поддержка браузеров
Поддержка функции браузерами – ещё один важный аспект. Большинство пользователей CMS должны иметь возможность использовать функцию. Если значительный процент браузеров пока не поддерживает функцию, она не должна оказывать на них негативного влияния.
Пороговые значения расстояния до области просмотра
Часто высказывается опасение, что при использовании отложенной загрузки повышается вероятность того, что изображение не будет загружено, когда оно станет видимым в области просмотра пользователя, поскольку цикл загрузки начинается на более позднем этапе. В отличие от предыдущих решений на основе JavaScript, браузеры подходят к этому консервативно и могут настраивать свой подход на основе реальных данных о пользовательском опыте, сводя к минимуму влияние, поэтому отложенная загрузка на уровне браузера должна быть безопасной для платформ CMS.
Рекомендации по удобству для пользователей
Требовать атрибуты размеров для элементов
Чтобы избежать смещения макета, мы уже давно рекомендуем всегда указывать атрибуты размеров width и height для встроенного контента, например изображений или элементов iframe. Это позволяет браузеру определить соотношение сторон таких элементов до их загрузки. Эта рекомендация актуальна независимо от того, используется ли отложенная загрузка элемента. Однако из-за того, что вероятность неполной загрузки изображения в области просмотра увеличивается на 0,1 %, при отложенной загрузке этот атрибут становится немного более полезным.
Желательно, чтобы CMS предоставляла атрибуты размеров для всех изображений и элементов iframe. Если это невозможно для каждого такого элемента, рекомендуется пропустить отложенную загрузку изображений, для которых не указаны оба этих атрибута.
Не используйте отложенную загрузку для элементов в верхней части страницы
В настоящее время CMS рекомендуется добавлять атрибуты loading="lazy" только к изображениям и элементам iframe, которые расположены в нижней части страницы. Это позволяет избежать задержки при расчете показателя Largest Contentful Paint, которая в некоторых случаях может быть значительной, как было обнаружено в июле 2021 г. Однако следует признать, что оценить положение элемента относительно области просмотра до процесса рендеринга сложно. Это особенно важно, если CMS автоматически добавляет атрибуты loading. Но даже если вы добавляете их вручную, необходимо учитывать несколько факторов, например разные размеры области просмотра и соотношения сторон. Тем не менее мы настоятельно рекомендуем не применять отложенную загрузку к главным изображениям и другим изображениям или элементам iframe, которые могут появляться в верхней части страницы.
Как избежать резервного кода JavaScript
Хотя JavaScript можно использовать для обеспечения отложенной загрузки в браузерах, которые (пока) не поддерживают атрибут loading, такие механизмы всегда основаны на первоначальном удалении атрибута src изображения или элемента iframe, что вызывает задержку в браузерах, которые поддерживают этот атрибут. Кроме того, развертывание такого решения на основе JavaScript во внешних интерфейсах крупномасштабной CMS увеличивает площадь поверхности для потенциальных проблем, что является одной из причин, по которой ни одна крупная CMS не приняла отложенную загрузку в свое ядро до стандартизированной функции браузера.
Технические рекомендации
Включить отложенную загрузку по умолчанию
Общая рекомендация для CMS, в которых реализована отложенная загрузка на уровне браузера, – включить ее по умолчанию, то есть добавить атрибут loading="lazy" в изображения и элементы iframe, желательно только для тех элементов, которые включают атрибуты размеров.
Если функция включена по умолчанию, это позволяет экономить больше сетевых ресурсов, чем если бы ее нужно было включать вручную, например для каждого изображения.
По возможности атрибут loading="lazy" следует добавлять только к тем элементам, которые, скорее всего, будут находиться в нижней части страницы.
В CMS это требование может быть сложно реализовать из-за отсутствия информации о клиенте и различных размеров области просмотра. Однако мы рекомендуем хотя бы использовать приблизительные эвристические методы, чтобы не применять отложенную загрузку к элементам, которые, скорее всего, будут находиться в верхней части страницы, например к главным изображениям.
Разрешить изменения для отдельных элементов
Хотя атрибут loading="lazy" должен по умолчанию добавляться к изображениям и элементам iframe, важно разрешить его пропуск для определенных изображений, например для оптимизации LCP. Если пользователи CMS в среднем считаются более технически подкованными, это может быть элемент управления пользовательского интерфейса, доступный для каждого изображения и элемента iframe, позволяющий отказаться от отложенной загрузки для этого элемента.
Кроме того, можно предоставить сторонним разработчикам доступ к API, чтобы они могли вносить аналогичные изменения в код.
Например, WordPress позволяет пропустить атрибут loading как для всего HTML-тега или контекста, так и для определенного элемента HTML в контенте.
Обновление существующего контента
В целом есть два способа добавить атрибут loading к элементам HTML в CMS:
- Добавьте атрибут в редакторе контента на сервере, чтобы он постоянно хранился в базе данных.
- Добавляйте атрибут на лету при отрисовке контента из базы данных в интерфейсе.
Рекомендуется настроить CMS так, чтобы атрибут добавлялся на лету при отрисовке. Это позволит использовать преимущества отложенной загрузки и для существующего контента. Если бы атрибут можно было добавить только через редактор, то преимущества получили бы только новые или недавно измененные фрагменты контента, что значительно снизило бы влияние CMS на экономию сетевых ресурсов. Кроме того, добавление атрибута на лету позволит легко вносить изменения в будущем, если возможности отложенной загрузки на уровне браузера будут расширены.
Добавление атрибута на лету должно учитывать потенциально существующий атрибут loading в элементе и позволять такому атрибуту иметь приоритет. Таким образом, CMS или ее расширение также могут реализовать подход, основанный на редакторе, не вызывая конфликта с повторяющимися атрибутами.
Оптимизация производительности на стороне сервера
Если вы добавляете атрибут loading в контент на лету, например с помощью промежуточного ПО на сервере, то необходимо учитывать скорость работы. В зависимости от CMS атрибут можно добавить с помощью обхода DOM или регулярных выражений. Второй вариант предпочтительнее, поскольку он обеспечивает более высокую производительность.
Регулярные выражения следует использовать как можно реже. Например, можно создать одно регулярное выражение, которое будет собирать все теги img и iframe в контенте, включая их атрибуты, а затем добавлять атрибут loading в каждую строку тега, если это необходимо. Например, в WordPress используется одно общее регулярное выражение для выполнения различных операций на лету с определенными элементами, одной из которых является добавление loading="lazy". Кроме того, такая форма оптимизации является ещё одной причиной, по которой мы рекомендуем использовать отложенную загрузку в ядре CMS, а не в расширении. Это позволяет лучше оптимизировать производительность на стороне сервера.
Дальнейшие действия
Проверьте, есть ли запрос на добавление функции в вашу CMS. Если нет, создайте его. При необходимости используйте ссылки на эту запись, чтобы подкрепить свое предложение.
Если у вас есть вопросы или комментарии, напишите мне в Твиттере (felixarntz@). Также вы можете сообщить мне, если в вашу CMS была добавлена поддержка отложенной загрузки на уровне браузера, и мы добавим ее в список на этой странице. Если вы столкнулись с другими проблемами, я также хотел бы узнать о них больше, чтобы найти решение.
Если вы разрабатываете платформу CMS, изучите, как в других CMS реализована отложенная загрузка:
Вы можете использовать результаты своего исследования и технические рекомендации из этой статьи, чтобы начать вносить изменения в код CMS, например в виде патча или pull-запроса.