5 petits conseils pour réduire la durée de chargement de vos pages web

Vos Pages Web prennent une éternité à se charger ? Pourquoi…

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 pageweb ont tendance à prendre du poids. Chaque nouvelle fonctionnalité cache un script ou une feuille de style, qui alourdit le site web.

Testez la vitesse d’une page 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.

Accélérer le chargement de vos pages web ?

Certains CMS récents, 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.

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 %.

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.

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.

Conclusion

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.

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.

Résumé

Vous pensez que la vitesse de vos Pages web n’a pas d’importance ? Réfléchissez encore. C’est un facteur important dans la gestion d’un site Web, elle est l’élément clé pour les conversions, la satisfaction de la clientèle et les classements de recherche. Même une seconde peut faire une énorme différence.

Que ça soit l’optimisation des images, l’activation de la compression, l’utilisation de la mise en cache, l’optimisation des fichiers CSS ou bien le placement des scripts sous la ligne de flottaison ou n’importe quelle autre solution technique. Il est clair que l’accélération de vos Pages web est essentielle, non seulement pour bien vous classer avec Google, mais aussi pour maintenir vos bénéfices nets à un niveau élevé.

Rappelez-vous que le temps de chargement des pages accélère non seulement la satisfaction des utilisateurs, mais réduit également le taux de rebond et améliore le nombre de conversions.

Vos Pages Web mettent du temps à se charger ? 5 étapes à suivre alors et ça ne sera plus le cas !

Commentaires

commentaires