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