Au cours des dernières années, nous avons vu les professionnels du marketing placer la vitesse de chargement au sommet de tout processus d'optimisation. En 2017, Google a commencé à souligner l'importance de la vitesse de chargement et son influence future sur le positionnement, mais ce n'est qu'à l'été 2018 que Google a officialisé cette déclaration.
Dans cet article, nous voulons vous aider à commencer à optimiser et améliorer la vitesse de chargement de votre site par vous-même. Comme tout processus d'optimisation, il y a un côté technique qui peut devenir complexe. Chez SEO Alive, chaque fois que nous écrivons un article de ce genre, nous voulons que vous puissiez l'implémenter par vous-même, bien que certaines actions nécessitent un niveau de connaissances plus technique. Honnêtement cependant, ne devenons pas fous à courir après les scores des outils que nous utiliserons pour auditer le WPO de notre site.
L'optimisation dépend en grande partie de la manière dont le template a été conçu, et tous les templates ne permettent pas d'obtenir les mêmes performances. Il est important de garder cela à l'esprit.
C'est parti !
Qu'est-ce que le WPO ?
Web Performance Optimization, que nous appelons WPO, est tout simplement l'optimisation des différents processus qui affectent la manière dont un site se charge.
Comment mesurer la vitesse de chargement d'un site ?
Il existe de nombreux outils pour mesurer la vitesse de chargement. Les plus populaires sont :
Avant de commencer un audit, il est important de garder à l'esprit que la vitesse de chargement varie pour chaque utilisateur. Différentes variables peuvent affecter la perception de la vitesse pour un utilisateur à Cuenca par rapport à un utilisateur à Ottawa.
C'est pourquoi, plutôt que de travailler sur les temps de chargement en secondes, nous recommandons de se concentrer sur l'optimisation de :
›
Le poids du site (Mo)
›
Les requêtes
›
Le temps de réponse du serveur
Si nous améliorons ces 3 domaines, la vitesse de chargement s'améliorera quel que soit l'endroit où se trouve l'utilisateur.
Nous allons plonger dans chaque domaine et, à travers les différents outils, nous verrons comment travailler dessus pour améliorer les performances de chaque URL. Pourquoi je dis chaque URL ? Parce que, bien que cela puisse sembler évident, j'ai rencontré de nombreux cas où seules les données de la page d'accueil étaient évaluées, et bien sûr, toutes les pages d'un site ne chargent pas les mêmes ressources.
Outils pour développeurs Google
Avant de commencer, je veux expliquer certaines options que Google propose à travers ses outils de développement. Cet outil est l'un des plus importants pour analyser le fonctionnement d'un site. Faites un clic droit sur la page que le navigateur a ouverte et un panneau avec différentes options apparaîtra. Nous allons sur Inspecter (Ctrl + Shift + I).
Une fois cet outil ouvert, nous nous dirigerons vers l'option NETWORK que vous trouverez en haut. Si nous appuyons à nouveau sur ENTRÉE dans le navigateur, l'outil affichera le chargement des différentes ressources.
temps de chargement dans les outils pour développeurs Google
En bas de l'image, nous pouvons voir les données qui nous intéressent pour avoir une vue générale de la façon dont le site se charge.
En approfondissant ce panneau depuis le haut et en regardant la structure des colonnes, nous avons :
›
Name : le nom de la ressource.
›
Status : le code de réponse de la ressource (200, 301, 404...)
›
Type : le type de ressource (script, font, png, jpg, stylesheet...)
›
Initiator : quelle ressource déclenche la requête.
›
Time : combien de temps a pris la requête.
›
Waterfall : une représentation graphique des temps de chargement d'une ressource.
Si nous faisons un clic droit en haut, nous pouvons ajouter et supprimer des colonnes avec ces informations.
ajouter et supprimer des éléments d'information dans network
Activer des éléments d'information supplémentaires comme Domain, Scheme ou Cookies peut aider dans des cas spécifiques à localiser des ressources qui pourraient nous causer une sorte de problème, mais à ce stade, nous nous en tiendrons à celles qui sont prédéfinies.
Il y a un aspect qui, bien que très intéressant, sera seulement effleuré pour que nous le gardions à l'esprit. La vitesse de connexion, particulièrement sur mobile, est un élément clé de la manière dont un site se charge. Depuis cet outil, nous pouvons simuler des vitesses plus lentes comme la 3G sur mobile.
simuler une vitesse de transfert lente
Comment connaître le poids d'une URL et comment le réduire ?
Le poids, que ce soit en mégaoctets ou kilooctets, est l'une des principales raisons pour lesquelles une URL met du temps à charger. C'est pourquoi nous commençons par plonger dans cet aspect, car il tracera la voie pour obtenir une bonne optimisation sur notre site.
Les données suivantes proviennent de l'outil mentionné ci-dessus, GTMETRIX, et correspondent à un site web que je suis sur le point de commencer à optimiser.
métriques de poids web
Nous allons nous concentrer sur les données de la colonne de droite, celle qui se réfère à (Page Details), spécifiquement le Total Page Size.
À première vue, le poids de ce site est bien au-dessus de la moyenne, mais gardez à l'esprit que ce qui compte n'est pas le poids total du site mais combien de temps ce poids prend pour se charger, car il existe quelque chose appelé Lazy Load, une fonctionnalité qui retarde le chargement jusqu'à ce que l'utilisateur ait besoin de la ressource. Nous en parlerons plus tard.
Nous pouvons aussi trouver cette information dans les outils pour développeurs, dans le panneau que nous avons regardé ci-dessus, que je vous rappelle à nouveau.
temps de chargement dans les outils pour développeurs Google
Si vous regardez en bas, à la fois les 7,5 Mo et les 215 requêtes se rapprochent beaucoup des chiffres rapportés par GTMETRIX. Il est important que vous sachiez d'où GTMETRIX tire ses informations au cas où vous voudriez un jour utiliser un autre outil.
Voyons maintenant ce qui pèse autant et comment nous pouvons y remédier.
L'option Waterfall offre un aperçu visuel de la façon dont les ressources se chargent, montrant l'URL de la ressource, le statut, le domaine et la colonne Size. Si nous cliquons sur cette dernière colonne, elle trie les poids du plus grand au plus petit et du plus petit au plus grand.
analyse du chargement à travers le waterfall
En regardant les poids, nous pouvons voir, comme cela arrive dans la plupart des cas, que les images sont en grande partie responsables du poids excessif de l'URL.
Il n'existe pas de spécification formelle sur le poids maximum qu'une image devrait avoir, mais nous recommandons pas plus de 100 Ko et, si vous en avez la possibilité (si vous utilisez Photoshop, c'est le cas), configurez les images pour qu'elles se chargent progressivement en JPG et évitez le PNG chaque fois que vous n'avez pas besoin d'un canal Alpha (transparence).
En réduisant le poids des images, nous améliorerons significativement le chargement du site, et il existe plusieurs outils que vous pouvez utiliser. Personnellement, j'optimise avec Photoshop, mais il existe des options en ligne intéressantes :
GTMetrix et l'outil Google nous permettent tous deux de visualiser les ressources par type, c'est-à-dire uniquement les images, scripts, CSS...
C'est utile pour avoir une perspective plus large sur les zones où travailler. Sur cette URL, les images représentent 4 Mo sur 7,2 Mo, donc une grande partie du problème de poids se trouve là. Même ainsi, il y a d'autres ressources qui se distinguent comme extrêmement lourdes pour leur type, comme un fichier CSS de plus de 700 Ko et un Script de plus de 300 Ko.
À ce stade, je voudrais préciser que lorsque nous effectuons une optimisation de la vitesse de chargement (WPO), nous devons faire face à certains problèmes qui, bien qu'ils aient des solutions, ne sont pas à notre portée pour agir.
Dans ce cas, nous voyons un fichier CSS très volumineux. Si le designer a créé un CSS de plus de 700 Ko, optimiser ce fichier spécifique sera difficile.
Que pouvons-nous faire pour réduire le poids de ces fichiers ?
Minifier (CSS, JS et HTML)
La minification est un processus qui cherche à réduire le poids des fichiers en supprimant les données inutiles telles que les commentaires, les espaces, le code répété et le code inutilisé. Il existe de nombreux outils pour réaliser ce processus, sauf pour la partie code inutilisé, qui est plus difficile à optimiser et nécessiterait d'aller manuellement dans le fichier (ce que je ne recommande pas).
Heureusement, nous parlons de WordPress, et comme nous le savons tous, dans WordPress, il est très rare de ne pas trouver un plugin qui gère cette opération.
Personnellement, j'aime utiliser un plugin entièrement gratuit, Autoptimize, et un payant, WP Rocket.
Dans cet article, je ne veux pas tellement expliquer le fonctionnement de ces plugins, mais plutôt comment effectuer les tâches d'optimisation. Parce que si nous utilisons d'autres plugins, ils ont aussi ces options, et le mieux est de comprendre ce que nous faisons.
Minifier avec WP Rocket
Cette partie n'est pas complexe. Il suffit d'aller dans l'onglet d'optimisation des fichiers et de cocher la case minifier HTML. Dans WP Rocket, cette option est répétée en dessous pour les fichiers CSS et JS. Cela dit, je recommande d'activer cette case et de tester. Répétez cette option une par une, car si quelque chose échoue, il sera plus facile d'identifier le problème.
minifier html avec wp rocket
Avant de vérifier l'effet de la minification, nous devons vider le cache, sinon nous ne verrons pas le résultat du HTML mis à jour.
Comment vider le cache du navigateur ?
Ce type de plugins est livré avec des options pour vider le cache, que nous pouvons voir en haut.
vider le cache avec wp rocket
Une autre façon est via le navigateur, une fois que les outils pour développeurs Google sont activés (Ctrl + Shift + I).
Faites un clic droit sur la flèche « recharger la page » et sélectionnez « vider le cache et recharger sans cache ».
vider le cache depuis le navigateur Chrome
Minifier avec Autoptimize
Avec Autoptimize, l'action d'optimiser est ce qui réalise la minification, avec la particularité d'offrir une option pour conserver les commentaires HTML. Ces commentaires sont généralement ajoutés par les développeurs pour conserver des informations qui peuvent être utiles à l'avenir.
minifier html avec autoptimize
Pour vérifier que cette optimisation a pris effet, nous irions dans le code source de l'URL et nous devrions voir quelque chose comme ceci :
exemple de html minifié
Le code devient illisible mais sa fonctionnalité reste la même.
Ces options se répètent de la même façon dans WP Rocket et Autoptimize pour les fichiers CSS et JS. Comme je l'ai mentionné précédemment, je ne recommande pas d'optimiser tout d'un coup, mais 1 par 1. Ces plugins gardent des copies des fichiers minifiés, donc revenir à l'original est possible en décochant la case correspondante.
Pour continuer à réduire le poids des pages, nous avons 2 options supplémentaires :
›
Supprimer ou réduire les plugins qui ajoutent du CSS ou JS au chargement.
›
Supprimer ou élaguer le code inutilisé du fichier CSS.
Ces 2 options sont plus complexes et nécessitent plus de connaissances, car il faut faire attention et s'assurer qu'il n'y a pas d'appels depuis d'autres pages vers la partie que vous supprimez.
Bien que la suppression des plugins ne soit pas toujours possible en raison de la ressource qu'ils fournissent, il existe des plugins qui sont mieux optimisés que d'autres, c'est-à-dire moins de requêtes et JS plus léger. Donc, dans le merveilleux écosystème WordPress, il y a presque toujours une alternative.
Temps de chargement vs temps de réponse
Il est maintenant temps de parler des requêtes, du temps de réponse et du temps de chargement. À ce stade, nous devons mentionner une partie fondamentale du processus : le serveur. L'optimisation du serveur est généralement hors de notre portée, il est donc important de choisir une solution efficace.
Mais procédons étape par étape.
Qu'est-ce qu'une requête ?
Une requête, ou Request HTTP, est un appel fait du client au serveur pour demander une ressource donnée. Les requêtes peuvent atteindre différents serveurs.
Les requêtes peuvent être HTTP ou HTTPS. Si nous regardons la structure d'une requête, nous pouvons analyser où le délai dans le temps se produit.
Analyse du temps d'une requête HTTP
structure de requête HTTP
Décomposons ce que nous voyons dans ce graphique de temps.
›
La requête est lancée mais bloquée ou mise en file d'attente : si le blocage dure longtemps, cela peut être dû à plusieurs raisons : requêtes de priorité supérieure ou nombreuses requêtes à cette origine.
›
DNS Lookup : le navigateur résout l'adresse IP de la requête.
›
Connecting : le temps qu'il faut pour se connecter au serveur pour résoudre la requête. Si ce temps est élevé, cela pourrait indiquer des problèmes de réseau, des erreurs de connexion ou un serveur surchargé.
›
Sending : la requête de ressource est envoyée.
›
Waiting : c'est le temps que le serveur prend pour résoudre une requête et envoyer une réponse ; s'il est long, il y a un problème sur le serveur.
›
Receiving : réception de la ressource.
Une requête HTTPS ajoute une étape supplémentaire, montrée ici.
analyse d'une requête HTTPS
Ces deux captures d'écran appartiennent à deux sites différents, l'un non optimisé (Requête HTTP) et l'autre optimisé (Requête HTTPS).
Si vous regardez attentivement et comparez, la plus grande différence se trouve dans le temps d'attente. Dans ces cas, vous devriez analyser le serveur plus en détail.
Requêtes au serveur : comment les réduire ?
Comme nous l'avons vu, le nombre de requêtes est étroitement lié au temps de chargement, donc réduire le nombre de requêtes améliorerait les temps de chargement d'une URL. Le bon sens joue un rôle dans le processus d'optimisation et savoir si une ressource est vraiment utile pour l'utilisateur ou pour notre activité. C'est le moment de dire au revoir à certaines ressources qui n'apportent rien, mais ce n'est pas à moi de décider.
Cela dit, nous avons des options pour améliorer les requêtes, même si ces actions n'apportent pas un changement énorme au chargement du site. Je me répéterai : le mieux est de supprimer les ressources qui n'apportent rien.
Combiner CSS et JS
Une autre action populaire lors de l'optimisation d'une page web est de combiner les ressources CSS et JS, mais qu'est-ce que cela signifie ?
L'objectif de la combinaison est de réduire les requêtes au prix d'une augmentation du poids du fichier. Combiner signifie unifier les différentes ressources CSS ou JS en une seule.
Si les temps de réponse sont longs, combiner peut être bénéfique. Si les temps d'envoi sont très lents, peut-être qu'une autre technique est meilleure.
L'idéal est de combiner tout en ayant un bon serveur, pour gagner sur les deux tableaux.
Combiner les ressources avec WP Rocket et Autoptimize
L'opération de combinaison avec ces plugins est aussi simple qu'avant. Nous cochons simplement la case correspondante.
combiner css dans wp rocket
Dans WP Rocket, les options pour combiner CSS et JS sont les mêmes ; les panneaux sont pratiquement identiques. Comme nous le voyons sur l'image, il y a une case pour ajouter le chemin des fichiers que nous ne voulons pas combiner.
Autoptimize offre plus d'options pour travailler avec CSS et réduire les requêtes. Dans l'option que je marque, il combine et vous donne un avertissement sur l'effet qu'il pourrait avoir, mais au final, c'est toujours relatif.
Dans cette première partie de l'article, j'ai voulu expliquer en quoi consistent certaines actions de base, celles que nous voyons habituellement dans pratiquement tous les plugins d'optimisation WPO, mais il y a encore beaucoup à faire pour améliorer à la fois les requêtes et les temps de chargement.
Configuration du cache
Sans aucun doute, l'optimisation du cache est l'une des actions où nous remarquerons les plus grandes améliorations dans la façon dont un site se charge. Dans cet article sur le SEO pour WordPress, j'ai expliqué comment fonctionne le cache. Je vous encourage à y jeter un œil pour comprendre comment cela fonctionne.
Autoptimize et WP Rocket effectuent des actions de mise en cache, mais WP Rocket vous donne quelques options supplémentaires. Il convient de noter que les plugins ont rendu cette optimisation plus simple : vous avez à peine quelques options et le processus est rapide et indolore.
configurer wp rocket
Comme vous le voyez, WP Rocket vous permet de travailler sur 4 choses :
›
Activer la mise en cache pour les appareils mobiles.
›
Sauvegarder les fichiers séparément pour les appareils mobiles.
›
Activer la mise en cache pour les utilisateurs connectés.
›
Spécifier le temps pour vider le cache.
Cela dépend de chaque projet quelle option sélectionner, mais avec tout cela à l'esprit, mon conseil est :
›
Cache mobile toujours, car bien que la plupart des sites soient responsive, il y a du contenu que vous pouvez avoir sur mobile mais pas sur desktop.
›
Fichiers séparément.
›
Pas de cache pour les utilisateurs connectés, surtout parce que si je fais des modifications, je ne veux pas de mise en cache.
›
Temps de cache, qui dépend du nombre de modifications que vous apportez à votre site. Si c'est un site d'actualités quotidiennes, court ; si c'est du contenu qui ne se met pas à jour fréquemment, plus long.
Lazyload
La fonctionnalité lazyload aide à afficher les ressources (Images et Iframes) lorsque l'utilisateur en a besoin ; c'est-à-dire que le navigateur ne charge pas ces ressources avant que l'utilisateur ne défile jusqu'à elles. Cette fonctionnalité est implémentée dans de nombreux plugins et est même préconfigurée dans certains thèmes WordPress. Depuis la version 76 de Chrome, elle est même disponible nativement dans le navigateur.
Cela signifie qu'en ajoutant l'attribut loading="lazy", le navigateur interprète déjà le chargement paresseux de l'image, mais bien sûr, tous les navigateurs n'interprètent pas cela, donc je recommande de continuer à utiliser le plugin. Voici une vidéo tirée de web.dev montrant un exemple de ce qu'est le chargement paresseux d'images.
Optimisation des iframes
Si nous utilisons des iframes pour intégrer du contenu d'autres sites, nous avons deux actions que nous pouvons utiliser pour améliorer notre chargement.
›
Le chargement paresseux via la fonction lazyload
›
Ou remplacer l'iframe par une image jusqu'à ce que l'utilisateur clique dessus.
La première et la deuxième option peuvent être activées via, encore une fois, notre plugin de prédilection WP Rocket.
Chargement différé des fichiers JS avec Defer ou Async
Les fichiers JS sont l'un des coupables de ce que les audits de vitesse appellent blocage de rendu d'une page. Cela se produit lorsque, pendant le rendu, le navigateur s'arrête pour télécharger un fichier JS et l'exécuter. L'objectif de l'optimisation WPO est de fournir des informations à l'utilisateur le plus rapidement possible, c'est pourquoi cela est considéré comme bloquant, car rien n'est rendu jusqu'à ce que le JS téléchargé s'exécute.
C'est pourquoi ce type d'action a tendance à être signalé dans l'audit. Lors de l'utilisation de plugins ou de thèmes tiers qui ne sont pas bien optimisés, nous pouvons avoir du JS qui bloque le rendu parce qu'il est, par exemple, dans le header.
Dans ces cas, nous devrions utiliser deux attributs qui sont ajoutés dans le code d'appel JS, Defer et Async. Pour que ces attributs fonctionnent, les scripts doivent être externes.
Chez SEO Alive, nous utilisons le plugin Pre Party Resource Hints, qui vous permet de sélectionner quels fichiers et quelle méthode de chargement vous voulez appliquer. Une merveille !
Quelle est la différence entre Defer et Async ?
Bien que les deux attributs aient un objectif similaire, empêcher l'interprétation du DOM HTML d'être arrêtée par le JS, il y a une différence notable entre les deux.
Avec l'attribut Async, la ressource est téléchargée sans arrêter le chargement HTML, mais une fois téléchargée, le chargement HTML est mis en pause pour exécuter le JS ; avec l'attribut defer, la ressource est aussi téléchargée en parallèle avec le chargement HTML, mais elle s'exécute lorsque le chargement se termine, donc il n'y a pas de blocage par le script.
À cet égard, il y a des différences entre WP Rocket et Autoptimize. WP Rocket prend les décisions beaucoup plus facilement pour vous et agit de manière semi-automatique pour empêcher le JS de bloquer le rendu ; dans Autoptimize, en revanche, vous ne pouvez activer que l'option Async.
Dans Autoptimize, sous l'onglet extra, nous avons cette option pour ajouter les fichiers JS que nous voulons charger avec Async, mais pour plus de flexibilité, ils recommandent un autre plugin complémentaire, « Async Javascript ».
chargement async autoptimize
Avec ce plugin, nous pouvons travailler avec Defer et Async, et il offre même des options en un clic pour faciliter les choses. Le bon avec ce plugin, c'est que nous pouvons travailler avec des scripts et exclure ceux que nous jugeons nécessaires. Dans WP Rocket, en revanche, nous devons faire confiance à ce que fait le plugin, bien qu'il le fasse bien.
Cette option se trouve dans le même onglet d'optimisation des fichiers.
attribut defer wp rocket
Qu'est-ce qu'un CDN et comment peut-il nous aider ?
Un CDN est ce qu'on appelle un réseau de diffusion de contenu. Le CDN est chargé de sauvegarder une partie des informations et des ressources pour soulager la charge du serveur pour ces ressources et mieux répondre au chargement. Les CDN ont également une fonction de copie géographique, pour garder la ressource disponible à différents points et la servir à l'utilisateur quel que soit l'endroit d'où il se connecte. Habituellement, ce type de service est utilisé pour les fichiers lourds comme les images et les vidéos.
S'inscrire à ce service est important lorsque nous avons des sites avec beaucoup de trafic, bien qu'il ne faille pas l'exclure pour les sites avec peu de trafic.
Autres actions qui nous apporteront un peu plus d'amélioration
Pour conclure l'article, nous avons 3 améliorations supplémentaires qui, bien qu'elles ne produiront pas de changements énormes dans les temps de chargement, nous aideront à réduire les requêtes, et au final, c'est ce que nous voulons.
Optimisation des polices
L'optimisation des polices peut se faire à travers des plugins ou manuellement en éditant et optimisant le CSS. L'idéal serait de n'appeler que la police que vous allez utiliser et non, comme cela arrive dans de nombreux cas, télécharger un fichier avec toutes les Google Fonts.
Autoptimize a une option pour travailler sur les polices.
optimiser les polices avec autoptimize
Il est difficile de dire quelle option choisir sans voir le projet, car je ne sais pas quelle police utilise votre template et quand elle se charge, donc le mieux est de tester et de voir le résultat.
Comme vous le voyez, juste après les options Google Fonts, nous avons « Remove Emoji », ce qui nous fera économiser une requête au serveur. Sa fonction est simplement de convertir les symboles représentant des emojis en l'icône.
emojis wp rocket
WP Rocket nous permet aussi de désactiver ces emojis et offre également l'option d'empêcher le contenu d'être intégré sur des sites tiers.
Au final, il y a beaucoup d'actions pour améliorer la vitesse de chargement d'un site. Il n'est pas toujours possible de travailler en profondeur pour optimiser chaque ressource, car cela dépend du type d'activité et de ce dont elle a besoin.
J'espère que ce guide d'optimisation WPO vous sera utile et que vous pourrez l'appliquer à vos projets ou pour vos clients.
Cela fait plus de 10 ans que je suis totalement obsédé par le SEO — et honnêtement, je ne voudrais pas qu'il en soit autrement.
Ma carrière a franchi un cap lorsque j'ai travaillé comme Senior SEO Specialist pour Chess.com — l'un des 100 sites les plus visités de tout Internet. Opérer à cette échelle, sur des millions de pages, des dizaines de langues et dans l'une des SERPs les plus concurrentielles qui soient, m'a appris des choses qu'aucun cours ni aucune certification ne pourrait jamais transmettre. Cette expérience a transformé ma vision de ce qu'est réellement un SEO d'excellence — et elle est devenue le socle de tout ce que j'ai construit depuis.
Forcé par cette expérience, j'ai fondé SEO Alive — une agence pour les marques qui prennent la croissance organique au sérieux. Nous ne sommes pas là pour vendre des dashboards et des rapports mensuels. Nous sommes là pour bâtir des stratégies qui font vraiment la différence, en combinant le meilleur du SEO classique avec le nouvel univers passionnant de la Generative Engine Optimization (GEO) — afin que votre marque apparaisse non seulement dans les liens bleus de Google, mais aussi dans les réponses générées par l'AI que ChatGPT, Perplexity et Google AI Overviews livrent chaque jour à des millions de personnes.
Et parce que je ne trouvais aucun outil capable de gérer correctement ces deux mondes, j'en ai construit un moi-même — SEOcrawl, une plateforme d'intelligence SEO pour les entreprises qui réunit rankings, audits techniques, monitoring des backlinks, santé du crawl et suivi de la visibilité de marque dans l'AI, le tout au même endroit. C'est la plateforme dont j'ai toujours rêvé.
