août 12, 2022
Rapport Core Web Vitals: 28façons de booster votre site

Rapport Core Web Vitals: 28façons de booster votre site

Résumé de 30secondes:

  • Google prévoit de déployer la nouvelle mise à jour Core Web Vitals au début de 2021.
  • La taille globale, les dimensions, l'ordre de chargement et le format de vos images affecteront considérablement votre score PageSpeed.
  • Le chargement en ligne des CSS et JS critiques peut améliorer le temps de chargement perçu de votre site.
  • Les vidéos au-dessus de la ligne de flottaison et les grandes images d'arrière-plan peuvent être particulièrement dommageables pour votre plus grand temps de peinture de contenu.
  • Une mise à niveau du serveur et un CDN peuvent améliorer le temps de réponse de votre serveur et votre score de peinture de contenu.
  • Fondateur de Content Powered, James Parsons , partage une liste exhaustive de 28 éléments qui dynamiseront votre site pour la mise à jour de Google Core Web Vitals et Google PageSpeed ​​Insights.

Annoncés début 2020, les Core Web Vitals sont un ensemble de mesures que Google développe et prévoit d'intégrer à son algorithme de recherche global en mai 2021. Étant donné que nous sommes maintenant presque en 2021, quiconque souhaite optimiser son site pour cette nouvelle mise à jour de l'algorithme peut se mettre au travail dès maintenant. Heureusement, Google a été très efficace pour révéler publiquement ce que sont ces nouvelles métriques et comment elles fonctionnent .

Armé de ces informations, il est possible de créer une liste de contrôle des éléments d'action à vérifier et à optimiser sur votre site pour vous préparer à l'inévitable déploiement de ces nouveaux facteurs de classement. Voici 28 de ces éléments pour cette liste de contrôle. UNE. Optimisation de l'image Les images sont l'un des facteurs d'influence les plus importants dans les principaux éléments vitaux du Web. Tous les éléments vitaux du Web mesurent le temps jusqu'à un certain rendu initial, et le chargement des images est la plus grande source de retard avant qu'une page ne soit initialement complètement chargée. Ainsi, l'optimisation des images a tendance à être l'outil le plus puissant pour améliorer les éléments essentiels du Web.

1. Réduire les dimensions des images d'arrière-plan

Les images d'arrière-plan sont rarement entièrement nécessaires à la conception d'un site et peut être une source importante de retard dans le chargement d'une page pour la première fois. Si vous utilisez une image d'arrière-plan, réduisez la taille de cette image et optimisez-la pour qu'elle se charge le plus instantanément possible.

2. Réduire ou remplacer les images d'arrière-plan par des motifs

Si vous n'êtes pas lié à un image d'arrière-plan, remplacez l'image par des couleurs unies, un dégradé ou même un simple motif en mosaïque. Encore une fois, l'objectif est de minimiser le nombre d'actifs à charger avant la fin du chargement initial du site Web. Étant donné que les images d'arrière-plan n'ont pas un impact énorme (et sont encore moins nécessaires sur mobile), minimisez-les ou supprimez-les autant que possible.

3. Supprimer les images sur mobile au-dessus du pli

En parlant de mobile, l'expérience de navigation mobile est souvent plus lent que la navigation sur ordinateur en raison de la qualité des signaux cellulaires et sans fil. Les appareils mobiles sont particulièrement sensibles aux retards dans la première entrée et sur le changement de contenu. Core Web Vitals report elements - Above and Below the Fold ) Pour éviter cela, efforcez-vous de faire autant que possible de votre contenu au-dessus de la ligne de flottaison basé sur du texte et d'autres éléments simples. Les grandes images et les diaporamas au-dessus de la ligne de flottaison nuisent particulièrement à votre partition, alors supprimez-les ou déplacez-les autant que possible.

4. Implémenter le chargement paresseux

Le chargement paresseux est une technique courante pour accélérer le chargement initial de n'importe quelle page donnée. Avec les nouvelles métriques de Google à l'horizon, il n'est pas surprenant que sa prise en charge devienne rapidement une fonctionnalité par défaut. WordPress, par exemple, a ajouté le chargement paresseux par défaut natif dans la version 5.5 plus tôt cette année . Utilisez le lazy loading pour tout contenu, en particulier les images, qui n'a pas besoin d'être chargé au-dessus de la ligne de flottaison initialement.

5. Utiliser des images WebP

Une autre initiative de Google, WebP est un nouveau format d'image développé en 2010. C'est un format d'image plus petit avec de meilleurs algorithmes de compression que vos formats d'image traditionnels comme PNG. a vraiment pris de l'ampleur jusqu'à récemment, il devient de plus en plus précieux car les utilisateurs et les moteurs de recherche sont de plus en plus préoccupés par la vitesse et les temps de chargement. La prise en charge est généralisée, même si l'utilisation ne l'est pas, vous pouvez donc utiliser plus ou moins en toute sécurité les images WebP comme fichiers image principaux.

