Comment réussir le test de vitesse de Google avec Pagespeed Insights

Qui veut attendre longtemps qu'une page se charge ? Surtout sur mobile. Un bon score au test de vitesse Google est vital pour votre site.

La vitesse des pages et les Core Web Vitals sont cruciaux aujourd'hui, et il n'y a aucune raison d'avoir des temps de chargement lents des pages ou des sites Web, en particulier avec les sites WordPress.

Si votre temps de chargement moyen pour votre site est supérieur à trois à cinq secondes en utilisant un test de vitesse de site Web, vous perdez du trafic. Votre taux de rebond sera élevé car les lecteurs n'attendront pas et regarderont un écran blanc.

Les performances du site Web sont un facteur de référencement essentiel, et elles vous aideront à améliorer votre classement dans les moteurs de recherche et votre taux de conversion. En fait, Google a désormais une priorité mobile Core Web Vitals pour le classement des mots-clés et des pages.

Comment s'assurer que votre blog est à jour

De nombreux facteurs affectent les résultats d'un test de vitesse.

Les services Internet qui fournissent des tests de vitesse varient d'un pays à l'autre ou même d'une ville à l'autre.

Si vous avez testé votre connexion Internet, vous saurez que la vitesse de téléchargement et de téléchargement dépend de votre fournisseur de services et de l'efficacité de la vérification de votre connexion Internet et Wi-Fi.

Cependant, avec le test de vitesse de Google utilisant Pagespeed Insights, vous pouvez obtenir un aperçu général de votre vitesse de téléchargement et des performances du site pour les visiteurs de votre site.

Il n'est pas nécessaire de penser que l'obtention de 100 est toujours l'objectif principal. Vous pouvez perdre beaucoup de temps à rechercher la perfection des performances Web. Mais obtenir des scores verts est relativement facile et signifiera que votre site fonctionne bien.

Just Publishing Advice a beaucoup de fonctionnalités, de widgets et d'images intégrés, mais parvient toujours à obtenir de très bons résultats pour la vitesse du site. Voici un aperçu des performances de son site.

Le score mobile est généralement un peu inférieur car Google réduit le résultat si vous n'utilisez pas d'images dans des formats de nouvelle génération.

À l'heure actuelle, ce serait une tâche très importante pour tout blog, car cela nécessite de remplacer chaque image de votre site par des fichiers image JPEG 2000, JPEG XR ou WebP. Pour la plupart des blogueurs, vous pouvez ignorer cet avertissement et continuer à utiliser des fichiers image JPEG et PNG.

Comment tester les performances de vitesse de votre site

Le test de vitesse de Google vous donne une bonne mesure approximative de la vitesse de votre site.

Vous pouvez également vérifier le temps de chargement moyen de votre page dans Google Analytics. Mais cela ne vous donne pas les informations dont vous avez besoin pour analyser en détail les performances de votre site.

Vous avez besoin de meilleurs outils de référencement pour faire le travail.

Si vos données de laboratoire sont toutes vertes, tout va bien. Mais si vos notes sont orange ou rouge, vous devez prendre des mesures.

Selon la quantité de trafic que vous obtenez, vous pouvez ou non voir votre évaluation Core Web Vitals.

Cela mesure les données de vitesse réelle de l'utilisateur à partir du navigateur Chrome.

Il s'agit d'un test de réussite ou d'échec si vous avez suffisamment de trafic pour générer le rapport.

Ces rapports vous indiquent où vous pouvez améliorer les performances de votre site.

Mais les outils de test de vitesse de page de Google ne vous aident pas beaucoup à rechercher et à résoudre les problèmes.

Trouver comment résoudre les problèmes

Une bien meilleure façon de vérifier la vitesse du site consiste à utiliser GTMetrix.

Il est open source et utilise le score Google Pagespeed et YSlow de Yahoo, et il vous donne beaucoup plus d'informations que Google.

Lorsque vous surveillez les performances et mesurez votre vitesse, vous devez vérifier deux horaires.

Bien que la plupart des services de test utilisent le temps de chargement complet pour mesurer les performances du site, ce n'est pas la statistique la plus importante.

La mesure réelle la plus précise de la vitesse du site est le temps de chargement du modèle d'objet de document (DOM).

C'est le moment du processus de chargement du site lorsqu'une page Web est active pour un utilisateur.

Pour moi, c'est la statistique la plus importante pour mesurer la vitesse réelle d'une page Web.

