TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment obtenir un score de 100/100 dans Google PageSpeed ​​Insights pour le site WordPress ?

9

Google a récemment annoncé que l’expérience de la page serait l’un des facteurs de l’algorithme qui affecterait les positions dans le classement des recherches. Le nouveau terme Core Web Vitals que vous voyez dans Google Search Console devient un facteur important qui définirait l’avenir du Web. Cela oblige tous les webmasters à s’assurer que la vitesse de chargement du site est celle exigée par Google afin d’obtenir un bon classement dans les résultats de recherche. Si vous utilisez WordPress pour héberger votre site, il est en fait facile d’obtenir un score de 100/100 dans l’outil Google PageSpeed ​​Insights.

Ceci est une étude de cas avec notre propre expérience. Par conséquent, nous mentionnons explicitement les noms de plugins/thèmes/hébergeurs. Il est important de noter qu’il n’est pas toujours nécessaire de consulter le score PageSpeed ​​si vous avez une visibilité claire de ce que vous faites. Par exemple, vous pouvez utiliser des publicités payantes ou du marketing social pour promouvoir votre site dont le score de vitesse de page est faible. Par conséquent, le contexte de cet article s’applique aux blogueurs qui cherchent à obtenir un score de vitesse plus élevé, augmentant ainsi les chances d’un meilleur classement dans les moteurs de recherche et d’une meilleure expérience utilisateur.

Google PageSpeed ​​Insights

Il y a peu d’outils ; vous pouvez utiliser pour surveiller la vitesse du site Web WordPress. Google PageSpeed ​​Insights, Pingdom, GTmetrix et WebPage Test sont parmi les outils les plus utilisés de la liste. Étant donné que les résultats de recherche Google déterminent le trafic de nombreux sites Web, il est bon d’utiliser l’outil PageSpeed ​​Insights comme référence.

Vous pouvez accéder à l’ outil PageSpeed et saisir n’importe quelle URL de page pour obtenir le score de vitesse. Il existe de nombreux facteurs influençant le score que vous pouvez lire sur le site officiel du développeur Google. Vous trouverez ci-dessous le résumé des facteurs pesant sur le score que vous voyez.

Facteur Poids
Première peinture de contenu 15%
Indice de vitesse 15%
La plus grande peinture de contenu 25%
Temps d’interactivité 15%
Temps de blocage total 25%
Changement de disposition cumulatif 5%

Après avoir analysé la page Web, Google fournira un score basé sur une échelle de 100 points. Vous trouverez ci-dessous les trois plages pour indiquer la position de vitesse de la page analysée.

  • 0-49: Pauvre
  • 50-79 : besoin d’amélioration
  • 80-100: Bon

Par conséquent, un score de 100/100 dans Google PageSpeed ​​indique que votre site se charge très rapidement, évidemment Google et les utilisateurs adoreront les sites Web à chargement rapide. Vous pouvez consulter le calculateur de notation Lighthouse pour vérifier divers paramètres nécessaires à l’amélioration dynamique de la vitesse.

N’oubliez pas que, outre les facteurs mentionnés ci-dessus, Google proposera également des opportunités telles que la suppression des scripts inutilisés ou la suppression des CSS inutilisés. Cependant, ce sont des recommandations et n’affecteront PAS votre score, même si vous travaillez dur pour les faire passer l’audit. Nous soulignons explicitement ce point car de nombreux blogueurs pensent que la suppression de jQuery aidera à obtenir un score plus élevé.

Score et taille de notre site Web

Avant de vous expliquer comment obtenir 100/100, nous souhaitons vous montrer le score de notre page d’accueil. Comme vous pouvez le voir, nous en obtenons 100 pour les mobiles et les ordinateurs de bureau.

Comment obtenir un score de 100/100 dans Google PageSpeed ​​Insights pour le site WordPress ?

Page d’accueil

N’oubliez pas que nous parlons de ce site Web en direct ayant près de 2000 articles de blog et utilisant environ 20 plugins. Si nous pouvons obtenir un score complet, cela est tout à fait possible pour les sites avec moins de publications et de plugins.

5 facteurs pour obtenir un score de 100/100 dans Google PageSpeed

