Comment accélérer son site WordPress ? Le guide ultime pour optimiser WordPress.

Vous souhaitez améliorer la vitesse de votre site web ? Vous avez raison, les entreprises en ligne ont tendance à négliger cet élément crucial. Si vous êtes ici, vous avez probablement fait le plus gros du travail !

Pourquoi améliorer le chargement de son site ?

Un site lent se traduit rapidement par des pertes financières et une mauvaise identité de marque pour les entreprises du Web.
Effectivement, la performance des sites est primordiale au succès des entreprises : les sites qui prennent plus de trois secondes pour se charger perdent en moyenne 40% du trafic et trois personnes sur quatre abandonneront un site sur mobile si le chargement prend plus de cinq secondes.
Enfin, 79% des visiteurs ne retournent jamais sur des sites de e-Commerce lents ! Optimisez au maximum vos performances, car réduire le temps de chargement de 0,1 seconde seulement pourrait entraîner une augmentation des taux de conversion de 8% (chiffres donnés par Google).

Vous vous en doutez donc, l’expérience utilisateur devient catastrophique et les entreprises ne comprennent pas forcément pourquoi leurs sites ne convertissent pas. De plus, la vitesse du site et de ses Core Web Vitals pourrait optimiser votre référencement naturel (SEO), de par les critères de Google et ses budgets de crawl.

N’oubliez pas de toujours optimiser vos performances avec le « Mobile-First » en tête.
Vous devriez réduire le chargement de votre site au minimum de trois secondes sur ordinateur et moins de cinq sur mobile (si possible en 3G). Si ce n’est pas déjà fait, vous pouvez dès à présent installer Google Analytics 4 ainsi que la Google Search Console pour vérifier les performances de vitesse de votre site web.

Le contenu peut naturellement contenir des liens d'affiliation pour certains produits que j'utilise et que j'aime. Si vous prenez des mesures (c'est-à-dire vous abonner, effectuer un achat) après avoir cliqué sur l'un de ces liens, je gagnerai de l'argent en café ☕️ que je promets de boire tout en créant un contenu plus utile comme celui-ci.

Améliorer le temps de chargement :

• Les bons outils pour l'analyse du temps de chargement
• Choisir le bon hébergement
• Plein de paramètres incontournables pour améliorer la vitesse
• Optimiser le poids de ses images
• Trier et supprimer vos plugins
• Désactiver des plugins spécifiques pour certaines pages
• Optimiser ses polices
• Optimiser ses performances au maximum

0. Liste des outils pour tester les performances de votre site

Il n'y à pas de meilleur outil mais plutôt plusieurs outils qui doivent tous être utilisé pour analyser les performance de vitesse :

1. Pingdom (l’emplacement du serveur de test est important, si votre site est uniquement destiné au public français, utilisez les serveurs de test Frankfurt et/ou London).
2. Google PageSpeed Insights
3. Web Page Test (indispensable pour comprendre quelles sont vos ressources qui consomment le plus).
4. Google Mobile PageSpeed

Attention, ce n’est pas parce que Google PageSpeed vous donne des notes catastrophiques qu’il faut s’inquiéter en terme de vitesse, utilisez l’analyse de Pingdom pour déterminer la vitesse réelle de chargement globale de votre page.
Les notes ne sont pas toujours révélatrices, et parfois appliquer des optimisations qui augmentent les notes pourrait ne pas être détecté par les outils d’optimisation des performances.

Et quelle est cette note de Google PageSpeed ? En fait elle n’a pas grand chose à voir avec votre vitesse, c’est une note de Core Web Vitals. Si vous souhaitez en savoir plus, vous pouvez consulter notre article dédié Google PageSpeed, améliorer et comprendre sa note de Core Web Vitals.

Note : si votre site est déjà optimisé par la mise en cache, vous devriez tester plusieurs fois à cause de celle-ci et faire une moyenne pour avoir les résultats les plus concrets possible.

1. Choisir le bon hébergement

Choisir son hébergement est le plus important pour la vitesse de votre site WordPress !

Toutes vos requêtes dépendent de la vitesse de votre hébergeur. Je ne suis pas certain que ce soit une bonne chose de vouloir affiner l’aérodynamisme d’une voiture et de lui ajouter un turbo si le moteur ne dépasse pas les dix chevaux. C’est la même chose pour les performances web.

