Comment garder votre site rapide en 6 étapes faciles.
Voici quelques stratégies essentielles pour dynamiser la vitesse de votre site internet.
Si votre site web met plus de 3 secondes à se charger, vous risquez de perdre des revenus potentiels et de rater un meilleur positionnement dans les moteurs de recherche. De même, un manque de sécurité ouvre la voie aux pirates, avec des conséquences néfastes sur votre réputation et votre chiffre d’affaires.
Il est donc indispensable de procéder à des ajustements en matière de sécurité et de performance pour garantir une expérience utilisateur optimale et sécurisée.
Quand on parle d'optimisation de la performance, on évoque des actions telles que l'activation de la compression, la réduction de la taille des fichiers, la mise en cache, l'utilisation de thèmes allégés, la limitation du nombre d'extensions, etc.
Ces mesures sont utiles, mais cet article vous propose une liste d’actions plus exhaustive, applicables à diverses plateformes comme WordPress, Joomla, Magento, Drupal, Node.js, entre autres.
Évaluons ensemble ce que vous avez déjà mis en place et ce qui reste à faire.
Opter pour un hébergement de qualité
Parfois, l'erreur initiale réside dans le choix d'un hébergeur inadapté et d'une formule d'hébergement mutualisé.
Personnellement, je ne crois pas qu'il y ait de mauvais hébergeurs, mais plutôt des abonnements d'hébergement extrêmement bon marché.
Il y a un problème quand vos frais d'hébergement mensuels sont inférieurs au prix d'un café.
L'hébergement mutualisé peut être comparé à un bus bondé où personne ne veut monter, mais où tout le monde se précipite à cause d'un tarif "attractif".
Les arguments commerciaux les plus persuasifs de l'hébergement mutualisé sont les remises de lancement et l'opacité totale quant au nombre de sites web partageant un même serveur.
Laissez-moi vous dire que ces chiffres se comptent généralement en centaines.
Cela conduit à des problèmes fréquents de performance causés par les sites voisins et beaucoup de ces sites ne survivent jamais assez longtemps pour apparaître sur la première page de Google.
En conclusion, pour les projets qui comptent, il est préférable de choisir des VPS ou des serveurs dédiés.
Utiliser un réseau de diffusion de contenu (CDN)
Un CDN, ou réseau de diffusion de contenu, est essentiel après avoir choisi un bon hébergeur web.
Il est indispensable pour toute personne visant un public mondial. En effet, un site web ne peut pas être hébergé partout; il est localisé à un seul endroit. La distance devient donc un facteur important quand un utilisateur au Japon tente d'accéder à votre site hébergé à New York, aux États-Unis.
Cependant, un abonnement à un CDN tel que Cloudflare résout ce problème de localisation. Un CDN héberge des copies de votre site web sur son réseau de serveurs et répond aux requêtes depuis le serveur le plus proche. Cela réduit la charge sur un unique serveur central, qui peut être situé à des milliers de kilomètres.
De plus, un CDN peut vous offrir une sécurité accrue par rapport à ce qu'un hébergeur standard est capable de fournir.
Activer IPv6
IPv6 est plus rapide qu'IPv4. LinkedIn a constaté une amélioration de 40 % en Europe et Facebook d'environ 10 à 15 % en utilisant IPv6.
Consultez le graphique de Google sur l'adoption d'IPv6 dans le monde.
Environ 42 % des utilisateurs se connectent à Google via IPv6, mais seulement 21,2 % des sites web sont compatibles IPv6.
Il est intéressant de noter que Cloudflare a observé que les pages web compatibles IPv6 se chargent 27 % plus rapidement que leurs homologues IPv4.
Alors, votre site web est-il IPv6 ? Si vous n'êtes pas sûr, vous pouvez le vérifier en ligne.
Si ce n'est pas le cas, voici comment procéder.
La plupart des fournisseurs de CDN tels que Cloudflare, Incapsula, CacheFly, AKAMAI offrent IPv6. Vous pouvez vérifier le panneau de configuration pour l'activer.
Si vous n'utilisez pas de CDN et que votre hébergement est sur un VPS comme Linode, DigitalOcean, etc., vous pouvez vous référer à ce guide pour activer IPv6 sur les serveurs web Nginx et Apache.
L'activation d'IPv6 ne présente aucun inconvénient et vous permettrait de gagner environ 10 % sur le temps de chargement de vos pages.
Passer à HTTP/3 ou HTTP/2
HTTP est la technologie utilisée pour charger les pages web lorsque nous entrons une URL dans un navigateur.
Tout a commencé avec HTTP/0.9 en 1991, puis a évolué avec des mises à jour comme HTTP/2 et l'actuel HTTP/3.
HTTP/2 a apporté plusieurs améliorations par rapport à HTTP/1.1, notamment :
- Le "push" du serveur
- Le multiplexage
- La priorisation des ressources
- La compression des en-têtes
- Une faible latence
Il est actuellement utilisé par 39,3 % des sites web et est sept fois plus rapide que HTTP/1.1. En passant à HTTP/2, vous pouvez espérer réduire le temps de chargement des pages de 30 à 40 %.
Vérifiez si votre site web est compatible avec HTTP/2.
Cependant, HTTP/2 n'est pas sans défauts.
Par exemple, il souffre du blocage en tête de ligne. Tout problème avec la connexion TCP peut bloquer tous les flux. En revanche, avec HTTP/3, basé sur UDP, une seule perte de paquet n'affecte pas tous les autres flux.
De plus, HTTP/3 permet une latence plus faible en évitant la négociation TLS lors des reconnexions. En résumé, HTTP/3 offre tous les avantages de HTTP/2, sans ses inconvénients.
Vérifiez si votre site web est compatible avec HTTP/3.
Vous pouvez vérifier la prise en charge de HTTP/3 ou HTTP/2 auprès de votre hébergeur. Vous pouvez également consulter votre fournisseur CDN, qui peut proposer une option simple pour basculer vers la version HTTP souhaitée.
Optimisation des images
Personne n'apprécie d'être confronté à un mur de texte, ce qui rend les images essentielles sur chaque page web. Cependant, les images peuvent alourdir une page web et augmenter son temps de chargement.
La solution consiste donc à utiliser des formats d'image plus légers comme WebP ou AVIF. Ces formats permettent non seulement de réduire considérablement la taille des fichiers (plus de 80 % dans certains cas), mais aussi de maintenir une qualité d'image équivalente.
Vous pouvez choisir de convertir et de télécharger directement vos images dans ces formats de nouvelle génération. Vous pouvez aussi souscrire à un service de conversion tiers, tel qu'Optimole, pour effectuer la conversion en temps réel.
Réduire les requêtes HTTP excessives
Un site web ne se charge jamais d'un bloc. Chaque élément, qu'il s'agisse de texte, d'images, de CSS, de JavaScript, etc., est chargé via des requêtes HTTP.
À contenu égal, une page web avec moins de requêtes HTTP se chargera plus rapidement qu'une page avec un grand nombre de requêtes.
Il est donc dans notre intérêt de réduire au maximum le nombre de requêtes HTTP.
D'après mon expérience personnelle avec WordPress, je peux affirmer que choisir un thème léger comme Generate Press est un atout. De plus, la réduction du nombre d'extensions contribue également à avoir un site web rapide et sécurisé.
Cependant, c'est un sujet complexe qui mérite une attention particulière.
En particulier, assurez-vous de réduire le nombre de requêtes HTTP si vous avez un site web WordPress.
Utiliser des polices web sûres
Nous voulons tous que nos sites web soient uniques et attrayants. La première étape consiste souvent à choisir une police différente.
Heureusement, il existe plusieurs options gratuites, notamment les polices Google. Cependant, cela engendre plusieurs requêtes HTTP. Pire encore, votre site web reviendra aux polices système si le serveur de polices tiers est indisponible.
Pour contrer cela, certains webmasters hébergent eux-mêmes les polices sur leurs sites web, une démarche vers l'autonomie. Toutefois, cela ajoute un fichier supplémentaire à charger depuis votre serveur vers l'appareil de l'utilisateur. Cela se traduit par des requêtes HTTP additionnelles, qui entraînent une baisse de performance, même minime.
Il existe donc des polices web sûres que vous pouvez utiliser pour une expérience rapide, sans risque de substitution de polices en cas de panne du serveur. Ces polices, appelées polices système, sont courantes sur les PC Windows, les Mac, les systèmes Linux, iOS, Android, etc.
Voici quelques polices web sûres :
- Arial
- Verdana
- Trebuchet MS
- Tahoma
- Times New Roman
- Georgia
- Impact, etc.
Mettre en œuvre la mise en cache
La mise en cache consiste à stocker des données localement. Cela permet d'assurer un chargement de site web aussi rapide que possible lors des visites répétées. Il est souvent conseillé par les experts d'implémenter la mise en cache pour réduire les temps de chargement.
Par exemple, WordPress offre de nombreuses extensions de mise en cache, comme WP Fastest Cache. Vous pouvez également implémenter la mise en cache du navigateur en modifiant le fichier .htaccess.
Cependant, cela varie selon la plateforme et il existe différentes manières de l'implémenter.
Utiliser le chargement asynchrone
Ceci est une autre leçon tirée de mon expérience personnelle avec WordPress. En fait, Google Search Console m'a alerté sur plus de 40 articles de blog qui avaient échoué au test Web Vitals de base.
Les Web Vitals de base sont l'évaluation de page de Google, importante pour quiconque cherche à bien se positionner dans son moteur de recherche.
Pour mieux comprendre, consultez cette analyse Pagespeed sur un article de toptips.fr :
Grâce à nos développeurs WordPress, il a réussi ces tests avec brio.
Cependant, sur mon projet personnel, j'échouais particulièrement aux tests du Largest Contentful Paint (LCP) et du First Contentful Paint (FCP). Le LCP était de 3,3 secondes et le FCP d'environ 2,4 secondes.
Étant un blogueur sans formation informatique, je ne pouvais pas optimiser plus. J'avais pourtant tout fait dans les règles de l'art : thème premium, pas d'extensions superflues, polices système, images WebP, hébergement cloud, etc.
La solution a été activée grâce à une simple option du plugin WordPress Jetpack boost :
En bref, elle charge les scripts Javascript tiers de manière asynchrone, en attachant les attributs async ou defer aux balises <script>. De cette façon, les scripts se chargent séparément en arrière-plan sans bloquer la construction de la page.
Cette seule mesure a ramené mon LCP à 1,7s et le FCP à 1,2s.
Pour information, j'ai également supprimé l'image en vedette de la mise en page d'un seul article, en plus de cette bascule Javascript non essentielle, avant d'obtenir ces valeurs LCP et FCP.
Minimiser les redirections
Idéalement, il ne devrait y avoir aucune redirection pour obtenir les meilleures performances de votre site web. Cependant, nous utilisons tous la redirection de liens à un moment donné.
La règle est simple : chaque redirection ajoute du temps au chargement de la page. Trop de redirections et l'utilisateur quittera plus rapidement votre site, sauf si votre entreprise est l'équivalent de l'Apple Store sur Internet où les gens font la queue à chaque lancement de produit 😀.
Être attentif aux vidéos
Les vidéos permettent d'augmenter le temps passé sur la page et d'éviter la monotonie du texte. Elles constituent une excellente alternative aux images et sont souvent indispensables.
Le moyen le plus courant d'intégrer des vidéos est d'utiliser des vidéos YouTube. Cependant, vous pouvez comparer deux pages web avec et sans vidéos YouTube en utilisant Google PageSpeed pour évaluer l'impact important de ces intégrations sur les performances d'une page web.
Pour illustrer, j'ai publié deux articles sur notre site de test. L'un contenait une vidéo YouTube, sans rien d'autre (ni texte, ni images, etc.), et l'autre ne contenait rien. J'ai ensuite comparé ces deux pages dans Google Pagespeed.
Pouvez-vous voir l'impact sur le temps de blocage total, l'indice de vitesse, le FCP et le LCP ? La vidéo a notamment ajouté une seconde entière au temps de blocage total, ce qui peut dissuader les utilisateurs.
Pour confirmer ces résultats et obtenir plus d'informations, j'ai exécuté ces deux URL dans l'outil de test de vitesse de site web Pingdom.
Vous pouvez constater qu'une seule vidéo YouTube a ajouté 23 requêtes HTTP supplémentaires, augmenté la taille de la page et le temps de chargement, et dégradé la note de performance globale.
Cependant, il existe des astuces pour limiter cette baisse de performance. Tout d'abord, on peut choisir le chargement asynchrone des vidéos, ce qui contribuera à réduire le temps de blocage total.
De plus, le chargement paresseux est également possible. De nombreux plugins WordPress intégrés à YouTube peuvent vous aider dans cette tâche.
Enfin, l'intégration des vignettes vidéo est une bonne option, car la vidéo n'est chargée que lorsqu'on clique sur la vignette.
Minifier HTML, JavaScript et CSS
Cela peut sembler insignifiant, mais la minification rend les choses plus fluides.
La minification supprime les éléments inutiles du code source, comme les espaces blancs supplémentaires, les points-virgules, les commentaires, les sauts de ligne, etc., pour compacter le tout.
Selon votre plateforme, vous devrez peut-être le faire vous-même ou faire appel à un outil qui se chargera de tout minifier pour vous. Il est cependant préférable de conserver des sauvegardes des versions standard, car il est difficile de modifier le code minifié.
Cependant, une machine lit parfaitement ce code compact et vous remarquerez une amélioration marginale de la performance.
Utiliser la compression web
La compression web est similaire au format zip, mais elle fonctionne sur les fichiers web pour réduire les temps de chargement des pages et est prise en charge par les navigateurs modernes.
En clair, un site web compatible avec la compression chargera ses composants plus rapidement qu'un site web sans compression, toutes choses étant égales par ailleurs. Cette compression web fonctionne sur le HTML, le JavaScript, le CSS, les images, etc., et peut réduire la taille de la page de plus de 70 % dans certains cas.
Il existe deux options : Gzip et Brotli. Votre hébergeur aura probablement l'une ou l'autre appliquée.
Toutefois, vous pouvez tester la compression pour vérifier celle qui est activée sur votre site web. Vous pouvez demander à votre hébergeur web ou à un développeur web de mettre en place la compression si elle n'est pas déjà active.
Éléments externes
Ceci peut être considéré comme une extension de la section sur les requêtes HTTP, mais mérite une mention distincte.
Les éléments externes d'un site web comprennent tous les éléments qui ne sont pas natifs, tels que les publicités, les outils d'analyse, les extensions, les forums, etc.
Ces éléments ajoutent du code supplémentaire à votre site web, ce qui augmente le nombre de requêtes HTTP, alourdit votre site web et le rend moins convivial.
Certes, certains de ces éléments sont nécessaires et incontournables sur la plupart des sites web. Cependant, soyez minimaliste et testez différents services pour choisir celui qui a le moins d'impact sur les performances.
Un site web plus rapide !
La performance d'un site web n'est pas une chose à définir et à oublier. Le World Wide Web évolue constamment, et il est important de rester informé et de s'adapter rapidement pour garantir une vitesse et une sécurité optimales.
La sécurité est aussi importante que la vitesse.
En tant qu'experts WordPress, nous ne pouvons pas nous empêcher de vous parler de certaines des meilleures pratiques de sécurité WordPress.