“Si seulement je pouvais simplement agiter ma baguette et avoir un site web super rapide!” Cela vous a probablement aussi traversé l’esprit, non? L’optimisation de la vitesse du site et de l’expérience utilisateur demande beaucoup de travail et devient technique – et compliquée – très rapidement. La plupart des propriétaires ou gestionnaires de sites doivent rapidement parler à leurs développeurs pour faire avancer les choses. Maintenant, les nouvelles métriques Core Web Vitals vous donnent plus d’informations et d’indications sur ce qu’il faut corriger. Passons en revue cinq choses que vous pouvez faire pour augmenter votre score Core Web Vitals.

Table des matières

Tout d’abord, un avertissement

Écoutez, rien ne garantit de résoudre un problème spécifique. Vous devez avoir une vision plus large de l’optimisation de votre site. Beaucoup de petites corrections font de gros résultats. Donc, bien que je vous donne cinq choses sur lesquelles vous pouvez travailler ici, ce n’est pas du tout définitif. Même Google dit que de nombreux éléments travaillent ensemble pour arriver à des scores, il est donc difficile de déterminer si vous faites cela, alors ce score augmentera.

Ce que Google vous donne, c’est un aperçu de ce qui ralentit les choses ou ce qui nuit à l’expérience utilisateur. De nombreux outils donnent également des conseils sur la façon de réparer les choses. Web.de/measure, par exemple, ne donne pas de résultats détaillés, mais il vous donne une idée de l’impact d’un correctif particulier.

L’outil Web.dev/measure de Google vous donne une idée de l’impact qu’un correctif peut avoir

Mise à jour de l’expérience de page à venir de Google

Nous avons publié quelques articles sur la mise à jour de l’expérience de page de Google – à venir en 2021 -, vous pouvez donc commencer ici si vous avez besoin de plus d’informations générales:

Cinq choses que vous ou votre développeur pouvez faire

Au fil des ans, on a constamment parlé de l’importance de la vitesse du site et expérience utilisateur. Mais alors qu’il existe une tonne de documents sur la façon d’optimiser votre site, mettre ces connaissances en pratique est difficile. Ces derniers mois, Google a de nouveau mis la vitesse au centre de la mise à jour de l’expérience de la page l’année prochaine. Pour vous aider à vous y préparer, il a développé des outils pour vous donner des idées et beaucoup de documentation à lire.

Pour beaucoup de problèmes, les conseils n’ont pas vraiment changé autant. Tout se résume à fournir le contenu principal à vos utilisateurs le plus rapidement possible. Exécutez le test pour voir comment fonctionne votre site, essayez de hiérarchiser les correctifs et commencez! Vous trouverez ci-dessous un mélange d’anciennes et de nouvelles façons d’améliorer votre site.

Optimisez vos images

Je vais commencer cette liste avec un vieux classique: optimiser les images. L’une des choses les plus importantes que vous puissiez faire pour votre site est d’optimiser correctement vos images. Oui, nous l’avons dit un million de fois, mais nous allons le répéter: faites-le. Cette grande image non optimisée sur votre page d’accueil ou votre page de destination pourrait vous blesser. Les grandes images sont souvent la plus grande peinture contentieuse (LCP) pour un site donné. Assurez-vous de bien accueillir vos visiteurs en accélérant le chargement!

Nous avons un article populaire sur référencement d’image décrivant ce que vous pouvez faire pour que cette image se charge rapidement. Mais en bref, assurez-vous de le servir dans la taille requise et de bien le comprimer. Il existe de nombreux outils pour vous y aider. Personnellement, j’aime les résultats que j’obtiens avec squoosh.app. Ne pensez pas que vous devez conserver cette résolution massive pour que cette image soit nette sur les écrans les plus courants.

Essayez également d’adopter des formats modernes comme WebP. Ces formats peuvent fournir des images de haute qualité à une taille inférieure. WebP est bien pris en charge et même Apple a embarqué! La prochaine version de Safari 14 – à la fois sur MacOS et iOS – prendra en charge WebP. Oui, le nouveau navigateur Microsoft Edge alimenté par Chromium prend également en charge WebP.

