Meilleures Performances pour de Meilleurs Classements : 10 Conseils pour Améliorer les Signaux Web Essentiels

Tu crées un magnifique site web avec du contenu captivant et commences à y envoyer des clients.

Tu es dans une situation excitante, surtout si tu débutes en ligne.

Mais après une semaine en ligne, tu as remarqué que ton site charge plus lentement qu’un paresseux un dimanche paresseux, et les visiteurs partent plus vite qu’un kangourou sous caféine.

Ça te semble familier ? Eh bien, tu dois commencer à penser à ce que Google appelle les Core Web Vitals (CWV).

Selon les derniers rapports de Chrome, plus de 50,1% des sites web ont déjà de bons scores de Core Web Vitals. Et ce nombre continue de croître mois après mois, ce qui signifie que de plus en plus de propriétaires de sites avisés découvrent ce secret pour booster les performances.

Voici le hic : si tu ne fais pas encore partie de ces 50%, tu risques de perdre tes classements Google, de frustrer tes visiteurs et de potentiellement laisser de l’argent sur la table.

Changeons cela, d’accord ?

Quels Sont Les Web Vitals Essentiels, De Toute Façon ?

Pense aux Core Web Vitals comme au bulletin scolaire de ton site web.

Alors que tu attires du trafic vers ton site web, Google utilise ces métriques pour évaluer la convivialité de ton site. En gros, il mesure la vitesse, la réactivité et la stabilité visuelle de ton site web.

Il existe trois métriques de Core Web Vitals :

1. Peinture la Plus Grande du Contenu (LCP)
2. Décalage Cumulatif de Mise en Page (CLS)
3. Interaction jusqu’à la Prochaine Peinture (INP)

Cela peut ne pas sembler logique pour le moment — Essayons de comprendre chacun d’eux séparément.

Plus Grande Peinture de Contenu (LCP)

Imagine que tu es au restaurant et que le serveur t’apporte ton entrée presque instantanément.

C’est ce qu’un bon LCP fait pour ton site web.

Il mesure la rapidité avec laquelle l’élément de contenu le plus volumineux — l’image héroïque, une grande vidéo ou un gros bloc de texte — se charge sur ta page.

Selon le même rapport Chrome Core Web Vitals, 64,8 % des sites web ont déjà atteint leurs scores LCP. Et chaque mois, de nouveaux sites proposent leur contenu principal plus rapidement.

Si tu veux rejoindre le hall of fame de LCP, tu dois viser un temps de chargement de 2,5 secondes ou moins pour augmenter le taux de conversion de ton site web.

Tout ce qui dépasse quatre secondes, et tu perds des clients.

Décalage Cumulatif de Mise en Page (CLS)

Pense à des moments où tu as peut-être cliqué sur un bouton sur un site mobile — et un autre élément s’est chargé à sa place, faisant disparaître le bouton — et tu as cliqué sur cet élément à la place.

Ce n’est pas amusant. Le score CLS vise à éliminer cela.

Il mesure dans quelle mesure les éléments de ta page se déplacent pendant le chargement de la page. Un score CLS faible signifie que ta mise en page reste assez stable tout au long du processus de chargement.

Tu peux considérer ton site web optimisé pour mobile si la mise en page ne change pas pendant le chargement.

À partir de septembre 2024, 78,2 % des sites web ont obtenu de bons scores CLS, avec une augmentation constante des chiffres mois après mois. Cela montre que de plus en plus de développeurs accordent la priorité à une expérience utilisateur fluide et sans décalage.

Donc, si tu veux une expérience utilisateur stable, vise un score de CLS de 0,1 ou moins. Tout ce qui est au-dessus de 0,25, et tes utilisateurs auront l’impression que toute la page bouge.

Interaction Jusqu’au Prochain Affichage (INP)

INP a été ajouté le 12 mars 2024 au cadre des Core Web Vitals, remplaçant l’ancienne métrique First Input Delay (FID). Tandis que FID mesure uniquement la première interaction de l’utilisateur, INP examine toutes les interactions au cours d’une visite de page.

Les données rapportées par Chrome montrent que 85% des sites web obtiennent déjà de bons scores INP. Il est probable que si tu optimises bien ton site pour les deux scores précédents, le score INP se mettra en place également.

Pour garder tes utilisateurs heureux et engagés, vise un INP de 200 millisecondes ou moins. Si tu oscilles entre 200 et 500 millisecondes, tu as du travail à faire.

Tout ce qui dépasse 500 millisecondes, et tu offres à tes visiteurs l’expérience du modem téléphonique.

