Comment optimiser les polices pour améliorer les performances

Les bonnes pratiques pour l’utilisation des polices

Lorsque vous choisissez une police pour votre site web, il est important de prendre en compte plusieurs critères pour optimiser les performances et l’expérience utilisateur.

Choix de la police

• Lisibilité : choisissez une police facile à lire sur écran, avec des lettres bien distinctes et un espacement régulier. Évitez les polices trop stylisées ou décoratives qui peuvent rendre la lecture difficile pour les utilisateurs.
• Poids : préférez une police légère pour réduire le temps de chargement de votre site web. Les polices volumineuses peuvent ralentir considérablement le temps de chargement de votre site web, en particulier sur les appareils mobiles.
• Compatibilité : vérifiez que la police est compatible avec les différents navigateurs et systèmes d’exploitation. Il est important de tester votre site web sur différents navigateurs et appareils pour vous assurer que la police s’affiche correctement.

Chargement depuis Google Fonts

Charger une police depuis Google Fonts peut être moins optimisé pour plusieurs raisons :

1. Temps de chargement : Lorsque vous chargez une police depuis un serveur externe, cela peut augmenter le temps de chargement de votre site web. Les polices doivent être téléchargées avant que le contenu ne puisse être affiché, ce qui peut ralentir l’affichage de la page.
2. Requêtes HTTP : Chaque police que vous chargez depuis un serveur externe nécessite une requête HTTP supplémentaire. Cela peut ralentir le temps de chargement de votre site web, en particulier si vous chargez plusieurs polices.
3. Dépendance à un tiers : Lorsque vous chargez une police depuis un serveur externe, vous dépendez de la disponibilité et de la fiabilité de ce serveur. Si le serveur est en panne ou si la connexion est lente, cela peut affecter les performances de votre site web.
4. Vie privée : Lorsque vous chargez une police depuis un serveur externe, des informations sur les visiteurs de votre site web peuvent être collectées par le fournisseur de la police. Cela peut soulever des préoccupations en matière de confidentialité et de protection des données.

Si vous devez utiliser Google Fonts pour votre site web, il existe plusieurs façons d’optimiser le chargement des polices :

1. Utilisez uniquement les polices dont vous avez besoin : Limitez le nombre de polices que vous chargez depuis Google Fonts en n’utilisant que celles dont vous avez réellement besoin. Évitez de charger des polices inutiles qui ne sont pas utilisées sur votre site web.
2. Utilisez la syntaxe de sous-ensemble de caractères : Si vous n’avez besoin que d’un sous-ensemble de caractères pour une police donnée, vous pouvez utiliser la syntaxe de sous-ensemble de caractères pour réduire la taille de la police. Par exemple, si vous n’avez besoin que des caractères latins de base, vous pouvez ajouter &subset=latin à l’URL de la police.
3. Utilisez la propriété font-display : La propriété CSS font-display peut être utilisée pour contrôler la façon dont les polices sont affichées pendant le chargement. En utilisant font-display: swap;, vous pouvez afficher une police de secours jusqu’à ce que la police personnalisée soit chargée, ce qui peut améliorer l’expérience utilisateur.
4. Utilisez le préchargement : Le préchargement des polices peut aider à réduire le temps de chargement en indiquant au navigateur de charger les polices avant qu’elles ne soient nécessaires. Vous pouvez utiliser la balise <link> avec l’attribut rel="preload" pour précharger les polices.
5. Utilisez la préconnection : DNS Prefetch et Preconnect sont deux techniques utilisées pour améliorer les performances d’un site web en réduisant le temps de latence associé aux requêtes DNS et aux connexions réseau.

DNS Prefetch

DNS Prefetch consiste à effectuer une résolution DNS anticipée pour les domaines qui seront utilisés dans les requêtes futures. Cela permet de réduire le temps de latence associé à la résolution DNS en effectuant cette opération avant que l’utilisateur n’ait besoin de la ressource.

Pour implémenter la DNS Prefetching pour Google Fonts, il vous suffit d’ajouter cette ligne à la partie <head> vos pages web :

