Dix façons d'améliorer les temps de chargement de votre site Web et Google Core Vitals

Que sont les éléments vitaux Web de base

Au début de cette année, Google a introduit un nouvel ensemble de critères qui définissent la stabilité, la vitesse et la réactivité d'un site Web donné. Les trois principaux critères sont les suivants :

• Le décalage de mise en page cumulé définit le degré de décalage et de changement de position de la structure d'une page Web. La référence pour cela est de 0,1.
• La plus grande peinture de contenu mesure le temps nécessaire pour charger le contenu principal d'une page. Les meilleurs résultats devraient être de 2,5 secondes ou moins.
• Le premier délai d'entrée est le temps qui s'écoule entre l'ouverture d'une page Web et le moment où elle devient interactive pour la première fois. Le délai le plus couramment recherché est d'environ 100 millisecondes.

Avec ces termes de base à l'esprit, voyons comment vous pouvez utiliser Core Vitals pour rendre votre site Web aussi rapide et efficace que possible.

1. Optimisez votre CDN et le cache de votre navigateur

Vos scores FID et LCP devraient être améliorés assez rapidement en utilisant cette méthode. Servez vos ressources statiques à partir d'un CDN ou mettez-les en cache sur un service comme Cloudfront d'AWS. Les navigateurs obtiendront les résultats nécessaires beaucoup plus rapidement après cela.

De plus, les pages dynamiques peuvent être mises en cache dans votre CDN avec des valeurs TTL correctes déjà appliquées en fonction du comportement de vos applications.

2. Utilisez le dimensionnement exact pour toutes les annonces et tous les médias

En ce qui concerne vos scores CLS, c'est l'un des facteurs les plus vitaux. Vérifiez toujours que vous avez défini une hauteur spécifique sur les images ou les ressources balisées, ce qui est très important, en particulier pour les composants au niveau du pli. Si vous êtes pressé par le temps, vous pouvez toujours régler les hauteurs sur automatique et obtenir une taille approximative qui devrait fonctionner assez bien à la rigueur.

Les annonces sont également prises en compte dans CLS, et vous devez vérifier soigneusement leurs hauteurs et leurs tailles pour vous assurer qu'elles ne déplacent pas le contenu en s'affichant de manière incorrecte. Cela peut nécessiter de contacter votre fournisseur de services publicitaires ou de rechercher différentes options si votre CLS est constamment impacté.

Si vous êtes sur une plate-forme WordPress, nous vous recommandons d'envisager un plugin comme Ewww , qui peut automatiquement livrer vos images dans Webp et activer des fonctionnalités telles que le chargement différé pour retarder le chargement de toutes les images lors du chargement de la page.

3. Chargez les images de bonne résolution de manière paresseuse en fonction du type d'appareil utilisé

Cette technique produit des résultats incroyablement rapidement et devrait être l'une de vos premières considérations. En utilisant un package de chargement paresseux pour, de manière assez surprenante, charger paresseusement toutes les images de votre site, votre LCP sera impacté positivement, principalement en réduisant le poids de la page et en veillant à ce qu'elle se charge le plus rapidement possible.

Il est également essentiel de définir la résolution de chaque élément en fonction du type d'appareil utilisé pour afficher votre site. Le chargement d'une résolution unique rendra le site beaucoup plus lent sur les appareils plus petits ou moins puissants et affectera votre LCP de la pire façon possible.

4. Utilisez la SSR et la RSE de manière intelligente

Google est toujours désireux d'encourager et de promouvoir des pages SSR (Server Side Rendered) bien notées pour inspirer de précieuses performances de référencement. Cependant, vous devez tenir compte de l'équilibre entre le référencement et les performances de chargement des pages. Les pages avec trop de contenu peuvent prendre des années à se charger côté serveur et à réduire les performances générales de votre site.

Le contenu réel doit être conservé au-dessus du pli, tandis que les autres fonctionnalités du site doivent être conservées pour améliorer le SSR. Ce style de chargement asynchrone prend beaucoup de temps sur vos scores de chargement et de rendu.

5. Tout décomposer en divisant votre code

L'utilisation des tailles de fichier les plus importantes pour les actifs (en particulier les fichiers JS) est généralement une mauvaise idée. Au lieu de cela, vous devez autoriser le protocole h2 et en tirer parti pour charger à nouveau les actifs de manière asynchrone en plusieurs parties.

De plus, au lieu d'utiliser un énorme fichier HTML, vous pouvez diviser le site en plusieurs fichiers plus petits et ainsi réduire la charge de chargement.

6. Utilisez les techniques de compression Brotli pour réduire les actifs statiques

En ce qui concerne la compression, Brotli semble être la meilleure option en termes de vitesse de chargement. Cependant, des taux de compression plus élevés augmenteront les temps de package et de construction en termes de DevOps.

Mais en fin de compte, le temps de chargement du site est le facteur le plus crucial et doit être prioritaire par rapport à toute autre chose.

7. Rendre le contenu de la réponse et la requête API aussi efficaces que possible

Sans aucun doute, l'élément le plus vital en termes de vitesse de chargement, même les changements les plus mineurs, peut donner des résultats massifs avec l'API. Les réponses et les demandes de l'API doivent être vérifiées fréquemment dans un souci d'optimisation.

Définissez également les paramètres de données et utilisez uniquement ce qui est nécessaire pour vous épargner beaucoup de temps et d'efforts. Le choix d'un réseau pour vos API mérite également une attention particulière, car l'hébergement sur les mauvais sous-réseaux peut augmenter considérablement le temps requis.

8. Réduisez la taille globale de vos pages et documents

Les pages de destination à code lourd (tout ce qui dépasse 75 Ko est susceptible d'être sérieux) sont très indésirables, car elles augmentent considérablement les temps de chargement et de récupération.

Essayez toujours de garder les choses propres du côté du code, car il est facile de manquer des bits de données redondantes.

9. Remplacez les vignettes vidéo par des images d'espace réservé

De nombreux visiteurs du site préfèrent ne pas interagir avec le contenu vidéo, donc le chargement des vignettes sur les vidéos qui ne sont pas lues est un gaspillage de ressources dans ce cas.

Il est préférable de choisir une image d'espace réservé ou un espace vidéo vierge pour économiser les ressources et ainsi augmenter la vitesse du site.

10. Choisissez le serveur le plus rapide disponible

Cela peut sembler un facteur évident, mais cela mérite quand même d'être dit. Investir dans la meilleure infrastructure de serveur est généralement une excellente idée car cela affecte directement la vitesse de l'ensemble de votre site sans exception.

En dépensant un peu plus d'argent, vous gagnerez globalement un temps considérable. Cloudflare est un excellent outil de niveau DNS qui vous permet d'optimiser votre site de manière rentable sans ressources de serveur coûteuses.

Conclusion

Les conseils ci-dessus vous mettront sur la bonne voie pour obtenir un meilleur score de vitesse de page et des éléments vitaux de base. Cependant, vous pouvez vous retrouver sur une plate-forme ou un thème gonflé qui signifiera souvent le meilleur plan d'action pour créer un nouveau site plus propre et plus léger.

Supposons que vous vous grattez la tête sur tous ces termes ou que vous vous sentiez intimidé à l'idée de retravailler l'ensemble de votre site pour plus de rapidité. Dans ce cas, vous voudrez peut-être envisager une révision du site par un expert en conception Web qui suggérera probablement la meilleure ligne de conduite pour optimiser votre site existant ou suggérera d'évoluer vers un nouveau site avec une base de code plus optimisée pour les éléments vitaux de base.