Si vous utilisez WordPress, oubliez les hébergements comme OVH, Hostinger, LWS, o2switch etc. Ils ne sont pas conçus ni optimisés pour du WordPress, même s’ils ont des offres « hébergement WordPress ». Ces offres ne fournissent que les outils et non les performances.

Pour accroître grandement la vitesse de votre site, orientez-vous vers un hébergement infogéré WordPress comme Pressable, Flywheel, WP Engine, WordPress, ou Kinsta.

Vous pourrez retrouver sur le Web de nombreux articles de blogueurs qui sont passés par exemple de WP Engine à Flywheel puis à Kinsta. Tout le monde tend vers les performances de Kinsta comme le meilleur hébergement WordPress du marché.

Selon Review Signal :
« C’est presque ennuyeux d’écrire sur Kinsta. 100% de temps de disponibilité. 0 erreur d’impact de charge. Il y avait également 0 erreur sur les deux tests de charge et le temps de réponse de pointe le plus bas sur le test Load Storm.»

Kinsta disposent de toutes les optimisations coté serveur que vous devriez utiliser pour optimiser la vitesse de votre site :

1. Serveur cloud
2. Cache directement coté serveur
3. NGINX & Expires header
4. GZIP
5. CDN
6. DNS Premium
7. [...]

Que vous souhaitiez ou non passer chez Kinsta, ces optimisations auront le plus d'impact pour la vitesse de votre site web.

C’est également le seul hébergeur à ma connaissance qui propose un outil sur leur interface pour analyser et réparer la vitesse de votre site : Kinsta APM. Ils ont également l’outil New Relic, un outil de surveillance PHP qui vous permet d’obtenir des statistiques de performances détaillées sur votre site web. Vous pouvez lire des cas concrets de l’utilisation de leurs outils : Performances WooCommerce en utilisant Kinsta APM (exemples concrets) ou encore Améliorer la vitesse de votre site web d’adhésion avec l’outil Kinsta APM.

À noter également que la version de PHP est également très importante pour les performances de votre site. Par exemple sur Pressable, leur version PHP actuellement disponible est la 7.4 (en mai 2021), alors que Kinsta propose depuis plusieurs mois PHP 8.0. N'hésitez pas à vérifier votre version dés maintenant et à la mettre à jour si possible.

2. Les meilleurs plugins pour optimiser la vitesse

Une grande force de WordPress sont les plugins. Et heureusement, la communauté WordPress à mis en place des plugins d'optimisation de vitesse très puissant.

WP Rocket

Voici des critères qui augmenteront grandement la vitesse de votre site :

1. Mise en cache
2. Préchargement du cache, des liens, des requêtes DNS et des polices
3. Minifier les fichiers CSS, JavaScript et HTML
4. LazyLoad : utiliser le chargement différé pour les images, les vidéos et iFrames
5. Combiner les fichiers CSS et JavaScript
6. Optimiser le chargement du CSS → Élimine les ressources bloquant le rendu (CSS)
7. Charger JavaScript en différé → Élimine les ressources bloquant le rendu (JavaScript)
8. Dimensions des images – Ajouter les dimensions d’images manquantes (CLS Core Web Vitals)
9. Nettoyer les contenus, les commentaires, les transients et la base de données
10. Heartbeat
11. Optimiser le chargement de Google Analytics et Facebook Pixel
12. Reporter l’exécution JavaScript

D'ailleurs ce sont des pistes d'amélioration que vous retrouverez surement après une analyse de Google PageSpeed Insights.

Ça tombe bien ! L'extension WP Rocket à déjà pensé à tout, et il vous suffit de quelques clics pour optimiser tous ces paramètres. Magique n’est-ce pas ?

Vous devriez éviter les plugins gratuits de mise en cache, ils ont tendance à être beaucoup plus vulnérables, à générer plus souvent des bugs d’affichage et parfois ralentir plus qu’autre chose. Utiliser un plugin comme WP Rocket pourrait vous faire gagner beaucoup plus d’argent que ce que vous allez payer.

Perfmatters