<link rel="dns-prefetch" href="//fonts.googleapis.com">Langage du code : HTML, XML (xml)

Preconnect

Preconnect, quant à lui, permet d’approfondir le prefetch DNS, il établit une connexion réseau précoce (Résolution DNS + Négociation TCP/TLS) avec les serveurs qui hébergent les ressources nécessaires à la page web. Cela permet de réduire le temps de latence associé à l’établissement de la connexion réseau en effectuant cette opération avant que l’utilisateur n’ait besoin de la ressource. Il est désormais pris en charge par tous les navigateurs récents.

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>Langage du code : HTML, XML (xml)

Voici un exemple de code complet pour charger une police depuis Google Fonts avec les optimisations ci-dessus :

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" as="style" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-display: swap;
    }
  </style>
</head>Langage du code : HTML, XML (xml)

Dans cet exemple, nous préchargeons la police Roboto avec les poids 400 et 700, le sous-ensemble de caractères latin et la propriété font-display: swap;. Nous utilisons également une balise <noscript> pour fournir une solution de secours pour les navigateurs qui ne prennent pas en charge le préchargement.

Bien que Google Fonts soit un service populaire et pratique pour charger des polices personnalisées, il est important de prendre en compte ces facteurs et de trouver un équilibre entre la personnalisation et l’optimisation des performances de votre site web. L’utilisation de polices système ou locales peut être une alternative plus optimisée pour améliorer les performances de votre site web.

Utilisation de polices système et locales

Une autre option consiste à utiliser des polices système ou locales plutôt que des polices externes. Les polices système sont déjà installées sur l’appareil de l’utilisateur, ce qui signifie qu’elles se chargent plus rapidement que les polices externes. Les polices locales sont stockées localement sur le serveur de votre site web, ce qui réduit également le temps de chargement.

Voici un exemple de code pour utiliser une police système :

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}Langage du code : CSS (css)

Ce code utilise une pile de polices système courantes pour garantir que la police s’affiche correctement sur différents appareils et navigateurs.

Les polices système suivantes sont considérées comme des « safe fonts » car elles sont installées sur la plupart des systèmes d’exploitation modernes :

• Arial
• Helvetica
• Verdana
• Tahoma
• Trebuchet MS
• Times New Roman
• Georgia
• Courier New
• Palatino
• Garamond
• Bookman Old Style
• Arial
• Impact
• Comic Sans MS

Ces polices sont souvent utilisées comme polices de secours dans les feuilles de style CSS pour garantir que le contenu s’affiche correctement, même si la police principale n’est pas disponible. Bien qu’elles puissent sembler un peu génériques, elles offrent une bonne lisibilité et une compatibilité élevée avec les différents navigateurs et systèmes d’exploitation.

Si vous préférez utiliser une police locale, vous pouvez la stocker sur votre serveur et utiliser le code suivant pour l’inclure dans votre site web :

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}Langage du code : CSS (css)

Ce code définit une nouvelle police appelée « MyFont » et spécifie l’emplacement des fichiers de police sur votre serveur. Vous pouvez ensuite utiliser cette police dans votre feuille de style CSS en définissant la propriété font-family.

En utilisant des polices système ou locales, vous pouvez améliorer les performances de votre site web et offrir une expérience utilisateur plus rapide et plus fluide.

Le format WOFF2

Le format WOFF2 (Web Open Font Format 2.0) est un format de police compressé qui offre plusieurs avantages par rapport aux autres formats de police. Voici quelques raisons pour lesquelles vous devriez utiliser le format WOFF2 :

1. Taille de fichier réduite : Le format WOFF2 est conçu pour réduire la taille des fichiers de police tout en conservant la qualité de la police. Cela signifie que les polices WOFF2 se chargent plus rapidement que les autres formats de police, ce qui peut améliorer les performances de votre site web.
2. Compatibilité croisée : Le format WOFF2 est pris en charge par la plupart des navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Opera. Cela signifie que vous pouvez utiliser des polices WOFF2 sur votre site web sans vous soucier de la compatibilité avec les différents navigateurs.
3. Meilleure compression : Le format WOFF2 utilise une compression plus avancée que les autres formats de police, ce qui permet de réduire encore plus la taille des fichiers de police. Cela peut être particulièrement utile pour les polices volumineuses ou complexes.
4. Prise en charge de l’Unicode : Le format WOFF2 prend en charge l’Unicode, ce qui signifie que vous pouvez utiliser des polices WOFF2 pour afficher des caractères dans différentes langues et écritures.

