Отложенная загрузка сторонних ресурсов с помощью фасадов
Published on
Сторонние ресурсы часто используются для показа рекламы или видео и интеграции с социальными сетями. По умолчанию сторонние ресурсы загружаются сразу после загрузки страницы, однако такой подход может излишне ее замедлить. Если сторонний контент не критичен, затраты на производительность можно снизить за счет отложенной загрузки.
Этот аудит выявляет сторонние встраиваемые файлы, для которых можно выполнить отложенную загрузку при взаимодействии. В этом случае вместо стороннего контента используется фасад до тех пор, пока пользователь не начнет с ним взаимодействовать.
Фасад — это статический элемент, который выглядит как реальный встроенный объект, при этом не работает и, следовательно, существенно снижает нагрузку на страницу.
Как Lighthouse обнаруживает сторонние встраиваемые объекты, допускающие отложенную загрузку
Lighthouse ищет сторонние продукты, которые можно отложить, такие как виджеты социальных сетей или встраиваемые видео (например, встроенный проигрыватель YouTube).
Данные о продуктах, допускающих отложенную загрузку, и доступных фасадах хранятся в модуле third-party-web.
Аудит завершится ошибкой, если страница загружает ресурсы, относящиеся к одному из этих сторонних встраиваемых объектов.
Как отложить загрузку сторонних ресурсов при помощи фасада
Вместо того, чтобы добавлять сторонние встраиваемые объекты непосредственно в свой HTML, загрузите страницу со статическим элементом, который имитирует реальный встроенный сторонний элемент. Схема взаимодействия должна выглядеть примерно так:
При загрузке: добавляем фасад на страницу.
При наведении указателя мыши: фасад предварительно подключается к сторонним ресурсам.
При нажатии: фасад заменяется сторонним продуктом.
Рекомендуемые фасады
В целом, для встраиваемых видео, виджетов социальных кнопок и чатов можно использовать шаблон фасада. В приведенном ниже списке представлены наши рекомендации по фасадам с открытым исходным кодом. При выборе фасада учитывайте баланс между его размером и набором функций. Вы также можете использовать загрузчик iframe по требованию, например vb/lazyframe.
Встроенный проигрыватель YouTube
Встроенный проигрыватель Vimeo
Живые чаты (Intercom, Drift, Help Scout, Facebook Messenger)
При отложенной загрузке сторонних ресурсов с использованием фасадов есть некоторые минусы, поскольку фасады не обладают полноценным функционалом реальных встраиваемых объектов. Например, на облачке Drift Live Chat есть значок, показывающий количество новых сообщений. Если облачко чата замещается фасадом, оно появляется, только когда загружается фактический виджет чата после того, как браузер запустит requestIdleCallback. Для встраиваемых видео автовоспроизведение может работать некорректно при отложенной загрузке.
Написание собственного фасада
Вы можете создать индивидуальное фасадное решение, в котором будет применяться описанный выше паттерн взаимодействия. Фасад должен быть значительно меньше по сравнению с откладываемым сторонним продуктом и содержать только код, имитирующий внешний вид продукта.
Если вы хотите, чтобы ваше решение было включено в список выше, ознакомьтесь с процедурой заявки.
Ресурсы
Исходный код для аудита отложенной загрузки сторонних ресурсов с использованием фасадов.
Published on • Improve article