• Désactiver les émojis
• Désactiver les Embeds
• Désactiver le XML-RPC
• Supprimer jQuery Migrate
• Masquer la version de WordPress
• Supprimer le lien WLWManifest
• Supprimer le lien RSD
• Supprimer Shortlink
• Désactiver les flux RSS
• Supprimer les liens des flux RSS
• Désactiver les Self Pingbacks
• Désactiver l'API REST
• Supprimer les liens de l'API REST
• Désactiver Dashicons
• Désactiver Google Maps
• Exclude Post IDs
• Désactiver les polices Google
• Désactiver les commentaires
• Désactiver Heartbeat et ou Fréquence de Heartbeat
• Limiter les révisions (WP Rocket autorise seulement ces suppressions)
• Intervalle d'enregistrement automatique
• Modifier l'URL de connexion
• Désactiver les scripts
• Désactiver la fragmentation du panier
• Désactiver la boîte méta de statut
• Désactiver les widgets

Il y a très peu de chance que tout ceci vous soit utile. Donc pas d’inquiétude et optimisez votre site. Vous avez également un « ? » au sein du plugin décrivant chacun des paramètres pour vous dire à quoi cela sert, et une documentation complète.

Tout comme WP Rocket, je vous invite à parcourir l’extension et à ajouter tous les paramètres possibles (si un paramètre est déjà optimisé avec WP Rocket, ne le faites pas en double)

C’est relativement simple ! Il suffit de cliquer sur des boutons.

N’oubliez pas de vérifier à la suite de vos modifications, si votre site n’affiche pas des erreurs ou des bugs d’affichage en utilisant une fenêtre de navigation privée. Si un paramètre d'optimisation génère un problème, désactivez-le si vous n'avez pas les compétences requises pour comprendre le problème. Vous pouvez tout de même faire appel à un développeur si vous en ressentez le besoin.

3. Optimiser le poids de ses images

Les images sont extrêmement gourmandes, vous pourriez grandement réduire la vitesse de chargement de votre site en les optimisant.
Téléchargez vos images avec pour extension .jpg puis téléchargez Imagify, un plugin complet d’optimisation d’images pour WordPress.

1. Optimisez le poids de vos images : trouvez le parfait équilibre entre la taille du fichier et la qualité de votre image. Testez les 2 niveaux d’optimisation « agressif » et « ultra » puis comparez les différences. Si la qualité est acceptable pour ultra, optimisez vos images en ultra.

2. N’utilisez pas des images trop grandes si cela n’apporte aucun intérêt. Si vous téléversez une image en 3000x3000 mais que vous l’affichez en 800x800 en CSS, téléversez-la directement en 800x800, vous allez économiser énormément de ressources. Vous pouvez également donner à Imagify une valeur maximum pour vos images afin de les redimensionner automatiquement. Mais privilégiez de redimensionner votre image spécifiquement en fonction de sa mise en page.

3. Diffusez vos images en format .webp, format d’image adapté au web permettant d’économiser encore plus de ressources. Dans les réglages, sélectionnez les options suivantes (si vous n’avez pas de CDN, laissez le champ vide) :

Vous pouvez également vérifier la liste des éléments suivants :

• Vous pourriez peut être utiliser le format svg, attention toutefois cela dépend de la complexité de votre image : Svg VS Flat Images. Vous pouvez également consulter cet article si vous souhaitez utiliser le format svg correctement sur WordPress : Svg sur WordPress.
• Utilisez un CDN pour servir vos images (→ Kinsta)
• Différez le chargement de vos images : LazyLoad (→ WP Rocket & Perfmatters)

4. Trier et supprimer vos plugins

Utilisez le moins d’extensions possible et évitez les extensions peu utiles par rapport à leurs conséquences en terme de vitesse. Vous pourriez aussi peut-être vous passer d’une extension en ajoutant simplement quelques lignes de code, comme pour les extensions de partage des réseaux sociaux qui sont inutiles. Pensez également à supprimer les extensions désactivées : si vous ne l’utilisez plus, supprimez-la. Vous pouvez télécharger le plugin Performance Profiler pour identifier quel plugin est le plus gourmand pour votre site web. Évidemment, après l’utilisation du plugin, supprimez-le.

5. Désactiver des plugins spécifiques pour certaines pages

