Skip to content
Обучение Измерение Блог Case studies О сайте
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
Содержание
  • Как Lighthouse обнаруживает сторонние встраиваемые объекты, допускающие отложенную загрузку
  • Как отложить загрузку сторонних ресурсов при помощи фасада
  • Рекомендуемые фасады
    • Встроенный проигрыватель YouTube
    • Встроенный проигрыватель Vimeo
    • Живые чаты (Intercom, Drift, Help Scout, Facebook Messenger)
  • Написание собственного фасада
  • Ресурсы

Отложенная загрузка сторонних ресурсов с помощью фасадов

Dec 1, 2020
Available in: Español, 日本語, 한국어, Português, 中文, English
Appears in: Аудиты производительности
Содержание
  • Как Lighthouse обнаруживает сторонние встраиваемые объекты, допускающие отложенную загрузку
  • Как отложить загрузку сторонних ресурсов при помощи фасада
  • Рекомендуемые фасады
    • Встроенный проигрыватель YouTube
    • Встроенный проигрыватель Vimeo
    • Живые чаты (Intercom, Drift, Help Scout, Facebook Messenger)
  • Написание собственного фасада
  • Ресурсы

Сторонние ресурсы часто используются для показа рекламы или видео и интеграции с социальными сетями. По умолчанию сторонние ресурсы загружаются сразу после загрузки страницы, однако такой подход может излишне ее замедлить. Если сторонний контент не критичен, затраты на производительность можно снизить за счет отложенной загрузки.

Этот аудит выявляет сторонние встраиваемые файлы, для которых можно выполнить отложенную загрузку при взаимодействии. В этом случае вместо стороннего контента используется фасад до тех пор, пока пользователь не начнет с ним взаимодействовать.

Ключевой термин

Фасад — это статический элемент, который выглядит как реальный встроенный объект, при этом не работает и, следовательно, существенно снижает нагрузку на страницу.
Пример загрузки встроенного плеера YouTube с фасадом. Фасад весит 3 КБ, а плеер размером 540 КБ загружается при взаимодействии.
Загрузка встроенного плеера YouTube с фасадом.

Как Lighthouse обнаруживает сторонние встраиваемые объекты, допускающие отложенную загрузку #

Lighthouse ищет сторонние продукты, которые можно отложить, такие как виджеты социальных сетей или встраиваемые видео (например, встроенный проигрыватель YouTube).

Данные о продуктах, допускающих отложенную загрузку, и доступных фасадах хранятся в модуле third-party-web.

Аудит завершится ошибкой, если страница загружает ресурсы, относящиеся к одному из этих сторонних встраиваемых объектов.

Аудит фасада сторонних ресурсов Lighthouse, выделяющий встроенный проигрыватель Vimeo и живой чат Drift.
Аудит фасада сторонних ресурсов Lighthouse.

Как отложить загрузку сторонних ресурсов при помощи фасада #

Вместо того, чтобы добавлять сторонние встраиваемые объекты непосредственно в свой HTML, загрузите страницу со статическим элементом, который имитирует реальный встроенный сторонний элемент. Схема взаимодействия должна выглядеть примерно так:

  1. При загрузке: добавляем фасад на страницу.

  2. При наведении указателя мыши: фасад предварительно подключается к сторонним ресурсам.

  3. При нажатии: фасад заменяется сторонним продуктом.

Рекомендуемые фасады #

В целом, для встраиваемых видео, виджетов социальных кнопок и чатов можно использовать шаблон фасада. В приведенном ниже списке представлены наши рекомендации по фасадам с открытым исходным кодом. При выборе фасада учитывайте баланс между его размером и набором функций. Вы также можете использовать загрузчик iframe по требованию, например vb/lazyframe.

Встроенный проигрыватель YouTube #

  • paulirish/lite-youtube-embed

  • justinribeiro/lite-youtube

  • Daugilas/lazyYT

Встроенный проигрыватель Vimeo #

  • luwes/lite-vimeo-embed

  • slightlyoff/lite-vimeo

Живые чаты (Intercom, Drift, Help Scout, Facebook Messenger) #

  • calibreapp/react-live-chat-loader (публикация в блоге)

Внимание

При отложенной загрузке сторонних ресурсов с использованием фасадов есть некоторые минусы, поскольку фасады не обладают полноценным функционалом реальных встраиваемых объектов. Например, на облачке Drift Live Chat есть значок, показывающий количество новых сообщений. Если облачко чата замещается фасадом, оно появляется, только когда загружается фактический виджет чата после того, как браузер запустит requestIdleCallback. Для встраиваемых видео автовоспроизведение может работать некорректно при отложенной загрузке.

Написание собственного фасада #

Вы можете создать индивидуальное фасадное решение, в котором будет применяться описанный выше паттерн взаимодействия. Фасад должен быть значительно меньше по сравнению с откладываемым сторонним продуктом и содержать только код, имитирующий внешний вид продукта.

Если вы хотите, чтобы ваше решение было включено в список выше, ознакомьтесь с процедурой заявки.

Ресурсы #

Исходный код для аудита отложенной загрузки сторонних ресурсов с использованием фасадов.

Последнее обновление: Dec 1, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Web Fundamentals
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.