Bonnes pratiques concernant les intégrations tierces

Présentation des techniques permettant de charger efficacement les intégrations tierces populaires.

Addy Osmani

Katie Hempenius

Leena Sohoni

De nombreux sites utilisent des intégrations tierces pour créer une expérience utilisateur attrayante en déléguant certaines sections d'une page Web à un autre fournisseur de contenu. Les exemples les plus courants d'intégrations de contenu tiers sont les lecteurs vidéo, les flux de réseaux sociaux, les cartes et les publicités.

Le contenu tiers peut avoir un impact sur les performances d'une page de nombreuses façons. Il peut bloquer le rendu, entrer en conflit avec d'autres ressources critiques pour le réseau et la bande passante, ou affecter les métriques Core Web Vitals. Les intégrations tierces peuvent également entraîner des décalages de mise en page lors de leur chargement. Cet article aborde les bonnes pratiques en matière de performances que vous pouvez utiliser lors du chargement d'intégrations tierces, les techniques de chargement efficaces et l'outil Layout Shift Terminator qui permet de réduire les décalages de mise en page pour les intégrations populaires.

Qu'est-ce qu'une intégration ?

Une intégration tierce est tout contenu affiché sur votre site qui :

• n'est pas créé par vous ;
• est diffusé à partir de serveurs tiers.

Les intégrations sont fréquemment utilisées dans les cas suivants :

• Les sites Web liés au sport, à l'actualité, au divertissement et à la mode utilisent des vidéos pour compléter le contenu textuel.
• Les organisations disposant de comptes Twitter ou de réseaux sociaux actifs intègrent des flux de ces comptes à leurs pages Web pour interagir avec davantage de personnes et les atteindre.
• Les pages de restaurants, de parcs et de lieux d'événements intègrent souvent des cartes.

Les intégrations tierces sont généralement chargées dans des éléments <iframe> sur la page. Les fournisseurs tiers proposent des extraits HTML qui se composent souvent d'un <iframe> qui extrait une page composée de balisage, de scripts et de feuilles de style. Certains fournisseurs utilisent également un extrait de script qui injecte dynamiquement un <iframe> pour extraire d'autres contenus. Cela peut alourdir les intégrations tierces et affecter les performances de la page en retardant son contenu propriétaire.

Impact des intégrations tierces sur les performances

De nombreuses intégrations populaires incluent plus de 100 Ko de JavaScript, parfois même jusqu'à 2 Mo. Elles mettent plus de temps à se charger et occupent le thread principal lors de leur exécution. Les outils de surveillance des performances tels que Lighthouse et Outils pour les développeurs Chrome permettent de mesurer l'impact des intégrations tierces sur les performances.

L'audit Lighthouse "Réduire l'impact du code tiers" affiche la liste des fournisseurs tiers utilisés par une page, avec la taille et le temps de blocage du thread principal. L'audit est disponible via les Outils pour les développeurs Chrome sous l'onglet Lighthouse.

Il est recommandé d'auditer régulièrement l'impact des intégrations et du code tiers sur les performances, car le code source de l'intégration peut changer. Vous pouvez en profiter pour supprimer tout code redondant.

Bonnes pratiques en matière de chargement

Les intégrations tierces peuvent avoir un impact négatif sur les performances, mais elles offrent également des fonctionnalités importantes. Pour utiliser efficacement les intégrations tierces et réduire leur impact sur les performances, suivez ces consignes.

Ordre des scripts

Dans une page bien conçue, le contenu propriétaire clé sera au centre de la page, tandis que les intégrations tierces occuperont des barres latérales ou apparaîtront après le contenu propriétaire.

Pour une expérience utilisateur optimale, le contenu principal doit se charger rapidement et avant tout autre contenu d'assistance. Par exemple, le texte d'actualité d'une page d'actualités doit se charger avant les intégrations d'un flux Twitter ou des publicités.

Les requêtes d'intégrations tierces peuvent gêner le chargement du contenu propriétaire. La position d'un tag de script tiers est donc importante. Les scripts peuvent affecter la séquence de chargement, car la construction du DOM s'interrompt pendant l'exécution des scripts. Placez les tags de script tiers après les tags propriétaires clés et utilisez async ou defer attributs pour les charger de manière asynchrone.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

Chargement différé

Étant donné que le contenu tiers vient généralement après le contenu principal, il peut ne pas être visible dans la fenêtre d'affichage lorsque la page se charge. Dans ce cas, le téléchargement de ressources tierces peut être différé jusqu'à ce que l'utilisateur fasse défiler la page jusqu'à cette partie. Cela permet non seulement d'optimiser le chargement de page initial, mais aussi de réduire les coûts de téléchargement pour les utilisateurs disposant de forfaits Internet fixes et de connexions réseau lentes.