En résumé, l’utilisation du format WOFF2 peut améliorer les performances de votre site web en réduisant la taille des fichiers de police, tout en offrant une compatibilité croisée et une prise en charge de l’Unicode. Si vous utilisez des polices personnalisées sur votre site web, il est recommandé d’utiliser le format WOFF2 pour optimiser les performances de votre site.

Utilisation d’une font unique

L’utilisation d’une font unique pour l’ensemble de votre site web présente plusieurs avantages. Tout d’abord, cela réduit le nombre de requêtes HTTP nécessaires pour charger les polices, ce qui peut améliorer les performances de votre site web. En effet, chaque requête HTTP prend du temps et peut ralentir le chargement de votre site. En utilisant une seule police, vous réduisez le nombre de requêtes HTTP nécessaires pour charger les polices, ce qui peut réduire le temps de chargement de votre site.

De plus, l’utilisation d’une font unique permet d’harmoniser l’apparence visuelle de votre site. En utilisant la même police pour tous les éléments de votre site, vous créez une apparence cohérente et professionnelle. Cela peut aider les utilisateurs à se familiariser avec votre site et à naviguer plus facilement.

Mise en place d’un fallback

Bien que les webfonts soient largement pris en charge par les navigateurs modernes, il est important de mettre en place un fallback pour assurer la compatibilité avec les navigateurs plus anciens qui ne prennent pas en charge les webfonts. Un fallback est une police de secours qui sera affichée si la police principale n’est pas disponible.

Pour mettre en place un fallback, vous pouvez utiliser la propriété CSS font-family. Dans cette propriété, vous spécifiez une liste de polices séparées par des virgules. Le navigateur utilisera la première police de la liste qui est disponible sur le système de l’utilisateur.

Voici un exemple de code pour mettre en place un fallback :

body {
  font-family: 'Roboto', Arial, sans-serif;
}Langage du code : CSS (css)

Dans cet exemple, la police Roboto sera utilisée en premier choix. Si la police Roboto n’est pas disponible sur le système de l’utilisateur, le navigateur utilisera la police Arial à la place. Si la police Arial n’est pas disponible non plus, le navigateur utilisera une police sans-serif générique.

Optimiser l’affichage

Pour optimiser l’affichage des webfonts, il existe différentes options avancées : size-adjust, les fonts variables, le font subsetting et le préchargement.

Mettre à l’échelle les polices fallback avec size-adjust pour réduire le CLS

Lorsque vous utilisez des fallbacks, il est important de définir la valeur de size-adjust pour chaque police de la liste de fallback. Cela garantit que la taille de la police sera cohérente, même si la police principale n’est pas disponible et qu’une police de secours est utilisée à la place.

Cette propriété peut être utilisée pour créer une police de caractères personnalisée avec une taille de glyphe ajustée.

Voici un exemple de code pour utiliser size-adjust :

@font-face {
    font-size: 16px;
    font-family: "Roboto-fallback";
    size-adjust: 100.05%;
    ascent-override: 97%;
    src: local("Arial");
}

body {
  font-family: Roboto, "Roboto-fallback", Arial, sans-serif;
}Langage du code : CSS (css)

Si la police Roboto n’est pas disponible sur le système de l’utilisateur, le navigateur utilisera la police Arial à la place. Cependant, la taille de la police Arial peut être différente de celle de Roboto. En définissant la valeur de size-adjust pour chaque police de la liste de fallback, nous pouvons nous assurer que la taille de la police sera cohérente, même si une police de secours est utilisée.

Trouver la bonne taille de police

