Les ressources tierces sont souvent utilisées pour diffuser des annonces ou des vidéos, et pour les intégrer aux réseaux sociaux. L'approche par défaut consiste à charger les ressources tierces dès le chargement de la page, mais cela peut ralentir inutilement le chargement. Si le contenu tiers n'est pas critique, les coûts liés aux performances peuvent être réduits en le chargeant de manière différée.
Cet audit met en évidence les intégrations tierces qui peuvent être chargées en différé 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 celui-ci.
Comment Lighthouse détecte-t-il les intégrations tierces 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 intégrations de vidéos (par exemple, le lecteur YouTube intégré).
Les données concernant les produits différables et les façades disponibles sont conservées sur le Web tiers.
L'audit échoue si la page charge les ressources appartenant à l'une de ces intégrations tierces.
Reporter l'utilisation d'une façade par des tiers
Au lieu d'ajouter directement un élément intégré tiers dans votre code HTML, chargez la page avec un élément statique qui ressemble au tiers intégré réel. Le modèle d'interaction devrait se présenter comme suit:
Lors du chargement: ajout d'une façade à la page.
Lors du survol avec la souris: la façade est préconnectée aux ressources tierces.
Lors d'un 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. La liste ci-dessous présente nos recommandations de façades Open Source. Lorsque vous choisissez une façade, tenez compte de l'équilibre entre la taille et l'ensemble des caractéristiques. Vous pouvez également utiliser un chargeur d'iFrame différé, tel que vb/lazyframe.
Lecteur intégré YouTube
Lecteur intégré Vimeo
Chat en direct (Intercom, Drift, Help Scouts, Facebook Messenger)
Créer 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 ci-dessus. La façade doit être nettement plus petite par rapport au produit tiers différé et n'inclure que suffisamment de code pour imiter l'apparence du produit.
Si vous souhaitez inclure votre solution dans la liste ci-dessus, consultez la procédure d'envoi.
Ressources
Code source pour l'audit de chargement différé des ressources tierces avec façades.