La vitesse de chargement d’un site est un des éléments clés du confort de navigation pour vos lecteurs mais aussi pour Google. Le moteur de recherche à donc fourni aux développeurs un outil clé pour optimiser efficacement le temps de chargement : PageSpeed Insights !
Souvent négligée par manque de connaissances, de temps et des vitesses de connexion Internet de plus en plus rapide, l’optimisation des sites est souvent reléguée au second plan de la road map.
C’était sans compter sur les annonces officielles de Google qui depuis des années, encourage les webmasters à optimiser la vitesse de chargement. En 2021, Google insiste en confirmant officiellement que le critère de rapidité influe sur le positionnement dans les pages de résultats de recherche.
Mon site ne dérogeait pas à la règle et n’était pas optimisé, comme on dit “les cordonniers sont les plus mal chaussés”. Je me suis donc lancé le challenge d’optimiser correctement le site que vous consultez actuellement et d’en profiter pour vous donner les conseils que j’ai appliqué.
Les notes avant optimisation étaient de 45 en mobile et 91 en desktop. Voyons tout de suite les étapes à suivre pour atteindre rapidement un très bon score PageSpeed Insights !
Note : Si vous n’avez pas encore de site Internet, je vous ai préparé un tutoriel complet, étape par étape, pour mettre en place votre site web en 1h top chrono !
A voir sur les Aventuriers Du Marketing, mon guide de ressources gratuites pour vous aider dans votre communication numérique.
Premier test de vitesse de chargement avec PageSpeed Insights
Constat : le frein majeur aux notes de mon site concerne les images. Réservant mon temps en priorité aux missions des clients, j’ai trop longtemps délaissé mon site. Puis un jour, j’ai décidé de le reprendre en main pour partager mes conseils et formation SEO. J’ai donc codé mon thème enfant et inséré les images au plus vite sans prendre le temps de les optimiser correctement…
Afin d’améliorer au plus vite la vitesse, j’utilise la loi de Pareto en me focalisant sur les quelques corrections qui apporteront le plus d’impact sur la vitesse de chargement du site.
A vous de jouer, lancez votre test PageSpeed Insights !
Pour lancer votre premier test PageSpeed Insights, rendez-vous sur l’outil gratuit de Google accessible en ligne.
On peut regrouper les différentes optimisations à mettre en place en trois points :
- Les images,
- Les ressources externes : fichiers JavaScript et CSS
- Puis la mise en Cache
Ma première action a été de compresser les images et de les charger sur le nouveau format “webP”. C’est très facile à faire grâce à un plugin WordPress très efficace : Imagify.
Ensuite, vient la compression des fichiers JS et CSS. Pour résumer simplement, ce sont des fichiers chargés par votre site pour gérer certaines fonctionnalités et le style de votre site.
Avec le temps et l’ajout de modifications, ces fichiers peuvent prendre du poids, contenir des lignes de codes obsolètes, etc… Un ménage régulier de ces fichiers est utile, surtout si plusieurs développeurs sont passés sur votre site.
Plugins WordPress gratuits pour optimiser son site
Imagify
Ce plugin d’optimisation des images pour la vitesse est gratuit tant que l’on respecte un quota de 20mb par mois. C’est largement suffisant si vous venez de lancer votre site. Si votre site contient de nombreuses images, il faudra surement passer par un abonnement pour toutes les optimiser d’un seul coup. A vous de juger en fonction de votre budget ! Il existe également d’autres plugins pouvant gérer cette tâche mais ce n’est pas l’objet de cet article.
Résultats PageSpeed Insights après optimisation des images :
- La note Mobile passe de 45 à 56
- La note Desktop passe de 91 à 95
Pro Tip : J’ai remarqué lors de mes nombreux tests que certaines images n’étaient pas vues au nouveau format webP par l’outil de Google. En regardant dans le code source, on ne voit pas le format webP. Il faut passer par l’inspecteur dans les outils pour développeur de votre navigateur pour s’assurer que les images sont bien chargées en webP. La méthode est détaillée sur la documentation d’Imagify : https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/
HummingBird
Compressions des fichiers externes JS et CSS
L’idéal dans un premier temps est de s’assurer que tous les JS et CSS sont réduits au strict minimum nécessaires. Sur ce point, l’utilisation de nombreux plugins peut-être un frein car ils peuvent charger chacun leur propre fichiers JS et CSS.
J’ai donc passé en revue tous les plugins installés sur mon site afin de ne conserver que l’essentiel. Je n’avais personnellement pas de problème de ce côté là car j’ai une politique très minimaliste sur les plugins (KISS !).
Ensuite, il suffit d’installer le plugin gratuit Hummingbird et d’aller configurer les paramètres. Pour cela, rendez-vous dans le panneau d’administration de wordpress.
En colonne de gauche, vous retrouverez “Hummingbird”. Cliquez dessus et lancer un premier test.
Résultats PageSpeed Insights après optimisation des fichiers JS et CSS :
- La note Mobile passe de 56 à 59
- La note Desktop passe de 95 à 96
Mise en cache
Résultats PageSpeed Insights après Mise en cache des fichiers JS et CSS :
- La note Mobile passe de 59 à 75
- La note Desktop passe de 95 à 98
Conclusion de la première phase d’optimisation
Très rapidement, la note est excellente en Desktop avec score PageSpeed Insights de 98 ! La note Mobile reste perfectible mais on sort de la zone rouge en passant de 45 à 78.
Optimiser la note PageSpeed Insights pour mobile
Toujours en référence de la loi de Pareto, ce sont les derniers 20% d’une tâche qui vont demander 80% des efforts. Obtenir les derniers points supplémentaires vont demander plus d’effort et nécessiter de mettre les mains dans le cambouis ! C’est le prix à payer pour passer dans la zone verte du test PageSpeed insights.
Afin de voir les modifications que j’effectue dans mon code, je désactive le cache réglé précédemment. Je le réactiverai une fois les prochaines optimisations validées.
Vérification de l’impact des scripts JS sur le temps de chargement
En consultant la “carte proportionnelle” du rapport, je remarque que ce sont les scripts Google Analytics qui utilisent le plus de ressources sur mon site.
En effet, j’utilise en parallèle les scripts Google Analytics version 3 et 4. Est-ce le moment de faire une croix définitive sur la version 3 qui sera bientôt obsolète ?
Autres ressources externes ayant un impact sur le temps de chargement
Attention aux polices de caractères ! Certains templates WordPress chargent des polices personnalisées, c’est joli mais cela se paye sur la note.
Parfois, des plugins WordPress en chargent également à leur tour.
La première optimisation est de faire le tour des polices réellement utilisées dans le design du site pour exclure celles qui ne le sont pas.
On peut aussi faire appel à des polices hébergées sur les serveurs de Google via les Google Fonts. Cela permet d’améliorer les temps de chargement quand votre serveur est un peu lent. Pour ma part, j’ai fait le choix de n’utiliser que des polices standards afin d’améliorer au maximum la note de PageSpeed Insights !
– > Désactiver les Google Fonts pour le thème WordPress TwentySeventeen
Passage de 76 à 85 en mobile ! Et de 98 à 99 en Desktop !
Ajout du Lazy Load sur les images
Le lazy loading permet de ne charger que les images qui sont affichées à l’écran. Auparavant, le navigateur chargait systématiquement toutes les images de la page, même si l’utilisateur n’allait pas jusqu’au bout d’un long article !
La solution habituelle depuis quelques années était d’utiliser un plugin. WordPress à depuis la version 5.5 intégré le Lazy Load de manière native. Il suffit donc de rajouter : loading=”lazy” dans chaque balise image que l’on souhaite charger plus tard.
Je suis donc repassé sur mes contenus déjà publié dans le passé pour ajouter ce bout de code qui m’a fait gagner encore quelques points PSI : de 85 à 95 en Mobile et de 99 à 100 en Desktop !
Il commence à être tard mais je suis heureux de toucher le Graal de la performance 😀
Dernières étapes : inspecter le code généré une fois toutes les optimisations en place.
Je retrouve beaucoup de code inutile depuis l’activation du cache. En faisant des recherches, je m’aperçois que cela correspond à des fonctionnalités que je n’utilise pas sur mon site mais que WordPress génère pour d’autres utilisateurs. Je désactive le chargement de ces codes, ainsi qu’un fichier css externe que je n’utilise pas non plus.
Je grappille encore quelques points pour arriver à la note de 97 en mobile et 100 en Desktop !
Cette fois-ci, je m’arrête là, entièrement satisfait des optimisations du temps de chargement pour les utilisateurs et Google !
J’espère que ce retour d’expérience va vous inspirer et vous aider à optimiser votre site ! Partagez en commentaire la note de votre site avant et après optimisation, je suis curieux de voir l’impact de vos modifications 🙂
Et si vous ne vous sentez pas à l’aise avec ce projet d’optimisation, je peux m’en charger pour vous. Pour cela, contactez moi via ce formulaire.
Merci beaucoup pour ce superbe article très complet !! Je vais de ce pas checker mon site !
Merci pour cet article très qualitatif François Je connaissais quelques techniques mais tu nous montres précisément ce qu’elles apportent et comment les faire.