Comment réduire le temps de chargement de votre site web

Lancez un test de vitesse sur votre site web : les résultats vous donnent un score, une liste de recommandations et presque aucune indication sur par où commencer. Savoir comment accélérer un site web, c'est comprendre quelles améliorations agissent sur quelles parties de la séquence de chargement et lesquelles donnent les meilleurs résultats pour l'effort investi. Cet article présente les changements les plus efficaces, l'ordre dans lequel les aborder et ce qu'un site de petite entreprise peut attendre de chaque amélioration.

La vitesse d'un site web ne s'améliore pas avec une seule correction. Elle résulte de plusieurs facteurs indépendants qui jouent ensemble : le poids de la page, la rapidité de réponse du serveur, l'efficacité de la livraison des ressources et la quantité de travail que le navigateur doit fournir pour afficher ce que voit le visiteur. S'attaquer d'abord aux plus gros facteurs donne les gains les plus rapides. Pour comprendre quels indicateurs de chargement comptent et pourquoi, lisez l'article sur ce qu'est le temps de chargement d'une page et comment on le mesure.

Quelles sont les causes les plus courantes de temps de chargement lents ?

Avant de faire des changements, il est utile de comprendre où le temps se perd réellement. Les sites lents ont presque toujours un ou plusieurs de ces points communs.

Des images non optimisées

• Les images sont les fichiers les plus lourds de la plupart des pages et la cause la plus courante de chargements lents
• Une page avec cinq photographies non compressées peut peser de dix à vingt fois plus que nécessaire
• Corriger les images donne en général la plus grande amélioration de vitesse de tous les changements pris isolément

Aucune mise en cache

• Sans cache, chaque visite oblige le serveur à reconstruire la page et le navigateur à télécharger chaque fichier de zéro
• Le cache permet aux visiteurs qui reviennent de charger les pages depuis des copies enregistrées au lieu de tout retélécharger

Des fichiers de code non minifiés

• Les fichiers CSS et JavaScript contiennent souvent des espaces, des commentaires et une mise en forme qui les rendent lisibles pour les développeurs mais ajoutent un poids inutile pour les navigateurs
• La minification retire ce contenu superflu et réduit la taille des fichiers, parfois de 30 à 50 pour cent

Une réponse lente du serveur

• Tout attend le serveur. S'il met plus de 800 millisecondes à répondre, tous les autres indicateurs sont retardés dès le départ
• Les hébergements mutualisés et les bases de données non optimisées sont les causes les plus courantes d'un Time to First Byte élevé

Des ressources qui bloquent l'affichage

• Les scripts et feuilles de style chargés dans l'en-tête du document mettent le navigateur en pause avant qu'il puisse rien afficher
• Charger les scripts non critiques après le contenu principal supprime ce goulot d'étranglement

Comment optimiser les images pour réduire le poids de la page ?

L'optimisation des images est la correction qui a le plus d'impact sur la plupart des sites web, car elle réduit directement les fichiers les plus lourds de la page. Trois changements ensemble produisent la réduction la plus importante de la taille des images.

Choisir le bon format

• Le WebP produit des fichiers plus petits que le JPEG à qualité visuelle égale et gère la transparence comme le PNG
• Passez au WebP pour toutes les photographies et les graphiques courants. N'utilisez le PNG que lorsque la transparence est nécessaire

Redimensionner avant de téléverser

• Téléverser une image de 4 000 pixels de large pour l'afficher à 800 pixels de large oblige chaque visiteur à télécharger quatre fois plus de données que nécessaire
• Redimensionnez les images à leur largeur d'affichage maximale avant de les téléverser

Compresser à un niveau de qualité adapté

• Un réglage de qualité de 75 à 85 sur les formats avec perte produit des fichiers de 60 à 80 pour cent plus petits que l'original, sans différence de qualité visible pour la plupart des photographies
• La combinaison du bon format, de la bonne taille et d'une compression adaptée peut réduire de 80 à 90 pour cent le poids des images d'une page

Pour un guide complet sur les formats de fichier, les types de compression, le chargement différé et les images adaptatives, lisez l'article sur comment optimiser les images pour un chargement plus rapide.

Comment le cache réduit-il le temps de chargement ?

