Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Addy Osmani Barry PollardЛенивая загрузка элементов откладывает загрузку закадровых iframe до тех пор, пока пользователь не прокрутит их рядом. Это экономит данные, ускоряет загрузку других частей страницы и снижает использование памяти.
Как и в случае с отложенной загрузкой изображений , используйте атрибут loading , чтобы сообщить браузеру, что вы хотите отложенно загружать iframe.
В этой демонстрации показано встраивание видео с отложенной загрузкой:
Сторонние встраивания охватывают широкий спектр вариантов использования: от видеоплееров до публикаций в социальных сетях и рекламы. Этот контент часто не сразу виден в области просмотра пользователя, но пользователи по-прежнему платят за загрузку данных и дорогостоящий JavaScript для каждого кадра, даже если они не прокручивают его.
Согласно исследованию Chrome об автоматической отложенной загрузке закадровых iframe для пользователей режима экономии данных , отложенная загрузка iframe может привести к медианной экономии данных на 2–3 %, сокращению первой отрисовки контента на 1–2 % в среднем и задержке при первом вводе на 2 % ( FID) улучшения на 95-м процентиле.
Отложенная загрузка внеэкранных iframe также может улучшить отображение наибольшего контента (LCP) вашей страницы. Поскольку iframe часто требует значительной пропускной способности для загрузки всех подресурсов, ленивая загрузка внеэкранных iframe может уменьшить конфликты за полосу пропускания на устройствах с ограниченным доступом к сети, оставляя больше пропускной способности для загрузки ресурсов, вносящих вклад в LCP страницы.
Атрибут loading позволяет браузеру отложить загрузку закадровых iframe и изображений до тех пор, пока пользователи не прокрутят страницу рядом с ними. loading поддерживает два значения:
Использование атрибута loading в iframe работает следующим образом:
Отсутствие указания атрибута имеет тот же эффект, что и явная загрузка ресурса.
Если вам нужно динамически создавать iframe с помощью JavaScript, также поддерживается установка iframe.loading = 'lazy' для элемента:
var iframe = document.createElement('iframe'); iframe.src = 'https://example.com'; iframe.loading = 'lazy'; document.body.appendChild(iframe); Установка iframe с отложенной загрузкой по умолчанию сделает веб-сайты более отзывчивыми. В следующих примерах показано улучшение времени взаимодействия (TTI) и экономия данных при встраивании мультимедиа, но отложенная загрузка рекламных iframe может дать аналогичные преимущества.
Встраивание видео YouTube с отложенной загрузкой экономит около 500 КБ при начальной загрузке страницы:
Примечание. Если вы ищете более эффективные способы загрузки встраиваемых изображений YouTube, вас может заинтересовать компонент YouTube lite .
Встраивания Instagram предоставляют блок разметки и скрипт, который вставляет iframe на вашу страницу. Отложенная загрузка этого iframe позволяет избежать загрузки всего необходимого для встраивания сценария и позволяет сэкономить около 100 КБ при начальной загрузке. Поскольку в большинстве статей эти вставки часто отображаются под областью просмотра, это разумный кандидат на отложенную загрузку iframe.
Вставки Spotify с отложенной загрузкой могут сэкономить 514 КБ при начальной загрузке.
Социальные плагины Facebook позволяют разработчикам встраивать контент Facebook на свои веб-страницы. Самым популярным из них является плагин Like — кнопка, которая показывает, скольким пользователям понравилась страница. По умолчанию встраивание плагина Like в веб-страницу с помощью Facebook JSSDK требует около 215 КБ ресурсов, 197 КБ из которых — это JavaScript. Плагин часто появляется в конце статьи или ближе к концу страницы, поэтому загружать его, когда он находится за кадром, может быть неоптимально.
Благодаря инженеру Стояну Стефанову все социальные плагины Facebook теперь поддерживают стандартизированную отложенную загрузку iframe . Разработчики, которые выбирают отложенную загрузку через конфигурацию data-lazy плагинов, теперь могут предотвратить загрузку этих плагинов до тех пор, пока пользователь не прокрутит их поблизости. Это позволяет встраиванию продолжать работать для пользователей, которым это необходимо, сохраняя при этом данные для пользователей, которые не прокручивают страницу до конца. Мы надеемся, что это первое из многих внедрений, в которых используется стандартизированная отложенная загрузка iframe в производственной среде.
Отложенная загрузка iframe на уровне браузера хорошо поддерживается во всех основных браузерах и рекомендуется для большинства случаев использования, чтобы устранить необходимость в дополнительных зависимостях от JavaScript.
Однако, если вам необходимо поддерживать больше браузеров или вы хотите иметь больший контроль над пороговыми значениями отложенной загрузки, вы можете использовать стороннюю библиотеку для отложенной загрузки iframe на своем сайте.
Вы также можете отложенно загружать закадровые iframe с помощью библиотеки lazysizes JavaScript:
Используйте следующий шаблон, чтобы обнаружить ленивую загрузку и получить ленивые размеры, когда они недоступны:
В раннем эксперименте с автоматической отложенной загрузкой iframe для пользователей Data Saver в Chrome было исключение для скрытых iframe, часто используемых для связи или аналитики. Им было запрещено лениво загружаться, и они всегда загружались, чтобы предотвратить нарушение этих функций.
Атрибут loading не применяет эту эвристику, поэтому разработчик всегда может выбирать, что будет загружаться отложенно. Атрибут loading всегда должен учитываться с учетом ограничений по расстоянию и других настроек браузера (например, печати).
Дополнительные идеи по отложенной загрузке см. в коллекции изображений и видео с отложенной загрузкой на сайте web.dev.
Выражаем благодарность Дому Фаролино, Скотту Литтлу, Хуссейну Джирде, Саймону Питерсу, Кейси Баскес, Джо Медли и Стояну Стефанову за их рецензии.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2024-08-13 UTC.
