Bienvenue sur cet guide relatif à la lenteur et aux performances des sites WordPress. 
Ce post va te permettre de connaitre les facteurs qui peuvent ralentir un site WordPress et te permettre d’identifier et comprendre ce qui peut ralentir ton site web. 

Tu trouveras dans cet article sur les lenteur WordPress : 

Avoir un site web rapide, pourquoi est-ce important  ?

Pour l’internaute
La réponse semble hyper simple : car sur un site web trop lent, l’utilisateur part sans attendre, ou alors il se lasse dès la seconde ou troisième page. Autrement dit, plus ça charge rapidement et plus l’internaute va rester sur le site, plus le site est lent et plus l’internaute le quitte.

Pour Google
L’internaute n’est pas le seul auquel il faut penser. Même si ce que tu vas lire ci-après est lié, il faut vraiment prendre en compte Google. En France, plus de 80% des recherches passent par Google. Autrement dit, si tu veux avoir un trafic internet de qualité et conséquent il faut que ton site plaise à Google.

Google a officielement annoncé prendre en compte les performances des sites internet dans le référencement. Autrement dit, un site rapide sera favorisé par rapport à un site lent dans les résultats de recherche Google.

Pour aider à y voir plus clair, Google a créé les signaux web essentiels et mis à disposition un outil de test de temps de chargement pour les pages internet. Ils font ça bien :-).

 

Facteurs de lenteur sur les sites WordPress

L’hébergement

Parfois, un problème d’hébergement peut causer des problèmes de performances.
Certains hébergeurs ne mettent pas à jour leurs serveurs internet et cela cause des problèmes de lenteur, voir de sécurité.
Mon point de vue : si ton site est propre, bien configuré, que tu as optimisé tout ce qui vient après, alors regarde du coté de ton hébergement. En général, mettre quelques euros de plus par mois dans ton hébérgement peut faire une grosse différence !

le thème et les plugins

La personnalisation de WordPress c’est à la fois ce qui le rend génial et l’outil de création de site web numéro 1 dans le monde…mais ça peut aussi être sa croix.

J’aime comparer WordPress à la base d’une voiture. Le chassis et le moteur. Sur cette base tu vas ajouter une carroserie : le thème. En fonction du type de carosserie et de sa matière, la voiture sera plus ou moins lourde (ex : carroserie en acier, contre fibre de carbonne).
Certains thèmes sont plus lents que d’autres.
De la même façon, si tu décides de passer votre voiture en 4 roue motrice, d’ajouter des options qui alourdissent son poids, elle sera moins rapide…

C’est la même chose avec WordPress, si vous avez trop d’options : trop de plugins, cela risque de ralentir serieusement ton site.

Dans la mesure du possible, essaie de ne pas avoir trop de plugin, de faire sans, et lorsque tu ajoutes un nouveau plugin, teste toujours ton site afin de valider qu’il ne ralentit pas trop celui-ci.
J’ai un exemple en tête chez un de mes clients. Il avait un temps de chargement catastrophique. En investigant, la raison principale était un plugin de popup marketing qui était en conflit avec le style du thème et faisait mouliner le site…

La gestion du cache (absence en général)

Pour résumer de façon hyper simple : ,ormalement, lorsqu’un utilisateur arrive sur une page, tous les éléments sont demandés au serveur web. Le système de cache est un mécanisme qui permet aux sites web de charger plus rapidement en stockant temporairement des données. Cela permet de réduire le temps de chargement des pages et d’améliorer l’expérience utilisateur. 

Par défaut, le cache n’est pas configuré dans WordPress…aussi soit tu vas le configurer à la main, soit tu vas pouvoir utiliser un plugin de cache pour résoudre le problème.
Une fois le plugin choisi, fais bien des tests car le cache peut faire planter ton site, mais s’il est bien implémenté, cela te fera gagner pas mal de performances en réduisant sensiblement le temps de chargement. 

Des images mal configurées