L’utilisation de plugins réduit considérablement la vitesse de vos pages, mais il se peut que vous ayez besoin de vos plugins. Vous pouvez tout de même optimiser leur chargement pour accroître vos performances. Oui, il est tout à fait possible que plusieurs de vos plugins soient utilisés et chargés sur chacune de vos pages, même si vous ne faites pas appel à eux.

Prenons l’exemple de Contact Form 7, l’un des plugins les plus populaires pour créer un formulaire de contact complet sur WordPress. Malheureusement le plugin charge ses scripts et ses styles même si vous n’avez pas de formulaire sur votre page (ou encore Slider Revolution et bien d'autres). Mais pas d’inquiétude ! Vous pouvez désactiver vos plugins pour des pages spécifiques. Si vous êtes un peu débrouillard vous pouvez désactiver vos plugins spécifiquement et manuellement avec ce code Git.

Sinon, il existe des plugins conçus pour désactiver ces plugins spécifiquement. Cela peut certes paraître barbare d’utiliser un autre plugin pour cela, mais si vous préférez passer par-là, ça reste très bénéfique !
Pour cela vous pouvez utiliser :

• Plugin Load Filter → Gratuit
• Plugin Organizer → Gratuit
• Plugin Perfmatters → Payant (≈ 20€)

J’ai une préférence incontestable pour Perfmatters car la gestion est simplifiée, le plugin est léger et il propose d’enlever seulement certains scripts au sein d'un plugin, certains CSS et certains JS plutôt que de désactiver entièrement le plugin. Perfmatters propose également de ne pas utiliser certains scripts d'un thème et avec les modes Regex et MU, vous pouvez désactiver à peu près n'importe quelle combinaison de scripts. Vous pouvez également supprimer un script seulement pour mobile.
Cela pourrait s’avérer incroyablement puissant si vous utilisez quand même un plugin sur votre page mais pas tous ses scripts. Ce qui est plus commun que l’on ne pourrait penser, car la majorité des développeurs de plugin mais aussi les thèmes WordPress n'optimisent pas du tout leurs créations au niveau des performances. De plus, Perfmatters dispose de plein d’autres paramètres d’optimisation qui pourraient grandement vous intéresser, comme vu précédemment.

Note : GooglePageSpeed affiche généralement seulement la partie du code inutilisé à l’intérieur d'un script que vous utilisez mais ne vous indique pas les scripts que vous n'utilisez pas du tout.

Pour charger spécifiquement vos plugins avec Perfmatters, suivez la procédure suivante : allez dans votre console d’administration WordPress puis dans Réglages > Extras > Assets

Puis cliquez pour activer le Gestionnaire de script :

Vous n’avez plus qu’à choisir votre page, et accéder au gestionnaire de script à l’aide de la barre de raccourci d’administration :

Vous pouvez voir sur la partie rouge que je désactive certains scripts pour un seul et même plugin mais tout en l’utilisant. Enfin, comme montré dans le cadre bleu ci-dessous, vous pouvez désactiver entièrement un plugin pour cette page spécifique :

Vous pouvez aussi constater que Perfmatters vous donne le poids de vos fichiers, et c'est très pratique. Aussi, l'avantage du Script Manager est qu'il n'apporte aucune modification permanente. Si quelque chose ne va pas, vous pouvez simplement réactiver le script. Il existe même un mode de test pour que vous puissiez vérifier avant les modifications.

J’ai personnellement économisé en moyenne 25% de vitesse de chargement complet rien qu’avec cet outil. Et parfois divisé la vitesse par deux lors de prestations...

6. Optimiser ses polices

Les polices consomment en moyenne 6,2% du poids total d'un site Web, il est tout de même possible que vos polices consomment beaucoup plus, c'est pourquoi il est important d'utiliser WebPageTest afin de déterminer vos ressources les plus gourmandes. Les grandes marques telles que GitHub, Bootstrap, Medium, Ghost ainsi que votre tableau de bord d'administration WordPress utilisent toutes ce qu'elles appellent une pile de polices système pour pallier à ce problème. Cela signifie qu'ils utilisent les polices de votre ordinateur. Lorsque vous utilisez une pile de polices système, il n'est pas nécessaire de charger des polices sur la page ! C'est assez énorme !

Pour ce faire, vous pouvez ajouter ce CSS :
body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Si cela ne marche pas avec votre thème, vous pouvez essayer :
body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", “Segoe UI Emoji“, "Segoe UI Symbol";}

Et enfin pour vos balises titres :
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Si cela ne marche toujours pas, vous pouvez ajouter « !important »avant le « ; ».

Sinon, si vous utilisez GeneratePress (le meilleur thème léger), il vous suffit d’aller dans Apparence > Personnaliser > Typographie et sélectionner « System stack ».

Sinon vous pouvez :

• Héberger localement vos polices
• Limiter le nombre de polices utilisées, deux polices suffisent pour votre site (UX).
• Ne pas charger l’une de vos polices en normal, puis bold, puis italic. Utilisez du CSS pour servir différemment vos polices : font-weight : bold; | font-style : italic; [...]
• Inclure les formats supplémentaires : woff2, woff, ttf, et eot. Les navigateurs sélectionneront la version qu’ils peuvent utiliser et chargeront vos polices le plus rapidement possible.
• Vous pouvez également précharger vos polices, utiliser un CDN, mettre en cache et minifier vos polices. Mais normalement vous avez déjà fait ces choses-là si vous avez suivi le début de l’article !

Voilà ! Vous avez obtenu un site super rapide ! Vous n’aurez pas forcément besoin d’optimiser encore plus votre site web. Si pour des raisons diverses cela ne suffisait pas ou bien si vous êtes un maniaque des performances, vous pouvez également vérifier et utiliser cette liste complémentaire :

7. Optimiser ses performances au maximum

Kinsta APM & New Relic : analysez les problèmes de vitesse de votre site et obtenez les résolutions nécessaires avec ces outils. Kinsta dispose également d’un service de support « premium », vous pourrez donc les contacter si vous avez besoin d’aide pour des résolutions complexes.

Réanalysez votre site avec les outils cités en début d’article, ils pourraient vous indiquer des pistes d’amélioration supplémentaires. Et surtout utilisez webpagetest, webpagetest et aussi webpagetest. C'est indispensable maintenant que vous avez effectué toutes les améliorations pour voir quels sont les ressources qui consomment le plus si jamais la vitesse ne vous convient toujours pas. Si vous voyez que 90% est dédiés aux images, enlevez des images, etc. De plus vous pouvez sélectionner une multitude de paramètres comme la vitesse 2G/ 3G/ 4G, la taille de l'écran et plein d'autres choses.

Vous pouvez décider de choisir un thème WordPress léger tel que GeneratePress. Je mets cette optimisation ici car vous devrez changer votre site entièrement et vous n'allez sûrement pas le faire. Sauf que la majorité des sites n'est pas très technique en design et pourtant utilise des thèmes lourds comme Elementor alors que GeneratePress suffit amplement pour eux. C'est un critère d'optimisation non négligeable.

Utilisez les bons formats vidéo : Lottie et ou WebM sont idéaux pour diffuser vos vidéos.

Supprimez et/ou évitez les grandes charges de JavaScript.

Limitez ou supprimez les services externes comme les publicités : si votre site utilise des publicités, vous pourriez peut-être envisager d’en afficher moins.

Utilisez une demande d’autorisation de cookie moins lourde : vous pouvez aussi utiliser Perfmatters, et ajouter « Anonymiser les IPs ». Cela vous permet de ne pas à avoir afficher votre service tiers de conformité RGPD. Vous pouvez en savoir plus sur les cookies ici : Google Analytics soumis au consentement ?

Limitez au mieux le nombre de redirections : vous pouvez trouver le nombre de redirections sur une page dédiée en utilisant Pingdom. Vous pouvez également vérifier leur nombre sur votre plugin de redirection. Si vous devez ajouter une redirection, faites-le au niveau du serveur pour l'optimisation du chargement. Les fournisseurs d'hébergement comme Kinsta facilitent cette tâche avec leur outil de redirection dans le tableau de bord.

Utilisez les polices d'icônes correctement : Les thèmes WordPress ou les plugins génèrent toutes les icônes même si vous n'en utilisez qu'une ou deux. Kinsta a écrit un article complet dessus : utiliser les icônes WP de la bonne façon (perf).

Résumé : optimiser la vitesse de son site WordPress