6. Optimiser la taille des fichiers image

Utilisation d'un outil pour réduire ou réduire la taille des fichiers image dans la taille du fichier devrait être une partie par défaut de l'optimisation des images pour le Web à ce stade.

Si vous ne le faites pas déjà, assurez-vous de mettre en œuvre un moyen de traiter les images dans le cadre de votre flux de travail de blog à l'avenir. Vous voudrez également vous assurer que vous avez défini la hauteur et la largeur des images pour empêcher le changement de mise en page.

B. Optimisation CSS CSS est devenu une partie de plus en plus critique de nombreuses conceptions de sites, à tel point que le bloquer rend le Web presque méconnaissable. Avec un site tellement basé sur CSS pour tout, des couleurs au positionnement, il est plus important que jamais de s'assurer que votre code est optimisé.

7. CSS critique en ligne

Vous n'avez pas besoin d'intégrer chaque bit de votre CSS, bien que cela fonctionne aussi. En particulier, vous souhaitez insérer du CSS essentiel à la conception globale et à la mise en page de votre thème.

Cela minimise le nombre de fichiers individuels qu'un navigateur doit appeler depuis votre serveur juste pour charger la mise en page initiale et peindre le contenu initial sur votre site.

8. Minify CSS

Le CSS est par défaut un langage très minimaliste et peut parfaitement fonctionner sans espaces, retraits, commentaires et autres textes qui le rendent plus convivial et plus facile à développer. Avant de télécharger un nouveau code sur votre site, exécutez-le via un outil pour le réduire et supprimer tout cet excès de saleté qui a un effet microscopique mais tangible sur le chargement de la page.

9. Consolider les fichiers CSS et le code

Il peut être tentant de stocker CSS dans une variété de fichiers et dispersés dans votre code, en le plaçant là où il semble qu'il devrait être plutôt que là où il est logique de le mettre. Rappelles toi; ce qui est le plus simple en tant que développeur n'est pas forcément le plus rapide pour un utilisateur. Consolidez votre CSS, qu'il soit en ligne ou dans des fichiers séparés, et n'exécutez que des éléments spécifiques si nécessaire.

dix. Optimiser la livraison CSS

Le CSS est souvent un élément à chargement tardif du code du site. La conception de site traditionnelle charge le cadre du site, puis le contenu, puis le CSS pour tout formater. En particulier lorsque CSS est stocké dans un fichier externe, cela retarde considérablement le chargement. Le préchargement de votre CSS est une stratégie recommandée par Google pour forcer le navigateur pour charger le CSS et le préparer quand c'est nécessaire. C. Optimisation JavaScript JavaScript est l'une des plus grandes sources de surcharge de code et de retard dans le chargement des sites Web. L'optimisation du JS de votre site peut aider à l'accélérer considérablement, même si cela ne semble pas avoir beaucoup d'effet en fonction de ce que vous y faites.

11. Minify JS Scripts

Comme CSS, JavaScript n'a pas besoin d'espaces et de pauses superflus pour fonction. Il n'a pas non plus besoin de noms de variables détaillés, qui sont utiles pour le développement mais peuvent augmenter considérablement la taille des scripts.

Exécutez vos scripts via un minifier avant de les ajouter à votre site.

12. Consolidez les scripts et minimisez l'utilisation

De nombreuses raisons pour lesquelles les concepteurs de sites Web utilisent JavaScript ont été disponibles en tant que fonctionnalités dans HTML5 et CSS3 depuis des années maintenant. En particulier dans les sites Web plus anciens, une refonte ou une révision des scripts peut trouver des moyens alternatifs et plus rapides de faire les mêmes choses. Examinez et optimisez, minimisez, consolidez et supprimez autant de JavaScript que possible de votre site.

13. Scripts différés ou asynchrones dans la mesure du possible

Les scripts sont des obstacles au rendu d'un site Web. Lorsqu'un navigateur doit afficher un script JS, il doit traiter ce script avant de pouvoir continuer à charger la page. Étant donné que de nombreux développeurs placent des scripts dans leurs en-têtes, cela retarde considérablement le chargement de la page. L'utilisation de Defer permet au navigateur de continuer à charger la page avant d'exécuter le script, tandis qu'Async leur permet de se charger simultanément. L'utilisation de ces deux fonctionnalités vous permet de compenser le délai inhérent à l'utilisation de scripts et d'accélérer les chargements initiaux de vos pages.

