Cette page a été traduite par l'API Cloud Translation.

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égration de contenu tiers sont les lecteurs vidéo, les flux de réseaux sociaux, les cartes et les annonces.

Les contenus tiers peuvent avoir un impact sur les performances d'une page de différentes manières. Ils peuvent 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 décrit les bonnes pratiques en matière de performances que vous pouvez appliquer lorsque vous chargez des éléments intégrés tiers, des techniques de chargement efficaces et l'outil Layout Shift Terminator, qui permet de réduire les décalages de mise en page pour les éléments intégrés populaires.

Qu'est-ce qu'un embed ?

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

Non créé par vous
Diffusées à partir de serveurs tiers

Plusieurs intégrations hors écran sont affichées, qui peuvent être chargées de manière différée

Les composants intégrés sont fréquemment utilisés dans les cas suivants :

Les sites Web liés aux sports, aux actualités, au divertissement et à la mode utilisent des vidéos pour enrichir le contenu textuel.
Les organisations 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 toucher davantage de personnes.
Les pages de restaurants, de parcs et de lieux événementiels intègrent souvent des cartes.

Les éléments intégrés tiers sont généralement chargés dans des éléments <iframe> sur la page. Les fournisseurs tiers proposent des extraits HTML qui consistent souvent en un élément <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 rendre les éléments intégrés tiers lourds 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 code JavaScript, parfois jusqu'à 2 Mo. Leur chargement prend plus de temps et le thread principal est occupé lors de l'exécution. Les outils de surveillance des performances tels que Lighthouse et Chrome DevTools 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, avec 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 des performances de vos éléments intégrés et de votre code tiers, car le code source des éléments intégrés peut changer. Vous pouvez profiter de cette occasion pour supprimer tout code redondant.

Réduire l'impact du code tiers

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. Suivez ces consignes pour utiliser efficacement les intégrations tierces et réduire leur impact sur les performances.

Ordre des scripts

Sur une page bien conçue, le contenu propriétaire principal constitue l'élément principal, tandis que les éléments intégrés tiers occupent les barres latérales ou s'affichent après le contenu propriétaire.

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

Les requêtes d'intégration tierce peuvent empêcher le chargement de contenu propriétaire. Par conséquent, la position d'une balise de script tierce est importante. Les scripts peuvent affecter la séquence de chargement, car la construction du DOM est suspendue pendant leur exécution. Placez les balises de script tiers après les balises first party clés 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é

Comme le contenu tiers vient généralement après le contenu principal, il est possible qu'il ne soit pas 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 initial de la page, mais aussi de réduire les coûts de téléchargement pour les utilisateurs ayant un forfait Internet fixe et une connexion réseau lente.

Le fait de différer le chargement du contenu jusqu'à ce qu'il soit réellement nécessaire est appelé chargement différé. 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 éléments intégrés tiers chargés 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 les approchent. 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 charge l'iFrame lorsqu'il se rapproche de la fenêtre d'affichage. À utiliser si l'iFrame se prête bien au chargement différé.
eager: charge l'iFrame immédiatement. À utiliser si l'iFrame n'est pas adapté au 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 si ce frame doit être chargé de manière différée.