Le cache enregistre des copies des ressources de la page pour qu'elles n'aient pas à être téléchargées ni régénérées à chaque requête. Il existe deux types, qui agissent à des points différents de la chaîne de livraison.

Le cache du navigateur

• Le navigateur du visiteur enregistre les CSS, JavaScript, images et polices après la première visite
• Les visites suivantes chargent ces fichiers depuis l'appareil local au lieu de les télécharger à nouveau, ce qui réduit considérablement le temps de chargement pour les visiteurs récurrents
• Le cache du navigateur est contrôlé par des en-têtes de cache définis sur le serveur. La plupart des plateformes d'hébergement modernes les définissent automatiquement

Le cache du serveur

• Le serveur enregistre des versions de pages déjà générées pour ne pas avoir à les reconstruire de zéro à chaque requête
• Cela accélère le Time to First Byte pour tous les visiteurs, y compris ceux qui viennent pour la première fois
• Le cache du serveur est le plus utile sur les sites dynamiques dont les pages sont générées à partir de requêtes de base de données

Pour une explication détaillée du fonctionnement du cache du navigateur et de sa configuration, lisez l'article sur ce qu'est le cache du navigateur et comment il fonctionne.

Que fait la minification pour la vitesse de chargement ?

Les fichiers CSS et JavaScript écrits par des développeurs contiennent des espaces, des sauts de ligne et des commentaires qui rendent le code plus facile à lire et à maintenir. Les navigateurs n'en ont pas besoin. La minification les retire et produit des fichiers plus petits, qui se téléchargent plus vite sans changer leur fonctionnement.

• La minification du CSS réduit généralement la taille des fichiers de 20 à 30 pour cent
• La minification du JavaScript peut réduire la taille des fichiers de 30 à 50 pour cent, davantage pour les gros fichiers très commentés et riches en espaces
• La minification est l'un des gains les plus faciles : elle ne change ni l'apparence ni le fonctionnement du site et peut souvent être activée par une extension ou un réglage de la plateforme

Pour le détail du fonctionnement de la minification sur le CSS, le JavaScript et le HTML, lisez l'article sur ce qu'est la minification et comment elle aide votre site web.

Comment un CDN réduit-il le temps de chargement pour les visiteurs ?

Un réseau de diffusion de contenu (CDN) réduit la distance physique entre le visiteur et le serveur qui livre vos fichiers. Sans CDN, tous les visiteurs se connectent à un seul serveur situé à un seul endroit. Avec un CDN, chaque visiteur est servi depuis le serveur le plus proche de lui.

• Pour les visiteurs proches du serveur d'origine, le gain de vitesse d'un CDN est modeste
• Pour les visiteurs d'autres pays ou régions, un CDN peut réduire le Time to First Byte de centaines de millisecondes
• Les CDN sont les plus utiles sur les sites à public international ou riches en médias
• Certaines plateformes d'hébergement incluent automatiquement la diffusion par CDN. Quand elle est incluse, aucune configuration supplémentaire n'est nécessaire

Pour une explication complète du fonctionnement des CDN et de ceux qui en ont besoin, lisez l'article sur ce qu'est un CDN et comment il aide votre site web.

Qu'est-ce que le chargement différé et comment réduit-il le temps de chargement initial ?

Le chargement différé (lazy loading) retarde le téléchargement des images et des autres ressources situées sous la ligne de flottaison jusqu'à ce que le visiteur fasse défiler la page près d'elles. Cela réduit la quantité de données que le navigateur doit télécharger avant que la page devienne utilisable.

• Sur une page de vingt images, le chargement différé signifie que le navigateur ne télécharge que les trois ou quatre images visibles à l'écran à l'ouverture de la page
• Les autres images se chargent quand le visiteur fait défiler, ce qui répartit le téléchargement dans le temps au lieu de le concentrer au début
• Le chargement différé améliore directement le Time to Interactive et peut avoir un effet notable sur le Largest Contentful Paint quand le contenu visible sans défiler n'est pas riche en images
• N'appliquez pas le chargement différé aux images visibles sans défiler. Celles-ci doivent se charger immédiatement

Pour un guide complet sur le fonctionnement du chargement différé et sa mise en place, lisez l'article sur ce qu'est le chargement différé et comment il fonctionne.