14. Supprimer jQuery Migrate

Une mise à jour récente de jQuery a conduit à de nombreux anciens plugins et les scripts ne fonctionnent plus. Pour gagner du temps et permettre aux webmasters de mettre à jour leurs sites, le module Migrate a été introduit. Il s'agit essentiellement d'un module de traduction qui permet à l'ancien jQuery de fonctionner sur des sites qui utilisent une version plus récente de jQuery.

Effectuez un audit de votre site pour voir si quelque chose que vous utilisez – en particulier les anciens plugins et applications – utilise jQuery Migrate. Si tel est le cas, envisagez de mettre à jour ou de remplacer ces plugins. Votre objectif est de supprimer complètement l'utilisation du module Migrate car il est plutôt volumineux et peut ralentir considérablement les sites Web.

15. Utilisez Google Hosted JS dans la mesure du possible

Offres Google une gamme de bibliothèques standard hébergées sur leurs serveurs pour une utilisation sur votre site Web. Plutôt que de vous fier à un tiers pour ces bibliothèques ou de les héberger vous-même, utilisez les versions de Google pour les temps de chargement les plus rapides possibles.

RÉ. Optimisation vidéo Les vidéos sont de plus en plus populaires dans le cadre du site Web moyen, des éléments de contenu de base à la publicité vidéo et tout le reste. Ce sont également des fichiers extrêmement volumineux, même avec un chargement partiel et une mise en mémoire tampon vidéo moderne. Optimisez au maximum votre utilisation de la vidéo.

16. Utiliser des espaces réservés pour les images pour les vignettes vidéo

Il y a beaucoup d'utilisateurs qui naviguent sur le Web avec aucune envie de regarder des vidéos, il est donc totalement inutile de forcer les vidéos à se charger en arrière-plan. Une bonne solution de contournement consiste à utiliser un espace réservé pour l'image où la vidéo se chargerait normalement. Core Web Vitals report elements - Remove jQuery Migrate

L'image se charge plus rapidement et ressemble au lecteur vidéo avec une vignette chargée. Lorsqu'un utilisateur clique dessus pour démarrer la vidéo, le chargement de la vidéo commence mais ne nécessite aucun chargement du fichier vidéo ou du lecteur jusqu'à ce point.

17. Minimiser les vidéos au-dessus du pli

Comme pour les images, les fichiers vidéo sont extrêmement lourds, donc les charger au-dessus du pli est un délai garanti sur votre première peinture de contenu. Poussez-les sous le pli; la plupart des gens veulent lire un titre et une introduction avant d'accéder à la vidéo de toute façon. E. Optimisation des polices et des icônes

L'utilisation des polices et des icônes peut être beaucoup plus lourde sur les temps de chargement d'un site que vous ne le pensez. Les optimiser peut sembler être un travail de détail minuscule, mais quand vous verrez l'impact que cela peut avoir, vous vous demanderez pourquoi vous n'avez jamais fait ces optimisations mineures mais percutantes auparavant.

18. Polices de précharge

Similaire aux scripts, lorsque votre site Web demande une police dont il a besoin pour charger, le chargement de cette police est prioritaire et arrête le rendu du reste du code. Utilisation d'une commande de préchargement pour charger la police plus tôt que nécessaire permet d'accélérer le chargement de la page, ainsi que d'empêcher le « Core Web Vitals report elements - Pre-load your fonts flash de texte non stylisé

” qui se produit pendant un bref instant entre le chargement du texte et l'apparition du style de police.

Core Web Vitals report elements - Pre-load your fonts

19 . Utilisez uniquement les polices dont vous avez besoin

De nombreuses polices Web et familles de polices chargent l'intégralité de leurs jeux de caractères et les feuilles de style lorsqu'elles sont appelées, même si votre page n'utilise pas 90 % de ce contenu. Souvent, vous pouvez limiter la quantité que vous chargez, même si vous devrez peut-être payer pour un accès aux polices premium. Cela peut être très utile si vous utilisez des quantités limitées d'une police donnée, ou une police qui a un jeu de caractères particulièrement volumineux inclus.

20. Utilisez SVG chaque fois que possible

Les SVG sont des graphiques vectoriels évolutifs et sont un moyen de créer extrêmement de petits éléments d'une page qui peuvent néanmoins évoluer indéfiniment, ainsi qu'être manipulés individuellement, à un degré beaucoup plus important que les polices et icônes traditionnelles. Si possible, passez à l'utilisation de SVG au lieu de vos icônes habituelles. F. Optimisation du serveur Peu importe le nombre d'optimisations que vous apportez au code de votre site Web, à vos images ou à d'autres éléments de votre site, rien de tout cela n'a d'importance si votre serveur est lent. La prolifération des sociétés d'hébergement Web, le développement continu d'une technologie plus rapide et plus puissante, tout cela signifie que l'hébergement Web montre son âge très rapidement. Toutes les quelques années, il peut être intéressant de changer ou de mettre à niveau l'hébergement vers une infrastructure plus rapide.