Comment Mesurer Les Web Vitals De Base

Avant de commencer à travailler sur l’amélioration de tes scores Core Web Vitals, il est judicieux d’avoir une idée de la position actuelle de ton site. De cette manière, tu pourras mesurer tes progrès. Évaluer régulièrement tes scores peut être une partie précieuse de ta maintenance de site web.

Regardons quelques différentes manières de mesurer les performances de ton site web.

Aperçu De PageSpeed

Il existe quelques outils en ligne que tu peux utiliser pour mesurer les Core Web Vitals, y compris Pingdom et GTmetrix. Cependant, nous recommandons d’utiliser Google PageSpeed Insights.

Pour commencer, entre l’URL de ton site web, puis clique sur le bouton Analyser.

Lorsqu’il aura fini d’analyser ton site, il fournira un résumé de certaines des données clés et des données des Core Web Vitals du site. Comme tu peux le voir sur l’image ci-dessus, le site Web Google par défaut possède :

• LCP : 0,7 secondes
• INP : 63 millisecondes 
• CLS : 0

PageSpeed Insights teste à la fois les scores mobiles et de bureau en même temps, et tu peux basculer entre eux juste en dessous de l’endroit où tu as entré le site web.

Si tu continues à défiler, tu trouveras également quelques diagnostics et suggestions d’améliorations. En fonction du score de ton site, PageSpeed Insights offre plusieurs recommandations que tu peux utiliser pour augmenter ton score et améliorer les performances de ton site.

Rapport Sur L’Expérience Utilisateur Chrome

Tu peux également accéder à tes Core Web Vitals via ton Rapport d’expérience utilisateur Chrome. Cela peut être particulièrement utile pour les développeurs et les webmasters.

Ce rapport est disponible via Google Search Console et fournit des données réelles et des insights de tes visiteurs. Il t’aide à comprendre comment tes utilisateurs utilisent le web et interagissent avec ton site.

Pour le consulter, tu devras te rendre sur le tableau de bord de ta console de recherche Google. Ensuite, navigue jusqu’aux Core Web Vitals, qui se trouvent sous la section “Experience”.

Extension Chrome pour les Signes Vitaux de Base du Web

Si tu utilises Chrome, tu peux utiliser l’extension Chrome Web Vitals pour évaluer tes Web Vitals de base pour n’importe quel site web sur lequel tu te trouves.

Ajoute simplement l’extension à Chrome, et tu es prêt à partir !

La prochaine fois que tu seras sur un site web, clique simplement sur l’icône de l’extension en haut de ta page, et tu verras le score des Core Web Vitals pour ce site web.

Voici à quoi ressemble le résultat de l’extension :

Tu verras les scores LCP, CLS et INP d’un seul coup d’œil sans avoir à visiter la page PageSpeed Insights à chaque fois.

Comment Améliorer les Web Vitals de Base pour de Meilleurs Scores Google ?

Maintenant que nous avons acquis les bases, plongeons dans quelques bonnes pratiques pour booster les scores des Core Web Vitals de ta page. Souviens-toi, il ne s’agit pas seulement d’impressionner Google — c’est aussi de créer un site web que tes visiteurs adoreront utiliser.

1. Utilisez Des Formats d’Images Modernes

Nous sommes des créatures visuelles, mais ces belles images haute résolution peuvent nuire aux performances du site web si elles ne sont pas correctement compressées.

Tu dois optimiser les images et ensuite télécharger les images optimisées sur ton site web au lieu d’utiliser des solutions côté serveur.

Pour résoudre ce problème et rendre le web plus rapide, Google a lancé le format WebP. Il conserve beaucoup de détails de l’image tout en réduisant considérablement la taille des images.

WebP peut être le format privilégié pour les photographies et les images complexes. Il offre une meilleure compression que le JPEG ou le PNG, ce qui signifie que tu peux avoir des tailles de fichiers plus petites sans sacrifier la qualité. Les images WebP sont environ 30% plus petites que leurs équivalents JPEG. Ainsi, tu économises beaucoup de bande passante et le temps nécessaire pour charger la page.

Chez DreamHost, nous adorons utiliser Squoosh pour convertir les images en WebP ou simplement les compresser pour économiser de l’espace.

Voici quelques plugins d’optimisation d’image supplémentaires à considérer :

• ShortPixel Image Optimizer
• EWWW Image Optimizer
• Imagify
• Smush

En plus de WebP, nous te recommandons d’utiliser SVG pour les icônes, logos et illustrations.