Le chargement différé consiste à retarder le chargement du contenu jusqu'à ce qu'il soit réellement nécessaire. Selon les exigences et le type d'intégration, vous pouvez utiliser différentes techniques de chargement différé.

Chargement différé du navigateur pour <iframe>

Pour les intégrations tierces chargées via des éléments <iframe>, vous pouvez utiliser le chargement différé au niveau du navigateur pour différer le chargement des iFrames hors écran jusqu'à ce que les utilisateurs fassent défiler la page à proximité. L'attribut de chargement pour <iframe> est disponible dans tous les navigateurs modernes.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

L'attribut de chargement accepte les valeurs suivantes :

• lazy : indique que le navigateur doit différer le chargement de l'iFrame. Le navigateur chargera l'iFrame lorsqu'il s'approchera de la fenêtre d'affichage. Utilisez cette valeur si l'iFrame est un bon candidat pour le chargement différé.
• eager : charge l'iFrame immédiatement. Utilisez cette valeur si l'iFrame n'est pas un bon candidat pour le chargement différé. Si l'attribut loading n'a pas été spécifié, il s'agit du comportement par défaut, sauf en mode Lite.
• auto : le navigateur détermine s'il doit charger ce frame de manière différée.

Les navigateurs qui ne sont pas compatibles avec l'attribut loading l'ignorent. Vous pouvez donc appliquer le chargement différé au niveau du navigateur en tant qu'amélioration progressive. Les navigateurs compatibles avec l'attribut peuvent avoir des implémentations différentes pour le seuil de distance par rapport à la fenêtre d'affichage (distance à laquelle l'iFrame commence à se charger).

Voici quelques façons de charger des iFrames de manière différée pour différents types d'intégrations.

• Vidéos YouTube : pour charger un iFrame de lecteur vidéo YouTube de manière différée, incluez l'attribut loading dans le code d'intégration fourni par YouTube. Le chargement différé de l'intégration YouTube peut permettre d'économiser environ 500 Ko lors du chargement initial de la page.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

• Google Maps : pour charger un iFrame Google Maps de manière différée, incluez l'attribut loading dans le code de l'intégration de l'iFrame généré par l'API Google Maps Embed. Voici un exemple de code avec un espace réservé pour la clé API Google Cloud.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

Bibliothèque lazysizes

Étant donné que les navigateurs utilisent la distance d'une intégration par rapport à la fenêtre d'affichage, en plus de signaux tels que le type de connexion effectif et le mode Lite, pour déterminer quand un iFrame doit être chargé, le chargement différé du navigateur peut être incohérent. Si vous avez besoin d'un meilleur contrôle sur les seuils de distance ou si vous souhaitez offrir une expérience de chargement différé cohérente sur tous les navigateurs, vous pouvez utiliser la bibliothèque lazysizes.

lazysizes est un chargeur différé rapide et compatible avec le référencement pour les images et les iFrames. Une fois le composant téléchargé, il peut être utilisé avec un iFrame pour une intégration YouTube comme suit.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

De même, lazysizes peut être utilisé avec des iFrames pour d'autres intégrations tierces.

Notez que lazysizes utilise l'API Intersection Observer pour détecter quand un élément devient visible.

Utiliser data-lazy dans Facebook

Facebook propose différents types de plug-ins sociaux qui peuvent être intégrés. Cela inclut les posts, les commentaires, les vidéos et le bouton J'aime le plus populaire. Tous les plug-ins incluent un paramètre pour data-lazy. Si vous le définissez sur true, le plug-in utilisera le mécanisme de chargement différé du navigateur en définissant l'attribut d'iFrame loading="lazy".

Chargement différé des flux Instagram

Instagram fournit un bloc de balisage et un script dans le cadre de l'intégration. Le script injecte un <iframe> dans la page. Le chargement différé de ce <iframe> peut améliorer les performances, car l'intégration peut dépasser 100 Ko en taille compressée. De nombreux plug-ins Instagram pour les sites WordPress, tels que WPZoom et Elfsight, proposent l'option de chargement différé.

Remplacer les intégrations par des façades

Bien que les intégrations interactives ajoutent de la valeur à la page, de nombreux utilisateurs peuvent ne pas interagir avec elles. Par exemple, tous les utilisateurs qui consultent la page d'un restaurant ne cliqueront pas, ne développeront pas, ne feront pas défiler et ne navigueront pas dans l'intégration de la carte. De même, tous les utilisateurs qui consultent la page d'un fournisseur de services de télécommunications n'interagiront pas avec le chatbot. Dans ce cas, vous pouvez éviter de charger ou de charger l'intégration de manière différée en affichant une façade à la place.

