Обучение использованию стандартизированного атрибута загрузки
Моя цель в этом посте — убедить разработчиков и участников платформы CMS (то есть людей, которые разрабатывают ядра CMS), что сейчас настало время реализовать поддержку функции отложенной загрузки изображений на уровне браузера . Я также поделюсь рекомендациями о том, как обеспечить высокое качество пользовательского опыта и обеспечить возможность настройки другими разработчиками при реализации отложенной загрузки. Эти рекомендации основаны на нашем опыте добавления поддержки в WordPress, а также помощи в реализации этой функции в Joomla, Drupal и TYPO3.
Независимо от того, являетесь ли вы разработчиком платформы CMS или пользователем CMS (то есть человеком, который создает веб-сайты с помощью CMS), вы можете использовать этот пост, чтобы узнать больше о преимуществах отложенной загрузки на уровне браузера в вашей CMS. В разделе «Дальнейшие шаги» вы найдете предложения о том, как можно стимулировать вашу платформу CMS реализовать отложенную загрузку.
Фон
За последний год отложенная загрузка изображений и iframe с использованием атрибута loading стала частью стандарта HTML WHATWG и получила все большее распространение в различных браузерах . Однако эти вехи лишь закладывают основу для более быстрого и ресурсосберегающего Интернета . Теперь в распределенной веб-экосистеме можно использовать атрибут loading .
Системы управления контентом используются примерно на 60% веб-сайтов , поэтому эти платформы играют жизненно важную роль в внедрении в Интернет современных функций браузера. Поскольку несколько популярных CMS с открытым исходным кодом, таких как WordPress , Joomla и TYPO3 , уже реализовали поддержку атрибута loading для изображений, давайте посмотрим на их подходы и выводы, которые актуальны для внедрения этой функции и на других платформах CMS. . Отложенная загрузка мультимедиа — это ключевая функция веб-производительности, от которой сайты должны получить выгоду в больших масштабах, поэтому рекомендуется внедрить ее на уровне ядра CMS.
Аргументы в пользу реализации отложенной загрузки сейчас
Стандартизация
Внедрение нестандартизированных функций браузера в CMS облегчает широкое тестирование и может выявить потенциальные области для улучшения. Однако общее мнение среди CMS заключается в том, что, пока функция браузера не стандартизирована, ее предпочтительно следует реализовать в форме расширения или плагина для соответствующей платформы. Только после стандартизации функция может рассматриваться для внедрения в ядро платформы.
Поддержка браузера
Поддержка этой функции браузером вызывает аналогичную проблему: большинство пользователей CMS должны иметь возможность извлечь выгоду из этой функции. Если существует значительный процент браузеров, в которых эта функция еще не поддерживается, эта функция должна гарантировать, что она, по крайней мере, не оказывает на них неблагоприятного воздействия.
Пороговые значения расстояния от области просмотра
Общая проблема с реализациями отложенной загрузки заключается в том, что они в принципе увеличивают вероятность того, что изображение не будет загружено, как только оно станет видимым в области просмотра пользователя, поскольку цикл загрузки начинается на более позднем этапе. В отличие от предыдущих решений на основе JavaScript, браузеры подходят к этому консервативно и, кроме того, могут точно настроить свой подход на основе реальных данных об опыте пользователя, сводя к минимуму влияние, поэтому отложенная загрузка на уровне браузера должна быть безопасно принята платформами CMS.
Рекомендации по пользовательскому опыту
Требовать атрибуты измерения для элементов
Чтобы избежать изменений макета , давно рекомендуется, чтобы встроенный контент, такой как изображения или iframe, всегда включал атрибуты измерения width и height , чтобы браузер мог определить соотношение сторон этих элементов перед их фактической загрузкой. Эта рекомендация актуальна независимо от того, загружается элемент или нет. Однако из-за того , что вероятность того, что изображение не будет полностью загружено в окне просмотра, на 0,1% выше, это становится немного более применимым при отложенной загрузке.
CMS предпочтительно должны предоставлять атрибуты размеров для всех изображений и iframe. Если это невозможно для каждого такого элемента, рекомендуется пропускать изображения с отложенной загрузкой, которые не предоставляют оба этих атрибута.
Избегайте ленивой загрузки элементов над сгибом
На данный момент CMS рекомендуется добавлять атрибут loading="lazy" только к изображениям и iframe, расположенным под сгибом, чтобы избежать задержки в показателе «Самая большая контентная отрисовка» , который в некоторых случаях может быть значительным , как было обнаружено в июле. 2021 . Однако следует признать, что оценить положение элемента относительно области просмотра перед процессом рендеринга сложно. Это особенно актуально, если CMS использует автоматизированный подход для добавления атрибутов loading , но даже при ручном вмешательстве необходимо учитывать несколько факторов, таких как различные размеры области просмотра и соотношения сторон. Тем не менее, настоятельно рекомендуется исключить из ленивой загрузки главные изображения и другие изображения или iframe, которые могут появиться над сгибом.
Избегайте резервного варианта JavaScript
Хотя JavaScript можно использовать для обеспечения отложенной загрузки в браузерах, которые (пока) не поддерживают атрибут loading , такие механизмы всегда полагаются на первоначальное удаление атрибута src изображения или iframe, что вызывает задержку для браузеров, которые поддерживают атрибут. . Кроме того, развертывание такого решения на основе JavaScript во внешних интерфейсах крупномасштабной CMS увеличивает вероятность потенциальных проблем, и это одна из причин, почему ни одна крупная CMS не использовала отложенную загрузку в своем ядре до появления стандартизированной функции браузера.
Технические рекомендации
Включить отложенную загрузку по умолчанию
Общая рекомендация для CMS, реализующих отложенную загрузку на уровне браузера, — включать ее по умолчанию, т. е. к изображениям и iframe следует добавлять loading="lazy" , желательно только для тех элементов, которые включают атрибуты измерения . Включение этой функции по умолчанию приведет к большей экономии сетевых ресурсов, чем если бы ее приходилось включать вручную, например, для каждого изображения.
Насколько это возможно, 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, например, в виде патча или запроса на включение.
Героическое фото Колина Уоттса на Unsplash .