La création d'un site web convivial et rapide à charger avec le CMS HubSpot peut sembler difficile au début. Cependant, avec les bonnes connaissances et les bons conseils, vous pouvez vous hisser au sommet. Heureusement, HubSpot prend en charge les aspects les plus complexes, comme la gestion du CDN et de l'infrastructure du serveur, de sorte que vous n'avez pas à vous soucier des tâches techniques lourdes.
Cela dit, pour que votre site web se distingue parmi les meilleurs, vous devrez maîtriser quelques stratégies clés pour optimiser les modèles et les performances. La bonne nouvelle, c'est que ces astuces ne sont pas difficiles à apprendre et qu'elles peuvent faire toute la différence dans les performances de votre site.
Aujourd'hui, je vais partager avec vous quelques conseils pratiques pour relever les défis les plus courants auxquels j'ai été confronté lors de la création de modèles rapides et efficaces. Grâce à ces conseils, vous serez bien équipé pour créer un site Web qui laissera vos concurrents dans la poussière !
Pour optimiser les performances de votre site web et créer une expérience ultra-rapide, j'ai divisé mes conseils en quelques sections clés :
1. Ma règle d'or pour l'optimisation des sites web 2. Chargement des fichiers 3. Redirections 4. Polices de caractères 5. Les images 6. Les bons outils pour tester
1. Ma règle d'or pour l'optimisation des sites web
Commençons par un principe fondamental qui prévaut sur la plupart des autres "règles" en matière d'optimisation de sites web :
Moins = Plus rapide
Moins vous chargez, plus votre site web sera rapide. C'est aussi simple que cela !
- Si vous n'en avez pas besoin, ne le chargez pas. - Pour les images : Si elles ne sont pas visibles, ne les chargez pas !
En suivant cette logique de base, vous pouvez améliorer considérablement les performances de votre site dès maintenant.
Bien sûr, il y a des exceptions et si vous êtes très porté sur la performance et l'optimisation technique, vous savez quand ce n'est pas le cas. Cependant, pour la plupart des sites web, la majorité de ceux qui pourraient améliorer leurs performances avec ce point de départ est énorme !
Maintenant, plongeons dans les détails et commençons à optimiser !
2. Chargement des fichiers
Pour commencer, concentrons-nous sur le chargement des fichiers. Les sites web, en particulier ceux construits sur HubSpot CMS, ont tendance à charger beaucoup de ressources. Conformément à ma règle d'or - "ne chargez pas ce dont vous n'avez pas besoin" - je recommande vivement, lors de la création d'un site personnalisé, de faire table rase du passé en désactivant des fonctionnalités telles que :
- Désactiver HubSpot Chat - Supprimer tous les formulaires - Désactiver les commentaires pour les blogs - Désactiver le partage social - Désactiver Google AMP (et ne pas le réactiver !) - Désactiver toutes les intégrations de suivi
Cela vous donnera un point de départ plus propre dans HubSpot.
Bien sûr, cela peut être difficile à réaliser avec un site web existant construit avec HubSpot CMS. Commencez plutôt par désactiver un à un les éléments ci-dessus et observez leur impact sur les performances de votre site. Dans de nombreux cas, vous constaterez une amélioration de la vitesse.
Les résultats peuvent s'inscrire dans l'un des trois scénarios suivants :
1. Votre site web est plus rapide, mais vous avez besoin de l'outil. Malheureusement, vous devrez le laisser en place, mais explorez d'autres conseils d'optimisation. 2. Votre site Web est plus rapide et vous n'avez pas besoin de l'outil. Laissez-le désactivé pour de bon ! 3. Il n'y a pas d'impact notable. Si vous n'avez pas besoin de l'outil, il vaut mieux le laisser désactivé de toute façon.
Avec cette approche, vous serez sur la bonne voie pour obtenir un site plus rapide et plus efficace. Nous devenons un peu plus techniques, alors attachez votre ceinture et commençons !
Chargement local des fichiers
L'étape suivante est un peu plus difficile mais cruciale pour les performances. Le chargement local des fichiers sur votre site web (souvent appelé techniquement votre domaine ou origine) est souvent le moyen le plus rapide de les récupérer. Qu'est-ce que cela signifie ?
Imaginez que vous êtes dans votre cuisine et que vous avez besoin d'une spatule pour retourner des crêpes. Si vous gardez la spatule dans le tiroir de votre cuisine, vous pouvez l'attraper rapidement et commencer à cuisiner. C'est comme le chargement local : les fichiers dont vous avez besoin sont stockés à proximité, sur votre serveur.
Mais si vous n'avez pas la spatule dans votre cuisine, vous devrez l'emprunter chez votre voisin. C'est comme pour le chargement de fichiers sur l'internet. Cela prend plus de temps parce que vous devez vous rendre chez lui, lui demander et lui rapporter.
Et pour ne rien arranger, que se passe-t-il si vous devez emprunter un outil parce que vous n'en avez pas ? Cela fait beaucoup de marche.
Mettez-le en pratique avec HubSpot :
Pour mettre cela en pratique avec HubSpot, dans la mesure du possible, téléchargez un fichier au lieu de créer un lien vers ce fichier à partir d'un autre site web. Téléchargez ce fichier directement sur HubSpot et créez un lien vers ce fichier à partir de là. Et c'est tout ! Cela s'applique aux images, aux scripts, aux vidéos, aux polices - en fait, à tout ce que vous pouvez télécharger et héberger localement.
Définir le domaine d'hébergement du fichier HubSpot
Pour les fichiers que vous téléchargez via HubSpot et que vous utilisez sur votre site web, il y a une étape cruciale que vous ne devez pas négliger. Vous devez définir le domaine d'hébergement de fichiers par défaut à l'URL de votre site web.
Pour ce faire, allez dans Paramètres HubSpot > Contenu > Pages. Après avoir fait défiler la page, vous trouverez l'option "Default file hosting domain" (Domaine d'hébergement de fichiers par défaut). Assurez-vous de sélectionner l'URL de votre site web, afin que tout fichier que vous choisissez dans votre bibliothèque utilise votre domaine.
3. Redirections
Bien qu'il ne s'agisse pas d'un problème technique à proprement parler, les redirections peuvent avoir un impact significatif sur les performances de votre site web. Celles-ci affectent non seulement les URL que les visiteurs saisissent dans leur navigateur ou les liens vers lesquels vous pointez, mais aussi les fichiers et les images que votre site charge.
Qu'est-ce qu'une redirection ?
Une redirection se produit lorsqu'un navigateur demande une URL spécifique, mais qu'au lieu de servir le contenu demandé, le serveur indique au navigateur d'aller le chercher à un autre endroit.
Imaginez un peu : Vous faites signe à quelqu'un pour attirer son attention et lui poser une question, mais au lieu de vous répondre, la personne vous indique quelqu'un d'autre qui possède l'information. Vous devez alors faire signe à la deuxième personne et recommencer le processus.
Cette étape supplémentaire prend du temps. Bien qu'une seule redirection puisse sembler anodine - et qu'elle soit parfois nécessaire, par exemple lorsqu'il s'agit de diriger vers un contenu mis à jour -, le fait d'avoir plusieurs redirections peut ralentir considérablement la vitesse de chargement du contenu. Imaginez une chaîne de personnes pointant les unes vers les autres avant que vous n'atteigniez finalement la bonne. Chaque étape augmente le temps de chargement total.
Redirections dans les fichiers et les images
Il ne s'agit pas seulement des URL que les visiteurs saisissent dans leur navigateur ou des liens vers lesquels vous vous dirigez. Les redirections peuvent également affecter les fichiers et les images que votre site charge. Si ces ressources reposent sur des redirections, le navigateur doit prendre des mesures supplémentaires pour chacune d'entre elles, ce qui augmente le temps de chargement. Plus il y a de redirections, plus le délai est long.
Comment optimiser les redirections
Pour améliorer les performances, il convient de limiter autant que possible les redirections :
1. Mettre à jour les liens : Veillez à ce que les URL pointent directement vers leur destination finale au lieu d'utiliser des redirections périmées ou intermédiaires. 2. Rationalisez les chaînes de redirection : S'il y a plusieurs redirections à la suite, mettez à jour les anciennes pour qu'elles pointent directement vers la destination finale ou la plus récente. L'élimination des étapes inutiles permet de gagner du temps. 3. Vérifiez les fichiers et les images : Vérifiez les ressources que votre site charge pour vous assurer qu'elles ne comportent pas de redirections, car celles-ci peuvent ralentir le temps de chargement des pages, tout comme les redirections d'URL.
En réduisant les redirections sur votre site web et pour les ressources qu'il charge, vous pouvez améliorer sa vitesse et garantir une expérience plus rapide aux visiteurs. Un petit nettoyage peut grandement contribuer à améliorer les performances.
Comment définir les redirections dans HubSpot
Plutôt que d'écrire une section détaillée, il est plus simple de se référer à la documentation de la base de connaissances de HubSpot : "Créer et gérer des redirections d'URL". En résumé, allez dans Paramètres -> Domaines & URLs -> Redirections, où vous pouvez configurer une nouvelle redirection pour vos pages.
4. Polices de caractères
Les polices de caractères, ainsi que les images, sont souvent la cause principale des mauvais résultats obtenus par Core Web Vitals. Voici quelques problèmes courants :
1. Plus de polices que nécessaire : Il est essentiel de suivre la règle d'or - supprimer ce que vous n'utilisez pas. 2. Polices chargées par la règle CSS @import : Cette méthode est lente et peut avoir un impact négatif sur votre Core Web Vitals de plusieurs façons. 3. Polices chargées à partir de sources externes comme Adobe Fonts (Typekit) ou Google Fonts : Il est préférable de les importer localement, comme expliqué précédemment.
Une fois que vos polices sont prêtes à être chargées localement, nous pouvons commencer à les optimiser.
Bien qu'il existe de nombreux articles avec des guides détaillés sur la meilleure façon de charger les polices, voici une vue d'ensemble courte et simple de ce que vous pouvez faire dans le CMS HubSpot.
L'essentiel est de s'assurer que vos polices sont disponibles le plus rapidement possible (préchargement), qu'elles sont stylisées dès que possible et qu'elles utilisent le paramètre font-display : swap correct afin que le texte reste visible même lorsque la police est encore en cours de chargement.
1. Précharger les polices : Liez les polices dans le <head> de votre site web, le plus haut possible. Les polices étant cruciales, préchargez-les à l'aide de ce code :
Cela permet de s'assurer que le navigateur les charge immédiatement après le code HTML.
2. Ajoutez un extrait de police de caractères : Cette étape permet de s'assurer que la police est reconnue rapidement par le CSS, ce qui permet de styliser votre page dès que possible. Dans le <head>, ajoutez un élément <style> avec ce code :
css, copier le code :
<style>@font-face { font-display : swap ; font-family : 'Your-Font-Name' ; font-style : normal ; /* ou votre style de police préféré */ font-weight : 400 ; /* ou votre police préférée */ src : url('your_font_URL.woff2') format('woff2') ; }</style>
Maintenant, votre police se chargera et s'affichera dès qu'elle sera nécessaire.
3. Définissez des polices de secours : Pour réduire les changements de mise en page et améliorer l'expérience de l'utilisateur, définissez des polices de remplacement. Si la taille ou le style de votre police personnalisée diffère, la police de remplacement permet de réduire les mouvements lors de la permutation. Dans l'image ci-dessous, les différences entre les polices, si vous ne faites pas correspondre le style. Cela créera des décalages de mise en page (CLS) lorsque la nouvelle police sera chargée.
A titre d'exemple, nous utilisons une police Arial ajustée comme police de secours pour notre entreprise. Voici l'extrait de code :
Copier le code :
<style>@font-face {
font-family : 'Adjusted Arial Fallback' ;
src : local(Arial) ;
size-adjust : 86% ;
ascent-override : 117% ;
descent-override : 32% ;
line-gap-override : 0% ;
font-display : swap ;
}</style>
Assurez-vous que ce fallback est chargé avant la police personnalisée, et vous êtes prêt !
En suivant ces étapes, vous optimiserez le chargement de vos polices et améliorerez votre score Core Web Vitals.
5. Images
Nous y voilà : les images sur les sites web. À première vue, cela semble simple, mais pour optimiser véritablement les performances des images, il faut un peu de technique.
Paramètres de chargement
Comme nous l'avons vu plus haut dans la section "Chargement des fichiers", nous avons déjà défini le domaine de fichier de votre site web. C'est un bon début ! Passons maintenant à un état d'esprit important à avoir lors de la construction ou de la gestion d'un site web :
L'image se trouve-t-elle dans la fenêtre de visualisation lorsque la page se charge ?
- Oui : définir le chargement sur impatient. - Non : Définir le chargement comme paresseux.
Je sais que cela ne convient pas toujours parfaitement à tous les cas d'utilisation, mais si vous lisez ceci, vous savez probablement déjà quand cela s'applique !
Comment cela fonctionne-t-il ?
Lorsqu'une page se charge, le navigateur traite le fichier HTML et lit les liens vers tous les fichiers de la page, de haut en bas. Dans le cas des images, si plusieurs images ne se trouvent pas dans la fenêtre de visualisation lorsque la page se charge, cela peut retarder d'autres parties importantes du site. Comme le navigateur n'est pas assez intelligent pour donner lui-même la priorité aux images situées en dehors de la fenêtre de visualisation, nous pouvons l'aider en ajustant le paramètre de "chargement". HubSpot propose trois options pour le chargement des images : Lazy, Eager et Browser Default.
Au moment de la publication de ce blog, les options "Browser Default" et "Eager" sont identiques.
- Enthousiaste : Cette option a une priorité plus élevée et indique au navigateur de charger l'image dès qu'il la rencontre. - Paresseux : L'image n'est chargée que lorsqu'elle entre dans la fenêtre de visualisation, avec une priorité inférieure à celle des autres éléments. Lorsque vous faites défiler la page à proximité de l'image, celle-ci se charge dès que possible, mais cela n'a pas d'incidence sur le chargement initial.
J'en reviens donc à ma question : L'image est-elle dans la fenêtre de visualisation ?
- Oui : la charger avec empressement. - Non : chargez-la paresseusement.
Retournez à votre contenu, assurez-vous que toutes les images situées en dehors de la fenêtre de visualisation sont réglées sur lazy load, et préparez-vous à être surpris par l'augmentation des performances !
Des informations plus approfondies sont disponibles sur web.dev.
Taille de l'image
Celle-ci est simple : Ne chargez pas d'images plus grandes que nécessaire. Si une image n'a besoin que de 1000 px de large, faites en sorte qu'elle ait exactement 1000 px de large - pas 2000 px, pas 1001 px, juste 1000 px. Je fais référence aux dimensions réelles du fichier image, et non au paramètre "Largeur et hauteur exactes". Plus la taille de l'image est proche de ce qui est nécessaire pour le site, plus le navigateur peut la charger rapidement.
Le paramètre "Largeur et hauteur exactes" du module image de HubSpot est utilisé lorsque vous avez besoin qu'une image s'affiche toujours à une taille spécifique sur n'importe quel appareil. Il définit les dimensions de l'image dans le navigateur et utilise un ensemble de sources pour charger différentes tailles pour différents appareils et résolutions d'écran.
Le navigateur choisit alors la taille d'image la plus appropriée, ce qui se traduit souvent par une réduction de la taille du fichier image. Par exemple, j'ai téléchargé une image de 2,82 Mo, mais
après avoir défini les dimensions, elle ne pesait plus que 67,8 Ko, ce qui représente une nette amélioration !
Voici la meilleure partie et mon conseil : Ne définissez jamais une taille fixe. Définissez plutôt une "taille maximale". Cela permet de s'assurer que l'image reste réactive et ne s'étire pas au-delà de la taille prévue, ce qui permet à votre site de rester flexible sans se briser.
Pour optimiser davantage, utilisez des outils comme TinyPNG, Kraken.io, ou l'optimisation d'image propre à HubSpot pour réduire la taille de l'image et s'assurer qu'elle est réglée sur les bonnes dimensions !
Fetchpriorty pour vos images les plus importantes
L'étape suivante est une étape d'optimisation plus avancée qui nécessite l'intervention d'un développeur : l'élément fetchpriority.
L'attribut fetchpriority indique essentiellement au navigateur l'importance d'une image. Si une image est cruciale pour le chargement de la page, vous pouvez lui attribuer la valeur "high". Si l'image est moins importante, réglez-la sur "low". Si vous n'êtes pas sûr de vous, laissez la valeur "auto" et laissez le navigateur gérer l'image en fonction de sa priorité par défaut. Le fait de définir une image comme "élevée" garantit qu'elle se charge plus rapidement que d'autres images ou fichiers moins prioritaires. Par défaut, tous les fichiers ont une priorité de récupération. Pour les images, il est assez facile d'ajuster ce paramètre.
Quand définir la priorité de récupération à un niveau élevé ? Posez-vous la question suivante : "Quelle est l'image la plus importante de la page ? "Quelle est l'image la plus importante de la page, en particulier celle qui se trouve au-dessus du pli lorsque la page est chargée ?" Généralement, c'est l'image Largest Contentful Paint (LCP) qui a la priorité la plus élevée. En fixant la priorité de récupération de cette image à un niveau élevé, vous accélérerez son temps de chargement et améliorerez l'expérience de l'utilisateur.
Cependant, n'appliquez pas une priorité élevée à un trop grand nombre d'images, car cela diminuerait l'efficacité de cette fonctionnalité. Pour la plupart des pages, une image avec une priorité de récupération "élevée" suffit. Suivez la règle empirique "si tout est important, rien ne l'est". Veillez donc à ne pas abuser de cette fonctionnalité.
Il est important de tester d'abord l'impact, car se précipiter sans faire les vérifications nécessaires pourrait entraîner des problèmes involontaires.
Mise en œuvre : Au moment de la rédaction de ce blog, ce paramètre n'est pas disponible par défaut pour les images. Vous aurez besoin d'un développeur pour l'ajouter dans un module d'image personnalisé ou d'un paramètre supplémentaire dans les modules existants qui vous permet de contrôler la priorité de récupération.
Préchargement des images importantes
Tout comme pour les polices, il est possible de précharger les images. Si une image est définie comme hautement prioritaire et que vous êtes absolument certain qu'elle doit se charger en premier (sinon, ne la définissez pas comme "élevée" !), vous pouvez la précharger.
Toutefois, soyez prudent : le préchargement d'une image trop volumineuse peut nuire aux performances d'autres parties du site. Testez toujours avant la mise en œuvre finale pour vous assurer qu'elle n'a pas d'impact négatif sur les performances globales.
6. Les bons outils pour les tests
Tester et contrôler les performances d'un site web : L'optimisation pour les utilisateurs permet d'obtenir de meilleurs résultats Core Web Vitals
Lorsqu'il s'agit des performances d'un site web et de Core Web Vitals, les tests et le contrôle sont aussi importants que les optimisations.
N'oubliez pas que l'objectif est d'améliorer l'expérience de vos visiteurs, et non la vôtre ou celle de vos partenaires. Cela signifie qu'il faut s'appuyer sur des données de terrain - des expériences réelles d'utilisateurs - pour guider vos améliorations et vous assurer que vous traitez les problèmes de performance réels.
Pourquoi tester les performances d'un site web est une question de situation ?
Les tests de performance sont essentiels, mais ils doivent être effectués de manière réfléchie. Un seul test peut parfois être trompeur, surtout s'il est manipulé pour des mesures de vanité ou pour se vanter sur les médias sociaux.
Bien que de tels artifices puissent faire paraître vos performances impressionnantes, l'expérience réelle de vos utilisateurs pourrait toujours être médiocre.
Outils de test et de contrôle des performances
- PageSpeed Insights (PSI) PSI est un outil simple, adapté aux débutants, qui fournit un aperçu des performances facile à comprendre à l'aide d'un score de 0 à 100 et d'indicateurs codés par couleur (rouge, jaune, vert). Bien que cet outil soit accessible et intuitif, il est important de noter que ses résultats peuvent parfois être détournés et donner une fausse impression de performance.
La caractéristique la plus remarquable de l'ISP réside dans ses données de terrain, qui montrent comment les utilisateurs réels vivent l'expérience de votre site web. Ces données sont inestimables car elles reflètent les interactions réelles des utilisateurs, ce qui est en fin de compte l'objectif de l'optimisation.
- WebPageTest : L'outil de référence des professionnels Pour obtenir des informations plus détaillées, WebPageTest est un outil extrêmement polyvalent et puissant. C'est l'outil que je préfère pour effectuer des tests individuels et suivre l'évolution des performances dans le temps.
Ce qui rend WebPageTest exceptionnel, c'est sa capacité à offrir des informations approfondies et exploitables par le biais de rapports visuels et de résumés. Ceux-ci mettent en évidence ce qui se passe pendant le processus de chargement de votre site, en le décomposant même pour les utilisateurs non techniques.
Ses principales caractéristiques sont les suivantes :
- Tests sur des appareils, des connexions et des lieux spécifiques. - Options avancées telles que l'exécution de scripts personnalisés, le blocage de domaines spécifiques ou l'ajout d'en-têtes personnalisés. - Identification des possibilités de rendre votre site plus rapide grâce à des suggestions détaillées.
En comparant les tests dans le temps, vous pouvez mesurer l'impact réel de vos optimisations et assurer une amélioration continue.
Surveillance à long terme pour Core Web Vitals
L'optimisation des performances n'est pas une tâche ponctuelle, c'est un effort continu. La surveillance continue garantit la bonne performance de votre site au fil du temps et vous permet de détecter les problèmes avant qu'ils n'affectent vos utilisateurs.
Outils gratuits de surveillance Des outils tels que treo.sh vous permettent d'analyser les tendances en matière de performances sur 12 mois à l'aide de données d'utilisateurs réelles. Ces outils vous donnent une image claire de vos progrès et mettent en évidence les domaines à améliorer.
Outils premium pour des analyses approfondies Si vous vous intéressez sérieusement aux performances, envisagez d'investir dans des outils tels que RUMVision, SpeedCurve ou CoreDash. Ces plateformes fournissent :
- Des informations complètes sur les données vitales du Web au niveau de la page. - Des alertes en cas de baisse des performances, ce qui permet d'agir rapidement. - Visualisations et tableaux de bord robustes pour la surveillance quotidienne. - Identification précise des problèmes liés aux URL et aux éléments.
Ces outils ne se contentent pas d'améliorer les performances, ils peuvent avoir un impact direct sur vos résultats en améliorant l'expérience des utilisateurs, en augmentant l'engagement et, en fin de compte, en augmentant le chiffre d'affaires.
L'optimisation est un marathon, pas un sprint
Après avoir testé et mis en œuvre les changements, votre travail ne s'arrête pas là. L'optimisation des performances nécessite une attention permanente.
En utilisant les bons outils et en vous concentrant sur les expériences réelles des utilisateurs, vous pouvez créer un site web plus rapide et plus fluide qui apporte constamment de la valeur à votre public et stimule votre activité.
- Provenant de l'article rédigé en Anglais par @Sjardo-
Select a label to view existing ideas by category::
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.