Votre CMS est également un outil qui vous aidera à améliorer le chargement des images. Dû en août, WordPress 5.5 prendra en charge le chargement paresseux d’images. Cela signifie qu’il ne chargera que les images qui apparaissent à l’écran et laissera le reste se charger lorsque l’utilisateur interagira avec cet écran. Cela indique au navigateur de charger des images volumineuses uniquement lorsqu’elles sont nécessaires.

Un autre conseil sur la vitesse du site à feuilles persistantes est l’utilisation d’un CDN, mais saviez-vous que vous pouvez également utiliser un CDN spécifiquement pour les images? Une image CDN vous donne plus de contrôle sur la façon dont vous souhaitez servir et comment vous souhaitez que ces éléments apparaissent. Une image poussée par une image CDN obtient une chaîne de propriétés dans son URL qui indique au navigateur comment l’image doit se comporter.

Stabiliser le chargement en spécifiant la place pour les images et similaires

L’une des nouvelles mesures est décalage de mise en page cumulatifou CLS pour faire court. Un exemple de cela est lorsqu’une page mobile semble prête et juste au moment où vous souhaitez appuyer sur un bouton, le contenu change et une annonce à chargement lent apparaît à cet endroit. Cela se produit souvent et est l’une des principales causes de frustration des utilisateurs. Maintenant, tout en optimisant votre CLS ne fera pas nécessairement votre page être plus vite, il est sûr ressentir plus rapide.

CLS est causé par des images sans dimensions dans le CSS. Elle peut également être provoquée par des annonces et des intégrations sans dimension, ou par du contenu injecté dynamiquement. Lorsqu’ils ne sont pas correctement indiqués, ces éléments ont tendance à sauter juste un peu pendant le processus de chargement, le faisant apparaître saccadé et instable. Cela peut également être dû à l’insertion de nouveau contenu au-dessus du contenu existant. Ne faites pas cela, sauf peut-être après une interaction explicite de l’utilisateur.

L’une des façons d’empêcher CLS consiste à ajouter la largeur et la hauteur des images dans le CSS. De cette façon, le navigateur réservera un espace pour cette image qui apparaîtra probablement plus tard que le texte. Maintenant, la secousse disparaîtra car le navigateur sait que quelque chose sera ajouté en temps voulu. Vous pourriez penser à ajouter une sorte d’espace réservé à basse résolution si vous voulez qu’un moment apparaisse rapidement.

Donc, assurez-vous simplement que vos images ont des attributs de largeur et de hauteur appropriés. Bien sûr, vous pouvez également le faire avec des images réactives régulières. Assurez-vous simplement que vous utilisez le même rapport d’aspect pour toutes les tailles.

Montagne sous un ciel nuageux

Pour faire face aux sauts d’annonces ou au contenu injecté, veuillez également réserver de l’espace pour ces derniers. Au final, votre CLS risque de baisser un peu.

Accélérez votre serveur pour réduire ce temps de chargement

Plus votre serveur répond rapidement aux demandes, mieux c’est. Amener ce serveur à répondre plus rapidement améliore directement de nombreuses mesures de vitesse du site. Sur les sites complexes, le serveur est occupé à gérer les demandes et à diffuser des fichiers et des scripts, il est donc préférable d’optimiser ces processus.

L’optimisation de votre serveur comprend plusieurs parties. Tout d’abord, mettez à niveau votre plan d’hébergement. Ne lésinez pas sur l’hébergement. Choisissez-en un qui offre de bonnes performances à un prix équitable. De plus, il faut savoir comment le serveur a été configuré – utilisez une version récente de PHP! – et quel matériel vous avez choisi. Vous devriez peut-être mettre à niveau le matériel si vous trouvez que cela fait défaut. En outre, vous devez rechercher le fonctionnement de vos bases de données et voir si vous pouvez apporter des améliorations. Utilisez des outils comme Plugin WordPress Query Monitor pour continuer d’analyser les requêtes sur votre site.

