L'auteur.
Maxime Boudin, consultant web et Media Buyer. Expert SEO – SEA. Auteur du blog marketing digital On-me-trouve.fr, conseil en création de site web et référencement.
Les publications récentes.
Articles récents
Les catégories du blog.
Nos services
Les sites d'intérêt.
Littérature
5 clés pour accélérer son site WordPress
- Le Blog
- /
- 5 clés pour accélérer son site WordPress
Comment accélérer mon site WordPress simplement ?
C’est un sujet important quand on créé un site internet et qui revient très souvent : comment accélérer son site WordPress simplement ? Aujourd’hui nous allons voir 5 clés pour accélérer son site WordPress et en finir avec les problèmes de lenteur. Il faut savoir que plus de la moitié des internautes zappe une page qui met plus de 3 secondes à s’afficher sur mobile ! Un site internet rapide est donc indispensable. C’est le fruit d’une configuration adaptée et pensée dès le début du projet :
- un serveur / hébergement adapté ;
- un thème WordPress adapté ;
- des images optimisées – format – cdn ;
- une mise en cache des pages ;
- des outils d’analyse et d’optimisation.
1. Choisir un hébergement web adapté à son site WordPress
Dans ces 5 clés pour accélérer son site WordPress, choisir un hébergement web adapté est surement la principale. Peut-on opter pour un hébergement web gratuit ? Il existe quelques offres d’hébergement web gratuit moyennant un affichage de publicités ou de mentions commerciales, mais ce n’est pas le genre de formule recommandée ici. Aujourd’hui les principaux hébergeurs du marché en France comme OVH, O2switch, Ionos ou LWS proposent tous des formules d’entrée de gamme grand public très accessibles même pour un petit budget.
Pour un site perso par exemple ou pour le site vitrine d’une activité professionnelle indépendante qui ne vont pas nécessiter beaucoup de ressources, les offres autour de 5€/mois ou moins sont déjà largement suffisantes tant en termes de capacité de stockage que de réactivité de la base de données. Pour des besoins plus conséquents et en fonction de vos ambitions, site à fort trafic, e-commerce au catalogue très fourni (…), il sera préférable de dimensionner l’installation en conséquence avec une base de données dédiée par exemple, et là il faudra prévoir un budget plus important. Bien entendu, et puisqu’on va chercher ici à améliorer les performances de son site WP, on n’aura pas les résultats d’une Ferrari avec un vieux tacot. En revanche, on peut envisager de choisir une offre évolutive, commencer petit et ajuster et fur et à mesure de sa croissance. Pour avoir beaucoup travaillé avec les hébergements d’OVH et leurs noms de domaine en DNS Anycast, cela fait partie de leurs forces de permettre de passer d’une offre de base à une offre plus solide, dans la mesure où les offres commerciales restent valables. On peut aussi faire le choix de prendre d’entrée une offre moyenne gamme ou haut de gamme en prévision de la suite, mais cela supposera d’y mettre le prix dès le départ. Ajouter une option de CDN pour autoriser une délivrabilité plus rapide des contenus et ainsi accélérer son site WordPress quel que soit l’emplacement du visiteur apportera un plus. Pour finir et c’est éventuellement à explorer si l’anglais n’est pas une barrière, il est à noter que les hébergeurs recommandés sur le site WordPress.org sont Bluehost, Hostinger et Dreamhost <voir source>. Mention spéciale à O2switch et son offre unique plutôt claire et complète qui obtient mon entière satisfaction.
Bien choisir son hébergement web avant de poser ses valises…
2. Bien choisir son thème et ses plugins WordPress
Si les questions techniques, d’hébergeur et de capacités de la base de données sont primordiales pour accélérer son site WordPress, il n’en reste pas moins qu’une certaine hygiène de son site WordPress est à tenir tout au long de la vie de ce dernier, et même avant sa vie. En effet, avant l’installation et l’activation du template, le thème graphique qui donnera son aspect visuel au site WordPress, il est utile de veiller à choisir un template raisonnablement fourni en fonctionnalités qui n’abuse pas d’effets visuels lourds type parallax, de trop de vidéos en arrière-plan ou de je ne sais quel autre artifice. Ces originalités sont agréables à l’œil mais je recommande d’être très vigilant, bien entouré par des spécialistes en développement et webdesign pour s’en servir, de bien dimensionner son offre d’hébergement ou bien de ne pas trop s’en servir si tout cela est absent ou que le budget global n’est pas considérable. Il s’agit de ne pas surcharger le site de fonctionnalités et plugins qui ne seraient pas indispensables à travers un template inadapté au besoin et à l’installation. Il est possible de trouver des templates gratuits sur quelques sites et directement dans les options d’apparence de son site WordPress, mais parfois cela ne conviendra pas aux exigences du moment, en terme d’impact visuel, de modernité, de fluidité ou carrément de fonctionnalité…
De nombreuses possibilités sont à découvrir sur les fermes à templates comme Themeforest ou Template Monster, à condition de se fier (C’est un ordre !) aux descriptions très complètes et aux avis des utilisateurs, vérifier si c’est un thème graphique compatible avec votre version de WordPress et donc s’il y a des mises à jour fréquentes, si des bugs sont reportés ou non dans les échanges entre l’agence de création et ses clients, etc… De la même façon, attention à la prolifération des plugins sur un site WordPress. Certains seront très utiles voire carrément incontournables, mais trop de plugins n’iront pas de pair avec une excellente performance du site. On peut aussi faire le choix de se faire développer un template sur mesure par une agence web, à condition de définir un cahier des charges précis avec un budget à respecter.
Capture d’écran de l’espace d’administration de WordPress affichant le menu du choix des Thèmes.
3. Optimiser ses images : format d’image, résolution et dimensions
Et là, c’est le drame. J’ai déjà vu des images très grandes et très lourdes, non traitées en fait, publiées sur des blogs ou des sites vitrines. A 30Mo l’image, il est encore très facile d’améliorer la situation, sachant que le poids correct habituel pour une seule image varie entre 30Ko et 150Ko, soit 200 à 1000 fois moins, sans trop perdre en qualité ! Pour éviter de se retrouver avec un site lent, il est important de commencer par bien gérer ses images et par bien les optimiser. Optimiser une image à l’affichage d’un site web, cela va signifier adapter son format, sa résolution et sa taille au besoin du site. Privilégier les formats .jpeg pour les photos, .gif pour les logos et visuels à fond transparents est une bonne idée, ce sont tous deux des formats compressés. Pour les transparences et dans la mesure du possible, éviter .png sauf dans des cas où ce dernier ne serait pas trop lourd. C’est un de mes formats favoris pour gérer la transparence mais comme il ne compresse pas l’image et conserve toute sa qualité, elle demeure parfois trop lourde pour un usage web. Pour aller plus loin, convertir ses images au format .webp est une option à envisager, c’est un format très compressé et récent. Bien géré à l’heure actuelle par les navigateurs internet, ce n’est pas encore bien le cas pour les clients de messagerie e-mail. Attention donc aux notifications mail qui embarquent des images… webp.
Conserver ou paramétrer une résolution à 72dpi* c’est la base car c’est le niveau de résolution utilisé pour l’affichage sur écran. Pourquoi ? Parce qu’il suffit à rendre une bonne qualité. A noter : les résolutions supérieures seront utilisées plutôt pour de l’impression et de l’impression grand format en 300dpi. Comment savoir si ma résolution est bien à 72dpi ? Photoshop fournit cette information du côté du menu Image > Taille de l’image, à défaut un software comme Xnview que j’adore et que je recommande à ceux qui ne veulent pas investir dans la suite Adobe, le fera dans le menu Image > Modifier les DPI. Il y aussi l’alternative gratuite à Photoship GIMP qui donnera cette information dans le menu Image > Echelle et taille de l’image. NB : Passer d’une résolution de 300 dpi à 72 dpi ne pose pas de problème, l’inverse n’est pas vrai.
Quelle taille utiliser pour mes images ? C’est une question de bon sens, un logo n’utilise généralement qu’une petite partie de l’écran, il n’a pas besoin de dépasser les 300 ou 400 px de large, voire moins. Pour la photo d’un produit dans un catalogue e-commerce, je recommande une dimension de 750 à 900 px de large. Pour la photo pleine largeur d’un carousel, opter pour une largeur entre 1400 et 1900 px, pas moins. Le mieux est encore de tester et de se rendre compte par soi-même, cela peut dépendre de l’image en elle-même. Penser à s’imposer une limite supérieure de 150 Ko même pour une grande image, et s’y tenir au maximum.
Pour les utilisateurs avertis ou pour les sites très denses, penser à utiliser un CDN pour ses images est également une piste à considérer.
*ndlr: Une résolution est exprimée en dpi = dot per inch = point par pouce en français ou ppp. En somme quand on réduit la résolution d’une image, on réduit sa qualité car on supprime de l’information sur l’image, certains pixels vont être supprimés créant ainsi « des vides » et ces vides vont être comblés en copiant des pixels voisins, c’est pour cela qu’on obtient des images moins précises qui finissent par pixelliser si on baisse trop la résolution, ou si on zoome trop sur une image dont la résolution ne permet pas un affichage trop grand… 😅 Bon c’est un peu technique est c’est pour les plus curieux. Il faut surtout retenir que sur écran on utilise une résolution à 72dpi, et pour l’impression professionnelle 300dpi.
Capture d’écran d’Adobe Photoshop montrant comment régler la résolution d’une image.
4. Installer un plugin WordPress de cache et gagner en vitesse d’affichage
Pour accélérer un site WordPress, on peut également utiliser un plugin WordPress de cache. En résumé, son rôle va être de garder en mémoire les pages et fichiers d’un site afin de ne pas les recharger à chaque visite. C’est largement recommandé d’en installer un, même si personnellement je trouve que cela nécessite d’être prudent et bien géré, surtout si les mises à jour de contenu et de design sont fréquentes. Les plugins Wp Super Cache ou Jetpack par exemple proposent des options similaires de ce point de vue, mais ils ne sont pas les seuls. Mise en mémoire des pages et fichiers, report du chargement des scripts javascript, report du chargement de certaines feuilles de styles .css, chargement différé des images (lazy loading), les options sont nombreuses il faut donc les tester pour ne pas risquer de casser l’affichage du site ou pour vérifier l’état de compatibilité entre le plugin de cache et le template actif. Je recommande d’envisager des sauvegardes du site au préalable, fichiers et base de données.
Capture d’écran de la page d’administration du plugin WordPress WP Super Cache.
5. Boîte à outils du site WordPress super rapide
Pour savoir si un site est rapide ou non, on peut le visiter pour déjà se rendre compte par soi-même de problématiques générales. Mais pour pousser l’analyse il faudra utiliser la boîte à outils du site WordPress super rapide ! Bon, elle n’existe pas en tant que telle, mais il s’agit quand même de précieux outils en ligne pour obtenir un feedback plus précis et détaillé des performances du site dans sa globalité. Délai de réponse du serveur, poids de la page, nombre de requêtes, poids des images, des feuilles de style .css et des scripts javascript, fonts embarquées, les outils comme le Google Page Speed Insight ou le Speed Test de Pingdom Tools vont donner des informations cruciales pour l’optimisation du site et apporter leur lot de conseils. Tous ne sont pas toujours facilement applicables mais une bonne partie amélioreront considérablement les performances du site WordPress.
Capture d’écran de la page de résultats d’analyse Google Page Speed insight à l’url : pagespeed.web.dev
Cet article vous a plu ? Abonnez-vous à la newsletter pour rester informé(e) des dernières astuces et nouveautés.
