Optimiser les performances de votre site CMS Hub

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • Content Hub
    • Starter, Professional, or Enterprise

Une bonne expérience utilisateur est un facteur de qualité de contenu, de rapidité, de sécurité et d'accessibilité. L'optimisation de ces derniers améliore généralement aussi le SEO (Optimisation pour les moteurs de recherche).

L'amélioration des performances consiste à offrir une meilleure expérience aux utilisateurs finaux. Pour obtenir de meilleures performances, il faut résoudre les problèmes de vos sites.

Commencez par une bonne base

Il est plus facile de créer à partir d'une base solide qui a été conçue dans un souci de performance, que d'essayer de résoudre les problèmes de performance par la suite. Une métaphore : il est plus facile de construire une voiture rapide à partir de rien que d'acheter une voiture lente et d'essayer de la rendre rapide.

Le Boilerplate de HubSpot CMS a été conçu pour être rapide et encourager les meilleures pratiques. Consultez le README GitHub pour voir les scores actuels dans lighthouse et website grader.

Lorsque vous créez à partir du boilerplate, vous savez que sans aucun code ajouté, il atteint ces scores. Cela signifie que vous pouvez concentrer votre attention sur le code que vous avez ajouté par-dessus le boilerplate standard. 

Build a site based on the boilerplate

Obstacles courants des performances des sites web

La plupart des techniques et des meilleures pratiques d'optimisation des performances web ne sont pas spécifiques à HubSpot. En effet, la plupart des problèmes de performances des sites web ne sont pas spécifiques à HubSpot. 

La plupart des problèmes de performance se répartissent en deux catégories : le rendu et le chargement.

  • Performance de chargement est l'efficacité du transfert de tous les fichiers nécessaires à votre page web vers le navigateur de l'utilisateur.
  • Performances de rendu est l'efficacité du navigateur à prendre tout ce qu'il a téléchargé et à afficher le résultat final à l'utilisateur.

La performance de chargement est un peu plus facile à comprendre - la quantité de fichiers, la taille des fichiers et la vitesse de livraison de ces fichiers déterminent la performance de chargement. La performance du rendu est un thème compliqué. Les CSS (Cascading Style Sheets, en anglais), JavaScript (JS), les images, les vidéos, l'appareil utilisé par le visiteur et le navigateur web utilisé sont tous des facteurs importants. Les CSS bloquent le rendu. Les CSS mal écrites peuvent provoquer un CLS (Cumulative Layout Shift, en anglais) lors du rendu des pages. Les images peuvent provoquer un CLS et occuper la RAM. Les lecteurs vidéo peuvent être à l'origine de CLS, certains formats de fichiers nécessitent un travail de traitement plus important. JS peut manipuler le DOM (Document Object Model, en anglais) et le CSSOM (Cascading Style Sheet Object Model, en anglais) d'une page, provoquant l'un de ces problèmes. JS peut également consommer beaucoup de ressources. Tous ces facteurs doivent être équilibrés et les meilleures pratiques suivies pour garantir une expérience rapide à tous les visiteurs.

Images

Les images sont omniprésentes sur presque toutes les pages du web. Les images sont généralement les fichiers les plus volumineux d'une page. Plus il y a d'images, et plus elles sont grandes, plus votre page sera longue à charger. Les images animées, telles que les gifs et les webp animés, occupent également plus d'espace que les images non animées de même taille. Certains formats d'image sont également plus performants que d'autres, et mieux adaptés à certains scénarios.

Ce que vous pouvez faire

  1. La chose la plus importante que vous puissiez faire est d' optimiser vos images pour le web. L'optimisation des images est une responsabilité partagée entre les créateurs de contenu et les développeurs.
  2. Utilisez moins d'images par page.
  3. Utilisez le bon format d'image pour le cas d'utilisation.
  4. Utilisez des SVG (Scalable Vector Graphics, en anglais) dans la mesure du possible. Les SVG peuvent évoluer en taille à l'infini sans perdre en qualité. La mise en ligne de vos SVG est utile lorsque vous réalisez des animations. Dans les graphiques statiques, la création d'un sprite sheet SVG ou son traitement comme un élément img normal ou une image d'arrière-plan est généralement plus performant.
  5. Chargement différé des images judicieux.
  6. Assurez-vous que les éléments img contiennent les attributs HTML de hauteur et de largeur. Cela facilite la tâche des navigateurs au moment du rendu et permet à HubSpot d'ajouter intelligemment un srcset pour vous. Non seulement HubSpot aide à l'optimisation, mais les navigateurs web peuvent optimiser intelligemment le CLS lorsque vous fournissez la largeur et la hauteur. 
  7. Utilisez la propriété rapport hauteur/largeur CSS pour réserver de l'espace lorsque les dimensions img peuvent changer.
  8. Utilisez resize_image_url pour forcer les images à être redimensionnées à une certaine résolution.
  9. Pour les images d'arrière-plan, utilisez les requêtes média en combinaison avec resize_image_url pour fournir des images à des tailles adaptées à l'appareil.
  10. Pour les grandes images principales, vous pouvez les précharger en utilisant <link rel="preload" as="image" href="http://example.com/img_url.jpg"> dans une balise require_head. Utilisez cette technique avec modération, car une utilisation excessive peut nuire aux performances.

