Tout vient à point à qui sait attendre, sauf sur internet. En matière de pages vues, de satisfaction client et de taux de conversion, une seule seconde peut faire la différence. 

Suivez la formation SEO gratuitement sur HubSpot Academy

En outre, la vitesse de chargement d'un site web a un impact sur sa position dans les recherches naturelles, car l'algorithme de Google tient compte de ce paramètre depuis 2010. 

Quel est le facteur décisif en matière de vitesse de chargement ?

La taille des fichiers est primordiale. Un navigateur prend un certain temps à télécharger les éléments d'une page web : code HTML, feuilles de style, scripts et images. Le temps de chargement augmente avec la quantité de données.

Les attentes des internautes étant de plus en plus élevées, les pages web ont tendance à prendre du poids. Chaque nouvelle fonctionnalité cache un script ou une feuille de style, qui alourdit le site web.

Comment évaluer la vitesse d'un site web ?

Plusieurs outils permettent d'analyser la vitesse d'un site web avec fiabilité. PageSpeed Insights de Google, Website Grader et DareBoost sont les plus populaires. Ces services analysent les performances du site et identifient ses points faibles.

À première vue, les résultats peuvent paraître alarmants, mais dans la majorité des cas, de simples ajustements suffisent. Rien ne vous oblige à appliquer l'ensemble des recommandations, mais plus l'expérience des visiteurs est optimisée, plus votre site sera performant. 

Comment accélérer le chargement de votre site web ?

Certains CMS récents, comme celui de HubSpot, disposent de fonctionnalités d'accélération intégrées, mais les systèmes comme Wordpress exigent de mettre la main à la pâte. 

Voici donc les réflexes essentiels que chaque webmaster devrait songer à adopter :

1 - Optimiser les images

Les images sont particulièrement gourmandes en bande passante. Pour les optimiser, commencez par les redimensionner.

De nombreux webmasters se contentent de définir la taille d'affichage des images dans les déclarations CSS, imposant au navigateur de télécharger l'image originale. Ainsi, si une image mesurant 1 000 x 1 000 pixels est affichée au format 100 x 100 pixels, le navigateur est contraint de télécharger une image dix fois plus lourde que nécessaire. 

Pour économiser la bande passante des visiteurs, redimensionnez les images avant de les charger sur votre site web. Notez la différence de taille entre ces deux fichiers suite au redimensionnement de l'image :

vitesse_bande_passante

Une autre manière d'optimiser les images consiste à les compresser. Plusieurs outils gratuits, comme tinypng.com, permettent de réduire la taille d'un fichier en préservant une qualité acceptable, pour un taux de compression allant de 25 à 80 %. Si vous utilisez le système d'optimisation de contenu (COS) de HubSpot, les images seront compressées automatiquement pour améliorer la vitesse et la performance de votre site web. 

2 - Utiliser la mise en cache

Pourquoi imposer aux visiteurs de télécharger les mêmes images à chaque chargement de la page ? La durée de stockage dépend à la fois des paramètres du navigateur et de ceux de votre serveur.

Activer la mise en cache du navigateur autorise le stockage temporaire de données sur l'ordinateur du visiteur, dans le but de réduire le temps de chargement lors de sa prochaine visite.

3 - Activer la compression

Activer la compression équivaut à archiver votre site web dans un dossier .zip. Cette fonctionnalité permet de réduire significativement la taille d'une page web, et donc d'accélérer son chargement.

Le taux de compression des fichiers HTML et CSS peut atteindre 50 à 70 %, autant de données en moins à télécharger pour le visiteur. La compression doit être paramétrée sur le serveur, et dépend donc de votre hébergeur. 

4 - Optimiser les fichiers CSS

Les déclarations CSS sont chargées avant l'affichage d'une page. Plus leur téléchargement est long, plus les visiteurs attendent. Optimiser les fichiers CSS permet donc un accès plus rapide à vos pages.

Ce type de détail a vite fait de s'accumuler et de parasiter les performances d'un site web. Examinez donc vos feuilles de style CSS pour supprimer les déclarations superflues, puis une fois les déclarations inutiles supprimées, réduisez la taille des fichiers CSS. Cette opération consiste à éliminer les espaces superflus afin d'alléger le fichier au maximum.

Comment procéder ? Vérifiez d'abord si votre CMS dispose d'une fonctionnalité d'optimisation CSS, et si celle-ci est activée. Par défaut, HubSpot optimise les fichiers CSS, mais ce n'est pas le cas de Wordpress.

Si votre CMS ne propose pas cette option, vous pouvez opter pour un service en ligne gratuit comme csscompressor.com. Il suffit de copier et coller les déclarations CSS dans l'outil, puis de cliquer sur Compresser pour obtenir une feuille de style optimisée.

5 - Placer les scripts sous la ligne de flottaison

Sur de nombreux sites, les scripts se trouvent en haut de page, obligeant les visiteurs à patienter. La solution la plus simple consiste à placer les fichiers JavaScript externes en bas de page, juste avant la balise. Vous autorisez ainsi une grande partie du contenu à se charger avant les scripts.

Une autre manière de contrôler le chargement des scripts consiste à associer des attributs defer ou async aux fichiers .js intégrés à votre site web.

Ces balises ont chacune leur utilité, qu'il est important de bien distinguer.

  • Les balises async autorisent le chargement simultané de la page et des scripts, mais ces derniers sont chargés dans le désordre. En règle générale, les fichiers les plus légers sont chargés en premier. Pour certains scripts, cette option peut s'avérer désastreuse.
  • L'attribut defer repousse le chargement des scripts jusqu'à ce que l'intégralité du contenu ait été chargée. Les scripts sont ensuite chargés dans l'ordre. Vérifiez simplement que ce chargement différé n'entrave pas le fonctionnement de la page.

Pour utiliser ces attributs, il suffit de les ajouter aux balises de la manière suivante :
<script type=”text/javascript” src=”/path/filename.js” defer></script>
<script type=”text/javascript” src=”/path/filename.js” async></script>

Choisissez un attribut en fonction de l'importance relative de chaque script. L'attribut async convient aux scripts prioritaires, qui doivent être chargés rapidement sans gêner l'accès au contenu. Le chargement des scripts secondaires peut être différé afin d'accélérer l'affichage de la page. Veillez néanmoins à tester chacun des scripts pour éviter tout dysfonctionnement.

Les pages web se développent proportionnellement aux attentes des internautes : les fichiers JavaScript, les déclarations CSS et les outils d'analytics tiers se complexifient et alourdissent les sites web. Les marketeurs n'ont pourtant aucune raison de s'alarmer : quelques réflexes simples suffisent à optimiser la vitesse de chargement, et donc à éviter que vos leads ne fassent demi-tour en arrivant sur votre site web.

Maintenant que vous avez toutes les techniques en main pour améliorer la vitesse de chargement de votre site web, découvrez d'autres techniques d'optimisation SEO sur HubSpot Academy

Formation SEO

Publication originale le 26 juillet 2017, mise à jour le 11 septembre 2019

Sujet(s):

Performance web