Vous trouverez ci-dessous les 5 principaux facteurs dont nous discuterons en détail et que nous considérons importants pour obtenir un score de 100/100 dans Google PageSpeed.

  1. Obtenez une bonne société d’hébergement
  2. Aucun code publicitaire
  3. Utiliser un thème léger
  4. Supprimer les plugins lourds
  5. Utiliser le plug-in de mise en cache

Peu d’autres facteurs tels que le nettoyage de la base de données et le CDN peuvent également vous aider en fonction de votre situation. Nous couvrirons également ces aspects.

1 Bon hébergement

Nous avons commencé ce site Web sur Weebly et sommes passés à WordPress avec Bluehost. Plus tard, nous avons déplacé le site vers le plan SiteGround GoGeek, puis vers SiteGround Cloud VPS en mai 2016. À partir de ce moment-là, il n’y a plus eu de retour en arrière ni de temps consacré aux problèmes liés à l’hébergement.

Récemment, SiteGround a déplacé son infrastructure pour utiliser la plate-forme Google Cloud. Cela aide beaucoup à avoir un temps de première réponse solide du serveur. Nous n’utilisons même pas Cloudflare ou tout autre CDN pour obtenir un score de 100/100 dans Google PageSpeed. Il s’agit du bon hébergement que vous utilisez pour votre site. Par conséquent, assurez-vous d’acheter un plan d’hébergement premium comme SiteGround Cloud VPS ou similaire. Cela vous permettra de gagner beaucoup de temps et de vous concentrer sur d’autres aspects de la gestion d’un site Web.

2 Aucun code publicitaire

Près de 90% des blogueurs commencent à bloguer pour gagner de l’argent en ligne. Le premier choix pour eux est de postuler à Google AdSense et le deuxième choix est d’essayer le marketing d’affiliation. Étant donné que le marketing d’affiliation a besoin d’un site digne de confiance, Google AdSense est une option idéale pour les nouveaux blogueurs.

Nous utilisons Google AdSense et c’est notre principale source de revenus pour la gestion de ce site Web. Nous avons expliqué les problèmes avec AdSense et la vitesse de la page dans notre article – AdSense Vs Page Speed ​​an Irony. La page que nous avons testée dans PageSpeed ​​est la page d’accueil de ce site. La raison pour laquelle nous obtenons un score de 100/100 est que nous n’utilisons pas de code AdSense sur la page d’accueil. Cependant, il existe une annonce automatique disponible sur l’ensemble du site. Lorsque nous avons vérifié la page après avoir vérifié le score PageSpeed, nous avons constaté qu’une annonce s’affichait en bas de la page. La page se charge plus rapidement avec une seule annonce apparaissant en bas.

Laissez-nous vous montrer le résultat d’une page aléatoire ayant 5 annonces AdSense sur ce site. Comme vous pouvez le voir, le score est dans la fourchette 55/90. Il s’agit d’une baisse de 45/10 % sur les mobiles et les ordinateurs de bureau.

Comment obtenir un score de 100/100 dans Google PageSpeed ​​Insights pour le site WordPress ?

Vitesse mobile de la page aléatoire

Comment obtenir un score de 100/100 dans Google PageSpeed ​​Insights pour le site WordPress ?

Vitesse de bureau de la page aléatoire

Si votre choix est d’utiliser AdSense ou tout autre programme publicitaire similaire, oubliez la vitesse de la page. Google PageSpeed ​​vous montrera de nombreux problèmes dus au chargement de scripts tiers sur votre site. Malheureusement, vous ne pourrez pas résoudre ces problèmes sans supprimer le code du script publicitaire.

Comment obtenir un score de 100/100 dans Google PageSpeed ​​Insights pour le site WordPress ?

Impact AdSense sur la vitesse

3 Utilisez un thème léger

Nous utilisions le thème Highend pendant 4 ans. C’est un très bon thème avec des fonctionnalités groupées. Malheureusement, nous n’avons pas utilisé 90% des fonctionnalités telles que les cartes, la FAQ, les témoignages, etc. Cependant, le thème charge les ressources CSS et JS nécessaires à toutes ces fonctionnalités, que vous les utilisiez ou non sur la page. Cela n’a pas de sens comme posséder un grand palais mais vivre toujours dans une petite hutte à l’extérieur du palais.

