Comment optimiser les Core Vitals et le Page Speed Score d'un site Web
Je me suis récemment intéressé à l'optimisation des scores de vitesse des pages d'un site Web après que Google a annoncé son nouveau Éléments vitaux de base les mesures et comment elles seront le principal facteur de classement à l'avenir. Il s’agit essentiellement de privilégier les sites Web offrant l’expérience mobile la plus rapide et la meilleure. Et c'est ce que je vais vous montrer comment faire maintenant.
Vous pouvez me regarder pendant que j'utilise toutes ces étapes pour optimiser un vrai site Web de client de mines, et j'explique tout ce que je fais et pourquoi.
Optimisation des actifs
En général, cela se résume en grande partie à l’optimisation des actifs, comme avoir des images de la même taille que celle à laquelle elles sont affichées. C'est comme ne pas avoir une image de 1 000 px de large redimensionnée en CSS pour avoir une largeur de 300 px sur l'écran. C'est une perte d'espace. La compression sans perte de tous vos actifs peut également permettre d'économiser jusqu'à 80 % de la taille du fichier. j'utilise Compresseur.io pour compresser avec perte toutes mes images. Je paie l'abonnement pro pour pouvoir télécharger 100 images à compresser à la fois. Je l'utilise depuis des années. Je les recommande vivement.
Aussi, des images d’arrière-plan. Pourquoi charger une photo d'archive de 2 300 px de large sur un écran de téléphone de 400 px de large ? Redimensionnez cette ventouse à 500 pixels de large et compressez-la. Vous passez de 2,3 Mo à 37 000 ou moins. ÉNORME réduction de la taille et des temps de chargement. Ensuite, sur la tablette et le bureau, vous réinitialisez simplement l'image d'arrière-plan sur l'image plus grande de 2 300 px. J'ai vu un site Web de quelqu'un qui chargeait plusieurs images de 4 000 pixels de large comme arrière-plan et c'était lent comme l'enfer. Il ne suffit pas de le compresser. Car même s’il compresse à 70 %, 70 % de 4 Mo équivaut toujours à 1,2 Mo, ce qui est énorme pour une image à charger sur mobile. Redimensionnez vos images et chargez les plus petites pour mobile et les plus grandes pour tablette et ordinateur de bureau et compressez-les.
Ensuite, il faut choisir les images de bonne taille pour la bonne taille d'écran, et c'est ce que fait l'attribut "srcset". Vous pouvez lire à ce sujet ici du réseau de développeurs Mozilla. Ce qu'il fait, c'est que vous fournissez une liste d'images de différentes tailles à charger aux tailles d'écran que vous souhaitez qu'elles chargent, et en utilisant "src" comme image de secours. De cette façon, si vous avez une image de 700 px de large dans votre code HTML sur le bureau, vous pouvez en charger une version de 350 px de large sur des écrans de moins de 480 px ou ce que vous voulez et charger un fichier plus petit, ce qui améliore votre temps de chargement.
Après avoir fait tout cela, assurez-vous d'ajouter les attributs de hauteur et de largeur appropriés à vos images, car Google souhaite les voir sur chacune d'elles. Cela permet d'allouer de l'espace à l'image avant son chargement et de réduire les changements de disposition du contenu.
Chargement paresseux
Ensuite, il y a le chargement paresseux, en utilisant le chargement = « paresseux » attribut pris en charge par la plupart des navigateurs. Cela utilisait les navigateurs intégrés au chargement paresseux sans que vous ayez à faire beaucoup de JavaScript sophistiqué. Mais ne chargez pas paresseusement les images qui se trouvent « au-dessus de la ligne de flottaison », c'est-à-dire le bas de l'écran lors du chargement du site Web. Si l’image se charge dans la section de la page de destination et dans la fenêtre d’affichage, ne la chargez pas paresseusement. Cela créera des changements de disposition du contenu. Ainsi, quelles que soient les images à l’écran lors du premier chargement de votre site Web, elles ne doivent pas être chargées paresseusement.
Supprimez jQuery, Google Fonts et tous les autres liens CDN non essentiels
Il y a un temps et un lieu pour tout, et l'époque de jQuery remonte à 5 ans et elle a sa place sur le banc. Le basculement de classe et tout cela peut désormais être géré en javascript et il n'y a vraiment aucune raison d'utiliser JQuery. Il est volumineux et le supprimer peut rendre votre site Web plus sécurisé et se charger beaucoup plus rapidement. Supprimez-le ! Le score de vitesse de page de Google l'indiquera comme quelque chose que vous devez supprimer pour améliorer votre score, nous devrions donc tous nous habituer à travailler sans, sauf si cela est absolument nécessaire.
Ensuite, il y a vos liens CDN Google Fonts. Au lieu de créer un lien vers elles dans votre tête, téléchargez vos polices à partir d'elles si ce n'est pas une police standard sur les navigateurs. J'utilise @font-face pour charger mes polices localement. Je stocke tous les fichiers téléchargés dans un dossier de polices, puis je les charge sur ma feuille core-styles.css qui est partagée sur toutes les pages du site. De cette façon, je peux éliminer l'utilisation du cdn des polices Google, ce qui l'élimine en tant que ressource bloquant le rendu.
Copiez et collez simplement ce code dans votre feuille CSS qui est partagée sur TOUTES vos pages. Remplace le chemin du fichier par le chemin du fichier de votre police que vous avez téléchargée. Le famille de polices la propriété ici est ce que VOUS l’appelez. Il n'est donc pas nécessaire que ce soit "Lobster" comme dans l'exemple de code. Il peut être appelé comme je veux et c'est ce que je poursuis lorsque je le déclare quelque part en CSS.
@font-face {
font-family: "Lobster";
src: url("/fonts/Lobster-Regular.ttf") format("woff2");
font-weight: normal;
font-style: normal;
}En téléchargeant et en chargeant vos polices localement, vous pouvez éliminer le besoin d'utiliser le CDN de Google et charger vos polices encore plus rapidement tout en supprimant une ressource bloquant le rendu. Je recommande fortement de faire cela pour tous vos sites.
Différez votre Javascript non essentiel
Sur toutes vos balises de script, ajoutez le reporter attribut à la balise de script d'ouverture et cela "diffèrera" son chargement jusqu'APRÈS le chargement du site Web. De cette façon, le Javascript n'empêche pas le site Web de charger d'abord son HTML et son CSS et de peindre la page. Il attend patiemment son tour jusqu'à ce que tous les autres aient terminé.
Utilisez les SVG aussi souvent que possible sur les PNG
Utilisez autant de fichiers SVG que possible sur des fichiers PNG. Les fichiers SVG sont beaucoup plus petits et se chargent beaucoup plus rapidement. j'utilise Icône plate pour obtenir tous mes graphiques et icônes SVG et je peux personnaliser leurs couleurs et télécharger le SVG. Aimer. Cela remplace également Fontawesome puisqu'il s'agit d'un autre lien CDN que vous n'avez pas besoin de charger. Plutôt que d'utiliser Fontawesome, chargez simplement les icônes dont vous avez besoin au format SVG. C'est beaucoup plus léger que d'utiliser Fontawesome.
Si vous le pouvez, embauchez quelqu'un Cinqrr qui est un illustrateur graphique SVG pour convertir les logos de vos clients en SVG et les charger sur le site à la place. Beaucoup plus optimisé et évolutif. Vous pouvez remplacer un png 36k ou plus par un svg 2k. Cela vaut chaque centime. Vous pouvez trouver des options abordables pour moins de 30 $ par graphique. Un investissement fantastique.
C'est toujours une bonne idée de convertir les logos de vos clients au format SVG, puis de les leur donner pour qu'ils puissent les utiliser pour des autocollants, des cartes de visite et des t-shirts. Ils vous aimeront pour cela.
Phare de Google
En fin de compte, vérifiez vos scores Google Lighthouse dans votre inspecteur d'outils de développement et satisfaites-les également. Habituellement, il vous suffit de cocher certains éléments d'accessibilité, comme l'ajout d'attributs aria-label aux liens sans texte ou de balises alt sur les images ou de problèmes de contraste. Une fois que vous avez un score de vitesse de page de plus de 96 et près de 100 dans tous les domaines sur Lighthouse, votre site Web est désormais correctement optimisé et habillé pour impressionner.
Ce sont les étapes d’optimisation que je prends chaque fois que je termine un site Web. Je voulais détailler cela pour tous ceux qui recherchent un "processus" détaillé sur ce qu'il faut faire et comment le faire sans tout le jargon et sans de longues descriptions compliquées. J'espère que cela aide!
