Bonnes pratiques concernant les intégrations tierces

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

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 lecteurs vidéo, les flux de réseaux sociaux, les cartes et les publicités sont les exemples les plus courants d'intégration de contenu tiers.

Les contenus tiers peuvent avoir un impact sur les performances d'une page de nombreuses façons. Il peut s'agir de blocages de rendu, de conflits avec d'autres ressources critiques en termes de réseau et de bande passante, ou d'une incidence sur les métriques Core Web Vitals. Les intégrations tierces peuvent également entraîner des décalages de mise en page lors du chargement. Cet article décrit les bonnes pratiques en matière de performances que vous pouvez appliquer pour charger des 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 courantes.

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

Une intégration tierce correspond à tout contenu affiché sur votre site qui : * dont vous n'êtes pas l'auteur * Diffusé depuis des serveurs tiers

L'intégration est fréquemment utilisée dans les cas suivants : * Les sites Web liés au sport, à l'actualité, au divertissement et à la mode utilisent des vidéos pour enrichir le contenu textuel. * Les entreprises disposant de comptes actifs sur Twitter ou sur les réseaux sociaux intègrent les flux de ces comptes à leurs pages Web afin d'interagir et de communiquer avec davantage de personnes. * Les pages des restaurants, des parcs et des lieux événementiels 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 souvent constitués d'un <iframe> qui extrait une page composée de balisages, de scripts et de feuilles de style. Certains fournisseurs utilisent également un extrait de script qui injecte un <iframe> de manière dynamique 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 sur les performances des intégrations tierces

De nombreux éléments intégrés populaires incluent plus de 100 Ko de JavaScript, parfois même jusqu'à 2 Mo. Elles prennent plus de temps à charger et maintiennent le thread principal occupé lors de l'exécution. Les outils de surveillance des performances tels que Lighthouse et les outils pour les développeurs Chrome permettent de mesurer l'impact des intégrations tierces sur les performances.

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

Nous vous recommandons de vérifier régulièrement l'impact sur les performances de vos intégrations et de votre code tiers, car le code source intégré est susceptible de changer. Vous pouvez profiter de cette opportunité 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 les consignes ci-dessous.

Ordre des scripts

Sur une page bien conçue, le contenu propriétaire principal est l'objet principal de la page, tandis que les intégrations tierces occupent les barres latérales ou apparaissent après le contenu propriétaire.

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

Les demandes d'intégrations tierces peuvent empêcher 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 DOM s'interrompt pendant l'exécution des scripts. Placez les tags de script tiers après les principales balises propriétaires, et utilisez les attributs async ou defer 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é

Le contenu tiers étant généralement placé après le contenu principal, il est possible qu'il ne soit pas visible dans la fenêtre d'affichage lors du chargement de la page. Dans ce cas, le téléchargement de ressources tierces peut être reporté jusqu'à ce que l'utilisateur ait fait défiler la page jusqu'à cette partie. Cela permet non seulement d'optimiser le chargement initial de la page, mais aussi de réduire les coûts de téléchargement pour les utilisateurs de forfaits de données fixes et de connexions réseau lentes.

Différer le téléchargement du contenu jusqu'à ce qu'il soit réellement nécessaire s'appelle le chargement différé. En fonction des exigences et du type d'intégration, vous pouvez utiliser différentes techniques de chargement différé décrites ci-dessous.

Chargement différé natif 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 Chrome 77 et versions ultérieures et a également été introduit dans d'autres navigateurs basés sur Chromium.

<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 charge l'iFrame lorsqu'il s'approche de la fenêtre d'affichage. À utiliser si le chargement différé est adapté à l'iFrame.
• eager: charge immédiatement l'iFrame. À utiliser si le chargement différé n'est pas adapté à l'iFrame. Si l'attribut loading n'a pas été spécifié, il s'agit du comportement par défaut, sauf en mode simplifié.
• auto: le navigateur détermine si ce frame doit être chargé ou non.

