Chez if/else agency, nous sommes convaincus que la vitesse de chargement d'un site web est essentielle pour offrir la meilleure expérience utilisateur possible. On nous demande souvent comment faire en sorte que le chargement des pages sur Hubspot soit le plus optimisé possible ? Dans cet article, nous vous partageons nos conseils pour optimiser la vitesse de chargement de vos pages HubSpot.
Optimiser vos modules
Les modules HubSpot sont très pratiques pour ajouter des fonctionnalités à vos pages, mais ils peuvent également ralentir la vitesse de chargement. Pour améliorer la vitesse de chargement de vos pages :
- Scopez le code de vos modules pour que chaque module fonctionne indépendamment et ne charge que son propre code.
- Utilisez des macros pour le code réutilisable. Par exemple, si vous utilisez des boutons dans plusieurs modules, une macro de bouton sera pertinente.
- Ne rendez modifiable que les éléments nécessaires.
N’utilisez que le code nécessaire dans vos templates
Les page HubSpot peuvent contenir tous types de modules et de développements, mais l’architecture du HTML peut vite impacter le temps de chargement de votre page. Pour améliorer la vitesse de chargement de vos pages :
- Utilisez des pages qui ne contiennent que le code réellement utilisé par vos modules.
- Supprimez les sections qui ne sont pas utilisées, ainsi que les librairies JS qui ne sont pas utilisées (Coucou jQuery).
- Rationalisez le nombre de modules par pages.
- Vérifiez que vous n’avez pas de sections cachées dans la page (dans l’éditeur HubSpot).
Utiliser des fichiers CSS et JavaScript optimisés
Les fichiers CSS et JavaScript peuvent être très lourds et ralentir la vitesse de chargement de vos pages. Pour améliorer la vitesse de chargement :
- Utilisez des fichiers qui ne contiennent que le code nécessaire au bon fonctionnement de vos modules.
- Utilisez Webpack pour minifier vos fichiers et ainsi ne charger dans HubSpot que des fichiers optimisés pour le web.
Optimiser vos images
Les images font souvent parties des principaux responsables du temps de chargement des pages. Il est pourtant super simple de les optimiser ! Voici nos conseils :
- Utilisez des outils de compression d'images tels que Squoosh pour optimiser la taille de vos images sans altérer leur qualité.
- Utilisez des formats d'images adaptés à vos besoins. Dans la mesure du possible, utilisez du WebP pour les images sur votre site. Ce nouveau format est plus léger que JPG ou PNG.
- Réduisez la taille de vos images en les redimensionnant avant de les télécharger sur HubSpot.
Comprendre et utiliser le chargement différé (Lazyload)
Les images en chargement différé sont chargées automatiquement lorsque l'utilisateur les voit. Cela signifie que les images ne sont pas chargées immédiatement, ce qui améliore la vitesse de chargement de vos pages.
Cependant, si vous utilisez du lazyload sur les images censées être visibles au-dessus de la ligne de flottaison, cela peut impacter votre score de performance.
Utilisez donc du chargement dit “eager” pour les images au-dessus de la ligne de flottaison et du chargement dit “lazy” pour le reste de vos images.
Charger les fichiers JavaScript à la volée
Vous entendrez souvent les termes “async” ou “”defer” dans le monde du développement. Chez if/else, on préfère charger les librairies externes à la volée. Disons par exemple que notre code utilise un carrousel qui utilise une librairie externe : Nous allons observer ce carrousel et lorsqu’il est visible dans la page charger la librairie puis le script lié à ce carrousel. De cette manière, le chargement de la page ne sera pas impacté.
Placer les scripts sous la ligne de flottaison
La solution la plus simple consiste à placer ces fichiers externes en bas de page, juste avant la balise </body>. La majeure partie du contenu peut alors se charger avant les scripts.
Éviter les lubies qui vont surcharger le code
On nous demande souvent de coder des modules plus farfelus les uns que les autres. Le problèmes avec ces modules, c’est qu’ils ont souvent un mauvais ratio entre plus-value et surchargement du code.
Parti d’une bonne intention, on va parfois vous demander de développer la lune pour ensuite s’étonner du temps de chargement du code.
N’hésitez tout simplement pas à dire non à ce genre de demande, ou alors dans le cas où vous n’avez pas le choix à prévenir que le score de performance en sera impacté.
Vous avez envie d’améliorer les performances et le temps de chargement de votre site web ? Réservez votre audit gratuit avec Garance en cliquant ici.
Crédit : Photo de Rodion Kutsaiev sur Unsplash