Les SVGs (Graphiques Vectoriels Scalables) ne sont pas des images en soi. Comparés aux formats d’image classiques comme JPEG, PNG, WebP, etc., les SVGs sont un langage de balisage basé sur XML qui décrit l’image sur un plan géométrique 2D.

Ce texte de description est ensuite envoyé à l’utilisateur, et le navigateur de l’utilisateur le convertit en « image » après avoir reçu l’intégralité du balisage SVG.

Tout cela rend les SVG extrêmement légers — puisqu’ils sont essentiellement juste de petits blocs de texte.

Aussi, puisqu’elle est créée à partir de mathématiques, les images SVG peuvent être mises à l’échelle de manière infinie sans perdre en qualité, et elles apparaissent nettes sur n’importe quel appareil, d’un petit smartphone à un énorme moniteur 4K.

Les SVGs sont appelés formats vectoriels tandis que WebP est un format raster, et tu peux voir comment chacun réagit lors du zoom.

La police est un exemple parfait de vecteur utilisé quotidiennement. Tu peux agrandir les polices autant que tu veux, mais elles ne se pixéliseront pas. Pendant que nous parlons de polices, une autre manière d’optimiser ton site web pour les Core Web Vitals est d’utiliser moins de polices.

2. Optimisation Des Polices Pour La Performance CWV

Les polices peuvent améliorer ou gâcher la conception de ton site web. Mais quand il s’agit d’optimiser les polices pour la performance, moins de polices c’est souvent mieux.

Voici quelques conseils pour optimiser les polices pour ton site web :

• Limiter Le Nombre De Polices : Utilise deux polices principales sur ton site web—une pour les titres et une pour le texte courant. Cela réduit le nombre de requêtes HTTP et simplifie ton design. De plus, sois sélectif avec les poids des polices ; inclut seulement ceux dont tu as besoin.
• Quand c’est possible, utilise les polices système : La plupart des appareils ont déjà des polices système comme Arial, Helvetica ou Georgia installées. Elles se chargent instantanément et éliminent le besoin de télécharger des polices supplémentaires.
• Précharger les polices critiques : Ajouter un lien de préchargement dans ton HTML peut instruire le navigateur à récupérer tes polices les plus importantes tôt dans le processus de chargement. Cela peut améliorer considérablement les temps de rendu du texte. 
• Optimise les polices personnalisées pour éviter le CLS : Le navigateur ne connaît pas les dimensions exactes des polices personnalisées jusqu’à ce qu’il les télécharge, ce qui entraîne des décalages de mise en page. Certains outils open-source, tels que Font Pie, aident à générer du CSS qui élimine ou du moins réduit le CLS.
• Sous-ensemble de tes polices : Supprime les caractères inutilisés de tes fichiers de polices—comme les caractères non latins si ton site ne les utilise pas. Cela réduit la taille des fichiers et accélère les temps de chargement.

Nous aborderons des stratégies avancées d’optimisation de polices à l’avenir, mais pour l’instant, utiliser cette liste rapide devrait t’aider à préparer les polices du site web pour de meilleurs scores.

3. Réfléchis Deux Fois Avant d’Utiliser Google Tag Manager

Nous savons ce que tu penses : « Mais Google Tag Manager me facilite tellement la vie ! »

Et tu n’as pas tort.

C’est un outil fantastique pour gérer plusieurs balises sans plonger dans le code. Cependant, cela peut présenter à la fois des avantages et des inconvénients concernant les Core Web Vitals.

Bien que Google Tag Manager soit excellent pour organiser tes tags, il peut potentiellement ralentir ton site s’il n’est pas utilisé judicieusement. Chaque tag ajoute un peu de temps de chargement, et ces millisecondes peuvent s’accumuler plus rapidement que ta facture de café lors d’une conférence de développeurs.

Demande-toi : as-tu vraiment besoin que tous ces tags se déclenchent à chaque chargement de page ? Certains d’entre eux pourraient-ils être implémentés manuellement pour mieux contrôler leur chargement ?

Comme règle générale, utilise Google Tag Manager uniquement pour les balises essentielles et globales du site, et implémente manuellement les balises moins critiques ou spécifiques à une page.

4. Implémenter une Solution de Cache

Pense au cache comme à la mémoire à court terme de ton site web. Au lieu de générer chaque page à partir de zéro pour chaque visiteur, le cache stocke une copie de la page et la fournit à une vitesse éclair.

Implémenter la mise en cache peut améliorer de manière significative tes scores LCP, particulièrement pour les sites dynamiques. Voici différents niveaux de mise en cache que tu peux envisager :

