Quand on parle de création de site WordPress, il y a tellement de sujets à aborder. Aujourd’hui, je vous propose d’en parcourir deux qui sont intimement liés. Les thèmes utilisés & la performance associée. Quel rapport avec ce score incroyable de 100 sur Google Page Speed avec Divi me direz-vous ? Patience, j’y viens !
Créer un site WordPress : Thème free, premium, hybride ou sur mesure ?
Quand on décide de créer un site internet professionnel avec WordPress, la question du thème est centrale. Le thème, c’est ce qui va définir le design ainsi qu’un certain nombre de fonctionnalités de votre site web.
Il existe plusieurs types de thèmes :
- Gratuits : Comme par exemple le thème par défaut de WordPress « Twenty Twenty One » qui permet de construire un site rapidement à l’aide de Gutenberg, le constructeur de pages intégré de WordPress.
- Payants : Ce sont des thèmes premiums qui intègrent souvent des constructeurs de pages plus élaborés (bien que Gutenberg monte de plus en plus en puissance). Divi fait partie de cette catégorie.
- Sur-mesure : Des thèmes développés spécifiquement pour un besoin précis.
- Hybrides : C’est la solution que j’utilise. On se base sur de l’existant pour ne pas avoir à réinventer la roue et on ajoute une couche développée sur-mesure (on parle ici de thème enfant) pour coller au maximum aux besoins de chaque client.
Recette maison pour viser le 100 sur Google Page Speed
👨🍳 Ma recette la plus fréquente est donc la suivante : Divi en thème parent et un thème enfant développé sur-mesure pour affiner le design et ajouter des fonctionnalités (types de contenus le plus souvent comme des offres, d’emploi, un catalogue produit, des voitures etc…)
L’énorme avantage de cette méthode est que Divi (qui est selon moi le meilleur thème premium pour en avoir testé un grand nombre) vous permet d’aller à l’essentiel quand vous mettez en page. Notamment grâce à un visual builder très intuitif et basé sur les bonnes pratiques de développement : row, col & modules. Le code est propre et lisible à la sortie !
En bref vous passez plus de temps à améliorer l’aspect esthétique de votre site et moins de temps à intégrer du code à la main : c’est un énorme avantage.
Or, cet avantage comportait parfois un inconvénient : la performance. En effet, j’ai toujours trouvé que les sites créés auraient pu être plus rapides si Elegant Themes (la maison qui développe Divi) avait pu organiser son code de façon plus efficace.
Et bien devinez quoi, ils l’ont fait !
La dernière mise à jour Divi : tout ce que l’on attendait au niveau performance
Je ne vais pas entrer dans les subtilités techniques ici, si vous voulez tout savoir, rendez-vous sur cette page qui vous expliquera tout en détail 😉.
Voici les principales raisons qui font que cette mise à jour de performance Divi est réellement surpuissante :
- Seuls les éléments .css .js et les modules Divi nécessaires au chargement de chaque page sont effectivement chargés. C’est une énorme évolution par rapport aux versions précédentes ou tout le code était chargé à chaque fois.
- Les .css dupliqués sont identifiés et supprimés ce qui réduit encore la taille des .css chargés.
- Le .css critique nécessaire a l’affichage de la page au chargement est intégré inline ou bien au tout début, ce qui fait que la page s’affiche instantanément. C’est la clé de la bonne notation obtenue car Google accorde beaucoup d’importance à ce facteur.
En bref, à l’aide de cette mise à jour, Divi dispose de toutes les optimisations possibles au niveau de la vitesse, de la bonne organisation du code et de l’optimisation de l’affichage au chargement.
Oui, mais voilà. Désolé de vous décevoir : ce n’est pas encore forcément suffisant pour atteindre 100 sur Google Page Speed. Je dis bien « pas forcément » car d’autres facteurs peuvent entrer en jeu.
Quels facteurs continuent de plomber le poids de votre site ?
Pour faire court, trois facteurs peuvent encore venir jouer les troubles fêtes et vous empêcher d’atteindre le 100/100.
Rappelons que pour le moment, tout votre code .css et .js est correctement chargé grâce à Divi. Allons donc voir quels sont les problèmes.
L’utilisation de plug-ins tiers non optimisés
Un site WordPress qui fonctionne avec un thème seulement est plutôt rare. Souvent on vient utiliser des plug-ins (extensions en Français) pour lui ajouter des fonctionnalités comme le e-commerce, des offres d’emploi ou encore la possibilité de s’inscrire à une newsletter.
Or ces plug-ins sont étrangers à Divi et ne rentrent donc pas dans le giron de son optimisation. Leurs fichiers .css et .js seront chargés séparément et souvent en mode non optimisé (c’est-à-dire en totalité) pouvant ainsi venir ralentir le temps de chargement de votre site.
Des images trop lourdes
Charger des images trop lourdes reste la meilleure façon de plomber la vitesse de son site. Gardez à l’esprit que vos images doivent être optimisées pour le web : à la bonne taille et au bon poids !
Un serveur trop lent
Le temps de réponse initial de votre serveur peut également venir plomber le score de votre site. En effet, rien ne sert d’avoir un site optimisé à 100% si votre serveur met 8 secondes à répondre. À noter que ce temps reste relativement élevé sur la plupart des hébergement mutualisés (entre 1 et 4 secondes). Sur les VPS ou bien les serveurs dédiés c’est beaucoup plus rapide.
Comment atteindre 100 sur Google Page Speed à l’aide de quelques coups de pouces supplémentaires
Vous vous reconnaissez dans les facteurs bloquants cités ci-dessus ? Pas de panique, voici deux outils qui vont permettre à votre site de crever le plafond de Google Page Speed.
Optimiser sa vitesse avec le combo ultime : WP Rocket & Cloudfare
WP Rocket est probablement le plug-in de cache WordPress le plus connu et le plus efficace. Il est premium mais vaut largement les euros investis si la performance est un facteur important pour vous.
Un plug-in de cache met en cache (comme son nom l’indique) les pages de votre site web et minifie leur taille. De cette façon, quand les utilisateurs consultent votre site, ils ont accès plus rapidement à votre contenu car tout le .php a déjà été effectué et les pages ont été minifiées par le WP Rocket.
Le cache est donc une surcouche de minification par rapport à ce que propose déjà Divi, sauf qu’elle s’applique à tout votre site (plug-ins compris). On voit donc ici tout l’intérêt d’utiliser une telle solution, d’autant plus qu’elle est parfaitement compatible avec Divi.
Mais ce n’est pas tout, WP Rocket vous permet également de paramétrer un CDN tel que Cloudfare de façon simple. Un CDN (Content Delivery Network) est un réseau de serveurs qui vont prendre le relais sur votre serveur web pour fournir tout ou partie du contenu de votre site aux utilisateurs. C’est une excellente façon de pallier aux problèmes de serveurs lents.
Améliorer la compression de ses images : le format Webp
Nous avons déjà évoqué que les images doivent être au bon format, à la bonne taille et optimisées pour le web au niveau de leur compression. Personnellement, j’effectue toujours cette manip sur Photoshop mais il existe une manière d’aller encore plus loin.
A l’aide d’un plug-in WordPress spécifique, vous pouvez convertir toutes les images de votre site au format .Webp. Le format .Webp à été créé par Google pour être plus léger que les format .jpeg et .png sans perte de qualité. De cette façon, vous pouvez encore améliorer la légèreté de votre site et donc son temps de chargement.
Le mot de la fin
J’ai utilisé toutes les techniques mentionnées ci-dessus sur le site que vous consultez maintenant sauf deux :
- Le CDN car mon serveur est privé et je le trouve donc assez rapide,
- Le changement au format .Webp car j’ai déjà optimisé toutes mes images au format .jpeg et .png pour le web. Je me suis en revanche amusé à les exporter depuis Photoshop en Webp spécialement pour cet article.
Grâce à cela j’ai pu obtenir la note de 90 en mode mobile et 100 sur Google Page Speed pour le PC. J’arriverais surement à 100/100 en mode mobile si j’appliquais la dernière modification, mais je préfère ne pas surcharger mon site de plug-ins pour quelques millisecondes de chargement en moins. Néanmoins, j’essayerais prochainement de le faire sur un site de test et vous en dirais plus si cela peut intéresser certains d’entre vous.
Et vous, quelle est votre vécu avec WordPress et son temps de chargement ? N’hésitez pas à partager votre expérience en commentaire 😊
Ps : Notez que les scores peuvent légèrement varier en fonction des charges du serveur et d’autres paramètres.
Merci, mon site https://locoprive.fr/ atteint désormais le score de 100/100 sur PageSpeed Insights en version mobile. Incroyable !