Vous pouvez voir dans l'image ci-dessous que si le temps entièrement chargé est de 1,9 seconde, le temps de chargement DOM n'est que de 1,3 seconde.

Voici une autre vue ci-dessous. La ligne rouge marquée par la flèche est le point chargé du DOM.

Vous pouvez voir que les éléments qui ne sont pas nécessaires dans la première vue utilisateur sont chargés ultérieurement.

Les éléments qui se chargent plus tard sont généralement des images qui sont chargées paresseusement et des fichiers javascript qui sont différés jusqu'à ce qu'ils soient nécessaires pour améliorer les performances de votre page.

Chaque fois que vous consultez votre site, portez toujours une attention particulière au temps de chargement de votre DOM, car il s'agit d'une mesure beaucoup plus précise de la rapidité de votre site pour un utilisateur.

Effectuez également un test deux ou trois fois car les vitesses Internet varient d'une minute à l'autre.

Vous pouvez vous faire une meilleure idée en faisant la moyenne de vos résultats sur, disons, une heure environ ou même plus.

Tous les tests de vitesse Internet ont cette variation naturelle, alors ne vous inquiétez pas d'obtenir un mauvais résultat aléatoire.

Vous pouvez également vérifier auprès d'autres sites de test de vitesse.

Si votre site n'obtient pas les notes vertes de Google et GTMetrix, voici onze façons simples, rapides et faciles de résoudre le problème et de satisfaire les visiteurs de votre site et les moteurs de recherche.

1. Tout d'abord, éliminez l'encombrement de la barre latérale

La première chose à faire est de vérifier votre barre latérale. Avez-vous besoin de tous ces widgets et publicités ? En fait, avez-vous vraiment besoin d'une barre latérale ?

Vous devez considérer vos pages comme un bien immobilier de premier ordre.

Quelle surface précieuse est gaspillée sur votre site par des éléments qui n'ont que très peu d'utilité réelle et ralentissent votre site ?

Une page Web encombrée est également difficile à lire car il y a trop de distractions.

La plupart des éléments de la barre latérale augmentent la vitesse de chargement, donc plus vous en supprimez, mieux c'est.

2. Évitez le contenu sur la page dépendant de sites externes

L'un des pires contrevenants pour ralentir une page Web et échouer au test de vitesse de Google est un bouton Facebook Like.

Votre page doit attendre Facebook avant de charger votre page. C'est un problème courant avec la plupart des widgets de médias sociaux et des boutons de partage.

Certains peuvent ajouter jusqu'à deux secondes ou plus au temps de chargement de votre page.

Si vous avez besoin de partager sur les réseaux sociaux, recherchez un plugin léger.

Parmi les autres services Internet susceptibles de ralentir des éléments de votre site figurent les publicités et widgets Amazon et les grandes bannières publicitaires Google.

Si vous avez Google Adsense, essayez d'utiliser des publicités dans l'article au lieu de grandes bannières publicitaires et réglez votre solde publicitaire à environ 70-80 %.

Contrairement à ce que vous pourriez lire sur Adsense, il n'y a pas une grande charge sur un site si vous utilisez des annonces dans l'article.

Voici une page de notre site avec Google Ads mesurée par GTmetrix.

L'effet sur le temps de chargement est minime.

Avec deux annonces, le temps de chargement complet est parfait à un peu plus de deux secondes et le DOM se charge en 1,6 seconde.

De plus, les annonces se chargent tardivement, ce qui signifie que la page n'attend pas sur Google avant de s'afficher.

3. Vérifiez les fichiers javascript lents

Chaque élément que vous avez sur votre site prend du temps à se charger.

Remplir votre site avec de nombreux plugins, widgets et modules complémentaires a un coût de vitesse énorme.

Voici une évaluation GTMetrix d'un site Web qui a vraiment besoin d'une attention urgente. Un chargement de page en 12,4 secondes est abyssal aujourd'hui.

Vous pouvez utiliser GTMetrix pour localiser chaque élément ralentissant votre site.

Cliquez sur le signe + à côté de chaque GET pour savoir ce qui ralentit votre site et ce que vous devez corriger, supprimer ou optimiser.

Un site comme celui ci-dessus peut être amélioré rapidement en prenant trois mesures très simples.

Les trois points suivants expliquent l'ajout d'un cache, la minification et l'agrégation de CSS et de Javascript, et le chargement différé d'images.