Il existe cette calculatrice d’ajustement de taille pour vous faire gagner du temps. L’avantage, c’est que toutes les Google Fonts sont disponibles, mais elle ne fonctionne que sur les navigateurs Chromium. Sinon vous pouvez ajuster manuellement avec des outils comme Fallback Font Generator ou encore Font style matcher.

Il est important de noter que la valeur de size-adjust peut varier en fonction de la police utilisée. Par conséquent, il est recommandé de tester la valeur de size-adjust avec chaque police de la liste de fallback pour s’assurer que la taille de la police est cohérente dans tous les cas.

En utilisant size-adjust avec des fallbacks, vous pouvez vous assurer que la taille de la police sera cohérente sur tous les navigateurs et systèmes d’exploitation, même si la police principale n’est pas disponible. Cela peut aider à améliorer l’expérience utilisateur et à garantir que votre site web est accessible à tous les utilisateurs.

Si les options de mise à l’échelle génériques des glyphes ne suffisent pas à ajuster vos stratégies de conception ou de chargement, il existe des options de réglage plus précises qui fonctionnent avec size-adjust. Les propriétés ascent-override, descent-override et line-gap-override sont actuellement prises en charge dans les navigateurs recents.

• Ascent-override : La propriété ascent-override définit la hauteur au-dessus de la base d’une police. Cette propriété permet d’ajuster la hauteur des lettres majuscules pour qu’elles s’adaptent parfaitement au cadre de délimitation global.
• Descent-override : La propriété descent-override définit la hauteur sous la référence de la police. Cette propriété permet d’ajuster les lettres pour qu’elles soient parfaitement ajustées sur la base.
• Line-gap-override : La propriété line-gap-override définit la métrique d’écart entre les lignes pour la police. Il s’agit de l’interligne ou de l’interligne externe recommandé pour la police.

Réduire le CLS

Le Cumulative Layout Shift (CLS) est un indicateur de performance qui mesure la stabilité visuelle d’une page web. Lorsque les polices de caractères sont chargées, elles peuvent causer un décalage de mise en page, ce qui peut affecter négativement l’expérience utilisateur.

Pour réduire le CLS, il est recommandé d’utiliser la technique de remplacement fluide des polices. Cette technique consiste à afficher une police système à chargement rapide pour afficher d’abord le contenu, puis à la remplacer par une police Web une fois le chargement terminé. Cependant, cela peut parfois causer un décalage de mise en page lorsque la police Web est chargée.

Pour éviter ce problème, vous pouvez utiliser size-adjust pour ajuster la taille des glyphes de la police système pour qu’elle corresponde à celle de la police Web. Cela permet un échange fluide des polices sans décalage de mise en page.

Voici un exemple de code pour utiliser size-adjust avec la technique de remplacement fluide des polices :

/* Définir la police système de secours avec size-adjust */
@font-face {
  font-family: 'Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  size-adjust: 55%; /* Ajustement de la taille des glyphes */
}

/* Définir la police Web avec la même taille que la police système de secours */
@font-face {
  font-family: 'Web Font';
  font-style: normal;
  font-weight: 400;
  src: url('/path/to/font.woff2') format('woff2');
  font-size: 16px; /* Même taille de police que la police système de secours */
}

/* Appliquer la police système de secours à tous les éléments de la page */
body {
  font-family: 'Fallback', sans-serif;
}

/* Remplacer la police système de secours par la police Web une fois chargée */
@font-face {
  font-family: 'Web Font';
  font-display: swap; /* Échange fluide des polices */
}Langage du code : CSS (css)

Dans cet exemple, nous définissons une police système de secours avec size-adjust pour ajuster la taille des glyphes. Nous définissons ensuite la police Web avec la même taille de police que la police système de secours. Enfin, nous appliquons la police système de secours à tous les éléments de la page et remplaçons-la par la police Web une fois chargée à l’aide de la propriété font-display: swap;.

Fonts variables

Les fonts variables sont une nouvelle technologie qui permet de réduire le poids des polices en combinant plusieurs variations d’une même police dans un seul fichier. Avec les fonts variables, vous pouvez ajuster la l’épaisseur, l’italique, la largeur et d’autres propriétés d’une police de manière continue, plutôt que d’avoir plusieurs fichiers pour chaque variation. Cela offre plusieurs avantages en termes de performances :

