PageSpeed Insights : Testez le score temps de chargement des pages
La première étape est de tester le temps d’affichage de vos pages web en secondes.
Plus précisément, le temps d’affichage de la première fenêtre (=zone d’écran visible avant le scroll).
Vous pouvez tester les rendus avec plusieurs outils :
Attention : Vous ne devez pas vous contenter d’une note de 100/100 sur PageSpeed Insights, mais de vous donner des objectifs précis pour améliorer le temps de chargement.
La localisation est également à prendre en compte. Les deux outils ne vous donneront pas les mêmes résultats en fonction des paramètres associées sur GTmetrix.
Vous devez également prendre en compte le fait que Google ne crawl pas votre site web depuis un ordinateur, mais bien depuis un mobile.
Plus exactement, l’émulateur utilisé sur Pagespeed.web.dev est le Moto G Power. Les données sont chargées en 4G.
Je vais vous aider à réduire votre temps de chargement facilement à 800ms.
Les services utilisés pour héberger le site web et booster l’affichage des pages
Concevez un modèle d’infrastructure optimisée, choisissez un thème optimisé pour WordPress et améliorez la vitesse de chargement de votre première fenêtre d’affichage.
Attention : Prenez tout de même en compte que l’optimisation d’une page dépend entièrement de votre infrastructure, de votre code HTML et des moyens mis en œuvre pour servir les pages à l’utilisateur.
Cette page est donc là pour vous servir de “guide pratique”, mais les configurations apportées peuvent être modulables d’un site à l’autre.
Infrastructures
En choisissant les bonnes options, vous pourrez optimiser chaque partie du processus de livraison des pages en HTML..
OVH : Nom de domaine facile à réserver
Pour commencer, choisissez un nom de domaine chez OVH.
Prenez uniquement le nom de domaine, et décocher les options complémentaires à l’offre.
Les tarifs démarrent à 9,99€ pour les .FR et .COM facturé annuellement, en fonction de l’extension de domaine.
C’est simple, rapide et sans prise de tête.
O2Switch : Serveur mutualisé performant
Enregistrez ensuite les DNS d’O2Switch pour accéder à votre serveur.
Installez votre site WordPress sur un serveur O2Swich vous permettra en moyenne d’atteindre les 1,5s en FCP ( thème classique, sans pré-config, sans cache…)
WPRocket : Performances de vos pages web
Maintenant, ajoutez WPRocket. Ce plugin vous permettra d’optimiser votre site web en un instant.
Les fonctionnalités de WPRocket sont les suivantes :
- Ajouter de vos pages en cache : Les pages sont desservies en HTML sans interpréter de PHP
- Différer et reporter l’exécution du JS : TRÈS IMPORTANT
- Minifier CSS et Optimiser CSS ( ce dernier est important aussi )
- Activer le LazyLoad pour optimiser l’affichage de vos images afin qu’elle ne charge que si elle est visible à l’écran
Avec tous ces réglages, vous pourrez facilement atteindre les 1s en FCP.
Cloudflare : Déployez votre contenu dans le monde entier
Passez par le CDN Cloudflare vous donnera un sérieux avantage sur le TTFB ( premier octet perçu par le navigateur ).
Si vous activez Cloudflare et que vous sélectionnez les options basiques, vous pourrez bénéficier d’une bonne réduction de délai.
Attention à ne pas activer des fonctionnalités qui pourraient entrer en conflit avec WPRocket ou tout autre plugin d’optimisation de performances !
Par exemple, si vous minifiez vos fichiers CSS avec WPRocket, vous devrez désactiver ces fonctionnalitées manuellement sur CloudFlare.
Choisissez le meilleur thème WordPress
GeneratePress : Simple, léger, rapide
GeneratePress est un thème WordPress léger conçu pour répondre aux prérequis nécessaire au bon fonctionnement du CMS et de la compatibilité des extensions.
Par-dessus le thème, vous pouvez installer votre constructeur de page favori pour personnaliser votre site web sans contrainte.
Thème custom (=100% développée)
La meilleure solution est de développer votre thème WordPress personnalisée en HTML/CSS/PHP/JS.
Développer un thème personnalisé vous permettra d’avoir la main complète sur ce qui est chargé et à quel moment dans votre page.
Vous pourrez alors accéder facilement aux éléments à modifier en cas d’optimisation à gérer.
Testez les performances avec DevTools
Une fois que les optimisations ont étés faites, vous devrez tester les performances avec l’outil DevTools de Google Chrome. Pour l’utiliser :
- Utilisez le navigateur Google Chrome pour accéder à votre site WordPress.
- Accéder à DevTools :
- Faites un clic droit sur une page de votre site et sélectionnez `Inspecter` dans le menu contextuel.
- Utilisez le raccourci clavier `Ctrl + Shift + I` sur Windows/Linux ou `Cmd + Option + I` sur Mac.
Utiliser l'onglet Performance
- Sélectionner l’onglet Performance : Dans les DevTools, cliquez sur l’onglet `Performance`. Cet onglet vous permettra de voir une chronologie des événements qui se produisent lorsque la page se charge.
- Enregistrer un chargement de page :
- Cliquez sur le bouton `Record` (le cercle rouge) ou pressez la touche `Ctrl + E` pour commencer.
- Rafraîchissez votre page web (F5 ou `Ctrl + R`).
- Cliquez à nouveau sur `Record` pour arrêter l’enregistrement après que la page ait fini de se charger.
- Analyser les résultats : Après l’arrêt de l’enregistrement, Chrome va générer un profil de performance montrant une chronologie de ce qui s’est passé lors du chargement de la page.
Comprendre les résultats
Chronologie du chargement : En haut, vous trouverez une barre de chronologie avec différents couleurs indiquant les types d’activités (rendering, scripting, loading, etc.).
Frame Rate : Juste en dessous, une vue du taux de rafraîchissement de la page (FPS). S’il y a des chutes drastiques, cela peut indiquer de lourds processus scriptés ou des problèmes de rendu.
Main Thread : Vous trouverez des détails sur ce que le navigateur faisait à divers moments. Survolez chaque section pour obtenir des informations sur les tâches spécifiques, comme le style CSS, les scripts JavaScript ou le rendu.
Utiliser l'outil "Réseau"
- Cliquez sur l’onglet Réseau
- Rafraîchissez la page (en maintenant la fenêtre DevTools ouverte).
- Vous verrez une liste des ressources chargées et combien de temps chacune a pris pour être téléchargée.
Optimisez la première fenêtre d’affichage
Pour garantir une bonne expérience dès l’instant où un utilisateur atterrit sur votre site, optimiser la première fenêtre d’affichage (également appelée zone de flottaison) est important.
Cela se réfère à la partie du site que l’on voit sans avoir à scroller.
Un chargement rapide de cette 1ère zone sera bénéfique pour le SEO et l’UX.
Minifiez votre première section
La minification CSS/JS est une méthode qui consiste à réduire la taille de vos fichiers de code sans en altérer la fonctionnalité.
Cela inclut la suppression des espaces blancs, des commentaires, et la simplification du code là où c’est possible.
Par exemple, des fichiers CSS et JavaScript minifiés chargent plus rapidement, car ils sont plus légers et contiennent moins de lignes de code. Ils sont donc transmis plus rapidement du serveur au navigateur.
Pour minifier les ressources qui apparaissent dans la première section de votre page :
- Utilisez des outils en ligne comme CSSMinifier.com ou JavaScript-Minifier.com qui peuvent automatiquement minifier vos fichiers pour vous.
- Installez des plugins WordPress comme WP Rocket, Autoptimize ou WP Fastest Cache qui peuvent minifier vos fichiers automatiquement.
Annuler le LazyLoad sur vos images et iframes
La technique du LazyLoad (chargement différé) a pour but de retarder le chargement de certaines ressources (comme les images et iframes) jusqu’à ce qu’elles soient nécessaires, c’est-à-dire lorsqu’elles entrent ou sont sur le point d’entrer dans le viewport de l’utilisateur.
Cependant, cela ne devrait pas s’appliquer aux images et iframes qui sont dans la première fenêtre d’affichage, car cela ralentirait la perception du chargement de la page.
Pour optimiser l’affichage des ressources dans la première fenêtre : Désactivez LazyLoad pour les images et iframes critiques.
Assurez-vous que les images au-dessus de la ligne de flottaison chargent immédiatement avec la page.
Solution : Dans la plupart des cas, il faut ajouter des exceptions dans les réglages de votre plugin de LazyLoad et écrire une classe personnalisée dans le fichier HTML de votre thème WordPress.
Optimisez le chargement de vos images
Compresser sans perdre en qualité
- Utilisez des outils de compression en ligne comme TinyPNG ou Compressor.io pour réduire la taille de vos images sans affecter visuellement leur qualité.
- Installez des plugins WordPress dédiés à la compression des images comme Imagify, ou ShortPixel qui offrent des fonctionnalités de compression automatique.
Choisir le bon format
- Utilisez le format JPEG pour les images avec de nombreux dégradés de couleur, comme les photos.
- Privilégiez le format PNG pour les images avec des zones de couleur unie ou avec de la transparence.
- Envisagez le format WebP, qui offre une compression supérieure aux formats JPEG et PNG.
Des plugins comme WebP Express peuvent vous aider à convertir automatiquement vos images dans ce format plus léger.
Redimensionner les Images pour Correspondre à leur Utilisation sur le Site
- Assurez-vous que les images sont de la bonne taille pour leur conteneur. (Pas besoin d’une image de 2000 pixels de large si elle va être affichée à 500 pixels)
- Utilisez des plugins WordPress comme Smush, Imsanity qui redimensionnent automatiquement les images à une taille maximale prédéfinie lorsqu’elles sont téleversées dans votre bibliothèque de médias.