Comment les ressources qui bloquent l'affichage ralentissent-elles une page ?

Quand un navigateur rencontre un script ou une feuille de style dans l'en-tête du document, il interrompt l'affichage jusqu'à ce que ce fichier ait fini de se charger. Le visiteur ne voit rien pendant ce temps. C'est ce qu'on appelle une ressource bloquant l'affichage.

Comment réduire le blocage de l'affichage

• Déplacez le JavaScript non critique à la fin du document ou utilisez l'attribut defer ou async pour que les scripts n'interrompent pas l'affichage
• Identifiez quel CSS est nécessaire immédiatement (styles du contenu visible sans défiler) et lequel peut se charger plus tard
• Supprimez ou remplacez les scripts tiers qui ne sont pas essentiels. Les widgets de chat, les contenus de réseaux sociaux intégrés et les scripts de suivi ajoutent tous du temps de blocage

Et le temps de réponse du serveur ?

Toute autre amélioration est limitée par la rapidité de réponse du serveur au départ. Un serveur lent ajoute un délai avant que le navigateur puisse commencer à charger la moindre ressource.

Ce qui influence le temps de réponse du serveur

• La qualité de l'hébergement : les hébergements mutualisés répartissent le processeur et la mémoire entre de nombreux sites, ce qui donne des temps de réponse imprévisibles
• Les performances de la base de données : des requêtes lentes ou non optimisées retardent la capacité du serveur à générer une réponse
• Le cache côté serveur : sans cache, chaque requête déclenche une reconstruction complète de la page depuis la base de données
• La distance géographique au serveur : même sans CDN, un serveur éloigné du visiteur ajoute de la latence

Un bon Time to First Byte est inférieur à 800 millisecondes. Si votre TTFB reste constamment au-dessus, améliorer l'hébergement ou mettre en place un cache côté serveur apportera des gains qu'aucune optimisation côté visiteur ne peut égaler.

Par où commencer pour accélérer un site web ?

Si vous travaillez sur la vitesse pour la première fois, cet ordre donne les gains les plus rapides pour le moins d'effort sur un site de petite entreprise typique.

Ordre de priorité pour la plupart des sites web

• D'abord : optimiser les images. Elles sont la première source de poids de page et sont souvent responsables de 60 à 80 pour cent du temps de chargement évitable
• Ensuite : activer le cache. Le cache du navigateur et celui du serveur réduisent le travail effectué à chaque visite, surtout pour les visiteurs qui reviennent
• Troisièmement : minifier le CSS et le JavaScript. Moins d'effort, amélioration fiable des temps de transfert des fichiers
• Quatrièmement : ajouter un CDN si votre public est réparti géographiquement ou si la diffusion de médias représente une part importante de votre site
• Cinquièmement : traiter les ressources qui bloquent l'affichage et le temps de réponse du serveur si les étapes précédentes sont faites et que les scores restent mauvais

Après chaque série de changements, lancez un test de vitesse pour mesurer l'amélioration avant de passer au domaine suivant. Pour savoir comment interpréter correctement les résultats d'un test de vitesse, lisez l'article sur comment tester la vitesse de votre site web. Pour le détail des indicateurs sur lesquels agissent ces améliorations, lisez l'article sur ce que sont les Core Web Vitals.

Comment WEMASY réduit le temps de chargement d'un site web

Le créateur de site web de WEMASY gère automatiquement plusieurs des améliorations de vitesse les plus courantes. Les images sont compressées et converties en WebP au téléversement. Les en-têtes de cache du navigateur sont configurés par défaut. Les fichiers CSS et JavaScript servis par la plateforme sont minifiés. La diffusion par CDN est incluse dans toutes les offres et sert les ressources statiques depuis l'emplacement le plus proche de chaque visiteur.

Les scores de vitesse des pages et les données des Core Web Vitals sont visibles dans le tableau de bord de statistiques WEMASY, avec des recommandations par page qui signalent les problèmes restants. Vous pouvez ainsi suivre les améliorations après tout changement de contenu ou de design, sans lancer des tests externes à la main.

Découvrez ce qui est inclus sur le créateur de site web WEMASY, ou consultez les offres sur la page des tarifs.

Questions fréquentes