21. Mise à niveau vers un serveur plus rapide

Vous n'avez pas nécessairement besoin de mettre à niveau à partir d'un serveur partagé héberger vers un hôte dédié, bien que cela puisse aider à résoudre certains des problèmes de vitesse inhérents à l'hébergement partagé. Même la simple mise à niveau d'un package plus lent vers un package plus rapide peut être une bonne utilisation d'un budget.

22. Utilisez un CDN

Les réseaux de diffusion de contenu modernes peuvent gérer la plupart des éléments de votre site plus rapide que ne le peut votre hébergeur typique dans presque toutes les circonstances. Au minimum, envisagez d'utiliser un CDN pour vos images, vidéos et autres éléments multimédias. Vous pouvez également envisager de décharger des fichiers de script autonomes.

23 . Précharger les requêtes DNS

Le préchargement ou la prélecture des requêtes DNS permet de minimiser le délai entre la création d'un actif demandé par le visiteur et l'affichage de cet actif.

Cela se couple à l'utilisation d'un CDN pour stocker les actifs en chargeant et en résolvant le domaine du CDN avant qu'il ne soit appelé pour la première fois, ce qui accélère encore les temps de chargement des pages.

Preload DNS queries - DNS lookups

24. Précharger votre cache

Souvent, un plugin de cache ou un script utilisé sur un site Web se déclenche lorsque le premier visiteur arrive pour voir la page. Ce premier visiteur a une expérience plus lente, mais leurs charges mettent la page en cache pour les futurs visiteurs jusqu'à l'expiration du cache. Malheureusement, la première visite est souvent un bot Google qui explore votre page à partir de votre plan de site XML ou d'un lien interne, ce qui signifie que Google est le premier à découvrir la version lente de votre site. Vous pouvez contourner ce problème en préchargeant le cache sur votre site Web afin que la prochaine visite de Google soit une page Web garantie à chargement rapide.

25. Considérez un cache côté serveur

Un logiciel tel que Varnish Cache agit comme un serveur- cache latéral pour accélérer davantage la génération et la diffusion d'une version mise en cache de votre page, la rendant aussi rapide que possible avec le moins d'appels de serveur possible.

G. Optimisation supplémentaire Tout ce qui ne rentrait pas dans une autre catégorie a été ajouté ici. Ces optimisations supplémentaires peuvent ne pas s'appliquer à la conception de votre site, mais si elles le font, en prendre soin peut être une aubaine.

26. Minimiser les scripts tiers

Les webmasters en 2021 devront trouver un équilibre entre le site optimisations de vitesse et outils d'engagement des utilisateurs. De nombreux plugins, tels que les boutons de partage social, les systèmes de commentaires tiers et les médias Les embeds ont tous besoin d'exécuter des scripts tiers pour fonctionner, mais ces scripts ralentissent le site. Minimisez-les autant que possible et essayez de trouver les versions les plus rapides de chacun. Minimize third-party scripts

27. Éviter le remplissage de pré-charge

Une technique courante pour les sites avec des temps de chargement plus lents consiste à ajouter une flèche, une icône de chargement, une animation ou une autre forme de contenu qui se charge et s'affiche pour indiquer à un utilisateur que le site est, en fait, en train de se charger. Bien que cela puisse aider à minimiser les rebonds, c'est un énorme impact sur les charges initiales mesurées par les éléments vitaux du Web. Supprimez-les et travaillez pour accélérer votre site afin que vous n'en ayez pas besoin.

28. Envisagez une refonte du site

En fin de compte, vous devez parfois faire tant de modifications apportées à tant d'éléments fondamentaux de votre site qu'il est plus facile de simplement abandonner votre conception actuelle et d'en concevoir une nouvelle en gardant la vitesse à l'esprit. Considérez cela comme une possibilité et analysez les avantages que vous tirerez de l'optimisation des fonctions vitales du Web. Personne ne sait encore à quel point ces métriques auront une influence sur l'algorithme global, mais cela ne peut certainement pas faire de mal d'optimiser pour eux.

James Parsons est le fondateur de Contenu Powered

, une gestion de blog & entreprise de marketing de contenu. Il a travaillé comme spécialiste du marketing de contenu de haut niveau pendant plus d'une décennie et écrit pour Forbes, Entrepreneur, Inc et Business Insider.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.