• Cache du navigateur : Indique aux navigateurs de stocker certains fichiers localement.
• Cache côté serveur : Stocke les pages générées ou les requêtes de base de données.
• Cache d’objets : Met en cache des éléments individuels comme des widgets ou des menus.

Selon ton hébergeur, tu pourrais être en mesure de tirer parti du caching au niveau du serveur.

Par défaut, les plans DreamPress incluent un cache intégré pour réduire la charge des visites non mises en cache sans que tu aies besoin d’ajouter des plugins de cache à ton site toi-même.

De plus, supposons que tu utilises WordPress comme système de gestion de contenu (CMS) pour ton site web. Dans ce cas, des plugins comme W3 Total Cache ou WP Super Cache peuvent t’aider à implémenter des couches supplémentaires de cache, y compris le cache navigateur et le cache d’objets, améliorant ainsi encore la vitesse du site.

5. Éliminer Les Ressources Bloquant Le Rendu

Les éléments bloquant le rendu font référence aux fichiers HTML, CSS et JavaScript statiques nécessaires pour afficher une page sur votre site. Chacun de ces fichiers contient des scripts qui peuvent empêcher vos utilisateurs de voir le contenu.

En général, ils sont créés à partir de plugins tiers et d’outils tels que Google Analytics.

Cependant, une manière d’éviter que ces scripts nuisent à ton expérience utilisateur (et, par conséquent, aident à améliorer les Core Web Vitals) est d’éliminer les ressources bloquant le rendu et de minifier et supprimer tout CSS ou script inutilisé.

Il existe plusieurs techniques que tu peux utiliser pour cela.

Une solution consiste à minifier ton JavaScript et CSS en éliminant tous les espaces blancs ou commentaires inutiles.

Tu peux utiliser un outil tel que CSS Minifier pour faciliter cela :

Tu saisis ton CSS et sélectionnes le bouton Minify. Ensuite, tu peux copier et coller le résultat pour télécharger et remplacer ton code.

Une autre méthode consiste à condenser ton JavaScript et CSS en combinant les fichiers. C’est une autre tâche que la fonctionnalité d’optimisation de fichiers dans WP Rocket peut aider à réaliser.

6. Différer Le Chargement Du JavaScript

Si tu cherches à améliorer tes scores FID, tu peux utiliser la technique connue sous le nom de report du chargement du JavaScript. C’est une autre manière d’éliminer les éléments bloquant le rendu.

Ce processus rend le chargement de tes pages web plus rapide car il retarde le chargement du JavaScript. En d’autres termes, il charge les autres contenus de la page une fois que le visiteur arrive, plutôt que d’attendre que tous les fichiers JavaScript soient complètement chargés.

Tes fichiers seront forcés d’attendre le chargement jusqu’à ce que tout le reste sur ta page web soit prêt.

De plus, tu peux configurer les paramètres de ton site afin que le CSS critique se charge plus rapidement pour le contenu « au-dessus de la ligne de flottaison ». « Au-dessus de la ligne de flottaison » fait référence aux éléments sur la page web qui apparaissent en premier.

Tu peux faire cela en prenant le contenu du fichier CSS principal et en l’intégrant directement dans ton code. Cela aidera à le charger plus rapidement, améliorant ainsi l’UX. Certains plugins de cache comme WP Rocket proposent une fonctionnalité Optimize CSS Delivery qui peut être utile pour cela.

7. Utilisez un réseau de distribution de contenu

Imagine si ton site web avait un clone de lui-même dans chaque grande ville du monde. C’est essentiellement ce qu’un Content Delivery Network (CDN) fait.

Il distribue des copies de tes ressources statiques (comme les images, CSS et fichiers JavaScript) sur des serveurs dans le monde entier, afin que tes visiteurs puissent les télécharger depuis l’emplacement le plus proche.

Le résultat ? Des temps de chargement plus rapides, des scores LCP améliorés, et une meilleure expérience utilisateur pour ton public mondial. Cela peut également aider à minimiser le Time to First Byte (TTFB).

Il existe plusieurs outils tiers que tu peux utiliser pour ton site WordPress. L’une des options les plus populaires est Cloudflare.

Comme avec le cache, certains fournisseurs d’hébergement offrent un CDN intégré ou au moins une intégration avec des CDN. Par exemple, chez DreamHost, nous avons DreamSpeed, un CDN puissant qui tire parti de notre infrastructure existante et te permet d’avoir des sites extrêmement rapides avec un minimum d’effort.

8. Dimensionner Correctement Les Images

Plus les images sont grandes, plus la taille du fichier est importante.

Donc, c’est intelligent de s’assurer que tu n’utilises pas des images trop grandes partout. Par exemple, il n’y a aucune raison d’utiliser des images HD pour tes miniatures. Tu peux travailler avec des images beaucoup plus petites et de plus basse résolution ici.

Pour optimiser davantage tes images, tu peux utiliser l’attribut srcset dans ton code HTML. Avec cette balise, tu peux spécifier les emplacements des images de différentes tailles, et les navigateurs modernes peuvent automatiquement servir les images de la taille correcte en fonction de la résolution de l’appareil, améliorant ainsi les scores LCP.

En plus de cela, tu peux toujours spécifier les attributs de largeur et de hauteur pour tes balises d’image ou réserver l’espace nécessaire avec le ratio d’aspect CSS pour garantir que l’utilisateur voit automatiquement des images plus petites.

Cependant, nous te suggérerons toujours d’utiliser un outil comme Sqoosh pour redimensionner les images avant même de les télécharger.

9. Implémenter Le Chargement Paresseux

Nous te recommandons également de mettre en place le chargement paresseux. Cela aide à garantir que tes images se chargeront précisément lorsque les utilisateurs arriveront à cette section de la page web, plutôt que de se charger en même temps que tout le reste sur la page.

Le chargement différé des images peut aider à améliorer ton LCP et ta vitesse de chargement. Le meilleur, c’est que c’est assez facile à mettre en place.

Les navigateurs modernes prennent en charge le chargement paresseux natif avec l’attribut loading=”lazy” sur les balises <img>.

C’est aussi simple que d’ajouter un seul attribut, et ta page est prête pour le chargement différé.

Pour les utilisateurs de WordPress, tu as juste besoin d’un plugin comme Jetpack ou Smush pour activer le chargement différé.

10. Améliore Ton Hébergement

Parfois, tu peux tout faire correctement et avoir quand même des scores bas pour les Core Web Vitals. À ce moment-là, il est judicieux de penser à améliorer tes plans chez ton fournisseur d’hébergement.

Par exemple, si tu as récemment commencé à recevoir beaucoup de visiteurs ou que tu as ajouté de nombreux nouveaux produits avec beaucoup d’images, tu pourrais atteindre les limites supérieures de ton hébergeur.

Dans de tels cas, si tu es sur un plan de Shared Hosting, tu peux passer à un hébergement sur serveur privé virtuel (VPS) ou à un hébergement dédié géré.

Pour les utilisateurs de WordPress, l’hébergement WordPress géré peut donner un bon coup de pouce aux performances de votre site sans être trop coûteux. Par exemple, chez DreamHost, nous proposons des plans DreamPress destinés aux propriétaires de sites WordPress cherchant à obtenir un site haute performance sans se ruiner.

Quel que soit le type d’hébergement que tu choisis ou que tu utilises déjà, le consensus est que d’améliorer ton fournisseur d’hébergement ou ton plan est le moyen le plus rapide pour accélérer ton site web.

Nous te suggérons de choisir un hébergement géré avec des serveurs optimisés spécifiquement pour WordPress qui peuvent gérer les différents aspects techniques de la performance du site.

Améliore L’Expérience Utilisateur et Récolte Les Bénéfices

Tu as désormais les connaissances nécessaires pour rejoindre les 50,1% de sites web qui atteignent déjà les scores des Core Web Vitals et offrent une excellente expérience à leurs visiteurs.

Il est vrai que certaines modifications nécessaires pour améliorer les scores peuvent être complexes — peut-être même techniques, nécessitant le soutien d’un développeur pour optimiser entièrement ton site web.

Si tu veux déléguer l’optimisation, essaie les services de développement web de DreamHost.

Nos développeurs travaillent avec toi pour optimiser les sites web existants et peuvent même construire un site web à partir de zéro pour offrir une excellente expérience utilisateur et améliorer les scores des Core Web Vitals.

Avec DreamHost, tu investis dans une stratégie de performance à long terme. Nos experts vont :

• Audit des Core Web Vitals de ton site.
• Utilise les dernières techniques d’optimisation.
• Construis ton site sur une base solide et évolutive.
• Fournis un support continu pour garder ton site opérationnel.

Tu peux te concentrer sur la gestion de ton entreprise et la création de contenu de qualité pendant que nous optimisons ton site. Alors, si tu souhaites que DreamHost construise ou optimise ton site web, réserve une consultation ou discute avec nous aujourd’hui!