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