La performance de site web sous wordpress
Pourquoi la vitesse est-elle aussi importante?
Optimiser la vitesse de chargement de votre site est très important, non seulement pour votre visiteur, mais également pour les moteurs de recherches tels que Google. C’est une étape cruciale dans le référencement naturel (SEO).
Concernant l’amélioration de votre position, les moteurs de recherche mesurent la vitesse de votre site web dans leur algorithme. Quand ils recommandent un site, ils veulent s’assurer que les utilisateurs trouveront ce qu’ils cherchent rapidement.
Pourquoi notre agence vous en parle ?
Dans notre pôle site web, nous offrons un contrat de maintenance. Ce contrat englobe toute une série de service et de monitoring pour la performance des sites web sous contrat avec nous.
Outils pour tester la vitesse de chargement :
Il existe plusieurs outils pour tester la vitesse de votre site web. Les plus utilisés sont :
PageSpeed Insights: proviens directement du défunt Google labs. Il vous fournira des conseils techniques classés par priorité d’importance afin d’optimiser les performances de votre site. Je vous recommande donc fortement de régler les problèmes de haute et de moyenne importance tout d’abord.
Attention, ce n’est pas parce que vous obtenez une mauvaise note que votre site est nécessairement lent et l’inverse est également vrai.
Pingdom Tool: Cet outil vous aidera à tester la vitesse de votre site Web, et ce rapidement. Il vous sera possible de choisir la provenance de la requête ainsi que d’enregistrer ou non les résultats pour suivre votre progression pendant vos optimisations.
YSlow effectue des tests de performance sur un site et donne quelques conseils afin d’améliorer ses performances.
Nous utilisons Pagespeed Insights et Yslow pour la gestion et le contrôle de la performance pour nos clients.
Ce qu’il faut faire ?
1- Limiter le nombre d’extensions
2- Limiter/Désactiver les révisions WordPress
Pour corriger ce problème, insérer l’un des codes ci-dessous dans le fichier wp-config.php, situé à la racine de votre site.
Désactiver complètement les révisions:
define( ‘WP_POST_REVISIONS’, false );
Limiter le nombre de révisions:
define( ‘WP_POST_REVISIONS’, 3 ); // limite à 3 révisions
3- Nettoyer la base de données
4- Limiter les ressources externes
Une ressource externe est simplement un script, une feuille de style, une Font où toutes autres ressourcent qui n’est pas hébergé sur votre serveur. Même Google Analytics est une ressource externe!
5- Widget et outils de partage
Les outils de partages tels que Facebook et Twitter peuvent être les éléments qui ralentissent le plus votre site.
6- Publicités et produits affiliés
7- Les images
L’optimisation des images est un enjeu crucial pour la performance Web.
En effet, les images représentent souvent la majorité des octets téléchargés sur une page. Par conséquent, l’optimisation des images permet souvent les plus importantes économies en octets et améliorations de performances pour votre site Web.
7.1 Éliminer et remplacer les images
La toute première question que vous devez vous poser est la suivante : cette image est-elle vraiment indispensable? Un bon design doit être simple, et offre également les meilleures performances. Cela étant dit, une image bien placée peut également transmettre plus d’informations qu’un millier de mots.
7.2 Sélectionner le bon type d’image
En effet, le bon type d’image peut faire la différence.
• JPG – Utilisez les JPG pour les photos, les images en hautes résolutions et celle avec beaucoup de détails.
• PNG – Utilisez les PNG pour les icônes, les logos, les illustrations et les images avec peu de détail.
• GIF – Les GIF ne sont pas si mal pour les petites images, mais par expérience ils sont très rarement supérieurs au PNG. Donc, n’utilisez les GIF que lorsque vous voulez une animation 😉
7.3 Sélectionner les bonnes dimensions
Attention de ne pas télécharger des images plus grandes que nécessaire dans votre site. Redimensionner manuellement celle-ci ou bien utiliser une extension telle que Imsanity pour redimensionner automatiquement les images à des dimensions acceptables.
7.4 Compression des images
La compression des images est une étape importante. Certes, vous pourriez le faire manuellement dans Photoshop, mais en plus d’être fastidieux vous obtiendrez de meilleurs résultats avec une extension spécialisée.
L’extension Compress JPEG & PNG images offre les meilleures performances en plus d’être très facile à configurer pour les débutants. Pour configurer l’extension, vous devez seulement obtenir une clé API sur leur site Web.
L’extension Tiny png et Tiny Jpeg est aussi très performante dans sa version free et Pro.
7.5 Différer le reste ( Lazy-load )
En effet, il est possible de charger uniquement les images lorsque le lecteur en a besoin. Le chargement en différé est une excellente technique car elle permet de charger uniquement les images visibles par l’utilisateur.
L’excellent WP Rocket offre cette fonctionnalité directement dans leur extension de caching. Elle est également disponible séparément.
8- Hébergement de qualité
Malgré que l’hébergement soit important, ce n’est pas le plus important. En effet, la responsabilité du serveur dans la performance de votre site est située entre 10% et 20%. À vous d’investir votre temps et votre argent à bon escient.
9- La cache serveur et navigateur
Une extension de cache WordPress est la façon la plus simple et rapide d’optimiser votre site.
WP Rocket est honnêtement difficile à supplanter en terme de performance et de facilité de configuration. Plus une extension est compliquée à configurer, plus il y a de chance de faire des erreurs de configuration. Ce n’est pas très plaisant de ne jamais être certain d’avoir configuré correctement la performance de notre site. Avec WP Rocket, vous achetez la certitude d’avoir la meilleure performance.
Chez Digital Syndrom on utilise aussi W3 Total Cache, une extension gratuite et qui peut donner de bon résultat si elle est bien configurée.
10- La cache serveur
Pour résumé de façon grossière, WordPress est dynamique et vous devez le rendre statique. Dans le cas contraire, à chaque fois qu’une page de votre site est visitée, votre serveur doit effectuer des calculs et opérations. Ensuite, le serveur génère le HTML et le retourne à votre navigateur. Ce processus doit normalement se répéter à chaque visite.
Si votre site possède une solution de caching, le serveur doit simplement retourner le HTML. Ce qui est beaucoup plus efficace. La cache serveur est automatiquement activée avec WP Rocket, et doit être bien configuré chez W3 Total Cache.
11- La cache navigateur
La cache navigateur peut accélérer considérablement le chargement aux visiteurs qui visite plusieurs pages de votre site. En effet, tous les fichiers statiques tels que les feuilles de style et les fichiers JavaScript peuvent être mis en cache par le navigateur. Ce qui permet le visionnement d’une deuxième page beaucoup plus rapidement. La cache navigateur est automatiquement activée avec WP Rocket et doit être aussi être bien configuré chez W3 Total Cache.
12- L’optimisation des fichiers
12.1 La compression
La compression la plus connue est sans aucun doute la compression Gzip.
Comme vous pouvez le voir, la compression réduit considérablement le poids des ressources statique. La compression est automatiquement activée avec WP Rocket.
Pour savoir si la compression est activée sur votre site, utilisez cet outil.
12.2 Les ressources CSS
Gardez simplement comme objectif de réduire au maximum le nombre de feuilles de style.
Le navigateur doit attendre le chargement complet de toutes les feuilles de style avant d’afficher quoique ce soit à l’utilisateur. En réduisant le nombre de feuilles de style, vous accélérez donc considérablement votre site.
C’est bien beau réduire le nombre de feuilles de style, mais avec WordPress c’est pratiquement impossible. Les thèmes sont très souvent axés “fonctionnalités” et il y a bien entendu une feuille de style par fonctionnalités.
C’est toutefois possible, plusieurs extensions comme WP Rocket et W3 Total Cache peuvent vous aider avec la concaténation et cela sans la moindre ligne de code. Attention, la concaténation est une opération délicate! Il n’est pas rare que cette opération brise votre site. C’est donc à tester avec précaution.
12.3 Les fichiers JavaScript
Comme pour les ressources CSS, les fichiers JavaScript bloquent nativement l’affichage de la page. Il est donc conseillé de les réduire au maximum. Les développeurs ont la même flexibilité d’optimisation que pour les feuilles de styles et les débutants ont les extensions WP Rocket et W3 Total Cache.
13- Le visuel
Oui vous avez bien lu, le visuel est un aspect à considérer. La bonne performance commence toujours par un bon design.
Est-ce que la page d’accueil de votre thème commence avec un énorme carrousel ? Vous êtes au courant que les carrousels sont pratiquement inutiles ? Votre site charge une vidéo en arrière-plan, ou une image HD? Votre site affiche tous les widgets sociaux? Si oui, n’oubliez pas que pour accélérer votre site vous devrez faire des compromis importants en ce qui concerne le visuel et rien n’est à négliger.
Prenez note que rien ne vous empêche d’intégrer les éléments ci-dessus. Je souhaite simplement vous mentionner que si la performance est une priorité, vous devrez faire un choix!
14- Content delivery network ( CDN )
Un CDN sera utile à vos visiteurs pour charger les éléments comme les images, les JavaScript et les feuilles de style à partir du serveur le plus près de chez eux.
Contrairement à ce que vous pouvez avoir lu, le CDN n’est pas toujours nécessaire. En fait, il peut même dans certains cas nuire au chargement de votre site s’il est utilisé sans raison. En effet, un CDN ajoutera une requête DNS au chargement de la page. Il est donc avisé de configurer un CDN lorsque vos visiteurs viennent de l’international.
Cet article a pour source un article de M ERIC VALOIS pour le magazine online https://bulledev.com/. Nous nous sommes bien inspirés car il représente une image de ce que nous traitons pour nos clients avec lesquels nous avons conclu un contrat de maintenance.