Les trois plugins recommandés ci-dessous sont gratuits.

4. Installez le cache total W3

Il existe de très bons plugins de mise en cache pour WordPress, notamment WP Super Cache et WP Fastest Cache.

Mais j'utilise W3 Total Cache depuis plus de dix ans maintenant sur tous mes sites.

Il existe de nombreux paramètres que vous pouvez utiliser avec tous ces plugins pour tirer parti de la mise en cache du navigateur, mais il n'y en a que deux que vous devez définir et utiliser.

Voici les paramètres de Total Cache. Mais ils sont similaires pour tous les plugins de mise en cache.

Il vous suffit d'activer le navigateur et le cache de la page.

Ces deux paramètres accéléreront votre site en mettant en cache les éléments de votre site qui ne changent pas, tels que vos en-têtes, pieds de page, éléments de barre latérale et menus.

5. Installez l'optimisation automatique

La plupart des plugins de mise en cache peuvent également minifier et agréger Javascript et CSS.

Bien qu'ils fonctionnent tous assez bien, certains peuvent être très compliqués à mettre en place.

J'utilise Autoptimize pour faire ce travail car il est plus rapide, plus facile à configurer et beaucoup plus efficace. En fait, vous pouvez le configurer en moins d'une minute.

Ce qu'il fait est de réduire la taille de tous les fichiers CSS et Javascript, puis de les regrouper en un seul fichier CSS et un seul fichier Javascript.

Ces deux fichiers se chargent ensuite de manière à ne pas bloquer le rendu, ce qui est souvent un problème avec un test de vitesse Google pour certains sites.

La minification et l'agrégation font une énorme différence dans la vitesse de votre site.

Voici les paramètres que j'utilise pour tous mes sites.

Un autre bonus supplémentaire avec Autoptimize est que le support est fantastique.

6. Installez a3 Lazy Load

Lorsqu'un utilisateur visite votre site Web, toutes les images que vous avez sur une page Web doivent être chargées avant que votre page ne devienne active et utilisable pour votre visiteur.

En utilisant le chargement différé, toutes les images qui n'apparaissent pas sur l'écran de l'utilisateur ne sont chargées qu'au fur et à mesure qu'elles défilent.

Cela fait une énorme différence pour la vitesse de votre site car vos images se chargeront après le temps de chargement complet du DOM.

J'ai essayé quelques plugins différents avant de choisir a3 Lazy Load. Il gagne en performance et en facilité d'utilisation.

Une fois installé, vous pouvez utiliser les paramètres par défaut, ou vous pouvez faire quelques ajustements.

Le plugin chargera paresseusement toutes vos images, vidéos et iFrames.

7. Installer WP Rocket

Si vous souhaitez une option tout-en-un pour remplacer les trois options gratuites ci-dessus, WP Rocket peut tout faire et plus encore.

Au lieu d'avoir à utiliser et à configurer trois plugins, vous pouvez utiliser WP Rocket pour définir votre page et le cache de votre navigateur, minimiser votre Javascript et CSS ainsi que lazyload vos images.

Il peut également optimiser votre base de données et offre une intégration avec Cloudflare.

WP Rocket est une solution tout-en-un économique pour rendre votre site ultra rapide en quelques minutes avec très peu d'effort.

8. Redimensionnez vos images

Les grandes images ne ralentissent pas la vitesse du site. Mais les images qui ne sont pas dimensionnées pour convenir à une page Web peuvent ralentir considérablement la vitesse de votre site.

Vous devez toujours redimensionner vos images à la taille exacte dont vous avez besoin avant de les télécharger.

Si vous voulez une image pleine largeur, elle doit être dimensionnée à la largeur de la page de votre blog.

Ce site fait 750 pixels de large avec une barre latérale de 300 pixels. Toute image plus large que 750px va ralentir le site.

Mais n'ajustez jamais la taille de vos images à la volée dans votre boîte de détails sur les médias. Cela ne réduira pas la taille de votre page.

Comme vous pouvez le voir, cette image fait 1218 pixels de large. La sélection de la grande taille ajustera l'image.

Mais en réalité, la page chargera l'image en taille réelle de 1218 pixels et ralentira la vitesse du site.

N'utilisez jamais la zone Détails de l'image dans WordPress pour redimensionner paresseusement vos images.

