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 : trouver l’équilibre entre qualité et performance
Lorsqu’il s’agit d’images, tout est une question d’équilibre entre qualité visuelle et performance. Une image trop lourde ralentira votre site, tandis qu’une image trop compressée nuira à l’expérience utilisateur.
La première règle est d’adapter les dimensions de vos images à leur affichage réel. Inutile, par exemple, d’utiliser une image en 2000 × 2000 pixels si elle n’est affichée qu’en 180 × 180 pixels. À l’inverse, évitez également de réduire excessivement vos images : sur les grands écrans, elles seraient agrandies et donc pixelisées.
Pensez aussi à bien nommer vos fichiers : utilisez uniquement des caractères simples (sans accents, espaces ou caractères spéciaux) afin d’éviter tout problème technique et d’optimiser le référencement.
Les formats à privilégier
- SVG : idéal pour les petites images comme les icônes, pictogrammes, drapeaux ou logos. Ce format est très léger et ne perd jamais en qualité, quelle que soit la taille d’affichage.
- WebP : à privilégier pour la majorité des images. Il offre un excellent compromis entre qualité et compression.
- PNG : à utiliser uniquement si vous avez besoin de transparence. Ce format est plus lourd et doit rester exceptionnel.
Dans tous les cas, essayez de limiter le poids de vos images :
- Idéalement entre 80 et 100 Ko maximum par image
- Les images de fond peuvent éventuellement être un peu plus lourdes, mais cela doit rester exceptionnel
Outils recommandés
Il existe des outils très simples pour convertir vos images en WebP et les optimiser en quelques clics, n’hésitez pas à les utiliser pour améliorer les performances de votre site sans effort. Chez if/else agency on aime bien Squoosh mais il y en a plein d'autres ! D'ailleurs, on s'en servait tellement que notre équipe de développeurs a développé son propre outil d'optimisation d'images, le but est simple : optimiser les images en lot pour aller plus vite !
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
.webp)