Une façade est un élément statique qui ressemble à l'intégration tierce réelle, mais qui n'est pas fonctionnel et qui est donc beaucoup moins exigeant pour le chargement de page. Voici quelques stratégies pour charger ces intégrations de manière optimale tout en offrant une certaine valeur à l'utilisateur.

Utiliser des images statiques comme façades

Vous pouvez utiliser des images statiques au lieu d'intégrations de cartes lorsque vous n'avez pas besoin de rendre la carte interactive. Vous pouvez effectuer un zoom avant sur la zone d'intérêt de la carte, capturer une image et l'utiliser à la place de l'intégration de carte interactive. Vous pouvez également utiliser la fonctionnalité Effectuer une capture d'écran du nœud de DevTools pour capturer une capture d'écran de l'élément iframe intégré.

DevTools capture l'image au format png, mais vous pouvez également envisager de la convertir au format WebP pour de meilleures performances.

Utiliser des images dynamiques comme façades

Cette technique vous permet de générer des images correspondant à une intégration interactive au moment de l'exécution. Voici quelques-uns des outils qui vous permettent de générer des versions statiques d'intégrations sur vos pages.

• API Maps Static : le service Google API Maps Static génère une carte en fonction des paramètres d'URL inclus dans une requête HTTP standard et renvoie la carte sous forme d'image que vous pouvez afficher sur votre page Web. L'URL doit inclure la clé API Google Maps et doit être placée dans le <img> tag de la page en tant qu'attribut src.

  L'outil Static map maker vous aide à configurer les paramètres requis pour l'URL et vous fournit le code de l'élément image en temps réel.

  L'extrait suivant montre le code d'une image dont la source est définie sur une URL de l'API Maps Static. Il a été inclus dans un tag de lien qui garantit que la carte réelle est accessible en cliquant sur l'image. (Remarque : L'attribut de clé API n'est pas inclus dans l'URL)

  <a href="https://www.google.com/maps/place/Albany,+NY/">
  <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
  </a>
  

• Captures d'écran Twitter : comme pour les captures d'écran de cartes, ce concept vous permet d'intégrer dynamiquement une capture d'écran Twitter au lieu du flux en direct. Tweetpik est l'un des outils qui peuvent être utilisés pour prendre des captures d'écran de tweets. L'API Tweetpik accepte l'URL du tweet et renvoie une image avec son contenu. L'API accepte également des paramètres pour personnaliser l'arrière-plan, les couleurs, les bordures et les dimensions de l'image.

Utiliser le clic pour charger afin d'améliorer les façades

Le concept de clic pour charger combine le chargement différé et les façades. La page se charge initialement avec la façade. Lorsque l'utilisateur interagit avec l'espace réservé statique en cliquant dessus, l'intégration tierce est chargée. On parle également d'importation sur le modèle d'interaction import on interaction, qui peut être implémenté en suivant les étapes ci-dessous.

1. Au chargement de page : la façade ou l'élément statique est inclus dans la page.
2. Au survol avec la souris : la façade se connecte au fournisseur d'intégration tiers.
3. Au clic : la façade est remplacée par le produit tiers.

Les façades peuvent être utilisées avec des intégrations tierces pour les lecteurs vidéo, les widgets de chat, les services d'authentification et les widgets de réseaux sociaux. Les intégrations de vidéos YouTube qui ne sont que des images avec un bouton de lecture sont des façades que nous rencontrons fréquemment. La vidéo réelle ne se charge que lorsque vous cliquez sur l'image.

Vous pouvez créer une façade personnalisée de type "clic pour charger" à l'aide du modèle import on interaction ou utiliser l'une des façades Open Source suivantes disponibles pour différents types d'intégrations.

• Façade YouTube

  Lite-youtube-embed est une façade recommandée pour le lecteur YouTube. Elle ressemble au lecteur réel, mais est 224 fois plus rapide. Pour l'utiliser, téléchargez le script et la feuille de style, puis utilisez le tag <lite-youtube> en HTML ou en JavaScript. Les paramètres de lecteur personnalisés compatibles avec YouTube peuvent être inclus via l'attribut params.

  <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
  

  Voici une comparaison entre lite-youtube-embed et l'intégration réelle.

  

  

  D'autres façades similaires sont disponibles pour les lecteurs YouTube et Vimeo : lite-youtube, lite-vimeo-embed et lite-vimeo.

• Façade de widget de chat

  React live chat loader charge un bouton qui ressemble à une intégration de chat au lieu de l'intégration elle-même. Il peut être utilisé avec différentes plates-formes de fournisseurs de chat, telles qu'Intercom, Help Scout et Messenger. Le widget similaire est beaucoup plus léger que le widget de chat et se charge plus rapidement. Il peut être remplacé par le widget de chat réel lorsque l'utilisateur passe la souris sur le bouton ou clique dessus, ou si la page est inactive depuis longtemps. L'étude de cas Postmark explique comment ils ont implémenté react-live-chat-loader et les améliorations de performances qu'ils ont obtenues.

  

Supprimer ou remplacer les intégrations par des liens

Si vous constatez que certaines intégrations tierces entraînent de mauvaises performances de chargement et que vous ne pouvez pas utiliser l'une des techniques décrites précédemment, le plus simple est de supprimer complètement l'intégration. Si vous souhaitez toujours que vos utilisateurs puissent accéder au contenu de l'intégration, vous pouvez fournir un lien vers celui-ci avec target="_blank" afin que l'utilisateur puisse cliquer dessus et le consulter dans un autre onglet.

Stabilité de la mise en page

Bien que le chargement dynamique de contenu intégré puisse améliorer les performances de chargement d'une page, il peut parfois entraîner un déplacement inattendu du contenu de la page. C'est ce qu'on appelle un décalage de mise en page.

Étant donné que la stabilité visuelle est importante pour une expérience utilisateur fluide, le Cumulative Layout Shift (CLS) mesure la fréquence de ces décalages et leur caractère perturbateur.

Vous pouvez éviter les décalages de mise en page en réservant de l'espace lors du chargement de la page pour les éléments qui seront chargés dynamiquement ultérieurement. Le navigateur peut déterminer l'espace à réserver s'il connaît la largeur et la hauteur des éléments. Pour ce faire, spécifiez les attributs width et height des iFrames ou définissez une taille fixe pour les éléments statiques où l'intégration tierce sera chargée. Par exemple, un iFrame pour une intégration YouTube doit avoir une largeur et une hauteur spécifiées comme suit.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Les intégrations populaires telles que YouTube, Google Maps et Facebook fournissent le code d'intégration avec des attributs de taille spécifiés. Toutefois, certains fournisseurs peuvent ne pas inclure ces attributs. Par exemple, cet extrait de code n'indique pas les dimensions de l'intégration résultante.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Vous pouvez utiliser DevTools pour inspecter l'iframe injecté une fois cette page affichée. Comme le montre l'extrait suivant, la hauteur de l'iFrame injecté est fixe, tandis que la largeur est spécifiée en pourcentage.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

Ces informations peuvent être utilisées pour définir la taille de l'élément conteneur afin de s'assurer que le conteneur ne se développe pas lors du chargement du flux et qu'il n'y a pas de décalage de mise en page. L'extrait suivant peut être utilisé pour corriger la taille de l'intégration incluse précédemment.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Layout Shift Terminator

Étant donné que les intégrations tierces omettent souvent les dimensions (largeur, hauteur) du contenu final qu'elles affichent, elles peuvent entraîner des décalages de mise en page importants sur une page. Il peut être difficile de résoudre ce problème sans inspecter manuellement les tailles finales à l'aide de DevTools pour différentes tailles de fenêtre d'affichage.

Il existe désormais un outil automatisé, Layout Shift Terminator, qui peut vous aider à réduire les décalages de mise en page des intégrations populaires, telles que celles de Twitter, Facebook et d'autres fournisseurs.

Layout Shift Terminator:

• charge l'intégration côté client dans un iFrame ;
• redimensionne l'iFrame en fonction de différentes tailles de fenêtre d'affichage populaires ;
• pour chaque fenêtre d'affichage populaire, capture les dimensions de l'intégration afin de générer ultérieurement des requêtes média et des requêtes de conteneur ;
• dimensionne un wrapper de hauteur minimale autour du balisage d'intégration à l'aide de requêtes média (et de requêtes de conteneur) jusqu'à ce que l'intégration soit initialisée (après quoi les styles de hauteur minimale sont supprimés) ;

• génère un extrait d'intégration optimisé qui peut être copié et collé à l'endroit où vous incluriez normalement l'intégration dans votre page.

  

Essayez Layout Shift Terminator et n'hésitez pas à laisser des commentaires sur le projet GitHub Layout Shift Terminator. L'outil est en version bêta et vise à s'améliorer au fil du temps grâce à d'autres améliorations.

Conclusion

Les intégrations tierces peuvent apporter beaucoup de valeur aux utilisateurs, mais à mesure que le nombre et la taille des intégrations sur une page augmentent, les performances peuvent en pâtir. C'est pourquoi il est nécessaire de mesurer, d'évaluer et d'utiliser des stratégies de chargement appropriées pour les intégrations en fonction de leur position, de leur pertinence et des besoins potentiels des utilisateurs.