Les ressources tierces sont souvent utilisées pour diffuser des annonces ou des vidéos, et pour s'intégrer aux réseaux sociaux. L'approche par défaut consiste à charger les ressources tierces dès que la page se charge, mais cela peut ralentir inutilement le chargement de la page. Si le contenu tiers n'est pas essentiel, ce coût de performance peut être réduit en le chargeant de manière différée.
Cet audit met en évidence les intégrations tierces qui peuvent être chargées de manière différée lors d'une interaction. Dans ce cas, une façade est utilisée à la place du contenu tiers jusqu'à ce que l'utilisateur interagisse avec lui.
Comment Lighthouse détecte les composants intégrés tiers différables
Lighthouse recherche les produits tiers qui peuvent être différés, tels que les widgets de boutons de réseaux sociaux ou les vidéos intégrées (par exemple, le lecteur YouTube intégré).
Les données sur les produits différables et les façades disponibles sont conservées dans third-party-web.
L'audit échoue si la page charge des ressources appartenant à l'un de ces composants intégrés tiers.
Différer le chargement de codes tiers par une façade
Au lieu d'ajouter une intégration tierce directement à votre code HTML, chargez la page avec un élément statique qui ressemble à l'intégration tierce réelle. Le schéma d'interaction doit ressembler à ceci :
- Au chargement : ajoutez une façade à la page.
- Au survol : la façade se préconnecte aux ressources tierces.
- Au clic : la façade se remplace par le produit tiers.
Façades recommandées
En général, les intégrations vidéo, les widgets de boutons de réseaux sociaux et les widgets de chat peuvent tous utiliser le modèle de façade. Lorsque vous choisissez une façade, tenez compte de l'équilibre entre la taille et l'ensemble de fonctionnalités.
La liste suivante présente nos recommandations de façades open source. Vous pouvez également utiliser un chargeur d'iFrame différé, tel que vb/lazyframe.
Lecteur YouTube intégré
Lecteur Vimeo intégré
Chat en direct (Intercom, Drift, Help Scout, Facebook Messenger)
Écrire votre propre façade
Vous pouvez choisir de créer une solution de façade personnalisée qui utilise le modèle d'interaction décrit précédemment. La façade doit être nettement plus petite que le produit tiers différé et ne doit inclure que suffisamment de code pour imiter l'apparence du produit.
Si vous souhaitez que votre solution figure dans la liste, consultez la procédure d'envoi.
Ressources
Code source de l'audit "Ressources tierces pouvant être chargées de façon différée avec des façades".