Nous sommes tous d’accord sur le fait qu’un site web avec des images et plus sympa qu’un site web avec uniquement du texte.
Néanmoins, des images trop lourdes vont ralentir ton site web. Imaginez, une image de 2mo va faire perdre plus d’une seconde de chargement à un internaute en 3g ou en ADSL…eh oui, il-y-en a encore !
Qu’est-ce qui rend une image trop lourde ?

  • Sa taille. Dans 99.9% des cas, rien ne sert d’avoir des images de plus de 1800 pixels de large, voir même 1000 pixels dans de nombreux cas. Pourquoi ? Car aujourd’hui les internautes naviguent sur smartphone, donc n’ont pas des écrans immenses, et puis
  • Son format. Aujourd’hui il existe des formats de photo plus légers que d’autres. Privilégiez par exemple le format webp, créé spécifiquement pour le web. Par défaut, ce format n’est pas géré par WordPress, mais déjà en utilisant le format Jpeg, avec des images pas trop grosses…cela devrait déjà aider.
  • Sa qualité. Une image de haute qualité est plus lourde, donc nécessite plus de ressources qu’une image de qualité moindre. Donc il convient d’optimiser les images pour qu’elles soient légères, mais qu’à l’oeil nu on ne voit pas que l’image a perdu en qualité.

Pour améliorer les performances : le lazy loading ou chargement différé. Il est possible de n’afficher les images que lorsque l’utilisateur les voit. Autrement dit, une image pas à l’écran n’est pas chargée. Par défaut cela n’est pas implémenté dans WordPress, mais certains thèmes comme Divi le prennent en charge, et puis si pas il est possible de le gérer avec un plugin :).

Le style et les scripts

Le style de la page internet doit être chargé, ou alors la page est horrible. WordPress et le web fonctionne aussi beaucoup avec des scripts javascripts qui doivent être chargés pour afficher la page. Donc plus il-y-a de scripts et plus tu as de chance de ralentir ton site.
Heureusement, il existe un certain nombre de techniques afin de réduire le temps de chargement.
Si cela t’intéresse, tu as les attributs ‘async’ et ‘defer’ :

Pour résumer, en paramétrant tes scripts avec l’attribut « async » permet de télécharger les fichiers JavaScript en arrière-plan tout en permettant à la page de se charger rapidement, mais ne garantit pas l’ordre d’exécution du code JavaScript, tandis que l’attribut « defer » télécharge également les fichiers JavaScript en arrière-plan, mais garantit que le code est exécuté dans l’ordre correct.

Situer les performances de mon site

Mais alors, ton site est il rapide ?
La réponse est hyper rapide à obtenir, il suffit de te rendre sur

Tester mon site avec Page speed insight

Comprendre ma note avec les Signaux web essentiels

Dans Page Speed Insight, tu as différents facteurs qui vont définir ta note, ce sont les signaux web essentiels.

Les principaux facteurs des signaux Web essentiels de Google sont les suivants :

Largest Contentful Paint (LCP) : Il s’agit du temps de chargement de la plus grande image ou texte visible à l’écran. Google recommande un LCP de moins de 2,5 secondes pour offrir une expérience utilisateur optimale.

First Input Delay (FID) : Il s’agit du temps de réponse entre le moment où un utilisateur interagit avec un site Web (clic, touche, etc.) et le moment où le site Web répond. Google recommande un FID de moins de 100 millisecondes pour offrir une expérience utilisateur optimale.

Cumulative Layout Shift (CLS) : Il s’agit du nombre de mouvements involontaires d’éléments à l’écran pendant que la page se charge. Google recommande un CLS de moins de 0,1 pour offrir une expérience utilisateur optimale.

Ces trois facteurs sont considérés comme les signaux Web essentiels de Google car ils sont les plus importants pour l’expérience utilisateur d’un site Web.

En plus de ces facteurs, Google prend également en compte d’autres critères tels que la sécurité du site Web (HTTPS), l’adaptabilité aux mobiles (Mobile-Friendly), la vitesse de chargement globale, la convivialité, la qualité du contenu et l’accessibilité pour déterminer le classement des pages dans les résultats de recherche.

Voir comment améliorer les performances en vidéo