Officiellement, la performance de votre site n’est qu’un tout petit facteur de référencement comme le précise Gary Illyes (un porte parole de chez Google). Mais, il est primordial pour augmenter vos conversions. Aucun utilisateur n’aime attendre plus de quelques secondes qu’une page web termine son chargement. Voyons ensemble à travers cette liste comment booster la vitesse de votre site.
Télécharger l’ebook 10 astuces pour accélérer les performances de votre site gratuitement
Ranking wise it's a teeny tiny factor, very similar to https ranking boost. That particular one is not surprising. You do that primarily to enable users to convert.
— Gary 鯨理／경리 Illyes (@methode) April 28, 2020
#1 – L’hébergement
Responsable pour plus de 60% de la vitesse de chargement de votre site, le choix d’un hébergeur de qualité n’est pas à prendre à la légère. Voici quelques conseils pour vous aider à en choisir un parmi les très nombreux acteurs du marché :
- l’emplacement géographique des serveurs doit être le plus proche de ceux de vos clients,
- évitez les offres commerciales à bas prix (quelques euros par mois), elles sont généralement très limitées, et comprennent souvent des coûts cachés,
- privilégiez les serveurs de type « cloud » qui permettent d’évoluer à la demande en quelques minutes (processeur, mémoire vive, disque dur…) notamment dans le cadre d’un e-commerce pour gérer des pics de visites (périodes de soldes, Black Friday, Noël…),
- la partie matériel et logiciel proposés doit être de dernière génération, par exemple, des disques durs SSD ou NVMe, PHP 7.4, MySQL 8.0 etc.
- assurez vous que votre hébergeur gère également les boites mails (cela ne va pas optimiser vos performances mais peut être frustrant si vous n’avez pas l’option, tous ne le font pas),
- dissociez vos noms de domaines de votre hébergeur : en cas de soucis, vous restez maitre du nom de domaine.
Si vous avez des doutes, faites appel à un consultant afin de vous aiguiller dans une offre adaptée à vos besoins, évolutive et performante. Mieux, déléguez cette tâche à un administrateur système dont c’est le métier qui mettra en place une machine aux petits oignons.
#2 – Les DNS (domain name system, système de nom de domaine)
Tous les fournisseurs de noms de domaines ne se valent pas au niveau de la performance. Si votre nom de domaine met plus de 200ms à répondre c’est beaucoup trop. Une valeur inférieure à 50ms est considéré comme bonne.
Vous pouvez utiliser DNSPerf par exemple pour tester mondialement vos DNS.
#3 – Le thème
Il existe un multitude de thèmes disponibles sur le marché et il est très difficile d’en choisir un. D’autant que celui ci est pleine mutation avec le nouvel éditeur de WordPress qui permettra d’ici la fin de l’année (date sujette à changement) de modifier la totalité de votre site. Nombreux sont les utilisateurs à utiliser un thème très populaire qui permet de tout faire. Mais ce n’est pas forcément une bonne idée. Voici quelques conseils pour choisir un thème performant qui ne ruinera pas votre temps de chargement et donc votre conversion :
- évitez les thèmes usines à gaz : vous n’avez pas besoin d’avoir 40 sliders et galleries différentes, ni de transformer en sapin de noël votre site en y ajoutant des animations dans tous les sens. Ce sera autant de JavaScript et de CSS en moins à charger.
- ne vous fiez pas aux sites de démo pour tester la performance : ils sont souvent hébergés sur des serveurs puissants qui ne seront pas forcément représentatifs de votre machine. Si vous avez la possibilité de tester le thème gratuitement pendant une période de quelques jours, c’est un plus.
- utilisez les outils de debug de votre navigateur (accessible via F12 ou via clic-droit Inspecter l’élément). Depuis l’onglet Réseaux, actualisez votre page et attendez la fin complète du chargement. Vous obtiendrez des informations pertinentes sur le poids de chacune des ressources (CSS, JS, images, fonts…), le poids total de la page, le nombre de requêtes… Même si vous n’êtes pas développeur, essayez de comparer les différents thèmes que vous avez repérer de cette façon et ainsi trouvez le plus performant.
- privilégier la simplicité : peu importe le thème et/ou le constructeur de page choisi, posez vous la question à chaque ajout d’un bloc de contenu : est-il pertinent d’avoir une carte Google Maps sur cette page ? y’a t-il un réel intérêt à charger les flux Facebook / Twitter / Pinterest sur ma page d’accueil (la réponse est non) ? qu’apporte ce slider aux animations 3D (surement des conflits d’affichage, de crawl et d’accessibilité) ? Plus vous ajoutez des blocs complexes, plus vous risquez d’alourdir le temps de chargement de vos pages.
#4 – Version de PHP
Nous l’avons évoqué dans notre point #1, PHP est le language de programmation côté serveur utilisé par WordPress pour fonctionner.
Officiellement, le minimum requis est la version 5.6.20, mais vous vous exposez à des failles de sécurité, et surtout, vous ne bénéficiez pas des améliorations considérables en termes de performances qu’ont successivement apporté les versions 7 et supérieures (des chargements deux à trois fois plus rapides).
De plus, de nombreux thèmes et extensions ne sont d’ores et déjà plus maintenues pour les versions inférieures à PHP 7.0.
Alors, mettez vous à jour pour éviter tout conflit.
#5 – Versions de MySQL / MariaDB
Souvent négligé, car plus difficile techniquement à migrer ou à modifier, le système de gestion de base de données (MySQL ou MariaDB, les deux supportés par WordPress), à l’instar de PHP, doit également être mis à jour pour bénéficier des dernières améliorations de performance, stabilité et sécurité.
Si vous devez mettre à jour, faites appel de préférence à un professionnel et n’oubliez pas les sauvegardes !
#6 – Plugin de cache
Une extension de cache vous permettra d’aller chercher les deniers 10 à 20% restants dans l’optimisation du temps de chargement de votre site. Gratuite ou Premium (nous utilisons et recommandons WP-Rocket depuis des années, jetez un oeil au test complet de WP Rocket de WPMarmite), elle se chargera de mettre en place :
- un cache statique de vos pages
- de minifier, concaténer vos CSS et JS
- de compresser vos pages
- de différer le chargement de vos images
- de différer le chargement de vos scripts
- d’optimiser votre base de données
- etc.
Attention à bien la configurer pour éviter des effets de bords. Testez toujours vos pages les plus sensibles de votre site comme le système de paiement ou les formulaires de contact par précaution !
#7 – Mises à jour de WordPress, des plugins, du thème
On ne le dira jamais assez : mettez à jour WordPress régulièrement pour bénéficier de correctifs de bugs, failles de sécurité, optimisation des performances, nouvelles fonctionnalités… Et cela vaut aussi pour les extensions, votre thème et même vos traductions.
#8 – Les plugins
Modérer la quantité de plugins installés sur votre site. Supprimez toutes celles que vous n’utilisez pas par sécurité.
Le nombre de plugins importe peu : vous pouvez avoir 50 extensions qui n’auront que très peu d’impact sur votre site, et en avoir une seule qui divisera par deux votre temps de chargement. Toutefois, moins vous utilisez de plugins, plus vous diminuez les risques de conflits, de problèmes de performances, de sécurité etc. Votre maintenance s’en trouvera également simplifiée.
#9 – Les images
La part occupée par les images dans le poids de votre page est très souvent la plus importante ! Quelques conseils pour optimiser le poids de vos images :
- choisissez le bon format : JPG/JPEG pour les photos, PNG pour les logos/infographies/textes, SVG pour les icônes / illustrations / logos. Attention, cette règle est vraie dans la plupart des cas, mais il ne faut pas hésiter à tester.
- la compression : lors d’un export JPG/JPEG, diminuer la qualité d’export à 60% en moyenne, essayez même de descendre à 40% si vous ne voyez pas trop de pertes de qualité. Pour les PNG, essayer le 8 bits au lieu du 24. Le SVG peut également être compressé, attention aux formes courbes, elles peuvent crénelées facilement.
- les dimensions : n’envoyer pas des photos de 5 000 pixels de large dans votre site ! Retailler et/ou redimensionnez toujours vos photos avant envoi. Pensez également aux écrans à haute densité de pixels (écran Retina pour faire simple) ou les valeurs doivent être multipliées par 2 voir même par 3 ! Adobe XD est capable de gérer cela tout seul.
- les images adaptatives : lorsque vous insérez une image dans votre page, WordPress ajoute automatiquement les attributs srcset et sizes à votre balise img. Si votre thème est correctement développé et respectueux des bonnes pratiques WordPress, l’image la plus appropriée sera chargée à l’utilisateur en fonction de résolution d’écran, taille de fenêtre…
Sous Mac, vous pouvez utiliser Aperçu pour optimiser vos images gratuitement (celui ci supporte même l’export de masse). En logiciels payants, les suites Adobe Creative Cloud ou Affinity combleront toutes vos attentes.
Enfin, vous pouvez également utiliser des extensions WordPress (freemium pour la plupart) telles Imagify, EWWW Image Optimizer, ShortPixel Image Optimizer, reSmush.it, Compress JPEG & PNG images, Smush… pour automatiquement optimiser vos images à l’envoi dans la bibliothèque des médias.
#10 – Gzip
Gzip est un logiciel côté serveur qui va envoyer au client une version compressée des données dans le but d’en réduire considérablement leurs poids, donc le temps de chargements. C’est votre navigateur qui se chargera de décompresser tout ça pour en faire le rendu.
Plusieurs outils comme Pingdom Website Speed Test permettent de vérifier si oui ou non gzip est installé sur votre site.
Pour activer la compression gzip, nous vous recommandons de contacter votre hébergeur ou la lecture de cet article.
Conclusion
Nous espérons que cela vous aidera à améliorer les performances de votre site WordPress et à obtenir de meilleurs classements et conversions.
Quelques éléments qui ne figurent pas dans notre top 10, mais que vous voudrez peut-être examiner : CDN, chargement différé, demandes externes, suppression de boutons de partage, scripts de suivi et erreurs 404.
Si vous pensez que nous avons manqué quelque chose, dites-le nous dans les commentaires ci-dessous !