Vous pouvez également voir comment votre serveur envoie des fichiers aux clients. Il existe plusieurs façons d’améliorer ce processus, link rel=preload par exemple, ou push serveur HTTP / 2. Ce sont des solutions plus avancées qui vous permettent d’affiner la façon dont votre serveur répond aux demandes. Ici encore, un CDN peut faire des merveilles.

Examinez les CSS critiques pour charger plus rapidement le contenu du pli

Lorsque le navigateur charge une page, il doit obtenir le code HTML, le rendre, obtenir le CSS, le rendre, obtenir le JavaScript, le rendre, et cetera, et cetera. Plus vous avez besoin de fichiers pour charger votre site et plus ils sont gros, plus votre site se chargera lentement. Souvent, alors que le navigateur est occupé à faire des choses, il ne peut pas charger les choses en arrière-plan. Certains éléments bloquer le processus. Les soi-disant JavaScript et CSS bloquant le rendu influencent tout.

Étant donné que le CSS se charge tard, il peut souvent s’écouler un certain temps avant que quelque chose n’apparaisse à l’écran. En prenant les parties critiques de votre conception – la partie qui apparaît au-dessus du dépliant – du fichier CSS principal et en l’intégrant dans votre code, vous pouvez obtenir quelque chose à l’écran beaucoup plus rapidement. Corriger cela, encore une fois, ne rend pas votre site plus rapide, mais il le fait apparaître plus rapidement. Tout pour cette expérience utilisateur ace.

Pour obtenir un ensemble de CSS critiques, vous pouvez choisir parmi un certain nombre d’outils ou vous pouvez le faire à la main. De plus, vous pouvez utiliser des plugins de mise en cache WordPress comme WP Rocket. WP Rocket a un simple bouton appelé Optimiser la livraison CSS. L’activation de cette fonction permet d’éliminer les CSS bloquant le rendu et d’améliorer le chargement de votre site. Bien sûr, WP Rocket fait également d’autres trucs sympas comme la réduction de CSS et JavaScript et le report du chargement de JavaScript.

Améliorez le chargement des scripts tiers

Pour de nombreux sites, la lenteur vient également de l’extérieur. Si votre site s’appuie sur des scripts publicitaires, par exemple, vous êtes essentiellement entre les mains du fournisseur d’annonces. Vous ne pouvez qu’espérer qu’ils rendent leurs annonces performantes. Si leurs annonces se chargent vraiment lentement, eh bien, il est peut-être temps de trouver un autre fournisseur.

Si vous constatez que des scripts tiers ralentissent votre site, vous devriez vérifier cela. Demandez-vous, ai-je vraiment besoin de cette annonce particulière? Quelle est la valeur de ces scripts? Il existe peut-être une option différente qui est un peu plus optimisée et moins stressante pour votre serveur. Peut-être essayer ça?

Si possible, vous pouvez expérimenter vous-même l’hébergement du script. De cette façon, vous contrôlez un peu plus le processus de chargement. Si vous ne pouvez pas le faire, voyez si vous pouvez le faire précharger plus rapidement.

Assurez-vous au moins de charger les scripts de manière asynchrone ou de les reporter jusqu’au dernier moment. De cette façon, le navigateur peut d’abord créer la page avant d’obtenir et d’exécuter le script externe. Utilisez async si le script que vous chargez est important, comme un script d’analyse. Vous pouvez utiliser le report pour les ressources moins critiques. Il y a plein de documentation sur l’optimisation de scripts tiers.

Boost Core Web Vitals: Toutes les petites améliorations comptent

Avec la mise à jour de l’expérience de page à venir, Google place à nouveau la vitesse du site et l’expérience utilisateur au centre. Nous avons toujours regardé le référencement de manière holistique – il y a beaucoup de pièces mobiles et vous devriez travailler sur toutes pour créer le meilleur site. Bien que les conseils mentionnés ci-dessus puissent vous aider à améliorer ces scores, vous devriez vraiment le faire pour offrir à vos visiteurs une meilleure expérience.


Source link

%d blogueurs aiment cette page :