Les navigateurs qui ne prennent pas en charge 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 qui acceptent cet attribut peuvent avoir des implémentations différentes pour le seuil distance-from-viewport (distance à partir de laquelle l'iFrame commence à se charger).

Vous trouverez ci-dessous différentes façons de charger de manière différée des iFrames pour différents types d'intégrations.

Vidéos YouTube: pour charger l'iFrame d'un lecteur vidéo YouTube, incluez l'attribut loading dans le code d'intégration fourni par YouTube. Le chargement différé de l'élément intégré YouTube permet 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'élément intégré iFrame généré par l'API Google Maps Embed. Vous trouverez ci-dessous 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 se basent sur la distance d'un élément intégré par rapport à la fenêtre d'affichage, en plus de signaux tels que le type de connexion effectif et le mode simplifié, pour déterminer à quel moment un iFrame doit être chargé, le chargement différé peut être incohérent dans le navigateur. Si vous avez besoin d'un meilleur contrôle sur les seuils de distance ou si vous souhaitez proposer une expérience de chargement différé cohérente dans tous les navigateurs, vous pouvez utiliser la bibliothèque lazysizes.

lazysizes est un chargeur différé rapide et respectueux du référencement pour les images et les iFrames. Une fois le composant téléchargé, vous pouvez l'utiliser avec une iframe pour intégrer une vidéo 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 les tailles différées utilisent l'API Intersection Observer pour détecter à quel moment un élément devient visible.

Utiliser le data-lazy dans Facebook

Facebook propose différents types de plug-ins de réseaux sociaux pouvant être intégrés. Il peut s'agir de posts, de commentaires, de vidéos et du bouton J'aime le plus populaire. Tous les plug-ins incluent un paramètre pour data-lazy. Le fait de définir cette valeur sur true garantit que le plug-in utilisera le mécanisme de chargement différé du navigateur en définissant l'attribut 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 cet élément <iframe> peut améliorer les performances, car l'élément intégré peut dépasser 100 ko compressé. De nombreux plug-ins Instagram pour les sites WordPress tels que WPZoom et Elfsight proposent l'option de chargement différé.

Remplacer les représentations vectorielles continues par des façades

Bien que les éléments intégrés interactifs ajoutent de la valeur à la page, il est possible que de nombreux utilisateurs n'interagissent pas avec eux. Par exemple, les internautes qui consultent la page d'un restaurant ne cliquent pas tous sur la carte, la développent, la font défiler et la parcourent. De même, tous les utilisateurs qui accèdent à 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 de manière différée l'intégration en affichant une façade à la place.

Intégration de carte avec une fonctionnalité de zoom avant et arrière.

Une façade est un élément statique qui ressemble à l'élément tiers intégré, mais qui n'est pas fonctionnel et, par conséquent, beaucoup moins exigeant pour le chargement de la page. Voici 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

Vous pouvez utiliser des images statiques à la place des cartes intégrées si vous n'avez pas besoin de rendre la carte interactive. Vous pouvez faire un zoom avant sur la zone d'intérêt sur la carte, prendre une photo et l'utiliser à la place de l'intégration de la carte interactive. Vous pouvez également utiliser la fonctionnalité Capture node screenshot (Capture d'écran du nœud) des outils de développement pour faire une capture d'écran de l'élément iframe intégré.

Effectuer une capture d'écran du nœud

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 à un élément intégré interactif 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 API Maps Static de Google 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 la balise <img> de la page en tant qu'attribut src.

L'outil Outil de création de cartes statiques 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 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 que l'utilisateur peut 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 de manière dynamique une capture d'écran Twitter au lieu du flux en direct. Tweetpik est l'un des outils qui permettent 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.

Utiliser la fonctionnalité Cliquer pour charger pour améliorer les façades

Le concept de "cliquer 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. Il s'agit également du modèle Importation lors de l'interaction. Vous pouvez l'implémenter en procédant comme suit.

Lors du chargement de la page: la façade ou l'élément statique est inclus sur la page.
Lors du survol avec la souris: la façade se connecte au fournisseur d'intégration tiers.
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. Nous rencontrons fréquemment des vidéos YouTube intégrées qui ne sont que des images avec un bouton de lecture. La vidéo ne se charge que lorsque vous cliquez sur l'image.

Vous pouvez créer une façade personnalisée "cliquer pour charger" à l'aide du modèle importation lors d'une interaction ou utiliser l'une des façades Open Source suivantes, disponible 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 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>
```
Vous trouverez ci-dessous une comparaison entre l'intégration lite-youtube et l'intégration réelle.

Intégration allégée sur YouTube

Intégration YouTube

D'autres façades similaires disponibles pour les lecteurs YouTube et Vimeo sont lite-youtube, lite-vimeo-embed et lite-vimeo.
Façade du widget de chat

Le chargeur du chat en direct React charge un bouton qui ressemble à un chat intégré 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 véritable widget de chat 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 l'entreprise a implémenté react-live-chat-loader et les améliorations de performances qu'elle a obtenues.

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

Si vous constatez que certains éléments intégrés tiers entraînent de mauvaises performances de chargement et que vous ne pouvez pas utiliser l'une des techniques décrites précédemment, la solution la plus simple consiste à supprimer complètement l'élément intégré. Si vous souhaitez que les utilisateurs puissent toujours accéder au contenu intégré, vous pouvez fournir un lien vers celui-ci dans target="_blank" afin qu'ils puissent cliquer dessus et l'afficher dans un autre onglet.

Stabilité de la mise en page

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

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

Pour éviter les décalages de mise en page, réservez de l'espace lors du chargement de la page pour les éléments qui seront chargés de manière dynamique plus tard. Le navigateur peut déterminer l'espace à réserver s'il connaît la largeur et la hauteur des éléments. Pour vous en assurer, spécifiez les attributs width et height des iFrames ou définissez une taille fixe pour les éléments statiques dans lesquels l'intégration tierce sera chargée. Par exemple, la largeur et la hauteur d'une iFrame pour une vidéo YouTube intégrée doivent être spécifiées comme suit.

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

Les implémentations populaires telles que YouTube, Google Maps et Facebook fournissent le code d'implémentation avec des attributs de taille spécifiés. Toutefois, il est possible que certains fournisseurs n'utilisent pas ce paramètre. Par exemple, cet extrait de code n'indique pas les dimensions de l'intégration générée.

<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'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 contenant 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 de code 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>

Terminateur de décalage de mise en page

Étant donné que les éléments intégrés tiers omettent souvent les dimensions (largeur, hauteur) du contenu final qu'ils affichent, ils 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 des outils de développement sur différentes tailles de fenêtres 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 à partir d'intégrations populaires, comme Twitter, Facebook et d'autres fournisseurs.

Terminator de décalage de mise en page:

Charge l'élément intégré côté client dans un iFrame.
Redimensionne l'iFrame en fonction de 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 multimédias et des requêtes de conteneur.
Dimensionne 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'à ce que l'intégration s'initialise (après la suppression des styles de hauteur minimale).
Génère un extrait d'intégration optimisé que vous pouvez copier et coller à l'endroit où vous intégreriez l'élément dans votre page.

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

Conclusion

Les intégrations tierces peuvent être très intéressantes pour les utilisateurs, mais lorsque le nombre et la taille des intégrations sur une page augmentent, les performances peuvent en pâtir. Il est donc important 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.