La plupart des blogueurs débutants commencent leur voyage en utilisant des services d’hébergement bon marché (Hostinger est un service que nous recommandons si vous démarrez un nouveau blog). Il n’y a rien de mal à cela tant que votre site fonctionne correctement avec des délais d’attente minimaux et des temps de réponse moyens suffisants, mais ce qui rend votre site lent, c’est le nombre de plugins que vous utilisez et le thème que vous choisissez.
Même si vous utilisez un thème ou un plugin lourd, vous pouvez toujours améliorer la vitesse des pages, ce qui est correct. Mais vous voulez passer les vitales web de base, donc, à la fin de cet article, vous saurez comment passer l’évaluation des vitales web de base sur PageSpeed Insights.
Quels sont les indicateurs de Google Core Web Vitals ?
Voici les indicateurs :
Élément LCP : Il s’agit du plus grand élément de contenu peint dans le viewport (le premier élément le plus grand qu’un utilisateur voit dès que votre site Web se charge). Objectif : 2,5 secondes ou moins.
CLS: il s’agit de la stabilité visuelle des éléments de votre site Web.
par exemple, tout élément pousse les autres éléments lorsqu’il se charge (parce que le JavaScript et le CSS nécessaires sur votre site se chargent après un certain temps).
Objectif : Moins de 0,1.
FID: C’est le temps que prend votre site web pour accepter la première entrée du visiteur.
Objectif : Moins de 100 ms.
Remarque : 75% de votre trafic devrait bénéficier d’une bonne expérience de la page et puisque Google collecte les données agrégées sur 28 jours. Si vous ajoutez des plugins lourds, cela peut encore affecter les résultats.
Certains plugins de sauvegarde peuvent provoquer une panne de votre serveur Web (erreur 503 ou 504) ou des temps de réponse médiocres (il faut plus de 700 ms pour répondre à une demande) lorsque vous sauvegardez votre site ou effectuez une autre tâche lourde qui impose une charge trop importante à votre application de base de données. Si cela se produit, vous devez mettre à niveau votre hébergeur (la RAM ne suffit pas). Les mauvais temps de réponse s’ajoutent aux données de votre champ de vitesse de page et font glisser votre site web dans la catégorie « pauvre ».
Remarque : vous pouvez faire appel à un professionnel pour optimiser la vitesse de votre site Web. Je ne traiterai que de l’optimisation de base de la vitesse dans cet article.
1. Utilisez un plugin de mise en cache
C’est la chose la plus simple que vous pouvez faire pour passer les vitales du web mais la plupart des blogueurs utilisent des plugins de cache gratuits qui ne donnent pas les mêmes performances que certains plugins premium comme WP Rocket.
La plupart des plugins de cache gratuits ne peuvent pas gérer le nombre élevé de requêtes (visiteurs) par seconde comme le cache de WP Rocket ou LiteSpeed (avec des délais d’attente minimaux et des temps de réponse moyens faibles).
Les paramètres du plugin de cache peuvent également avoir un impact sur vos performances, alors lisez cet article et découvrez quelles options vous devriez ou ne devriez pas utiliser.
Par exemple : L’activation de delay js pourrait charger vos publicités après le chargement de tous les éléments de style, ce qui pourrait nuire à vos revenus publicitaires. Vous pouvez exclure vos annonces de delay js simplement mettre ‘adsbygoogle’ dans les fichiers javascript exclus comme indiqué dans l’image ci-dessous :
2. Utiliser Asset clean up ou perf matters
Avez-vous déjà pensé à la raison pour laquelle ce javascript d’un plugin de formulaire ou tout autre plugin se charge sur des articles où vous ne l’utilisez pas ? Si oui, alors j’ai quelque chose ici que vous pourriez utiliser.
Lenettoyage des actifs vous permet de décharger ce javascript ou CSS spécifique d’un seul article ou de l’ensemble du site (cela vous aide à passer des audits tels que « Réduire le JavaScript inutilisé », « Réduire le CSS inutilisé », « Éliminer les ressources bloquant le rendu »).
Il fonctionne parfaitement avec le plugin WP Rocket cache.
Related
Comment supprimer les CSS inutilisés en utilisant le nettoyage des actifs.
3. Migrer ou mettre à niveau votre hébergement
Étiez-vous satisfait de votre hébergeur lorsque vous avez commencé à héberger votre site Web ? Mais vous avez récemment réalisé que leurs performances se sont dégradées au fur et à mesure que votre site web se développait.
Peut-être que vous êtes sur un hébergement bon marché et que l’emplacement de votre serveur est loin de vos visiteurs et que vous n’utilisez pas de CDN. Soit vous utilisez un CDN, soit vous migrez votre hôte à proximité du pays dont vous recevez le plus de trafic. Si vous obtenez un serveur dans le pays ciblé, vous pourrez constater une énorme différence dans la vitesse de votre site.
La plupart des hébergements bon marché utilisent la technologie de serveur Apache qui peut gérer 160 demandes (visiteurs ou trafic) par seconde. Cela peut être un énorme problème si vous avez plus de 100 000 visiteurs par mois, et si vous obtenez des tonnes de timeouts, alors optez pour digital ocean ou Vultr Openlitespeed server, ils peuvent économiser beaucoup d’argent sur le CDN (pas besoin d’un CDN si votre emplacement de serveur est proche d’un endroit où vous obtenez la plus grande quantité de trafic), et fournit des performances encore meilleures. Utilisez Bunny CDN ou Amazon CloudFront avec ces hôtes si vous le souhaitez.
Utilisez un équilibreur de charge quand vous le souhaitez et n’avez pas besoin de migrer fréquemment d’un hôte à un autre.
Remarque
Vous voulez un hébergement géré par Digital Ocean, Vultr, AWS ?
Alors utilisez Cloudways. Puisqu’il s’agit d’un fournisseur d’hébergement géré, la mise à jour de votre version PHP ou l’activation de la mise en cache des objets est beaucoup plus facile que sur un hébergement non géré Digital Ocean ou Vultr. En outre, le support par chat de Cloudways est quelque chose que vous n’obtenez pas de la plupart des services d’hébergement non gérés.
Openlitespeed est une version gratuite de la technologie de serveur LiteSpeed. L’emplacement du serveur peut faire une énorme différence, alors choisissez-le judicieusement.
Si vous recevez plus de 100 000 visiteurs par mois et que votre hébergeur n’est pas en mesure de les gérer (vos temps de réponse ont empiré et vous avez des tonnes de délais d’attente), changez d’hébergeur ou mettez votre plan à niveau dès que possible. Un CDN seul ne sera pas d’une grande aide.
4. Trouver des alternatives légères
Si la migration de votre hébergeur n’a pas été d’un grand secours, analysez votre article dans Page Speed Insights et voyez ce qui cause les problèmes de CLS ou de LCP. Dans la plupart des cas, vous pouvez facilement trouver quel plugin est à l’origine du problème.
Disons que vous avez découvert que vous avez échoué pour l’audit « Eliminer les ressources bloquant le rendu ». Vous pouvez maintenant préfigurer ces demandes dans wp rocket (exemple de préfiguration pour les URL externes comme celui-ci.
« https://google-analytics.com » mettre ces URLs dans la section de demande DNS prefetch de WP Rocket (cela ressemblera à ceci après avoir enregistré les paramètres //google-analytics.com)) et si vous utilisez les bons paramètres (par exemple Load JavaScript deferred) de WP Rocket, vous pourriez ne pas avoir cette erreur. Bon, disons que vous avez essayé tous les paramètres qui pourraient résoudre ce problème, mais il n’y a pas d’amélioration, alors vous devez trouver d’autres plugins légers.
Maintenant, comment allez-vous savoir quel plugin est à l’origine du problème CLS ou LCP ?
Cliquez simplement sur l’audit pour lequel vous voulez passer et voyez la liste des URLs
Cliquez sur chaque URL et vous obtiendrez généralement quelque chose comme ceci wp-content/plugins/elementor/(juste un exemple).
Vous pouvez facilement identifier en utilisant l’URL ou disons que vous obtenez quelque chose comme ceci wp-includes/js/. Maintenant, pour résoudre ce genre de problème, vérifiez l’onglet Site-wide common unloads (décharges communes à tout le site) dans les paramètres de nettoyage des actifs et déchargez jquery migrate et d’autres éléments. Il y a un bouton « learn more » sous chaque audit, il suffit de cliquer dessus pour en savoir plus sur la façon dont vous pouvez effacer cet audit.
5. Utilisez un CDN
Un CDN est un service qui peut vous aider à améliorer vos temps de réponse et à réduire la latence dans le monde entier. La diffusion de vos fichiers HTML, javascript, CSS, images et autres ressources par le biais d’un CDN réduit la charge sur votre serveur. Vous vous demandez peut-être pourquoi les performances du plan gratuit de Cloudflare sont meilleures aux États-Unis mais pas aussi bonnes en Inde.
C’est la seule raison pour laquelle vous ne devriez pas utiliser un CDN gratuit (si les performances ne sont pas bonnes dans la région que vous visez). AWS CloudFront et Bunny CDN sont plus performants en Inde et Bunny CDN est même moins cher que les plans premium de Cloudflare.
Remarque :
Vous pouvez utiliser le CDN et les équilibreurs de charge ensemble, cela ne posera aucun problème.
Le bon CDN et l’emplacement du serveur peuvent vous permettre d’obtenir « Core Web Vitals Assessment : Passed » même si vos données de laboratoire sont rouges et que votre score sur PageSpeed insights est inférieur à 50. (Par exemple TechRadar et PC gamer). Faites donc appel à un professionnel pour choisir le bon hébergement et le bon CDN (ce qui pourrait vous aider à passer le test Core Web Vitals sans sacrifier les éléments de votre site, vos plugins et votre thème).
6. Arrêtez d’utiliser des constructeurs de pages lourds
Les performances de la plupart des créateurs de pages se sont améliorées (les développeurs ont supprimé beaucoup d’éléments superflus de leurs créateurs de pages), mais elles ne sont toujours pas suffisantes pour obtenir la mention « Core Web Vitals Assessment : Passed » sur Google PageSpeed Insights et, pour aggraver les choses, les modules complémentaires de construction de pages créés par des tiers font glisser votre site.
Et si vous pensez que votre constructeur de pages et certains addons sont les seuls coupables, alors vous devez supprimer votre constructeur et commencer à utiliser des alternatives légères comme les blocs Gutenberg avec les blocs Kandace et d’autres addons. Avant de trouver une alternative, essayez de trouver ce que les développeurs de votre constructeur de pages font pour optimiser leur constructeur de pages. Par exemple, Elementor et Divi se sont beaucoup améliorés et ils font continuellement leurs meilleurs efforts pour améliorer les performances de leur constructeur de pages.
7. Utilisez des plugins d’optimisation des images
Si votre élément LCP est une image, vous devez optimiser vos images (réduire la taille des images sans perte de qualité). Vous pouvez utiliser des plugins de conversion d’image Webp qui peuvent servir vos images avec la même qualité mais en réduisant leur taille (par exemple, une image de 2 Mo à 300 Ko). Disons que cela peut vous aider à économiser 500 ms, ce qui signifie que si votre LCP est de 2,9, vous pouvez le ramener à 2,4. Et vous pouvez passer l’évaluation des vitaux web de base sans trop d’effort (en considérant que vous avez réussi pour le CLS).
Conseils supplémentaires :
Si vous êtes maintenant dans la catégorie jaune mais que vous n’avez toujours pas obtenu le vert sur page speed insights, vous devez suivre ceci. Les données de terrain de page speed insights sont mises à jour tous les 28 jours, donc si vos données de laboratoire sont bonnes, vous n’avez pas à vous inquiéter. Exécutez simplement le test de vitesse Gtmetrix et choisissez l’emplacement du serveur de test d’où votre site Web reçoit le plus de trafic. Si vous obtenez un LCP inférieur à 2 secondes et un CLS inférieur à 0,1. Alors il n’y a pas de quoi s’inquiéter. Si 75% de votre trafic obtient une bonne expérience de page, alors seuls les temps de réponse de votre serveur et de votre CDN peuvent affecter vos performances.
Maintenant, résolvons votre problème de LCP
Si vous ne voulez pas supprimer un plugin qui cause un audit raté lié à javascript, vous pouvez supprimer votre image LCP, vidéo, formulaire, etc. du point de vue des appareils de bureau et mobiles comme ce blog technologique. Assurez-vous maintenant que le premier élément le plus important qu’un visiteur voit dès qu’il visite votre article ou votre page, est un titre ou un paragraphe. Google page speed insights montre votre élément LCP sous la rubrique DIAGNOSTICS comme « Largest Contentful Paint element »
Maintenant, vous devez trouver quel est l’élément LCP de la page Web. Je vous recommande de choisir un titre ou un paragraphe comme élément LCP car le texte est plus rapide que les autres éléments sur n’importe quel type de site (le contenu HTML est plus prioritaire (se charge avant tout le reste) que tout autre élément lorsque la page Web se charge)
Comme je l’ai mentionné précédemment, les technologies de serveur peuvent avoir un impact énorme. Si vous avez beaucoup de trafic, choisissez un hébergement Litespeed ou Nginx et préparez-vous à être surpris. La technologie de serveur Litespeed a la capacité de servir des milliers de clients simultanément avec une utilisation minimale des ressources du serveur telles que la mémoire et le CPU.
Résolvons votre problème CLS
La résolution du problème CLS est assez délicate. Vous devez supprimer un élément qui cause le problème CLS ou le supprimer uniquement du point de vue (cela peut fonctionner dans certains cas). Sinon, il n’y a rien à faire, vous devez trouver un autre plugin ou HTML et CSS pour résoudre le problème.
Disons qu’une publicité est à l’origine du problème de CLS. Ce que vous pouvez faire, c’est réserver l’espace pour cette publicité lors de son chargement. Vous pouvez utiliser un plugin à cet effet.
HTML pour réserver l’espace
Vous pouvez modifier la hauteur et la largeur minimales en fonction de vos besoins
Voici un autre code :
Vous pouvez également y mettre vos shortcodes et vos images. WP Rocket dispose également d’un paramètre permettant de réserver de l’espace pour les images (Activer : Ajouter les dimensions des images manquantes »)
Le logo provoque un problème de CLS : Le logo de votre site Web peut causer un problème CLS (réserve d’espace pour votre logo qui pousse les éléments du menu de navigation) lors d’un chargement paresseux. Vous devez donc simplement exclure votre logo du chargement paresseux.
Le lecteur vidéo ou le curseur d’images pose un problème de CLS : Pour résoudre ce problème, trouvez un plugin alternatif de lecteur vidéo ou utilisez du Html pour résoudre ce problème.
Quelques conseils supplémentaires
Ignorez « supprimer les CSS inutilisés », « utiliser des écouteurs passifs pour améliorer les performances de défilement », et « éviter d’utiliser des audits DOM excessifs » : « Supprimer les CSS inutilisés » est très délicat à résoudre si un plugin supprimé a laissé des CSS inutilisés sur votre site Web.
Le nettoyage des actifs et d’autres plugins peuvent vous aider, mais il se peut que vous restiez avec des CSS inutilisés à la fin, mais vous n’avez pas à vous soucier de ces audits tant que vous passez les contrôles de base du site. Et wp rocket travaille sur le paramètre « Remove Unused CSS » qui peut vous aider à passer cet audit, mais il est encore en mode bêta.
Utilisez l’amp: Si vous le souhaitez, vous pouvez utiliser l’amp pour améliorer vos vitaux web de base sur les appareils mobiles.
Optimisez les polices et n’utilisez pas trop de polices : préchargez les polices que vous utilisez sur votre site et essayez d’en utiliser le moins possible. Hébergez les polices en local. Vous pouvez utiliser asset clean pour précharger les polices google ou héberger les polices localement.
Activez la mise en cache des objets et la mise en cache côté serveur
L’activation de la mise en cache des objets permet d’améliorer le temps de chargement du contenu dynamique (contenu qui change constamment, comme WooCommerce ou les sites Web complexes) sur un site Web. Il stocke le contenu dynamique en mémoire à l’aide d’un système de stockage basé sur des clés et des valeurs. La récupération du contenu dynamique à partir du R.A.M. est plus rapide que la récupération à partir de la base de données.
La mise en cache côté serveur permet d’exécuter une fois toutes les opérations nécessaires sur la base de données et de servir le même contenu à de nombreux clients différents. Elle permet de réduire la charge de votre application de base de données. Ne vous inquiétez pas, il ne servira pas de contenu périmé, il suffit de définir la durée de vie du cache côté serveur à 1 jour.
Remarque :
Gardez votre version PHP, vos plugins et vos thèmes à jour, cela peut donner un léger coup de pouce aux performances.
WooCommerce
Pour les utilisateurs de WooCommerce, utilisez le plugin Disable WooCommerce Bloat qui aide à supprimer une tonne d’éléments gonflés ajoutés par WooCommerce et désactive les scripts/styles WooCommerce liés au contenu non commercial.
Dernier conseil
Essayez de réduire la taille de vos pages Web (ciblez moins de 500 Ko) et utilisez des JS retardés chaque fois que possible. Maintenant, pour corriger FID et les autres audits ou éléments, lisez cet article.
Dernières réflexions :
A présent, vous devez avoir obtenu suffisamment d’informations pour passer les vitales web de base et je suis sûr que vous avez au moins fait sortir votre site web du rouge (si vous êtes dans le jaune, vous savez ce dont vous avez besoin pour passer au vert)
Maintenant, passer l’évaluation des vitales web de base n’améliorera pas beaucoup votre classement, mais si votre site Web est « pauvre » dans l’évaluation des vitales web de base, alors vous pouvez obtenir une énorme baisse dans les classements au fil du temps.