1. Une seule requête HTTP : en utilisant une seule police variable au lieu de plusieurs polices statiques, le nombre de requêtes HTTP nécessaires pour charger toutes les polices nécessaires à une page web est réduit à 1. Cela peut réduire le temps de chargement de la page et améliorer l’expérience utilisateur.
2. Réduction de la taille des fichiers : les polices variables sont souvent plus petites que les polices statiques équivalentes, car elles ne stockent que les informations nécessaires pour générer les variantes intermédiaires. Cela peut réduire la quantité de données à télécharger, ce qui peut être particulièrement important pour les utilisateurs mobiles avec des connexions lentes.
3. Meilleure flexibilité typographique : les polices variables permettent de créer des designs plus flexibles et plus adaptatifs, car elles offrent une plus grande variété de variations de police. Cela peut permettre aux concepteurs de créer des designs plus expressifs et plus créatifs, tout en maintenant des performances élevées.

Voici un exemple de code pour utiliser les fonts variables depuis Google Fonts :

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap" rel="stylesheet">Langage du code : HTML, XML (xml)

Dans cet exemple, nous utilisons la police Roboto avec une plage de graisse (épaisseur) comprise entre 100 et 900. Nous pouvons ensuite utiliser la propriété font-variation-settings pour ajuster la l’épaisseur de la police en fonction de nos besoins.

Pour utiliser les fonts variables, vous devez d’abord vous assurer que votre police prend en charge cette fonctionnalité. De nombreuses polices populaires, telles que Roboto, Arial et Helvetica, ont des versions variables disponibles. Vous pouvez ensuite utiliser la syntaxe CSS suivante pour définir une police variable :

