Les ressources tierces sont souvent utilisées pour afficher 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 le chargement de la page, mais cela peut ralentir inutilement le chargement de la page. Si le contenu tiers n'est pas essentiel, ce coût de performances 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 de l'interaction. Dans ce cas, une façade est utilisée à la place du contenu tiers jusqu'à ce que l'utilisateur interagit avec lui.
Comment Lighthouse détecte-t-il les intégrations tierces différables ?
Lighthouse recherche des produits tiers qui peuvent être différés, comme les widgets à boutons de réseaux sociaux ou les intégrations de vidéos (par exemple, un lecteur intégré YouTube).
Les données sur les produits différables et les façades disponibles sont gérées sur un site Web tiers.
L'audit échoue si la page charge des ressources appartenant à l'un de ces intégrations tierces.
Différer le chargement de codes tiers avec une façade
Au lieu d'ajouter une intégration tierce directement à votre code HTML, chargez la page avec un élément statique semblable à l'élément tiers intégré. Le modèle d'interaction doit se présenter comme suit:
- Lors du chargement: ajouter une façade à la page
- Au passage de la souris: la façade se connecte automatiquement aux ressources tierces.
- Lors d'un clic: la façade est remplacée par le produit tiers.
Façades recommandées
En général, les vidéos intégrées, 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 caractéristiques.
La liste suivante présente nos recommandations de façades Open Source. Vous pouvez également utiliser un chargeur d'iFrame paresseux, tel que vb/lazyframe.
Lecteur YouTube intégré
Lecteur intégré Vimeo
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 soit incluse dans la liste, consultez le processus d'envoi.
Ressources
Code source pour l'audit des ressources tierces à chargement différé avec façades.