Pourquoi accélérer le chargement des pages web ?
Google l’explique dans ses conseils aux webmasters : les pages web plus rapides attirent beaucoup plus de trafic.
En fait, Google a constaté que plus les pages se chargeaient lentement, plus les visiteurs cliquaient vers un autre site parce qu’ils se lassaient d’attendre l’affichage.
Ce serait dommage, après avoir fait beaucoup d’efforts pour figurer en tête de classement des résultats de recherche, que vos visiteurs n’attendent pas l’affichage de vos pages, non ?
Comment mesurer la vitesse de chargement d'une page web ?
Vitesse de chargement avec PageSpeed Insights
Google met gratuitement à notre disposition un outil en ligne appelé PageSpeed Insights. Cet outil va non seulement mesurer la vitesse de chargement d’une page, mais il va surtout vous révéler quels sont les facteurs qui en ralentissent le chargement et quelles solutions sont possibles pour corriger ces problèmes.
Voici ci-dessous une copie d’écran de la page d’accueil de mon site une fois analysée le 04/11/2022 par PageSpeed Insights pour sa version réservée aux écrans de PC :
Bon… Je ne suis pas peu fier d’avoir obtenu un score SEO de 100/100 😉 Mais en même temps, vu que c’est mon métier, faire moins aurait été mal perçu, non ?
Les performances sont à 97/100 ce qui indique que le temps de chargement est considéré comme optimal par Google.
L’accessibilité correspond à un ensemble de règles permettant aux personnes ayant un handicap de pouvoir consulter le site web sans difficultés.
Il ne vous reste plus qu’à tester vos propres URLs afin de voir si votre site web est correctement optimisé pour sa vitesse de chargement.
Vitesse de chargement avec GTMetrix
Pour ne pas vous limiter à l’outil de Google et tester comment votre site se charge sur un ordinateur situé hors de France, vous pouvez aussi utiliser GTMetrix pour mesurer la vitesse de chargement de votre site web.
Allez, on se fait plaisir : voici une copie d’écran du rapport fourni par GTMetrix suite à l’analyse le 04/11/2022 de la page d’accueil de mon site web :
En cohérence avec PageSpeed Insights, le site a la note A maximale.
Dans la zone intitulée “Visualisation rapide”, on voit que la page met 0,6 s à charger suffisamment de contenu pour un affichage sur écran mobile. L’élément le plus grand à charger sur cette page (une image bien entendu), met 2.1 s à se charger.
Je devrais donc chercher à optimiser cette image, par exemple en réduisant ses dimensions ou sa qualité d’affichage. Je vous explique plus bas comment faire…
Comment réduire le chargement d'une page web ?
Si votre site web est déjà construit, il va falloir passer en revue tous les éléments qui peuvent concourir à un ralentissement du chargement de ses pages.
Entendons-nous bien : il n’est pas question de supprimer du contenu de vos pages pour les rendre plus légères, mais de vérifier que tout a été fait correctement pour ne pas freiner leur affichage.
Voici une liste non exhaustive des causes de ralentissement du chargement de pages web :
- Votre site partage un hébergement mutualisé avec d’autres sites trop fréquentés
- Vos pages contiennent beaucoup de vidéos ou de grandes photos
- Votre site est conçu avec un CMS (exemple WordPress) qui fait appel à de nombreux plugins
- Vous n’avez pas optimisé les dimensions et le type de fichier de vos images
- Vous n’utilisez pas un format d’image récent (ex : Wepb)
- Vous n’avez pas mis en place de cache sur le serveur pour éviter de tout recharger à chaque fois
- Vous n’avez pas compressé vos fichiers JavaScript et vos feuilles de styles CSS
- Vous utilisez trop de polices de caractères exotiques
Comme vous le voyez, il existe de multiples causes pouvant expliquer pourquoi une page web se charge lentement. Si votre site web a été fait par un professionnel, celui-ci a normalement dû prendre en compte chacune de ces causes dès la phase de conception.
Tout ce qui concerne l’optimisation des images et des vidéos, la minification des fichiers Javascript et des CSS est du ressort d’un webdesigner. Pour le cache serveur (ou le CDN), il faut voir du côté du webmaster ou du prestataire qui gère l’hébergement de votre site.
Je vous propose ci-dessous 5 conseils pour optimiser le chargement de vos pages web :
Conseil 1 : optimiser le chargement de vos images
Plus une image est grande, plus elle son fichier est lourd et donc lent à se télécharger. Une image est composée de pixels. Si vous souhaitez afficher une image dans une zone de 800 pixels de largeur par 400 pixels de hauteur (on écrit 800×400), dans ce cas, créez votre image à ces dimensions.
Bien évidemment, ces dimensions devront être réduites pour un affichage sur un écran mobile. Oui, il va bien falloir créer une seconde image, plus petite, pour ce type d’écran. Certains outils, tels que WordPress, génèrent automatiquement ces versions adaptées.
Les images de type photo (comprenant beaucoup de détails ou de couleurs) sont généralement enregistrées au format JPG. Si votre image comporte peu de couleurs, ou si elle a besoin d’un fond transparent, alors privilégiez le format PNG.
Il existe maintenant un nouveau format, nettement plus léger que les deux précédents: le format WEPB, créé par Google (encore lui 😉 dans le but justement d’accélérer le temps de chargement d’une page comportant des images.
Le format d'image WEPB
Le format WEPB remplace à lui seul les anciens formats JPG, PNG et même GIF animé (devenu format propriétaire). Vous pouvez choisir de compresser votre image d’origine avec ou sans perte de pixels. Format miracle ?
Pas encore : le naviageur Safari ne reconnait pas ce type d’images et si vous utilisez WordPress, vous devrez installer un plugin spécifique pour télécharger une image au format WEBP (personnellement, j’utilise un plugin qui me convertit automatiquement chaque image JPG ou PNG chargée en son pendant WEBP).
Le gain de performance obtenu avec le format WEPB est de 50% pour une image JPG et d’un peu plus pour une image au format PNG. Autant dire que vous avez tout intérêt à convertir vos images !
Ce qui n’empêche pas qu’il faudra continuer à dimensionner correctement vos images au moment de leur création afin qu’elles ne soient pas artificiellement réduites lors de leur placement dans la page: inutile en effet de télécharger dans le navigateur une image de 800 pixels de côté si elle ne doit s’afficher que sur 400 pixels dans la page !
Optimiser le chargement des videos
Même compressée au format MP4, un fichier vidéo reste forcément lourd à télécharger. Evitez donc de le placer en haut d’une page et surtout de proposer plusieurs vidéos sur la même page web.
Astuce : Ne mettez qu’une image de votre vidéo sur la page web avec un lien permettant de lancer la vidéo depuis une url Youtube.
De cette façon, non seulement votre page sera allégée (puisque la vidéo ne sera pas automatiquement chargée à l’affichage de la page web), mais de plus vous aurez un contenu sur YouTube qui pourra lui aussi être référencé par Google (Google étant propriétaire de YouTube).
Conseil 2 : optimiser les styles CSS
Avant d’afficher une page web sur votre écran, votre navigateur va récupérer toutes les définitions de styles dans un ou plusieurs fichiers appelés “feuilles de styles CSS”. Si votre site est correctement construit, la mise en forme de son contenu rédactionnel est entièrement géré par ces feuilles de styles.
L’intérêt est de ne pas avoir à répéter quel style donner à un élément à chaque fois qu’il est utilisé (par exemple : vos titres principaux qui utilisent la balise HTML H1 s’affichent avec une police Arial de taille 32 px, de couleur bleue et en gras).
L’idéal est évidemment de placer dans un seul fichier CSS tous les styles qui sont utilisés sur toutes les pages de votre site web. Ce fichier ne sera chargé qu’une seule fois, puis il restera en cache mémoire afin d’être plus rapidement mis à disposition du navigateur.
Le souci est que les outils de type CMS (Content Management System) tels que WordPress ou Joomla, pour ne citer que les plus connus,, font appel à des programmes extérieurs (appelés plugins) qui ont souvent choisi d’avoir leur propre feuille de style.
Résultat : votre navigateur passe trop de temps à charger beaucoup de petites feuilles de styles et se retrouve parfois même avec des conflits entre styles et des priorités à gérer. Tout cela fait perdre du temps au chargement de votre page.
La solution ?
Dans l’idéal : réduire au maximum le nombre de feuilles de styles, ou encore ne charger que les feuilles de styles qui sont utiles à la page en cours d’affichage.
Si ce n’est pas possible : essayer de compresser ces fichiers (on dit aussi les “minifier”) à l’aide d’un plugin spécialisé dans cette tâche.
Conseil 3 : optimiser vos polices de caractères
Il est toujours tentant de personnaliser son site web en utilisant de belles polices de caractères. Il ne faut pas oublier que chaque caractère est un petit dessin (1 pour la majuscule, 1 pour la minuscule) placé dans un fichier.
Votre navigateur reconnait par défaut les polices de caractères (“fonts” en anglais) stockés sur votre ordinateur, mais doit télécharger celles qui n’y figurent pas.
Google Fonts propose ainsi toute une liste de polices de caractères très pratiques à utiliser (et gratuites). Le problème est qu’à chaque fois qu’une page va utiliser une police, le navigateur devra aller rechercher le fichier correspondant.
Pour améliorer une page web, tant d’un point de vue esthétique que pour sa vitesse de chargement, il est donc important de limiter le nombre de polices utilisées et de parvenir à mettre en cache les fichiers de polices correspondant.
D’un point de vue esthétique, avoir trop de polices de caractères sur un site web est de toute façon une mauvaise idée.
Je vous suggère d’utiliser une police à empattement (les petits traits qui terminent les caractères, aussi appelées Polices avec Serif) telles que Times New Roman, Garamond ou Georgia pour les paragraphes de vos textes et des polices sans empattement (Sans Serif) pour vos titres.
Polices de caractères communes aux navigateurs web
Pour optimiser au maximum vos temps de téléchargement, le plus simple reste de privilégier les polices de caractères qui sont en standard sur les navigateurs PC et Mac, à savoir :
- Arial.
- Arial Black.
- Comic Sans MS.
- Courier New.
- Georgia.
- Impact.
- Times New Roman
- Trebuchet MS
- Verdana
- Sans-serif
- Serif
Astuce : si vous souhaitez créer exceptionnellement un titre aux caractères très graphiques, utilisez votre logiciel de traitement d’image, choisissez la police exotique, créez le titre et transformez-le en une image optimisée au format WEPB. Cela vous évitera de provoquer le téléchargement d’un fichier de polices peu utilisé ensuite.
Conseil 4 : optimiser le First Contentful Paint
Le First Contenful Paint (FCP) est le temps de téléchargement nécessaire pour afficher le premier contenu visible à l’internaute.
Quand vous cliquez sur un lien, vous interrogez un serveur distant qui stocke la page reliée à ce lien. Comme dans un bar de la vie réelle, le serveur doit alors préparer et réunir tous les ingrédients nécessaires à la réalisation de la boisson commandée avant de la mettre sur un plateau pour vous l’apporter.
Pour un contenu web, ces ingrédients sont les fichiers CSS, les fichiers Javascript, les fichiers de polices de caractères, etc.
Si vous regardez le code source d’une page HTML, tout cela est déclaré entres les balises <HEAD> et </HEAD> de la page.
Dans un CMS tel que WordPress, la partie <HEAD> est souvent un véritable fourre-tout car chaque plugin rajouté au logiciel de base est venu placer sa propre feuille de style, ses programmes Javascript et parfois même ses propres polices de caractères. Il faut donc faire le ménage, essayer de charger le moins possible cette zone ou mettre en cache les fichiers qui seront réutilisés à chaque page.
Si vous utilisez un CMS, c’est à l’aide d’un plugin spécialisé que vous pourrez y parvenir. Si vous avez tout développé par programmation, il faudra alors intervenir dans votre code pour améliorer ces chargements.
C’est en partie pour cela que beaucoup de grosses entreprises présentes sur Internet finissent par abandonner les CMS, trop gourmand en ressources, pour revenir à du développement spécifique afin d’accélérer le contenu de leurs pages.
A noter que pour l’affichage sur mobiles, Google a même sorti un format spécifique, le format AMP, qui permet justement de limiter au maximum le chargement de composants, quitte à simplifier la mise en page sur écran mobile. (Pour en savoir plus, merci de voir mon lexique SEO sur le format AMP).
Conseil 5 : accélérer le chargement des pages web avec un cache serveur
Un cache permet de mettre en mémoire des fichiers qui sont souvent utilisés sans modification préalable, comme par exemple les feuilles de style. Ainsi, à chaque fois qu’une page web s’affiche, le fichier de styles, déjà chargé par le navigateur, n’a pas besoin d’être téléchargé de nouveau.
Le plus efficace est de placer ce cache sur le serveur qui contient tous les fichiers composant les pages d’un site web (images, styles, Javascript, etc). Si vous avez opté pour un hébergement chez un prestataire, voyez si celui-ci vous propose ce système de cache.
Personnellement, j’utilise le fournisseur d’hébergement Gandi.net, très efficace, qui propose en standard un cache serveur appelé Varnish.
Utiliser un CDN (réseau de serveurs)
Pour accélérer encore un peu plus le temps de chargement de vos pages web, vous pouvez mettre la totalité de votre site web dans un cache, lequel sera capable de savoir si une page a subi une modification, même minime, avant de l’appeler et si rien n’a changé, de servir la page mise en cache sans avoir à interroger d’autres serveur plus lointains.
En effet, quand vous cliquez sur un lien pour appeler un téléchargement de page web, votre demande peut aller se balader dans le monde sur plusieurs serveurs avant d’atteindre celui qui possède la page.
Le CDN garde en cache vos pages dans un serveur géographiquement proche de la personne ayant fait la demande.
Faites l’essai en testant votre page d’accueil avec PageSpeed Insights avant et après avoir activé Cloudflare : la différence de vitesse de chargement est impressionnante.
Cet article vous plaît ?
Merci de le partager dans vos réseaux :