@font-face {
  font-family: 'MyVariableFont';
  src: url('/path/to/font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 200%;
}Langage du code : CSS (css)

Dans cet exemple, nous définissons une police variable nommée MyVariableFont avec une plage d’épaisseur comprise entre 100 et 900 et une plage d’étirement comprise entre 50% et 200%. Nous utilisons également le format woff2-variations pour indiquer que la police prend en charge les variations.

Une fois que vous avez défini votre police variable, vous pouvez l’utiliser dans votre CSS comme n’importe quelle autre police. Vous pouvez utiliser la propriété font-variation-settings pour ajuster les variations de la police, comme ceci :

h1 {
  font-family: 'MyVariableFont';
  font-size: 48px;
  font-weight: 700;
  font-stretch: 125%;
  font-variation-settings: 'wght' 700, 'wdth' 125;
}Langage du code : CSS (css)

Dans cet exemple, nous utilisons la police variable MyVariableFont pour le titre h1, avec une taille de police de 48px, une épaisseur de 700 et un étirement de 125%. Nous utilisons également la propriété font-variation-settings pour ajuster les variations d’épaisseur et d’étirement à 700 et 125 respectivement.

En utilisant les fonts variables, vous pouvez réduire le nombre de requêtes HTTP, réduire la taille et le nombre des fichiers et améliorer la flexibilité typographique de votre site web, tout en maintenant des performances élevées.

Le Font Subsetting pour réduire la taille des fichiers

Le font subsetting est une technique qui consiste à ne charger que les caractères nécessaires d’une police, plutôt que l’ensemble complet de la police. Cela permet de réduire considérablement la taille du fichier de police, ce qui peut améliorer les temps de chargement et les performances globales du site web.

Vous pouvez analyser vos polices en ligne pour identifier les caractères non utilisés dans une police donnée. Cela peut aider à réduire la taille de la police en supprimant les caractères inutiles, ce qui peut améliorer les temps de chargement et les performances globales du site web.

Il existe plusieurs outils en ligne gratuits pour analyser les polices, tels que Wakamai Fondue ou FontDrop.

Pour réaliser un font subsetting, il existe plusieurs outils en ligne gratuits tels que Font Squirrel et Transfonter. Voici les étapes générales pour effectuer un font subsetting à l’aide de Font Squirrel :

1. Accédez au site web de Font Squirrel et sélectionnez l’option « Webfont Generator ».
2. Téléchargez la police que vous souhaitez utiliser sur votre site web.
3. Sélectionnez l’option « Optimal » ou « Expert » pour accéder aux paramètres avancés.
4. Dans la section « Subsetting », sélectionnez les caractères que vous souhaitez inclure dans votre police. Vous pouvez choisir parmi les options prédéfinies telles que « Latin Basic » ou « Cyrillic », ou sélectionner manuellement les caractères dont vous avez besoin.
5. Cliquez sur le bouton « Télécharger votre kit » pour générer votre police avec le font subsetting appliqué.
6. Téléchargez le kit de police généré et utilisez-le sur votre site web.

Pour réaliser un font subsetting avec plus de possibilités, vous pouvez utiliser des outils comme Glyphhanger basés sur le projet open source fonttools. Voici les étapes à suivre :

• Installer Python : Vous devez donc télécharger et installer la dernière version de Python 3 en suivant les instructions du programme d’installation.
• Installer fonttools : une fois que Python 3 est installé avec succès, ouvrez le terminal et installez fonttools en utilisant pip (qui est fourni avec Python) en tapant la commande suivante :

python3 -m pip install fonttoolsLangage du code : Shell Session (shell)

• Installer Brotli : installez ensuite la compression Brotli, qui est requise pour générer un fichier WOFF2. Tapez la commande suivante :

python3 -m pip install brotliLangage du code : Shell Session (shell)

• Se déplacer vers le dossier contenant la police : utilisez la commande cd pour vous déplacer vers le dossier contenant le fichier de police que vous souhaitez convertir. Par exemple :

cd /your-project/fonts/Langage du code : Shell Session (shell)

• Exécuter fonttools : enfin, exécutez la routine de subsetting de fonttools en utilisant les options souhaitées. Par exemple :

pyftsubset Roboto-variable.ttf 
  --unicodes="U+0020-007F, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F" 
  --layout-features='*' 
  --flavor="woff2" 
  --output-file="Roboto-variable.woff2"Langage du code : Shell Session (shell)

Dans cet exemple, à partir de la police Roboto-variable.ttf nous générons un fichier WOFF2 dans le même dossier.

L’option unicodes spécifie les caractères à inclure dans la police, en utilisant des plages de caractères Unicode. Si la police ne contient pas tous les caractères dans les plages Unicode spécifiées, ils seront simplement ignorés. Dans cet exemple, nous avons les plages suivantes :

• U+0020-007F : Basic Latin
• U+00A0-00FF : Latin-1 Supplement
• U+0100-017F : Latin Extended-A
• U+2000-206F : General Punctuation
• U+2070-209F : Superscripts and Subscripts
• U+20A0-20CF : Currency Symbols
• U+2100-214F : Letterlike Symbols
• U+2200-22FF : Mathematical Operators
• U+FB00-FB4F : Alphabetic Presentation Forms

L’option layout-features spécifie les fonctionnalités OpenType à inclure, telles que le kerning, les ligatures, les chiffres et les caractères alternatifs. Dans cet exemple, nous utilisons layout-features='*' pour inclure toutes les fonctionnalités disponibles. Vous pouvez également ajouter des fonctionnalités sélectionnées au jeu par défaut. Par exemple, layout-features+=onum,pnum,ss01 conservera le jeu de fonctionnalités par défaut et ajoutera onum, pnum et ss01 (chiffres anciens, proportionnels, et styleset 1).

En utilisant cette méthode de subsetting pour la police Roboto-variable, nous avons réduit la taille du fichier original de 913 Ko à 207 Ko. Bien que cela soit encore relativement important, nous avons été conservateur dans le subsetting en gardant de nombreux caractères européens et fonctionnalités OpenType, et en tant que police variable, ce fichier couvrira toutes les situations de poids et de contraste optique.

Il est important de noter que le subsetting d’une police peut avoir des conséquences sur son rendu visuel. Par conséquent, il est recommandé de tester soigneusement la police après le subsetting pour s’assurer que tous les caractères nécessaires sont inclus et que la police s’affiche correctement.

En utilisant ces techniques, vous pouvez réduire considérablement la taille de votre police tout en conservant les caractères nécessaires pour votre contenu. Cela peut aider à améliorer les performances de votre site web et à offrir une meilleure expérience utilisateur.

Le préchargement des polices pour réduire le LCP

Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans la zone d’affichage initiale de la page. Les webfonts peuvent retarder le LCP si elles ne sont pas chargées et rendues rapidement.

Le préchargement est une technique qui consiste à charger les ressources critiques d’une page web avant qu’elles ne soient nécessaires. En préchargeant les webfonts, vous pouvez améliorer les performances de votre site web et réduire le temps de chargement de vos pages.

Voici comment mettre en place le préchargement des webfonts :

1. Identifiez les webfonts critiques pour votre site web. Ce sont les polices qui sont utilisées pour les titres, les boutons et les autres éléments importants de votre site.
2. Ajoutez une balise <link> dans la section <head> de votre HTML pour précharger ces polices. La balise <link> doit inclure l’attribut rel="preload" et l’attribut as="font" pour indiquer que la ressource est une police.

Voici un exemple de code pour précharger une police :

<link rel="preload" href="/fonts/roboto-variable.woff2" as="font" type="font/woff2" crossorigin="anonymous">Langage du code : HTML, XML (xml)

Dans cet exemple, nous préchargeons la police Roboto Regular au format WOFF2. L’attribut crossorigin="anonymous" est utilisé pour permettre le partage de ressources entre les domaines.

L’attribut crossorigin est utilisé pour indiquer comment le navigateur doit gérer les requêtes CORS (Cross-Origin Resource Sharing) pour une ressource donnée. Lorsque l’attribut est défini sur anonymous, cela signifie que la requête CORS sera effectuée sans envoyer de cookies ou d’autres informations d’identification. Cela permet de partager des ressources entre les domaines sans compromettre la sécurité.

Il est important de noter que l’attribut crossorigin peut également être défini avec une valeur vide, c’est-à-dire crossorigin="", ce qui aura le même effet que crossorigin="anonymous".

Dans le cas du préchargement de polices, l’utilisation de l’attribut crossorigin="anonymous" est importante car elle permet au navigateur de récupérer la police à partir d’un autre domaine sans aucune restriction de sécurité. Si l’attribut crossorigin n’est pas inclus ou est défini sur une valeur différente de anonymous ou vide, le navigateur peut bloquer la requête CORS et empêcher la police d’être chargée correctement.

En utilisant l’attribut crossorigin="anonymous", vous pouvez vous assurer que la police sera correctement chargée à partir d’un autre domaine, ce qui peut être particulièrement utile si vous utilisez un CDN pour héberger vos polices. Cela permet également de réduire les temps de chargement en permettant au navigateur de récupérer la police en parallèle avec d’autres ressources.

En mettant en place le préchargement des webfonts, vous pouvez améliorer les performances de votre site web et offrir une expérience utilisateur plus rapide et plus fluide.

Conclusion

L’optimisation des webfonts est donc un élément clé pour améliorer les performances d’un site web et offrir une expérience utilisateur optimale. Pour cela, il est important de choisir une police unique, de mettre en place un fallback pour les navigateurs plus anciens et éviter le CLS. Il faut aussi utiliser des technologies avancées telles que size-adjust et les fonts variables. Tout en préchargeant les polices et utilisant le subsetting pour réduire la taille des fichiers.

En suivant ces bonnes pratiques, vous pouvez réduire le temps de chargement de votre site web, améliorer les métriques LCP et CLS, et offrir une expérience utilisateur plus agréable. N’oubliez pas que l’optimisation des webfonts est un processus continu et qu’il est important de tester régulièrement les performances de votre site web pour apporter les ajustements nécessaires.

Enfin, l’utilisation d’outils tels que Perfect-ish Font Fallback et fonttools peut vous aider à optimiser encore davantage vos polices d’écriture pour le web.

FAQ