On vous en parle régulièrement, vous commencez à être au courant, la vitesse de chargement d’une page est primordiale pour l’expérience utilisateur et le référencement naturel, mais aussi indirectement pour les conversions. Pour être plus précis, le temps de chargement aura un impact sur ces différents facteurs :
Combien de temps vos visiteurs restent sur votre site.
Combien d’entre eux convertissent.
Combien vous payez au coût par clic sur vos campagnes de référencement payant.
Où vous vous positionnez dans les résultats de recherches organiques.
Ce qu’on appelle le Page Speed n’est pourtant pas une science exacte. On parle en général de 3 secondes de chargement maximum pour commencer à afficher la page, bien qu’il n’y ait pas de temps de chargement optimal selon Martin Splitt de Google :
En gros, nous classons les pages plus ou moins comme « vraiment bonnes » ou « assez mauvaises ». Il n’y a pas vraiment de paliers entre les deux.
Mais comment arriver à avoir un site aux pages « vraiment bonnes » ? Voici 9 conseils pour améliorer la rapidité de chargement de vos pages.
1- Utiliser un bon hébergeur
Vous pourrez effectuer tous les efforts pour améliorer le chargement de vos pages, si vous n’avez pas un service d’hébergement suffisamment performant cela ne suffira pas. Même si la différence de temps de chargement peut paraître minime, ces quelques secondes — parfois millisecondes, peuvent faire la différence pour vos visiteurs.
Selon une étude d’Amazon, une différence de 100ms suffit à réduire les ventes de 1%. Sachant que 100 ms est une unité de temps que l’humain ne peut même pas percevoir, imaginez ce que cela peut donner si on parle en seconde…
>> Lire aussi notre article « Hébergement web : impact sur la vitesse de chargement de vos pages«
En fonction de votre site vous pouvez trouver des solutions d’hébergement adaptées à la solution que vous utilisez. Il existe par exemple des offres d’hébergement optimisées pour un site WordPress ou pour une solution e-commerce. Ne vous fiez pas simplement au prix, prenez le temps de comparer les offres et de vous renseigner auprès de votre entourage professionnel, cela peut faire de grandes différences.
2- Réduire les appels HTTP
Peu importe ce que vous avez utilisé pour créer votre site, vous utilisez fort probablement des thèmes, des extensions, librairies ou autres qui utilisent des ressources externes : fichiers Javascript, feuilles de style CSS, polices… Le chargement de ces ressources peut grandement ralentir le chargement de votre page.
Voici ce qu’il faut faire :
Réunissez les fichiers Javascript dans un seul fichier.
Réunissez les fichiers CSS dans un seul.
Réduisez ou éliminez les extensions qui chargent leurs propres fichiers Javascript et CSS. Il est parfois possible de le désactiver directement depuis les réglages de l’extension.
Utilisez des sprites pour des images fréquemment utilisés (comme pour la navigation ou le footer).
Utilisez des polices comme FontAwesome ou les icônes de Ionic au lieu de fichiers d’images dès que possible. Ces solutions ne nécessitent qu’un fichier pour charger toutes les images.
3- Inclure le slash en fin d’URL
Cela peut paraître futile et incompréhensible, mais créer des liens internes ou backlinks vers votre site sans le slash en fin d’URL peut avoir un impact négatif sur la vitesse de chargement.
Mais comment un simple slash peut-il avoir une telle importance ? Sans cette barre oblique à la fin d’une URL, le serveur web va chercher un fichier qui a ce nom. S’il n’y a pas de fichier, il va le considérer comme un dossier et chercher le fichier par défaut dans ce dossier.
Plus simplement, en oubliant ce slash vous forcez le serveur à exécuter une redirection 301 inutile. Même si cela peut paraître instantané, cela peut prendre à terme plus de temps et comme nous l’avons vu plus tôt chaque temps perdu compte.
Pour résumer :
https://exemple.fr 🙁
https://exemple.fr/categorie 🙁
https://exemple.fr/ 🙂
https://exemple.fr/categorie/ 🙂
4- Autoriser la compression
La compression GZIP peut réduire de façon significative le temps nécessaire à télécharger votre HTML, CSS, Javascript, car ces ressources sont téléchargées dans fichier compressés beaucoup plus petits. Ils sont décompressés seulement au niveau du navigateur, et tous les navigateurs modernes le prennent en charge.
5- Autoriser la mise en cache navigateur
En autorisant la mise en cache navigateur, vous permettez aux éléments de votre site d’être conservés dans le navigateur de vos visiteurs. Ainsi, quand ils visitent de nouveau votre site, ou quand ils consultent une autre page, le navigateur peut charger la page sans avoir à envoyer une requête HTTP au serveur, pour n’importe quel élément mis en cache.
Cela peut réduire drastiquement le nombre de fichiers téléchargés durant une session, limitant le téléchargement aux nouveaux éléments non mis en cache.
6- Minifier les ressources
Minifier les fichiers CSS et Javascript consiste à retirer les espaces blancs, sauts de ligne, commentaires et délimiteurs inutiles du code, alourdissant la taille du fichier sans raison. Heureusement, ce n’est pas un procédé manuel, de nombreux outils permettent d’alléger ces fichiers, dont certains plugins pour CMS (WordPress en particulier).
Il est aussi possible de minifier les fichiers HTML. Dans tous les cas, pensez à bien régler ces outils pour ne pas casser votre code, et vérifier le fonctionnement de la minification avec des outils comme GTMetrix ou PageSpeed Insights.
>> Consultez aussi notre infographie sur l’optimisation de la vitesse de chargement
7- Prioriser le contenu au-dessus de la ligne de flottaison
En priorisant le chargement de la partie visible de votre site, soit celle au-dessus de la ligne de flottaison, vous pouvez permettre de gagner en rapidité de chargement. Cela veut dire qu’il faut que tous ces élements visibles soient au plus haut dans votre code HTML.
Il est également fortement déconseillé de rajouter votre CSS ou Javascript directement dans le code (inline), il vaut mieux externaliser ces ressources dans des fichiers.
8- Optimiser les fichiers médias
Sachant que les appareils mobiles avec des capteurs photo/vidéo de haute-qualité sont communs, et qu’il est de plus en plus facile d’uploader des images lourdes, beaucoup de personnes téléchargent des photos ou vidéos depuis leur téléphone sans réaliser qu’elles sont bien plus lourdes que nécessaire.
Cela ralentit énormément votre site, surtout pour les utilisateurs sur mobile.
Voici quelques conseils pour optimiser vos images :
Choisissez le bon format d’image :
JPEG est parfait pour les photos.
GIF ou PNG pour les images avec de larges zones de couleur unie.
PNG 8-bit pour les images sans transparence (canal alpha).
PNG 24-bit pour les images avec transparence.
Assurez-vous que le fichier soit directement à la bonne taille. Si une image est affichée à 800 pixels de large, il n’y a aucun intérêt à utiliser une image de 1600 px.
Compressez l’image. Il existe de nombreux outils pour compresser les images, Adobe Photoshop étant le plus évident mais il existe aussi des extensions de CMS pour compresser automatiquement les images uploadées – comme TinyJPG pour WordPress.
Mais aussi vos vidéos :
Choisissez le bon format vidéo. MP4 est recommandé dans la plupart des cas, car les fichiers sont les plus légers et la qualité d’image suffisante pour le web.
Proposez les dimensions adaptées à l’écran de vos visiteurs.
Supprimez la piste audio si la vidéo est lue en arrière-plan d’un site, comme élément de votre webdesign.
Compressez le fichier vidéo, avec Adobe Premiere, Camtasia ou le logiciel que vous utilisez pour le montage et l’export vidéo.
Enlevez les passages inutiles pour réduire la longueur de la vidéo.
Uploadez la vidéo sur une plateforme comme YouTube ou Vimeo et ajoutez l’iframe à votre site au lieu d’ajouter la vidéo localement. C’est recommandé dans de nombreux cas mais c’est à réfléchir selon vos besoins, la façon dont vous voulez l’intégrer ou non à votre habillage.
Ces conseils sont les fondamentaux, mais ils ne suffisent plus en 2019. Il faut proposer le média en fonction de l’appareil et être le plus responsive possible. Voici deux autres axes à considérer :
Utiliser les src set, permettant de toujours proposer une image adaptée à la taille de l’écran du visiteur. Le navigateur ne chargera que l’image correspondante.
Utiliser le CSS pour intégrer les images, avec la propriété background-image et les media queries. De la même façon, la bonne image sera affichée en fonction des dimensions de l’écran.
9- Utiliser la mise en cache serveur et les CDN
La mise en cache serveur permet à votre serveur de conserveur une copie statique de vos pages web afin de les afficher plus rapidement sur le navigateur de votre visiteur.
Le CDN permet de « distribuer » ces copies à des serveurs partout dans le monde, pour que le navigateur télécharge le fichier depuis le serveur le plus proche du visiteur. Cela accélère très efficacement le chargement. Un CDN peut être utilisé aussi pour les ressources externes, type CSS ou Javascript.
Ces quelques bonnes pratiques sont pour la plupart connues, mais elles ne sont pas toujours appliquées alors qu’elles peuvent avoir un impact important sur la performance de votre site. Elles demandent pour la plupart un minimum de connaissances techniques, même si de nombreux outils existant vous aideront à les mettre en place. Dans le doute, privilégiez toujours au minimum un accompagnement de professionnels, comme pour l’hébergement web.
N’oubliez pas de contrôler la vitesse de chargement de votre site avec en priorité l’outil PageSpeed Insights de Google, disponible depuis peu dans les rapports de la Google Search Console.
Source : searchenginejournal.com – Jeremy Knauff