Comment améliorer les performances de votre site internet WordPress en 2024 ?
Souvent négligée dans la création de site, l’optimisation de la performance de votre site internet est un essentiel. Les améliorations à mettre en place sont nombreuses mais sont vraiment importantes, je vous explique pourquoi et surtout comment agir pour réduire les temps de chargement de votre site internet.
Cet article est dédié aux améliorations relatives à WordPress mais de nombreux conseils peuvent être appliqués sur votre site internet même si vous n’utilisez pas ce CMS.
Pourquoi améliorer les performances de votre site internet WordPress ?
On entend souvent que la vitesse de vos pages est un critère de pertinence important pour votre référencement naturel mais ce n’est pas totalement vrai. La performance de votre site est un critère de pertinence pour le SEO mais il a qu’un impact mineur, cependant il reste pris en compte pas les moteurs de recherche et pourrait bien devenir un critère important à l’avenir.
Cependant, malgré sa faible conséquence directe sur votre référencement naturel, il est pourtant nécessaire de ne pas négliger son impact global. En effet, la vitesse de votre site à un impact important sur l’expérience utilisateur et donc votre taux de conversion ainsi que votre taux de rebond.
Il est donc primordial d’y apporter toute votre attention et votre énergie afin de garantir à votre utilisateur la meilleur expérience possible et l’inciter à convertir, que votre site soit marchand ou non.
Pour finir de vous convaincre, j’ajouterai également que la part des utilisateurs naviguant sur mon mobile et notamment en 3G/4G est de plus en plus importante, l’optimisation des performances est donc nécessaire pour garantir à votre visiteur, une navigation rapide et idéale.
Choisir un thème WordPress répondant uniquement à votre besoin
Niveau technique : Facile
Dans l’hypothèse où vous décideriez de choisir un thème WordPress disponible sur internet, vous devez garder en tête que le choix de celui-ci sera primordial car il aura un impact important sur les performances de votre site internet.
Il faut bien comprendre que les optimisations relatives à l’amélioration de la vitesse du site sont le plus souvent des optimisations techniques. Les développements réalisés sur votre thème ainsi que la façon dont celui-ci a été pensé auront donc des conséquences sur la vitesse de chargement de vos pages. Il est donc capital de bien choisir votre thème et surtout de faire le choix d’un thème adapté à vos besoins et uniquement vos besoins.
De nombreux thèmes sont de véritables usines à gaz au détriment des performances et c’est souvent préjudiciable pour l’utilisateur du site.
C’est pour cela que je réalise des thèmes WordPress sur-mesure, 100% adapté aux besoins de mes clients et qui se veulent optimisés pour tous les devices. Je comprends bien que le budget d’un tel développement est conséquent, le choix de thèmes payants (ou gratuits) est donc une alternative intéressante mais il est faut être vigilant quant à votre décision du thème WordPress idéal.
Evitez la multiplication des modules WordPress, nocifs pour vos performances
Niveau technique : Facile
Autre point d’alerte important pour la vitesse de chargement de votre site internet, les modules. Ils sont la bête noire des performances car ils chargent souvent de nombreux fichiers volumineux et bien souvent inutiles pour la plupart de vos pages.
Ils sont des véritables bijoux lorsqu’il s’agit d’ajouter des fonctionnalités pour votre site web mais amènent parfois avec eux de nombreux problèmes de performance.
Parfois développés de manière non conventionnelle, ils sont souvent mal optimisés et chargent des fichiers conséquents, des librairies non utilisées et peuvent ralentir le chargement de vos pages.
Il faut donc bien choisir vos plugins WordPress et n’activer que les modules essentiels pour votre site internet. On voit trop souvent des extensions contenant des multitudes de fonctionnalités mais utilisés de façon plus que partiels, ce qui ralentit votre site internet.
Dans la mesure du possible, privilégiez un développement sur mesure pour WordPress plutôt qu’un module fourre-tout afin d’épargner votre site des inconvénients qui l’accompagnent.
Bien choisir son hébergement pour WordPress
Niveau technique : Intermédiaire
Ou dois-je hebergé mon site ? Dois-je prendre un serveur dédié, mutualisé ou bien virtuel ?
Choisir son hébergement se révèle parfois compliqué, surtout lorsque l’on a aucune connaissances techniques en matière d’infrastructure serveur. Cependant c’est un choix important pour ne pas se retrouver avec un site lent ou bridé.
Mon conseil principal sera donc d’éviter les hébergements gratuits ! Si ils sont gratuits, ce n’est pas pour rien, cela prouve que quelque chose cloche. Soit votre offre sera bridée, ne vous permettant pas d’avoir les meilleurs performances pour votre site, soit des annonces seront présentes sur votre site ou vos données seront revendus…tout ce que l’on ne souhaite pas.
Adapter l’offre de votre hébergement en fonction de vos besoins et opter dans la mesure du possible pour un hébergement spécialisée WordPress pour bénéficier d’un produit optimisé pour le CMS et une sécurité axée autour de l’outil.
Je ne vous recommande pas un hébergeur en particulier mais vous pouvez regarder du côté de ThemeCloud, O2Switch ou encore OVH.
Optimiser ses images pour réduire le poids des pages
Niveau technique : Intermédiaire
Lors de l’optimisation des performances, les images seront l’une des principales causes de ralentissement sur vos pages web. Il faut donc prendre bien soin de réduire le poids de celles-ci.
Pour cela, vous devez faire en sorte que les images affichées sur vos pages soient chargées dans la bonne taille grâce à l’utilisation d’images croppées.
En effet, WordPress fourni un système de découpage et de redimensionnement des images au format voulu pour éviter à vos utilisateurs de charger des images lourdes et inadaptées.
Je vous invite à consulter la documentation WordPress sur la création d’images croppées.
En plus du chargement d’images croppées, je vous recommande également de vous pencher sur la compression des images de sortie afin de fournir des fichiers les plus légers possibles.
De plus, dans cette lutte continuelle de la réduction du poids des fichiers, privilégiez l’usage du format WebP créé par Google. Il permet de réduire par 2 la taille de vos images, le plugin WebP Express vous aidera dans cette tâche.
ℹ️ Mise à jour 2024 : Le format AVIF est également désormais disponible et pris en charge par Google Images, il permet de réduire considérablement le poids de vos images
Enfin, une fois vos images optimisées pour le web et chargées au bon format, vous pourrez y ajouter du lazyloading. Le principe est simple, le site charge les images une fois que le reste du contenu est chargé et pas avant, ce qui accélère le chargement global de la page.
En prime, vous pouvez charger des formats différents en fonction du device utilisé. Pour cela, il suffit d’utiliser des balises dites « responsive » qui permettent de dire au navigateur quelle image chargée en fonction de la taille de l’écran.
Gérer vos vidéos depuis des plateformes dédiées
Niveau technique : Facile
La vitesse de chargement du site est principalement dû au chargement des ressources visibles sur vos pages, les vidéos en font partie et sont relativement lourdes et impactantes. Privilégiez donc les plateformes de vidéos comme Youtube ou encore Vimeo qui bénéficient d’hébergements spécialisés dans le streaming ainsi qu’une gestion des contenus multimédia optimisée.
Réduire les révisions de vos posts WordPress
Niveau technique : Facile
Le CMS WordPress bénéficie d’un système de révisions garantissant une sauvegarde de vos actions sur l’administration. Cette fonctionnalité est vraiment intéressante cependant elle ralentit le chargement de vos pages. Je vous recommande donc de réduire le nombre de révisions stockées pour chaque publication (post).
Pour cela, il vous suffit d’ajouter la ligne suivante dans votre fichier wp-config.php.
4 correspondant au nombre de révisions maximum que le CMS stockera.
define( 'WP_POST_REVISIONS', 4 );
Mettre en place un système de cache spécialisé pour WordPress
Niveau technique : Facile à Avancé
Le cache est un système de mémoire destiné à accélérer le rendu des vos pages web. Il existe différents types de cache mais le fonctionnement global est similaire et consiste à stocker une version de contenu, de donnée ou toute une page afin d’éviter les traitements lourds engendrés par le serveur et fourni ainsi l’information plus rapidement.
Votre navigateur par exemple utilise un système de cache pour éviter d’avoir à recharger les ressources à chaque chargement de page. Côté serveur, il existe également différents types de cache répondant à différentes problématiques.
La mise à en place de cache est un incontournable lorsque vous souhaitez optimiser les performances de votre site internet. Les gains en terme de vitesse sont vraiment notables, surtout lorsque votre site est sujet à de gros traitements de données ou si il est muni d’un thème très mal optimisé (même si dans ce cas présent, je vous recommande de retourner au chapitre sur le choix du thème ?)
Pour mettre en place un système de cache, il existe différents modules qui font très bien l’affaire comme W3 Total Cache (gratuit) ou WP Super Cache (gratuit) mais je recommande très fortement WP Rocket, même si il est payant, il est pour le moi le meilleur plugin WordPress pour la gestion du cache.
Une fois un de ces modules installé, si vous n’avez aucune notion technique, évitez de toucher à tout dans les configurations car le cache est un système relativement technique et vous pourriez engendrer des anomalies sur votre site. Dans ce cas, préférez la configuration par défaut du module (qui sera déjà bénéfique à défaut de rien) ou faites appel à un développeur spécialisé WordPress pour vous épauler dans cette tâche.
Supprimez le superflu (scripts, feuilles de style, polices d’écritures, appels externes…)
Niveau technique : Intermédiaire
Penchons-nous maintenant sur les ressources chargées par votre site lorsqu’un utilisateur affiche une page sur son navigateur. En effet, celles-ci sont vraiment gourmandes performance, surtout si vos fichiers inclus de nombreuses librairies inutilisées.
Il est donc important de faire le tri dans les fichiers qui vont être chargés et partir à la chasse des fichiers inutiles voir nocifs pour la vitesse de chargement de votre site internet.
Parmi tous ces fichiers, il existe différents types de ressources.
Les scripts JavaScript portant l’extension .js
Ce sont des fichiers destinés à fournir des comportements front-end pour le visiteur mais sont parfois chargés pour rien, ou parfois chargés sur toutes les pages du site mais nécessaires sur une seule page.
Vous devez donc faire en sorte de faire le tri dans ces fichiers et déterminer à quel endroit dans le code, le script est chargé. Si le module ou le thème a été fait correctement, le fichier doit avoir été enregistré à l’aide d’une fonction de WordPress du nom de wp_enqueue_script mais il est possible qu’il soit chargé autrement (dans une balise <script> par exemple).
Si la bonne fonction a été appliquée, vous pouvez utilisez un hook pour supprimer l’appel sur vos pages. En voici un exemple pour le fichier jquery-ui-core.
function wpdocs_dequeue_script() {
wp_dequeue_script( 'jquery-ui-core' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );
À noter également que l’emplacement où sera chargé le fichier (<head> ou footer) sera impactant pour les performances de votre site internet.
Je m’explique. Si votre fichier est chargé dans la balise <head> de votre site alors il sera chargé en priorité lors de l’affichage de la page, ce qui peut ralentir le chargement du contenu. Si vous chargez le script tout en bas de votre page cependant, il sera chargé à la fin de l’affichage de votre contenu, ce qui sera bénéfique pour l’expérience utilisateur. La fonction wp_enqueue_script (documentation) fournie un paramètre $in_footer vous permettant de choisir l’emplacement de chargement de votre fichier.
Les feuilles de style portant l’extension .css
Les feuilles de style (ou style CSS) vont permettre de personnaliser l’affichage de vos pages. Elles sont nécessaires au bon fonctionnement de votre site car elles permettrent d’avoir un site fonctionnel et esthétique. Cependant gare aux feuilles de style inutiles et très volumineuses qui pourraient ralentir vos sites web.
De la même façon que les scripts, vous pouvez choisir leur emplacement mais il est recommandé de les charger en début de page pour un rendu de qualité au premier affichage, raison de plus pour supprimer le superflu ?
La fonction fournie par WordPress sera ici wp_enqueue_style (vous l’aviez deviné, j’en suis sûr !) (documentation).
Les polices d’écriture / fonts
Pas besoin de décrire ce qu’est une police d’écriture, vous le savez tous.
Elles sont jolies mais aussi volumineuses et doivent être chargées que lorsque c’est nécessaire. De nombreux thèmes chargent plusieurs polices d’écriture même si vous ne les utilisez pas et c’est une mauvaise pratique car ça ralentit votre site pour rien.
Dans la mesure du possible, préférez les polices d’écriture stockées sur votre site plutôt que des requêtes externes qui pourraient sérieusement ralentir votre site internet.
De plus, si vous chargez une police uniquement utilisée pour des éléments esthétiques (comme les icônes ou pour un seul titre), préférez le format SVG chargé directement depuis votre site.
Les requêtes externes
De manière générale réduisez le plus possible le nombre d’appels à des sites extérieurs car ce sont de véritables poisons pour votre performance. Tout ce que vous pouvez charger depuis votre site internet, doit l’être depuis votre site internet.
C’est plus rapide (sauf si votre serveur est vraiment lent ?) et ça vous évite d’avoir un site qui ne charge plus le jour à la ressource externe met 3 minutes à répondre, sans compter si la ressource n’est plus accessible et que votre site devient inutilisable.
Compressions des ressources
Niveau technique : Intermédiaire
Dans la suite des optimisations, il est bénéfique de procéder à la compression des ressources que vous allez charger. A l’instar des images, les fichiers tels que les scripts ou les feuilles de style peuvent être compressés pour être moins volumineux.
En plus de la compression (appelée uglification en anglais), il est recommandé de regrouper les fichiers (du même type) dans un seul et même fichier pour réduire le nombre d’appels sur le site.
Pour la compression, vous pouvez utilisez des outils comme Webpack, Gulp ou encore Grunt.
Chargement asynchrone des données et ressources
Niveau technique : Intermédiaire
Le chargement asynchrone consiste à charger des données ou ressources de façon décorrélée du reste de la page. Elles ne vont donc plus bloquer le premier affichage de la page.
Le lazyloading que nous avons vu plus haut, est une forme de chargement asynchrone car il ne bloque pas le rendu de la page et charge les images de façon séparée.
Il est possible de mettre en place du chargement asynchrone sur les ressources comme les scripts grâce à l’attribut async mais ne pourra pas être mis en place sur toutes les ressources sans quoi cela pourrait rendre votre site inutilisable. Je vous conseille donc de demander l’aide d’un professionnel WordPress (sauf si vous en êtes un vous même bien évidement) pour mettre en place ce genre de technique.
Le chargement asynchrone peut également concerné les données car il est possible de charger certaines informations à partir du JavaScript, permettant d’alléger le chargement initial de la page. Il est d’ailleurs possible de créer un site complètement réalisé en asynchrone mais les contraintes SEO nécessitent une attention toute particulière.
Désactivez les fonctionnalités WordPress inutilisées
Niveau technique : Intermédiaire
WordPress est merveilleux en terme de fonctionnalités et fournit un large éventail de choix en terme de personnalisation mais il charge également des ressources qui ne sont pas forcément utiles pour tous les sites.
Il est donc intéressant de désactiver certaines fonctionnalités pour gagner en performance et éviter que votre site charge des fichiers inutilisés. C’est le cas par exemple des emojis. Si vous ne les utilisez pas, vous pouvez supprimer tout ce qui est lié à son utilisation dont les fichiers chargés sur vos pages.
Pour cela, vous pouvez ajouter les lignes suivantes dans le fichier fonctions.php de votre thème :
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
Supprimer les redirections superflues
Niveau technique : Facile
Les redirections sont des instructions de navigation qui envoient les utilisateurs d’une URL à une autre. Bien qu’elles soient parfois nécessaires, les redirections excessives peuvent entraîner une augmentation du temps de chargement des pages, ce qui peut avoir un impact négatif sur l’expérience de l’utilisateur. Faites donc en sorte de supprimer les redirections inutiles.
Il arrive par exemple souvent d’avoir des URLs en « http » sur votre site alors que celui-ci redirige automatiquement vers l’URL sécurisée en « https ». Vérifier donc les URLs du contenu de votre site internet pour supprimer celles qui pourraient l’être.
Tester les performances de son site internet
Niveau technique : Facile à Avancé
Optimiser c’est bien mais il faut pouvoir tester le résultat de votre dur labeur et comparer avec l’état de votre site avant la mise en place d’optimisations.
Pour cela, différents outils existent et vous donne des axes d’améliorations pour optimiser la vitesse de chargement de votre site internet. Certains informations retournées par les outils seront faciles à interpréter, pour d’autres, ça peut parfois être difficile elles demandent un certain niveau technique.
Parmi ces outils (tous gratuits), on retrouve :
Faites le test avec votre site et vous verrez si il est nécessaire d’optimiser les performances ou si votre site est déjà une véritable fusée !
Allez plus loin encore
Niveau technique : Avancé
Il existe encore d’autres optimisations de performances qui elles nécessitent de véritable connaissances techniques. Ces optimisations techniques touchent souvent à la partie serveur du site, elles sont donc plus complexes à mettre en place pour un webmaster sans connaissances particulières des infrastructures serveurs.
CDN : Parmi ces optimisations, vous pouvez par exemple mettre en place un système de CDN pour vos images et ressources afin de les mettre en cache et de réduire leur temps de chargement.
Compression des images : Vous pouvez également mettre en place un système de compression des images avancé en passant outre le fonctionnement WordPress et en utilisant des outils comme pngquant et jpegoptim pour réduire au maximum le volume de vos fichiers multimédias.
Transients : La mise en place de transients est également à étudier car elle permet de stocker des informations dans la base de donnée de façon compressée pour éviter des traitements lourds à chaque chargement de page.
Cache serveur avancé : La mise en place de cache serveur avancé peut également se révéler très intéressante pour des sites à fort trafic. Varnish étant surement le plus connu d’entre eux permet de mettre en cache la totalité d’une page HTML pour une url donnée. Il permet de fournir à tous les utilisateurs qui demandent cette page, une version cachée, ce qui accélère considérablement la vitesse du site.
Hotlinking : Plus une protection qu’une méthode d’optimisation de la vitesse, la mise en place de système anti-hotlinking vous permettra de vous protéger contre les sites qui utiliseraient vos images sur leurs sites web et pourraient par la même occasion ralentir le votre.
Améliorer les performances de votre site WordPress est crucial pour plusieurs raisons :
- Expérience utilisateur : Un site rapide offre une meilleure expérience, réduisant le taux de rebond et augmentant le taux de conversion.
- Référencement naturel : Bien que la vitesse ait un impact mineur sur le SEO, elle est prise en compte par les moteurs de recherche et pourrait devenir un critère plus important à l’avenir.
- Navigation mobile : Avec une augmentation des utilisateurs mobiles, il est essentiel d’optimiser les performances pour garantir une navigation fluide même en 3G/4G.
Pour choisir un thème WordPress optimisé :
- Simplicité : Optez pour un thème répondant uniquement à vos besoins, évitant les « usines à gaz » qui ralentissent le site.
- Optimisation technique : Vérifiez que le thème est bien codé, ce qui impacte directement la vitesse de chargement.
- Customisation : Privilégiez des thèmes sur-mesure si possible, ou des thèmes payants bien optimisés si le budget est limité.
Limiter l’utilisation de plugins WordPress permet :
- Performance améliorée : Moins de fichiers volumineux à charger, ce qui accélère le site.
- Stabilité accrue : Réduire les risques de conflits entre plugins mal optimisés.
- Sécurité renforcée : Moins de plugins signifie moins de vulnérabilités potentielles.
Pour optimiser les images sur WordPress :
- Redimensionnement : Utilisez des images croppées à la bonne taille pour éviter de charger des fichiers lourds.
- Compression : Compressez les images avec des outils comme WebP Express pour réduire leur taille sans sacrifier la qualité.
- Lazyloading : Implémentez le chargement différé des images pour accélérer le rendu initial de la page.
Conclusion
Vous savez désormais pourquoi et comment optimiser les performances de votre site internet. C’est un travail conséquent pour bénéficier d’un site performant et rapide mais le jeu en vaut vraiment la chandelle car vous gagnerez en expérience utilisateur et donc en trafic sur le long terme.
Il est évident que certains sites ne pourront pas bénéficier de toutes ces optimisations mais je vous invite fortement à en appliquer le plus possible pour améliorer la rapidité de chargement de vos pages et avoir la réjouissance de voir vos scores s’améliorer sur les calculateurs de performances. 😉
Cet article est trop technique pour vous ?
Vous ne comprenez pas les optimisations énoncées de cet article ou vous préférez faire appel à un professionnel WordPress pour mettre en place les bonnes pratiques liées aux performances web pour votre site, n’hésitez pas à m’envoyer un message en cliquant sur le lien ci-dessous ou me contacter directement par email.