Optimiser les performances de votre site CMS Hub
-
Marketing Hub
- Professional or Enterprise
-
CMS 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.
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.
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.
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.
- 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.
- Utilisez moins d'images par page.
- Utilisez le bon format d'image pour le cas d'utilisation.
- 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.
- Chargement différé des images judicieux.
- 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 unsrcset
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. - Utilisez la propriété rapport hauteur/largeur CSS pour réserver de l'espace lorsque les dimensions img peuvent changer.
- Utilisez
resize_image_url
pour forcer les images à être redimensionnées à une certaine résolution. - 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. - 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 baliserequire_head
. Utilisez cette technique avec modération, car une utilisation excessive peut nuire aux performances.
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.
- É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 :
- 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.
- 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.
- Désactiver la lecture automatique sur mobiles, afficher une image de repli à la place.
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.
- 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. - Assurez-vous que JavaScript est chargé avant le
</body>
pour éviter le blocage du rendu. Vous pouvez utiliserrequire_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. - 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>
. - 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.
- 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 attributsasync
oudefer
pour améliorer les performances de la page. - Pour contrôler où et quand le JavaScript d'un module se charge, utilisez js_render_options dans le fichier meta.json du module.
- 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.
- 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.
L'outil de conseils HubSpot est un excellent moyen d'obtenir des informations sur les performances et le SEO de votre site web.
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.
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 :
- CDN avec optimisation des images et conversion automatique WebP
- HTTP2
- JavaScript et minification CSS
- Mise en cache du navigateur et du serveur
- Pré-rendu
- Réécriture de domaine
- Compression Brotli (avec repli sur la compression GZIP)
- Les articles du blog HubSpot sont compatibles avec AMP
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.
Il y a beaucoup de choses à faire pour optimiser la vitesse d'un site et beaucoup de ces thèmes méritent une analyse plus approfondie. Nous avons compilé d'excellentes ressources que nous vous encourageons à consulter lorsque vous travaillez à l'optimisation de votre site.
- Vitesse et performance des sites : ce que vous pouvez faire et comment HubSpot vous aide
- Comment nous avons amélioré la vitesse des pages sur HubSpot.com
- 15 conseils pour accélérer votre site web
- 5 moyens simples de réduire le temps de chargement des pages de votre site web
- guide en 8 étapes pour amener l'outil Google Page Speed à 100 %
- Optimisation du site web - HubSpot Academy
- Web.dev
- Comment nous optimisons HubSpot CMS - Jeff Boulter
- L'élément img modeste et Signaux web essentiels - Smashing Magazine
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.
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 :
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 :
- Website Grader
- GTMetrix
- Google Page Speed Insights et d'autres Outils de performance de Google.
- Pingdom
- WebPageTest
Associé :
- Comment fonctionne le système de notation des performances Lighthouse
- Feuille de route pour l'optimisation des sites web (Core Web Vitals) | Mark Ryba
Merci d'avoir partagé votre avis.