Vidéo en lecture automatique

Les arrière-plans vidéo et les vidéos à lecture automatique peuvent faire ressortir un site web. Malheureusement, elles ont un coût. Les arrière-plans vidéo sont souvent utilisés pour les en-têtes de sites web. Lorsqu'une vidéo se lance automatiquement, cela signifie que le navigateur doit commencer à charger la vidéo immédiatement. Cela peut s'avérer particulièrement problématique pour les utilisateurs disposant de connexions plus lentes ou utilisant les données d'un téléphone portable. 

Ce que vous pouvez faire

  1. Évitez d'utiliser des vidéos en lecture automatique. Si ce que vous montrez est une animation de fond, pensez à utiliser des animations CSS ou des animations JavaScript. Si vous devez afficher une vidéo en lecture automatique :
  2. Choisissez une résolution raisonnable pour la vidéo en fonction de votre cas d'utilisation, et appliquez un effet sur la vidéo pour rendre une résolution inférieure moins perceptible.
  3. Assurez-vous que la qualité de la vidéo varie en fonction de l'appareil et de la connexion. Le meilleur moyen d'y parvenir est d'utiliser un service de partage et d'hébergement de vidéos comme YouTube, Vidyard ou Vimeo.
  4. Désactiver la lecture automatique sur mobiles, afficher une image de repli à la place.

JavaScript

JavaScript(JS) est utile pour ajouter de l'interactivité à votre site web. Le chargement d'une grande quantité de code JS augmente en général la taille des fichiers JS et le temps nécessaire au navigateur pour rendre les éléments interactifs. Le chargement de JS dans le <head> peut aussi être un problème, car JavaScript est une ressource bloquante pour le rendu par défaut. De plus, JS est exécuté sur l'appareil du visiteur, ce qui signifie qu'il est limité aux ressources de cet appareil.

Ce que vous pouvez faire

  1. Lorsque le CMS de HubSpot est sorti, jQuery était chargé dans le <head> par défaut. Vous pouvez le supprimer entièrement dans Paramètres > Site web > Pages, ou passer à la dernière version de jQuery. Faites attention lorsque vous modifiez ces paramètres sur des sites web plus anciens si vous ne les avez pas créés, ils peuvent avoir été conçus en s'appuyant sur jQuery ou sur le chargement de jQuery dans l'en-tête.
  2. Assurez-vous que JavaScript est chargé avant le </body> pour éviter le blocage du rendu. Vous pouvez utiliser require_js pour charger js pour des modules ou des modèles uniquement lorsque cela est nécessaire et sans charger accidentellement JavaScript plusieurs fois pour plusieurs instances d'un module.
  3. Envisagez de remanier votre JS pour le rendre plus efficace. Utilisez moins de plug-ins JS, utilisez du HTML sémantique lorsque cela peut être utile. Par exemple, pour les listes déroulantes, utilisez <details> et <summary>. Pour les modaux, utilisez <dialog>.
  4. Si vous utilisez une bibliothèque JS géante uniquement pour quelques petites fonctionnalités, envisagez d'utiliser Vanilla JS ou de charger un sous-ensemble de la bibliothèque si possible.
  5. Utilisez require_js pour charger JS uniquement lorsque cela est nécessaire et une seule fois par page. Lorsque vous utilisez require_js, utilisez les attributs async ou defer pour améliorer les performances de la page.
  6. Pour contrôler où et quand le JavaScript d'un module se charge, utilisez js_render_options dans le fichier meta.json du module.
  7. Si vous chargez des ressources externes, utilisez préconnexion et prérécupération DNS de manière pertinente pour offrir une expérience plus rapide.
  8. Limitez le nombre de scripts de suivi que vous utilisez. Les scripts de suivi essaient souvent de comprendre toutes les actions qu'un utilisateur effectue sur une page pour vous fournir des informations. C'est beaucoup de code qui analyse ce que fait l'utilisateur. Chaque script de suivi amplifie ce phénomène.

Outil de Conseils

L'outil de conseils HubSpot est un excellent moyen d'obtenir des informations sur les performances et le SEO de votre site web.  

En savoir plus sur l'outil de conseils

Alertes de code

Les alertes de code sont une fonctionnalité de CMS Hub Entreprise qui agit comme un aperçu centralisé des problèmes qui sont identifiés à l'intérieur de votre site web HubSpot CMS. La résolution des problèmes identifiés dans les Alertes de code peut contribuer à optimiser les performances de votre site web. Les problèmes identifiés comprennent plusieurs domaines différents, des limites du HubL aux problèmes des CSS.