Redimensionnez toujours les images avant de les télécharger, de sorte que la taille réelle corresponde à la taille réelle de votre image sur votre page.

9. Optimisez les images

Smush est un plugin populaire pour réduire les images en utilisant une compression avec perte. J'utilise la version gratuite et elle fonctionne parfaitement.

Cependant, je fais une étape supplémentaire avant de télécharger une image sur l'un de mes sites. J'utilise une petite application de bureau appelée ImageOptim.

Comme vous pouvez le constater, il réduit les images d'environ 80 %.

Malheureusement, il n'est disponible que pour les utilisateurs de Mac. Si vous êtes un utilisateur Windows, vous pouvez utiliser un optimiseur d'image en ligne pour le même résultat.

Vous pouvez également lire un article précédent sur la façon de réduire les images.

10. Utiliser le CDN Cloudflare

Avez-vous besoin d'utiliser un réseau de diffusion de contenu (CDN) ?

Ça dépend. Un CDN stocke vos fichiers statiques sur des serveurs du monde entier pour aider votre site à se charger un peu plus rapidement. Si les visiteurs de votre site sont éloignés de vous, cela peut aider.

Mais si votre site reçoit principalement du trafic local, cela n'aidera pas beaucoup.

Just Publishing Advice est hébergé en Europe, mais un pourcentage important du trafic provient des États-Unis. Il est donc logique d'utiliser un CDN.

Si votre site est hébergé en Australie, par exemple, et que vous recevez beaucoup de trafic du Royaume-Uni et des États-Unis, vous voudrez probablement envisager d'utiliser un CDN.

Cloudflare est populaire, efficace et gratuit. C'est donc un bon choix.

Cependant, vous avez besoin d'un peu de capacité technique pour le déployer sur votre site.

Vous pouvez en savoir plus sur la configuration de Cloudflare avec WordPress dans notre article de guide pratique.

11. Vérifiez une fois par semaine

Une fois que vous avez amélioré votre site avec les mesures ci-dessus, vous devez effectuer une vérification régulière.

Les choses changent toujours sur un blog, il est donc avantageux de garder un œil sur vos performances.

Vous utiliserez Pagespeed Insights et GTMetrix la plupart du temps.

Cependant, il existe un autre test de vitesse de site Web gratuit que vous pouvez effectuer pour vérifier les performances de votre site dans 25 emplacements à travers le monde.

Dot-Com Tools teste la vitesse de votre site en temps réel afin que vous puissiez voir comment votre site se classe.

C'est un très bon outil de test et un guide si vous vous demandez si un CDN vaut la peine pour vous.

Lorsque vous testez, gardez à l'esprit que Google recommande une vitesse de page maximale de 3 secondes à pleine charge.

Avec WordPress, c'est assez facile à réaliser si vous utilisez les suggestions d'optimisation de cet article.

Sommaire

Avez-vous besoin de faire tout ce qui est indiqué dans ce guide ?

WordPress prêt à l'emploi fonctionne généralement assez bien en ce qui concerne la vitesse.

Mais si vous utilisez un thème lent et ajoutez beaucoup de plugins et utilisez de grandes images, alors oui, vous devriez envisager de faire du travail si votre site est mal évalué pour la vitesse de chargement.

Une autre cause peut être un serveur hôte peu fiable ou lent. Si vous devez changer de fournisseur, un hébergeur rapide ne coûte que quelques dollars par mois.

Si vous obtenez un score dans le rouge au test de vitesse de Google, vous devez absolument effectuer des travaux de toute urgence.

Une astuce consiste à activer un thème WordPress par défaut comme Twenty Seventeen et à tester à nouveau. La plupart des thèmes sont désormais réactifs, mais certains thèmes plus anciens peuvent ralentir la vitesse du site.

Si votre thème est correct, les principales priorités pour améliorer un site comme celui de l'image ci-dessus seraient :

1. Installez un plug-in de mise en cache.

2. Installez l'optimisation automatique

3. Installez un chargeur paresseux

Suivez ces trois étapes et les performances de votre site s'amélioreront instantanément.

Pour vos images, installer Smush puis effectuer une optimisation en masse aidera également beaucoup.

Il n'y a aucune raison d'avoir un site WordPress lent et d'échouer au test de vitesse de Google.

Si vous déployez les dix étapes répertoriées dans cet article, votre site réussira facilement le test Pagespeed Insight pour mobile et ordinateur de bureau.