Dans les modules précédents, vous avez appris à optimiser HTML, CSS, JavaScript, et des ressources multimédias. Dans ce module, vous découvrirez quelques méthodes d'optimisation et les polices de caractères.
Les polices Web peuvent avoir un impact sur les performances des pages au moment du chargement et de l'affichage.
Le téléchargement des fichiers de police volumineux peut prendre un certain temps et affecte négativement les premiers
Contentful Paint (FCP), alors qu'une valeur font-display incorrecte pourrait entraîner
des décalages de mise en page indésirables qui contribuent au Cumulative Layout Shift d'une page
(CLS).
Avant d'aborder l'optimisation des polices Web, il faut savoir comment elles sont découvertes le navigateur peut être utile, pour que vous compreniez comment le CSS empêche la récupération de polices Web inutiles dans certaines situations.
Discovery
Les polices Web d'une page sont définies dans une feuille de style à l'aide d'un @font-face
déclaration:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
L'extrait de code précédent définit un élément font-family nommé "Open Sans", et
indique au navigateur où trouver la ressource de police Web correspondante. Pour économiser
bande passante, le navigateur ne télécharge pas la police Web tant qu'elle n'a pas été déterminée
que la mise en page
actuelle en a besoin.
h1 {
font-family: "Open Sans";
}
Dans l'extrait CSS précédent, le navigateur télécharge le fichier de police "Open Sans".
car il analyse un élément <h1> dans le code HTML de la page.
preload
Si vos déclarations @font-face sont définies dans une feuille de style externe,
ne peut commencer à les télécharger qu'après avoir téléchargé la feuille de style.
Les polices Web sont ainsi des ressources découvertes tardivement, mais il existe des moyens d'aider
pour détecter les polices Web plus tôt.
Vous pouvez lancer une demande anticipée de ressources de police Web à l'aide de preload.
directive. La directive preload permet de rendre les polices Web visibles dès le début
et le navigateur commence immédiatement à les télécharger
pour que le téléchargement et l'analyse de la feuille de style se terminent. La directive preload
n'attend pas que la police soit nécessaire sur la page.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Déclarations @font-face intégrées
Vous pouvez rendre les polices visibles plus tôt lors du chargement de la page en intégrant
les fichiers CSS qui bloquent l'affichage, y compris les déclarations @font-face, dans le <head> de
votre code HTML à l'aide de l'élément <style>. Dans ce cas, le navigateur découvre
les polices Web plus tôt dans le chargement de la page, car il n'est pas nécessaire d'attendre qu'une
feuille de style à télécharger.
L'intégration des déclarations @font-face présente un avantage par rapport à l'utilisation de preload.
Conseil, étant donné que le navigateur ne télécharge que les polices nécessaires pour afficher la version actuelle
. Cela élimine le risque de télécharger des polices inutilisées.
Télécharger
Après avoir découvert les polices Web et vérifié qu'elles sont nécessaires au fonctionnement de la page actuelle le navigateur peut les télécharger. Le nombre de polices Web, leur encodage et la taille de leur fichier peut influer de manière significative sur la rapidité avec laquelle une police Web téléchargée et affichée par le navigateur.
Auto-héberger vos polices Web
Les polices Web peuvent être diffusées par le biais de services tiers, tels que Google Fonts. peuvent être auto-hébergées sur votre origine. Lorsque vous utilisez un service tiers, doit ouvrir une connexion au domaine du fournisseur pour pouvoir démarrer télécharger les polices Web nécessaires. Cela peut retarder la découverte et les le téléchargement de polices Web.
Cette surcharge peut être réduite à l'aide de l'indice de ressource preconnect. En utilisant
preconnect, vous pouvez indiquer au navigateur d'ouvrir une connexion à l'origine
plus tôt que d'habitude le navigateur:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
L'extrait de code HTML précédent suggère au navigateur d'établir une connexion avec
fonts.googleapis.com et une connexion CORS à fonts.gstatic.com. Un peu
les fournisseurs de polices, tels que Google Fonts, diffusent des ressources CSS et de police
origines.
Vous pouvez éliminer le recours à une connexion tierce grâce à l'auto-hébergement de votre polices Web. Dans la plupart des cas, l'auto-hébergement des polices Web est plus rapide que leur téléchargement. d'une multi-origine. Si vous envisagez d'utiliser des polices Web auto-hébergées, vérifiez que votre site utilise un réseau de diffusion de contenu (CDN), HTTP/2 ou HTTP/3, et définit le paramètre les en-têtes de mise en cache corrects pour les polices web dont vous avez besoin pour votre site web.
Utiliser WOFF2 et WOFF2 uniquement
WOFF2 bénéficie d'une compatibilité étendue avec les navigateurs et d'une meilleure compression, allant jusqu'à 30% en plus que WOFF. La taille réduite du fichier permet d'accélérer les temps de téléchargement. Le WOFF2 est souvent le seul requis pour bénéficier d'une compatibilité totale avec les technologies des navigateurs.
<ph type="x-smartling-placeholder">Créer des sous-ensembles de polices Web
Les polices Web incluent généralement un large éventail de glyphes différents, qui sont nécessaires pour représenter la grande variété de caractères utilisés dans différentes langues. Si votre affiche le contenu dans une seule langue ou dans un seul alphabet, vous pouvez réduire la taille de vos polices Web à l’aide de sous-paramètres. Cela est souvent le cas en en spécifiant un nombre ou une plage de points de code Unicode ;
Un sous-ensemble est un ensemble réduit de glyphes qui étaient inclus dans la version originale du Web fichier de police. Par exemple, au lieu de diffuser tous les glyphes, votre page peut afficher une un sous-ensemble spécifique pour les caractères latins. Selon le sous-ensemble requis, la suppression peuvent réduire considérablement la taille d’un fichier de police.
Certains fournisseurs de polices Web, tels que Google Fonts, proposent automatiquement des sous-ensembles via
l'utilisation d'un paramètre de chaîne de requête. Par exemple,
L'URL https://fonts.googleapis.com/css?family=Roboto&subset=latin diffuse un
feuille de style avec la police Web Roboto qui n'utilise que l'alphabet latin.
Si vous avez décidé d'auto-héberger vos polices Web, l'étape suivante consiste à générer et Hébergez ces sous-ensembles vous-même à l'aide d'outils tels que glyphanger ou subfont.
Toutefois, si vous n'avez pas la capacité d'héberger vos propres polices Web, vous pouvez
sous-ensemble des polices Web fournies par Google Fonts en spécifiant un text supplémentaire
paramètre de chaîne de requête ne contenant que les points de code Unicode nécessaires pour
votre site Web. Par exemple, si votre site utilise une police Web display
requiert un petit nombre de caractères pour l'expression « Bienvenue », vous pouvez
demandez ce sous-ensemble via Google Fonts à l'adresse suivante:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome Cela peut
considérablement la quantité de données de polices Web nécessaires pour une seule police de caractères
sur votre site Web, si des sous-ensembles aussi extrêmes peuvent être utiles sur votre site.
Rendu des polices
Une fois que le navigateur a détecté et téléchargé une police Web, il peut être
rendu. Par défaut, le navigateur bloque l'affichage de tout texte qui utilise un
Web jusqu'à ce qu'elle soit téléchargée. Vous pouvez ajuster le rendu du texte dans le navigateur
son comportement, et de configurer le texte à afficher (ou non) avant que le navigateur
a été entièrement chargée à l'aide de la propriété CSS font-display.
block
La valeur par défaut de font-display est block. Avec block, le navigateur
bloque l'affichage de tout texte utilisant la police Web spécifiée. Différents
les navigateurs se comportent
légèrement différemment. Blocage de l'affichage dans Chromium et Firefox pour
jusqu'à trois secondes
avant d'utiliser une création de remplacement. Safari se bloque indéfiniment
tant que la police Web n'est pas chargée.
swap
swap est la valeur font-display la plus utilisée. swap ne bloque pas
le rendu, et affiche immédiatement le texte dans une création de remplacement avant de le permuter dans
la police Web spécifiée. Cela vous permet d'afficher votre contenu immédiatement, sans attendre
pour que la police Web soit téléchargée.
Cependant, l'inconvénient de swap est qu'il entraîne un décalage de mise en page si la création de remplacement
Web et celle spécifiée dans votre CSS varie considérablement en termes de ligne
la hauteur, le crénage et
d'autres métriques de police. Cela peut affecter le CLS de votre site Web si
ne prenez pas soin d'utiliser l'indice preload pour charger une ressource de police Web dès que
possible ou si vous ne tenez pas compte des autres valeurs font-display.
fallback
La valeur fallback de font-display est un compromis entre
block et swap. Contrairement à swap, le navigateur bloque l'affichage d'une police, mais
de remplacer le texte de remplacement
pendant une très courte période. Contrairement à block,
mais la période de blocage est extrêmement courte.
La valeur fallback peut bien fonctionner sur les réseaux rapides où, si la police Web
se télécharge rapidement, la police web est la police de caractères utilisée immédiatement sur le
le rendu initial. Toutefois, si les réseaux sont lents, le texte de remplacement est détecté.
après la fin de la période de blocage, puis sont remplacées lorsque la police Web
arrive.
optional
optional est la valeur font-display la plus stricte et n'utilise que la valeur
ressource de police si elle est téléchargée dans les 100 millisecondes. Si une police Web prend
est plus longue à charger, elle n'est pas utilisée sur la page et le navigateur utilise le
police de remplacement pour la navigation actuelle pendant que la police web est téléchargée dans
en arrière-plan et placée
dans le cache du navigateur.
Par conséquent, les navigations ultérieures sur les pages peuvent utiliser la police Web immédiatement, car
elle est déjà téléchargée. font-display: optional évite le décalage de mise en page constaté
avec swap, mais certains utilisateurs ne voient pas la police Web si elle arrive trop tard sur le
la navigation
initiale sur la page.
Démonstrations de police
Tester vos connaissances
Quand le navigateur télécharge-t-il une ressource de police Web (en supposant qu'il ne s'agit pas
récupéré avec une instruction preload) ?
Quel est le seul format (et le plus efficace) nécessaire pour diffuser des annonces sur le Web dans tous les navigateurs récents ?
À suivre: JavaScript pour le fractionnement de code
Grâce à vos connaissances en matière d'optimisation des polices, vous pouvez dans le module suivant, qui traite d'un sujet à fort potentiel d'amélioration la vitesse de chargement initiale de la page pour vos utilisateurs, ce qui diffère le chargement JavaScript via le fractionnement de code. Ainsi, la bande passante et le processeur le plus faible possible pendant la phase de démarrage d'une page, une période de moment où les utilisateurs sont très susceptibles d’interagir avec elle.