Les navigateurs qui ne sont pas compatibles avec l'attribut loading l'ignorent. Vous pouvez donc appliquer le chargement différé natif en tant qu'amélioration progressive. Les navigateurs qui acceptent l'attribut peuvent avoir des implémentations différentes pour le seuil distance-from-viewport (distance à laquelle l'iFrame commence à se charger).

Vous trouverez ci-dessous quelques méthodes vous permettant de procéder au chargement différé d'iFrames pour différents types d'intégrations.

• Vidéos YouTube: pour charger de façon différée un iFrame de lecteur vidéo YouTube, incluez l'attribut loading dans le code d'intégration fourni par YouTube. Le chargement différé de l'intégration YouTube permet de gagner 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'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 de l'intégration par rapport à la fenêtre d'affichage, en plus des signaux tels que le type de connexion effectif et le mode simplifié, pour déterminer quand un iFrame doit être chargé, le chargement différé natif peut être incohérent. Si vous avez besoin de mieux contrôler les seuils de distance ou si vous souhaitez proposer 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 naturel, pour les images et les iFrames. Une fois le composant téléchargé, vous pouvez l'utiliser avec un iFrame pour intégrer YouTube. Pour ce faire, procédez 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, les tailles différées peuvent être utilisées avec les iFrames pour d'autres intégrations tierces.

Notez que lazysizes utilise l'API Intersection Observer pour détecter le moment où un élément devient visible.

Utiliser la différenciation des données dans Facebook

Facebook propose différents types de plug-ins de réseaux sociaux que vous pouvez intégrer. 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 définissez cette valeur sur true, le plug-in utilisera le mécanisme de chargement différé du navigateur en définissant l'attribut iFrame loading="lazy".

Flux Instagram à chargement différé

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 la taille de l'intégration peut dépasser 100 Ko, compressée avec gzip. De nombreux plug-ins Instagram pour les sites WordPress, comme WPZoom et Elfsight, offrent l'option de chargement différé.

Remplacer les éléments intégrés par des façades

Bien que les intégrations interactives ajoutent de la valeur à la page, de nombreux utilisateurs risquent de ne pas interagir avec elles. Par exemple, tous les utilisateurs qui consultent la page d'un restaurant ne cliqueront pas sur la carte intégrée, la développeront, la faire défiler ou la parcourir. De même, tous les utilisateurs qui accèdent à la page d'un fournisseur de services télécoms n'interagissent pas avec le chatbot. Dans ce cas, vous pouvez éviter le chargement ou le chargement différé de l'élément intégré en affichant une façade à sa place.

Une façade est un élément statique qui ressemble au tiers intégré réel, mais qui n'est pas fonctionnel et, par conséquent, beaucoup moins lourd sur le chargement de la page. Vous trouverez ci-dessous quelques stratégies pour charger ces intégrations de manière optimale tout en apportant une certaine valeur à l'utilisateur.

Utiliser des images statiques comme façades

Lorsque vous n'avez pas besoin de rendre la carte interactive, vous pouvez utiliser des images statiques à la place des intégrations de carte. Vous pouvez faire 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é Capture node screenshot (Capture d'écran du nœud) des outils de développement pour effectuer une capture d'écran de l'élément iframe intégré, comme illustré ci-dessous.

Les outils de développement capturent l'image en tant que png, mais vous pouvez également envisager de la convertir en WebP format for better performance.

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. Vous trouverez ci-dessous quelques-uns des outils qui vous permettent de générer des versions statiques des intégrations sur vos pages.

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

  L'outil Static Map Maker vous permet de configurer les paramètres requis pour l'URL et vous fournit le code de l'élément image en temps réel.

  L'extrait de code suivant montre le code d'une image dont la source est définie sur une URL d'API Maps Static. Elle a été incluse dans une balise de lien qui garantit qu'il est possible d'accéder à la carte réelle 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 carte, 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 permettant de faire 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 permettant de personnaliser l'arrière-plan, les couleurs, les bordures et les dimensions de l'image.

Améliorer les façades à l'aide de la fonctionnalité Cliquer pour charger

Le concept de "click-to-load" 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. Également appelé modèle d'importation lors d'une interaction, vous pouvez suivre les étapes ci-dessous pour l'implémenter.

1. Lors du chargement de la page: la façade ou l'élément statique est inclus sur la page.
2. En cas de survol avec la souris: la façade se connecte préalablement au fournisseur d'intégration tiers.
3. Lors d'un clic: la façade est remplacée par le produit tiers.