Malheureusement, il n’était pas facile de changer de thème en raison de l’intégration étroite du thème Highend sur tout le site. Par exemple, le thème Highend a une option pour intégrer Google Analytics à l’ aide d’options de thème. Nous avons donc passé beaucoup de temps à trouver un thème de remplacement de nature minimale mais offrant des fonctionnalités de base sans plugins.

Heureusement, très peu de thèmes répondaient à nos critères. Pour être précis, nous avons choisi les thèmes GeneratePress et Astra et avons ensuite décidé d’acheter GeneratePress. Après six mois de travail de migration, nous avons changé de thème en juin 2020 et le score PageSpeed ​​a augmenté d’au moins 30 % (avec les annonces AdSense).

Il y avait cinq années précédentes perdues en choisissant un mauvais thème dont nous n’avions pas besoin. Assurez-vous de ne pas faire la même erreur et achetez un thème premium et minimaliste qui répond à vos besoins. Le thème GeneratePress propose des crochets utilisant des éléments, des sections, une typographie et d’autres fonctionnalités de base dont nous avons besoin. Pour tout autre usage, mieux vaut utiliser des plugins pour ne pas avoir à perdre cinq ans plus tard pour changer ce thème.

4 Supprimer les plugins lourds

Semblable au thème, il existe des plugins lourds qui réduiront la vitesse de la page. Auparavant, nous utilisions les plugins WPBakery Page Builder, WooCommerce et WP Review sur ce site. Maintenant, nous avons déplacé tous ces plugins avec le thème Highend dans un sous-répertoire. Cela nous a causé de lourdes pertes de trafic ainsi que des mises à jour de l’algorithme de Google en mai 2020. Cependant, nous devons aller plus loin avec une augmentation de vitesse d’environ 30 %.

Si vous utilisez ou prévoyez de trouver un constructeur de page ou des plugins similaires, arrêtez-vous et réfléchissez-y à deux fois.

  • Nous avons converti la mise en page WPBakery Page Builder et utilisé Gutenberg par défaut pour créer notre page d’accueil. Même GeneratePress propose des mises en page Elementor et leur propre mini-constructeur de pages, mais vous pouvez à coup sûr créer des mises en page décentes avec des en- têtes jumbotron et hero pleine largeur à l’aide du bloc Gutenberg Group.
  • Évitez les plugins gonflés comme WP Review – il utilise toujours la police géniale 4.7 pour le prix de 97 $ (licence 3 sites). C’est absolument ridicule en chargeant la version 4.7 sur chaque page lorsque la version 6 est en cours de lancement. N’oubliez pas que nous parlons de 2000 pages dont seulement 70 pages utilisent le modèle de révision du plugin. C’est une sorte de compromis auquel vous devriez penser avant d’installer un plugin sur votre site.
  • WooCommerce est un autre plugin qui tuera votre site en ajoutant des appels AJAX administrateur pour le panier. Encore une fois, 50 produits contre 2000 publications n’est pas un bon moyen de les garder ensemble à la fois du point de vue du trafic et des revenus.

Ce sont des méthodes difficiles d’apprentissage, qu’il nous a fallu des années pour comprendre. J’espère que vous pourrez comprendre et utiliser uniquement les plugins requis sur votre site.

5 Utiliser le plug-in de mise en cache

Nous utilisons WP Rocket depuis plus d’un an. La meilleure partie du plugin est qu’il génère des CSS critiques pour chaque type de publication sur votre site. En plus de la mise en cache et du préchargement, les CSS critiques augmenteront la vitesse de votre site. Notez que nous utilisions également WP Rocket sur le thème Highend avec WooCommerce et d’autres plugins lourds comme expliqué ci-dessus. Cependant, le résultat était 30/60 dans Google PageSpeed.

