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 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.
Le contenu tiers peut avoir un impact sur les performances d'une page de différentes manières. Elle peut bloquer l'affichage, entrer en concurrence avec d'autres ressources critiques pour le réseau et la bande passante, ou avoir 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 de leur chargement. Cet article présente les bonnes pratiques en matière de performances à suivre lors du chargement d'intégrations tierces, 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 intégrations courantes.
Qu'est-ce qu'un élément intégré
Une intégration tierce désigne tout contenu affiché sur votre site:
Non créé par vous
Diffusées à partir de serveurs tiers
Les intégrations sont fréquemment utilisées dans les éléments suivants:
Les sites Web liés au sport, 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 intégrations tierces sont généralement chargées dans les éléments <iframe> de la page. Les fournisseurs tiers proposent des extraits de code HTML, souvent constitués 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 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
La plupart des intégrations populaires incluent plus de 100 Ko de fichiers JavaScript, voire jusqu'à 2 Mo dans certains cas. 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.
Il est recommandé de contrôler régulièrement l'impact de vos intégrations et de votre code tiers sur les performances, 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. 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 demandes d'intégrations tierces peuvent empêcher le chargement du contenu propriétaire. Il est donc important de bien positionner un tag de script tiers. Les scripts peuvent avoir une incidence sur la séquence de chargement, car la construction du DOM s'interrompt pendant l'exécution des scripts. Placez les balises de script tiers après les balises propriétaires clés, puis utilisez les attributs async ou defer pour les charger de manière asynchrone.
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 des ressources tierces peut être différé jusqu'à ce que l'utilisateur fasse défiler la page jusqu'à cette partie de la page. 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é. En fonction des exigences et du 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 afin de 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 récents.
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 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 simplifié.
auto: le navigateur détermine s'il faut charger ce frame en différé.
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 quelques exemples de la façon dont vous pouvez charger des iFrames de manière différée 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.
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. Voici un exemple de code avec un espace réservé pour la clé API Google Cloud.
É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 adapté au SEO pour les images et les cadres iFrame. Une fois que vous avez téléchargé le composant, vous pouvez l'utiliser avec un iFrame pour un élément intégré YouTube. Pour ce faire, procédez comme suit :
De même, vous pouvez utiliser les tailles différées 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 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. 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 ce <iframe> peut améliorer les performances, car la taille de l'intégration peut être compressée avec gzip de plus de 100 Ko. 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 intégrations interactives ajoutent de la valeur à la page, de nombreux utilisateurs peuvent ne pas interagir avec elles. 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, les utilisateurs accédant à la page d'un fournisseur de services de télécommunication n'interagissent pas tous avec le chatbot. Dans ce cas, vous pouvez éviter le chargement différé de l'intégration en affichant une façade à sa place.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Intégration de carte avec une fonctionnalité de zoom avant et arrière
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Façade de carte représentée sous forme d'image.
Une façade est un élément statique qui ressemble à un tiers intégré, mais qui n'est pas fonctionnel et permet donc de réduire considérablement 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 zoomer sur la zone qui vous intéresse sur la carte, prendre une image 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é.
Cette technique vous permet de générer des images correspondant à une intégration interactive lors 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 de l'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 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 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 les captures d'écran de carte, ce concept vous permet d'intégrer dynamiquement une capture d'écran de 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.
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. Également appelé modèle d'importation lors d'une interaction, vous pouvez suivre les étapes ci-dessous pour le mettre en œuvre.
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.
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 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 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
Nous vous recommandons d'utiliser la façade Lite-youtube-embed du lecteur YouTube. Elle ressemble au véritable lecteur, mais 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.
Le chargeur de réaction du chat en direct charge un bouton qui ressemble à un élément intégré de chat, et non à l'élément intégré lui-même. Il peut être utilisé avec divers fournisseurs de messagerie instantanée tels que Intercom, Help Scout, 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 elle a implémenté react-live-chat-loader et amélioré ses performances.
Supprimer ou remplacer les éléments intégrés par des liens
Si vous constatez que certaines intégrations tierces ont un impact négatif sur les performances de chargement et que l'une des techniques décrites précédemment n'est pas possible, la solution la plus simple consiste à supprimer complètement l'intégration. 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 qu'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.
Vous pouvez éviter les décalages de mise en page en réservant de l'espace pendant le 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 cadres iFrame ou définissez une taille fixe pour les éléments statiques dans lesquels l'élément intégré tiers sera chargé. Par exemple, la largeur et la hauteur d'un iFrame pour un élément intégré YouTube doivent être spécifiées comme suit :
Les intégrations populaires, telles que YouTube, Google Maps et Facebook, fournissent le code d'intégration avec des attributs de taille spécifiques. 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'élément intégré obtenu.
<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ée après le rendu de cette page. Comme le montre l'extrait suivant, la hauteur de l'iFrame injecté est fixe, tandis que la largeur est spécifiée en pourcentage.
Ces informations peuvent être utilisées pour 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 de code suivant peut être utilisé pour corriger la taille de l'élément intégré précédemment inclus.
É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 importants de mise en page 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.
Capture les dimensions de l'élément intégré pour chaque fenêtre d'affichage populaire 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 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 de code intégré optimisé que vous pouvez copier et coller là où vous auriez inclus l'élément intégré dans votre page.
Essayez Layout Shift Terminator et n'hésitez pas à nous faire part de vos commentaires sur GitHub. Il est en version bêta et vise à s'améliorer au fil du temps en y apportant d'autres améliorations.
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 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 utilisateurs potentiels. besoins.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2021/10/05 (UTC).
[]
[]
{"lastModified": "Derni\u00e8re mise \u00e0 jour le 2021/10/05\u00a0(UTC)."}
[null,null,["Dernière mise à jour le 2021/10/05 (UTC)."]]
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
