Ressources tierces de chargement différé avec façades

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.

Exemple de chargement d'un lecteur YouTube intégré avec une façade. La façade fait 3 Ko, et le lecteur de 540 Ko est chargé lors de l'interaction.
Chargement du lecteur intégré YouTube avec une façade.

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.

Audit de la façade tiers pour Lighthouse mettant en avant le lecteur intégré Vimeo et le chat en direct Drift
Audit de façade tiers pour Lighthouse.

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:

  1. Lors du chargement: ajout d'une façade à la page.

  2. Lors du survol avec la souris: la façade est préconnectée aux ressources tierces.

  3. Lors d'un clic: la façade se remplace par le produit tiers.

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.