Donc, la conclusion est que le plugin de mise en cache fait de son mieux avec le meilleur thème/plugins codés. Sinon, vous aurez une mauvaise combinaison sans augmenter beaucoup la vitesse. Notez que SiteGround propose la mise en cache du serveur par défaut avec le plug-in SG Optimizer. Cependant, cela ne fonctionne pas pour nous, même avec un simple thème GeneratePress. Comme nous voulons garder la mise en cache indépendante de l’hébergement, WP Rocket ou un plugin similaire était la meilleure option pour nous. Vous trouverez ci-dessous la mise en cache et d’autres fonctionnalités que vous obtiendrez avec WP Rocket :

  • Mise en cache du navigateur, compression GZIP, suppression de la chaîne de requête et optimisation des polices Google.
  • Désactivez les intégrations, les emoji et contrôlez l’API Heartbeat.
  • Génération CSS critique pour chaque type de publication avec préchargement des URL en fonction de votre sitemap XML.
  • Hébergez jQuery Migrate, Google Analytics et Facebook Pixels pour améliorer la vitesse.
  • Combinez et minifiez CSS et JS.
  • Nettoyez les entrées redondantes de la base de données comme les transitoires, les révisions et les sauvegardes automatiques.
  • Chargement paresseux d’images, de vidéos et de cadres.
  • Cache séparé pour mobile et ordinateur de bureau, si vous en avez besoin.

Vous pouvez également acheter un CDN et utiliser le plugin d’optimisation d’image pour un coût supplémentaire (nous n’utilisons pas ces fonctionnalités).

Autres facteurs

Eh bien, partout sur Internet, vous trouverez un mot « CDN » lorsque vous parlez de la vitesse du site WordPress. SiteGround propose également une intégration CDN gratuite avec Cloudflare. À moins que vous n’ayez un public ciblé dans des pays bloqués par Internet comme la Chine, nous ne pensons pas que CDN puisse réellement augmenter considérablement la vitesse. Pour un site comme le nôtre, cela aidera à servir des fichiers statiques comme de grandes images plus rapidement. Cependant, SiteGround a introduit des outils de site (remplaçant cPanel) qui généreront automatiquement des images WebP à l’aide de leur plugin SG Optimizer. Nous n’utilisons toujours pas cette fonctionnalité, vous pouvez utiliser n’importe quel plugin WebP pour fournir des images légères aux navigateurs pris en charge, au lieu du format PNG/JPEG.

Un autre facteur consiste à nettoyer votre base de données et votre site. Comme mentionné, WP Rocket propose une option de nettoyage de base de données que vous pouvez planifier périodiquement. Cependant, ce n’est pas le nettoyage dont nous parlons ici.

  • Savez-vous que le plugin WooCommerce ajoutera plus de 25 tables dans votre base de données? Comme nous l’avons expliqué ici, l’installation par défaut de WordPress n’aura que 12 tables pour un seul site. Nous avons passé beaucoup de temps à migrer les commandes, les produits et les fichiers WooCommerce. Nous devons également supprimer les vignettes WooCommerce pour nettoyer l’espace de stockage. En savoir plus sur la façon de supprimer complètement WooCommerce de votre site.
  • Le plugin WP Review Pro ajoutera environ 25 champs personnalisés à chaque publication que vous créez. Tout cela va gonfler la table postmeta. Il générera également 2 vignettes supplémentaires pour chaque image que vous téléchargez.
  • WP Bakery et de nombreux autres plugins auront CSS, JS et d’autres ressources dans un répertoire séparé dans le dossier de téléchargement. Ces scripts ralentiront votre site en se chargeant sur toutes les pages.
  • Le thème haut de gamme générera environ 10 vignettes (cela varie en fonction de la taille de l’image et des options) pour chaque image que vous téléchargez.

Maintenant que le simple fait de changer le thème en GeneratePress et de migrer les plugins lourds vers un sous-répertoire n’aidera en rien à nettoyer le désordre actuel. Si vous changez de thème ou supprimez des plugins, assurez-vous de supprimer toutes les traces qu’ils laissent dans les tables wp_postmeta et wp_options. Cela aidera à augmenter la vitesse de chargement des pages en réduisant le temps d’exécution des requêtes de base de données.

Derniers mots

Nous avons délibérément écrit cet article d’une manière, ce qu’il ne faut PAS faire pour obtenir un score de 100/100 dans l’outil Google PageSpeed ​​Insights. C’est pour les blogueurs qui sont en train d’essayer d’améliorer la vitesse. Cependant, si vous êtes un nouveau blogueur, cela devrait vous donner une idée claire de l’impact du choix d’options comme AdSense et des thèmes lourds avec des constructeurs de pages. Comme le dit un proverbe populaire, "La simplicité est une sophistication ultime", choisir ce dont vous avez besoin vous aidera à obtenir un score élevé et à gagner beaucoup de temps.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails