Core Web Vitals : Comment éviter les pièges de performances des polices web

Les polices web donnent de la personnalité à ton site, mais elles ajoutent aussi du poids.

Et si tes polices mettent trop de temps à charger, les utilisateurs restent fixés sur un écran vide. Pire encore, ton site peut sembler instable car le texte se déplace de manière inattendue.

Cela nuit également aux Core Web Vitals — les indicateurs qui affectent directement votre classement dans les recherches et l’expérience utilisateur.

Ici, chaque milliseconde compte.

Alors, comment peux-tu conserver ton choix de polices web sans sacrifier les performances ?

Décomposons cela, étape par étape.

Mais d’abord, que sont exactement les polices sûres pour le web et les polices web ?

Quelles Sont Les Polices Sûres Pour Le Web ?

Les polices sûres pour le web sont les options éprouvées qui fonctionnent partout. Ce sont des polices que la plupart des appareils possèdent déjà, ce qui signifie que tu peux compter sur elles pour se charger rapidement.

Voici les polices sûres pour le web que tu peux utiliser :

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Même avec des choix limités, un designer compétent peut utiliser ces polices de manière créative.

Mais, les polices adaptées au web sont souvent surutilisées et donnent à ton site web une sensation de «similarité» — même lorsque tu as investi beaucoup d’effort et d’argent dans la conception du site.

Alors, comment le rendre plus joli ?

Avec des polices web.

Quelles Sont Les Polices Web ?

Les polices Web te permettent de t’éloigner des polices websafe souvent trop utilisées.

Au lieu de dépendre des polices disponibles sur l’appareil d’un utilisateur, les polices web peuvent être téléchargées depuis une source externe comme Google Fonts ou directement depuis votre serveur sur l’appareil de votre utilisateur (temporairement).

Cela te permet d’utiliser n’importe quelle police personnalisée qui correspond à ta marque ou à tes besoins de conception.

Nous avons également sélectionné les meilleures polices Google pour t’aider à commencer.

Lorsqu’un utilisateur visite ton site, la police web est téléchargée temporairement et appliquée au texte à l’aide de la règle @font-face en CSS.

Les polices Web commencent alors à se comporter comme des polices locales — Elles s’ajustent automatiquement aux tailles d’écran tout en gardant votre site web net.

Les polices ont également évolué au fil du temps pour avoir des formats de stockage plus efficaces. Comme les formats d’image, les polices disposent de TTF, WOFF, WOFF2 et EOT.

• Embedded OpenType (EOT) : Compatible avec les anciennes versions d’Internet Explorer (avant IE9). Non compressé par défaut, mais la compression GZIP peut être appliquée.
• TrueType (TTF) : Pris en charge par les anciens navigateurs Android (avant la version 4.4). Il est non compressé par défaut mais peut être compressé en GZIP.
• Web Open Font Format (WOFF) : Pris en charge par la plupart des navigateurs modernes et inclut une compression intégrée.
• Web Open Font Format 2 (WOFF2) : Compatible avec les navigateurs qui le supportent, offrant des algorithmes de compression personnalisés qui réduisent la taille du fichier d’environ 30% par rapport aux autres formats.

Les formats modernes offrent une compression pour de meilleures performances et aident à conserver à votre site un design fonctionnel et visuellement distinct.

Quels Sont Les Indicateurs Des Signes Vitaux Du Web (CWV) ?

Voici le truc : Google veut que tous ses utilisateurs aient une excellente expérience.

Le site web ou l’application qui offre la meilleure expérience aux utilisateurs de Google recevra plus d’« amour » de la part des algorithmes de Google.

Et comment cette « expérience » est-elle mesurée ?

Google a lancé les Core Web Vitals au début de 2020 dans cet objectif.

CWV est un ensemble de trois indicateurs qui indiquent à Google comment ton site web ou application se comporte pour les utilisateurs qu’ils y envoient.

Des scores plus élevés sur ces métriques peuvent t’aider à mieux te classer sur Google. Passons rapidement en revue ces métriques.

Peinture la Plus Grande et Contentueuse (LCP)

LCP mesure le temps que prend le plus grand élément visible de ta page à charger.

Ceci est généralement une image ou une vidéo mais pourrait être un grand bloc de texte ou une vidéo intégrée.

Plus cela se produit rapidement, mieux votre site se comporte aux yeux des utilisateurs et des moteurs de recherche.

Un bon score LCP signifie que les utilisateurs n’attendent pas que ton contenu principal apparaisse.

Interaction jusqu’au prochain rendu (INP)

INP mesure le temps entre une interaction de l’utilisateur (comme cliquer ou taper) et le moment où la page répond visuellement.

Il donne une image plus précise de l’interactivité que le FID, car il prend en compte le parcours complet de l’utilisateur plutôt que la première interaction uniquement.

Un faible score INP signifie que ton site est réactif, ce qui améliore l’engagement et la satisfaction des utilisateurs.

Décalage cumulatif de la mise en page (CLS)

CLS mesure la stabilité de ta page pendant le chargement.

Lorsque des éléments se déplacent de manière inattendue, cela frustre les utilisateurs et rend la page peu fiable.

Un faible score CLS signifie que ta page se charge de manière fluide, sans déplacements de mise en page qui perturbent l’expérience utilisateur.

Comment Optimiser Les Polices Web Pour De Meilleurs Core Web Vitals

Alors, quel est tout ce remue-ménage concernant la performance des polices web ?

Pourquoi ne pouvons-nous pas simplement ajouter des polices web et considérer que c’est terminé ? Eh bien, tu peux.

Mais comme nous l’avons déjà dit, les polices web ne sont pas locales. Elles sont récupérées depuis un serveur, téléchargées et appliquées à ton site, et c’est là que le problème se pose.

Cela prend du temps.

Et si cela prend trop de temps, cela affecte tes Core Web Vitals et le taux de conversion de ton site web.

Regardons quelques moyens d’optimiser les polices web pour de meilleurs signes vitaux du web principal.

1. Préchargement des Polices

Tu veux que tes polices soient prêtes dès que la page commence à charger.

Alors quand la page est prête pour l’utilisateur, la police l’est aussi.

Cela s’appelle précharger.

Le préchargement indique au navigateur, « Hey, cette police est importante. Charge-la tout de suite. »

Disons que tu utilises la police Google populaire, Roboto.

Tu dois ajouter un seul attribut à ton code HTML pour précharger la police : rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>

Après cela, le navigateur sait qu’il doit prioriser le téléchargement de Roboto, ainsi ton texte apparaît stylisé avec la bonne police plus rapidement.

Cela réduit le temps nécessaire pour que le plus grand bloc de texte (LCP) s’affiche, ainsi les utilisateurs voient la version finale de ton site plus rapidement.

2. Contrôlez Le Comportement De Chargement Des Polices Avec La Propriété Font-Display

Toutefois, le préchargement pourrait augmenter légèrement le temps de chargement initial puisque les polices sont prioritaires.

La propriété font-display te permet de contrôler le comportement de ton texte pendant que les polices personnalisées sont encore en chargement.

Cela peut t’aider à éviter le redoutable Flash de Texte Invisible (FOIT), où les utilisateurs voient des espaces vides, et le Flash de Texte Non Stylisé (FOUT), où la page apparaît avec des polices de secours pendant une seconde puis bascule immédiatement sur des polices personnalisées.

La propriété font-display dispose de quatre manières de gérer le comportement du texte : block, swap, fallback et optional.

Regardons les deux dont tu aurais besoin.

font-display: swap — Cette option est le choix le plus sûr pour la plupart des sites. Elle garantit que le texte apparaît immédiatement avec une police de secours et passe à la police personnalisée une fois qu’elle est prête.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Ici, la police de secours (comme Arial ou une autre police système) se chargera instantanément, gardant la page lisible.

Lorsque Roboto est téléchargé, il remplace la police de secours sans laisser d’espace vide à l’écran.

Voici une démonstration de ce que l’échange de font-display se comporte dans le monde réel.

font-display: optional — Si tu te soucies de la vitesse, cela indique au navigateur de sauter la police personnalisée si elle ne se charge pas assez rapidement. Cela fonctionne lorsque tu ne te soucies pas que le substitut reste en place.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Cette option est judicieuse lorsque la performance est plus critique que le design, la rendant parfaite pour un site qui privilégie la vitesse.

Voici un exemple de ce à quoi cela ressemble dans le monde réel. Tu ne remarqueras pas le changement ici puisque la plupart des polices se chargent assez rapidement.

Cependant, l’argument optionnel est excellent au cas où ton serveur de polices tomberait en panne ou serait lent.

3. Sous-ensemble De Polices

La plupart des polices contiennent des centaines, voire des milliers de caractères.

Il est probable que tu n’aies besoin que d’une petite partie de ceux-ci. Leur suppression est appelée sous-ensemble de polices.

C’est vrai, tu peux supprimer les caractères inutiles pour réduire la taille du fichier de police.

Supposons que ton site ait uniquement besoin de caractères anglais.

Un outil comme FontTools peut t’aider à sous-ensemble ta police pour n’inclure que les caractères que tu utiliseras réellement.

Cela signifie que tous les caractères Unicode qui ne sont pas nécessaires en anglais peuvent être supprimés pour réduire la taille du fichier.

Cela réduit la taille du fichier, disons, de 80 Ko à 30 Ko.

Des fichiers plus petits signifient des téléchargements plus rapides, améliorant à la fois LCP et CLS puisque la police se charge rapidement et ne modifie pas la mise en page.

Voici un exemple de comment tu pourrais supprimer tout sauf les caractères anglais en utilisant FontTools :

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

Maintenant, ta police Roboto ne contient que les caractères latins basiques nécessaires pour le texte en anglais, ce qui la rend beaucoup plus rapide à charger.

Si tu préfères une approche basée sur une interface graphique, tu peux aussi essayer font-squirrel. Une fois que tu as téléchargé un fichier de police, tu obtiens pas mal d’options de personnalisation à ajouter ou à retirer

4. Compression Des Polices

Les formats de polices modernes comme le WOFF2 offrent une compression qui peut réduire la taille des polices jusqu’à 30 % par rapport aux anciens formats comme le TTF.

Utiliser la version la plus compressée de ta police peut réduire considérablement son impact sur le temps de chargement de la page.

Par exemple, voici comment tu peux t’assurer que tu utilises WOFF2 :

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

Ainsi, les navigateurs qui prennent en charge WOFF2 l’utiliseront par défaut, réduisant les temps de chargement tout en affichant une police nette et de haute qualité.

Cependant, si un navigateur ne peut pas utiliser WOFF2, il utilise par défaut WOFF.

5. Codage Base64

Ceci est une autre pratique couramment utilisée pour optimiser tes polices web.

Cependant, tu dois faire attention à quand utiliser des polices encodées en Base64.

L’encodage Base64 est surtout utile pour les petites polices ou les icônes.

Si elle est trop utilisée, tu peux alourdir le CSS, augmentant le temps de chargement de la page plus que si tu utilisais juste la police elle-même.

Si tu souhaites utiliser l’encodage Base64 pour une police d’icônes, tu devrais d’abord convertir le fichier de police au format Base64. Voici à quoi cela pourrait ressembler :

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Cette méthode fonctionne bien pour les petites polices d’icônes que tu utilises fréquemment sur le site.

Le fichier CSS se charge avec la police intégrée, éliminant une requête HTTP supplémentaire.

Cependant, évite cela pour les polices de corps de texte larges, car cela peut ralentir le rendu initial de la page.

6. <link> vs. CSS @import pour les Polices

<link> et @import présentent une différence significative en termes de performance de chargement.

La balise <link> charge les polices de manière asynchrone, ce qui signifie qu’elle ne retarde pas le reste de votre page à se rendre, tandis que @import est un peu plus lent.

Utilise <link> dès que possible.

« Dans plus de 90 % des cas, tu devrais probablement utiliser la balise <link>. En règle générale, tu veux éviter les règles @import car elles retardent le chargement de la ressource incluse jusqu’à ce que le fichier soit récupéré. » Ilya Grigorik, Ingénieur et Conseiller technique auprès du PDG de Shopify

Il charge les polices indépendamment, permettant au reste de la page de se charger sans attendre le fichier de police.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

Ceci est la méthode préférée pour charger Google Fonts ou des services de polices externes similaires.

Placé dans la section <head> de ton HTML, il garantit que la police commence à se charger tôt sans bloquer d’autres ressources.

Évite @import pour les polices critiques.

@import attend que le fichier CSS soit entièrement chargé, ce qui peut augmenter le temps de chargement et nuire à la LCP.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Utiliser @import pour les polices fonctionne uniquement pour les polices secondaires ou moins importantes. En pratique, évite de l’utiliser pour tout ce qui est sur le premier écran de contenu.

7. Réduire Les Décalages Visuels/CLS Par l’Adaptation des Polices et l’Ajustement de la Taille

Les décalages visuels — ou déplacements cumulatifs de mise en page (CLS), comme les appelle Google — se produisent lorsque la mise en page change de manière inattendue, souvent en raison de changements de polices.

Pour minimiser cet effet, choisis des polices de secours qui ressemblent étroitement au style et aux dimensions de ta police personnalisée.

La propriété CSS size-adjust te permet également de contrôler la taille de la police de secours, réduisant les décalages visuels lorsque la police personnalisée se charge.

Si ta police personnalisée est Roboto et une police de secours, ajuste sa taille pour correspondre à Roboto, rendant la transition presque sans couture.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Ici, la police de secours de Roboto (par exemple, Arial) conserve une taille constante, réduisant tout mouvement notable lorsque Roboto se charge complètement.

Une fois que tu as aligné la taille et l’espacement du secours avec ta police personnalisée, tu assures que lorsque Roboto remplace Arial, le changement est minimal, ce qui maintient un CLS bas et améliore l’expérience utilisateur.

8. Trouver le Bon Endroit pour Héberger les Polices Web

Héberger toi-même tes polices ne signifie pas toujours une meilleure performance.

De nombreuses options tierces fonctionnent également bien—et parfois, elles peuvent même se charger plus rapidement.

L’Almanach du Web a révélé que certains sites utilisant des polices tierces se chargeaient plus rapidement que ceux avec des polices auto-hébergées.

En fin de compte, la performance des polices dépend moins du choix de l’hébergement et plus de trois facteurs clés :

• Réseau De Livraison De Contenu (CDN) : Assure une livraison plus rapide en servant les polices depuis plusieurs emplacements dans le monde.
• HTTP/2 : Améliore la vitesse de chargement en gérant plusieurs requêtes en parallèle, réduisant ainsi la latence.
• Politique De Mise En Cache Web : Met en cache les polices efficacement, de sorte qu’elles ne nécessitent pas de re-téléchargement à chaque visite.

Au lieu de rester bloqué sur le débat de l’hébergement, concentre-toi sur la mise en place de ces éléments essentiels pour assurer le chargement fluide de tes polices, peu importe où elles sont hébergées.

Comment Simplifier L’Optimisation De La Performance Web

Si les techniques mentionnées ci-dessus te semblent trop complexes, un plugin comme Jetpack peut simplifier les choses.

Jetpack, développé par Automattic (les créateurs de WordPress), est une solution tout-en-un conçue spécifiquement pour les sites WordPress.

Il combine des fonctionnalités essentielles pour la sécurité, la performance et le marketing, toutes gérées depuis une seule plateforme.

Même si tu n’es pas technique, Jetpack peut aider à améliorer la vitesse du site, renforcer la sécurité et améliorer l’expérience utilisateur. (Aucune configuration complexe nécessaire !)

Créez L’Équilibre Parfait Entre Beauté Et Performance

Les polices web donnent à ton site un aspect unique et magnifique.

Cependant, sans les ajustements appropriés, ils peuvent également le ralentir et frustrer les utilisateurs.

Bien que nous ayons couvert les techniques essentielles d’optimisation des polices, affiner les performances implique d’innombrables détails techniques.

Et obtenir les meilleurs résultats peut sembler accablant.

C’est là que les services professionnels de développement web de DreamHost interviennent.

Nous veillerons à ce que ton site soit beau et optimisé pour la vitesse et l’expérience utilisateur.

Laisse-nous gérer les aspects techniques pendant que tu te concentres sur la création d’un site qui se démarque vraiment.

---

Cette page contient des liens d’affiliation. Cela signifie que nous pouvons gagner une commission si tu achètes des services via notre lien sans aucun coût supplémentaire pour toi.