Les façades peuvent être utilisées avec des intégrations tierces pour des lecteurs vidéo, des widgets de chat, des services d'authentification et des 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 utilisons fréquemment. La vidéo ne se charge que lorsque vous cliquez sur l'image.

Vous pouvez créer une façade de chargement par clic personnalisée à l'aide du modèle Importer lors d'une interaction ou utiliser l'une des façades Open Source suivantes, disponibles pour différents types d'intégrations.

• Façade YouTube

  Nous vous recommandons d'utiliser Lite-youtube-embed pour le lecteur YouTube. Celui-ci 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 la balise <lite-youtube> en HTML ou 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 du widget Chat

  React-live-chat-loader charge un bouton ressemblant à une intégration de chat au lieu de l'intégration elle-même. Il peut être utilisé avec différentes plates-formes de fournisseur de chat, telles que Intercom, Help Scout, Messenger, etc. Le widget ressemblant est beaucoup plus léger que le widget de chat et se charge plus rapidement. Elle peut être remplacée par le widget de chat lorsque l'utilisateur pointe sur le bouton ou clique dessus, ou si la page est inactive depuis longtemps. Dans l'étude de cas de Postmark, l'équipe explique comment l'équipe a mis en œuvre le service réactif-live-chat-loader et les améliorations apportées aux performances.

  

Supprimer ou remplacer les éléments intégrés par des liens

Si vous constatez que certaines intégrations tierces se traduisent par de mauvaises performances de chargement et que vous ne pouvez pas utiliser l'une des techniques ci-dessus, la solution la plus simple consiste à supprimer entièrement l'intégration. Si vous souhaitez que vos utilisateurs puissent toujours accéder au contenu intégré, vous pouvez fournir un lien vers celui-ci avec target="_blank" afin qu'ils puissent cliquer dessus et l'afficher 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 des mouvements inattendus du contenu de la page. C'est ce qu'on appelle le décalage de mise en page.

La stabilité visuelle étant importante pour garantir la fluidité de l'expérience utilisateur, le Cumulative Layout Shift (CLS) mesure la fréquence de ces changements et leur impact.

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 ultérieurement de façon dynamique. 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, la largeur et la hauteur d'un iFrame pour un élément intégré YouTube doivent être spécifiées comme suit.

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

Les intégrations populaires comme YouTube, Google Maps et Facebook fournissent le code d'intégration avec des attributs de taille spécifiés. Cependant, certains fournisseurs n'incluent pas cette information. Par exemple, cet extrait de code n'indique pas les dimensions de l'intégration obtenue.

<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 les outils de développement pour inspecter l'élément iframe injecté après le rendu de cette page. Comme le montre l'extrait de code 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 permettent de définir la taille de l'élément conteneur, afin de s'assurer que celui-ci ne se déplie 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'élément intégré inclus 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>

Terminateur de décalage de mise en page

Étant donné que les intégrations tierces omettent souvent les dimensions (largeur et hauteur) du contenu final qu'elles affichent, elles peuvent entraîner des décalages de mise en page importants sur une page. Ce problème peut être difficile à résoudre sans inspecter manuellement les tailles finales à l'aide des outils de développement 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 liés à des intégrations populaires, comme Twitter, Facebook et d'autres fournisseurs.

Terminateur du décalage de mise en page:

• Charge l'intégration côté client dans un iFrame.
• Redimensionne l'iFrame selon différentes tailles de fenêtre d'affichage courantes.
• 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.
• Ajustement de la taille d'un wrapper de hauteur minimale autour du balisage de l'élément intégré à l'aide de requêtes média (et de requêtes de conteneur) jusqu'à l'initialisation de l'élément intégré (après quoi les styles de hauteur minimale sont supprimés).

• Génère un extrait de code intégré optimisé que vous pouvez copier-coller là où vous le feriez pour intégrer le code dans votre page.

  

Essayez Layout Shift Terminator et n'hésitez pas à nous faire part de vos commentaires sur GitHub. L'outil est actuellement en version bêta et vise à s'améliorer au fil du temps en y apportant des améliorations.

Conclusion

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