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