En savoir plus sur les Alertes de code.

Que gère HubSpot pour vous ?

La plupart des meilleures pratiques en matière de performance et de rapidité ne sont pas spécifiques à HubSpot. Le CMS de HubSpot gère automatiquement pour vous de nombreux problèmes de performance courants. Ces optimisations comprennent les éléments suivants :

Lorsque vous incluez un fichier CSS dans un module personnalisé, HubSpot charge intelligemment le fichier module.css uniquement lorsqu'un module est utilisé sur une page, et ne le charge qu'une seule fois, quel que soit le nombre d'instances du module sur la page. Par défaut, module.css ne se charge pas de manière asynchrone, mais vous pouvez changer cela en incluant css_render_options dans le fichier meta.json du module.

Ressources supplémentaires pour améliorer la vitesse de votre site

Il existe de nombreux outils qui peuvent être utilisés pour améliorer les performances et les tester. Il est utile à la fois de comprendre ces outils et de les utiliser. Cette liste n'est en aucun cas exhaustive et provient de notre communauté de développeurs.

Optimisation de l'image

L'optimisation de vos images pour le web avant de les télécharger et de les publier vous permet de ne pas publier une image trop grande pour l'écran et le cas d'utilisation. 

Outils populaires d'optimisation des images :

Tests de performance

Tester les performances et les optimiser devrait faire partie de la création de tout site web. Il existe une multitude d'outils permettant de tester la vitesse d'un site web. Il est important de comprendre ces outils et leur fonctionnement, afin de pouvoir prendre des décisions éclairées sur l'amélioration des performances.

Certains outils savent uniquement mesurer, d'autres évaluent. Il est important de comprendre comment cela fonctionne réellement.

Les Outils de mesure testent généralement le temps de chargement, le temps d'exécution des scripts, le temps d'affichage du texte et des images (FCP), le temps de téléchargement des ressources sur le réseau, etc. Ces outils fournissent généralement des résultats qui indiquent des temps spécifiques pour chacun de ces paramètres. Si vous refaites le test, les mesures seront généralement légèrement modifiées, car le chargement de chaque page n'est pas exactement le même. 

Les Outils d'évaluation ne se contentent pas de mesurer la vitesse, ils vous indiquent si votre performance est bonne ou mauvaise, souvent à l'aide d'un pourcentage ou d'une note avec une lettre. Ces notes sont destinées à être utilisées comme un outil pour motiver les développeurs et les équipes marketing à s'améliorer. Il y a tellement de paramètres et d'aspects différents de la performance qui doivent être pris en compte. Vous ne pouvez pas baser vos performances globales sur une seule mesure. De plus, certaines mesures ont des effets différents sur les performances perçues. Ces outils pondèrent différemment les paramètres pour calculer la performance globale. Il n'existe pas de norme sectorielle sur la manière de pondérer les paramètres. Au fil du temps, cette pondération peut changer, comme cela s'est produit avec Google Page Speed. Il n'existe pas non plus de consensus dans le secteur sur ce qui est considéré comme une « bonne » valeur minimale ou maximale pour les différents paramètres. Certains outils se basent sur un percentile de sites web qui ont été testés. Cela signifie que vos résultats sont comparés à ceux d'autres sites qui ont été testés. En conséquence, la plage de vitesse « bonne/excellente » devient de plus en plus difficile à atteindre au fil du temps. Certains outils s'appuient plutôt sur l'expérience des utilisateurs, la fidélisation des visiteurs et les recherches basées sur le retour sur investissement (ROI) pour déterminer le seuil d'un bon score. Sachez également que tous les outils ne prennent pas en compte les performances de chargement ultérieur des pages. Par exemple, le système de modules de HubSpot sépare css et JS pour les modules individuels, et ne charge ces ressources que lorsque le module est effectivement placé sur la page. Il peut en résulter plusieurs fichiers css plus petits, qui pourraient être signalés par Google Page Speed Insights. En réalité, lors du prochain chargement de la page, vous n'aurez pas besoin de télécharger les css ou les js des modules qui se répètent sur la page suivante - ils seront mis en cache. Au lieu de cela, vous n'aurez à télécharger que les fichiers des modules que vous n'avez pas encore vus, et cela représentera des kilo-octets, au lieu d'un fichier monolithique.

Lorsqu'il s'agit d'outils de notation, vous devez utiliser plusieurs outils et vous efforcer d'obtenir le meilleur score possible dans chacun d'eux. Comprenez bien qu'ils pondéreront les choses différemment. Les efforts qui peuvent améliorer un score dans un outil peuvent ne pas l'améliorer dans d'autres.

Outils de test de performance populaires :

Associé :

 


Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.