Comment améliorer les performances de la page avec un chargeur de police

Résumé des points clés

• L'utilisation d'un chargeur de polices peut considérablement améliorer les performances de la page Web car elle peut contrôler la synchronisation de chargement et les polices de page Web, raccourcissant ainsi le temps de chargement de la page et évitant "le scintillement de texte non syntylé" (FOT).
• webfontloader La bibliothèque JavaScript est un outil très utile qui peut charger des polices à partir de diverses sources en arrière-plan après le chargement de la page et permet la personnalisation du processus de chargement à l'aide des fonctions de rappel CSS et JavaScript.
• L'utilisation des polices et l'expérience utilisateur doivent être équilibrées; tandis que les polices peuvent améliorer l'esthétique du site Web, le chargement d'un grand nombre de polices ou de polices ralentira le chargement de la page, en particulier sur les appareils mobiles. Par conséquent, l'utilisation des chargeurs de police et la mise en œuvre de polices alternatives peuvent aider à maintenir une expérience utilisateur fluide et rapide.

Un merci spécial à Jason PaMments pour l'inspiration qui a conduit à l'écriture de cet article. Sinon, je ne pense jamais à cela! La dernière fois que vous avez utilisé Arial, Times New Roman, Helvetica ou… (effrayant) sur une page Web… quand était la bande dessinée sans? Les polices Web apparaissent trop tard, mais une fois qu'ils apparaissent, nous ne regardons jamais en arrière. Les polices sont amusantes, (généralement) gratuites et faciles à mettre en œuvre:

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Vous pouvez ensuite utiliser la police dans votre page, par exemple:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

Les polices fonctionnent correctement sur les appareils mobiles, afin que les utilisateurs acquièrent une bonne expérience dans votre conception Web réactive. ou est-ce vraiment le cas?

Après l'image, les polices sont généralement la plus grande ressource de la page Web. La police d'Ubuntu ci-dessus ajoute près de 250 Ko à la page, ce qui est évident sur les connexions de réseau mobile plus lentes. Chrome, IE, Safari et l'opéra laissent un espace vide lorsque la police est chargée, de sorte que la page ne peut pas être utilisée. Firefox et les anciennes versions de l'opéra affichent du texte dans des polices et un commutateur alternatifs - cela est appelé clignotement de texte non style (FOT). Aucune de ces situations n'est idéale. Nous nous inquiétons rarement des problèmes de pondération des polices et faisons des excuses comme «ce n'est qu'un problème avec la première page» ou «de nombreux utilisateurs ont des polices mises en cache». Nous pouvons omettre des polices moins utilisées; par exemple, la suppression de la plupart des styles italiques Ubuntu peut économiser près de 40%. Peu de gens osent adopter des solutions évidentes en utilisant des polices de système d'exploitation standard - nos clients et designers ne nous pardonneront jamais.

JavaScript webfontloader

Heureusement, il existe une autre option: WebFontloader. Cette bibliothèque JavaScript peut charger des polices de Google, Typekit, Fonts.com, Fontdeck ou votre propre serveur en arrière-plan après le chargement de la page. La bibliothèque elle-même ajoute 17 Ko supplémentaires à la page, mais elle sera également téléchargée en tant que processus d'arrière-plan. Pour charger la police Ubuntu ci-dessus, nous créons un objet global appelé webfontconfig qui définit nos polices et paramètres, puis charge le webfontloader lui-même:

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Par conséquent, nous pouvons déterminer si certaines ou toutes les polices sont chargées en fonction de l'appareil et de la capacité de bande passante. Idéalement, nous pouvons utiliser l'API d'information réseau, mais la prise en charge du navigateur est toujours limitée. Alternativement, notez le paramètre de délai d'expiration dans WebFontConfig; si le fichier de police prend plus de deux secondes à télécharger, la demande sera abandonnée.

Fonction de rappel CSS

WebFontloader applique le nom de classe à l'élément HTML pendant l'opération:

• .wf-loading - Toutes les polices sont demandées
• .wf-active - Toutes les polices sont disponibles
• .wf-inactive - Impossible de charger des polices

Le nom de classe sera également appliqué à chaque police:

• .wf-<familyname>-<fvd>-loading</fvd></familyname> - Police unique demandée
• .wf-<familyname>-<fvd>-active</fvd></familyname> - Disponible en une seule police
• .wf-<familyname>-<fvd>-inactive</fvd></familyname> - Impossible de charger une seule police

où <familyname></familyname> est une version purifiée du nom de la police, et <fvd></fvd> est une description de variante, comme I4 représente l'italique de 400 épaisseur. Cela nous permet de changer de polices après les téléchargements de police - de la même manière que Firefox, par exemple:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

Fonction de rappel JavaScript

Les fonctions de rappel JavaScript similaires peuvent être définies dans webfontconfig, bien que cela soit rarement utile, tel que:

<code class="language-javascript">var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();</code>

Reportez-vous à la documentation WebFontloader pour plus d'informations.

Minimiser Fout

Si votre police alternative est très différente de votre police Web en termes de style, d'épaisseur ou d'espacement, le clignotement de texte non style peut être sévère. Cependant, avec juste une petite expérience, vous pouvez ajuster la police alternative, l'épaisseur, la hauteur de la ligne et les marges pour vous assurer que les éléments de la page restent à peu près les mêmes lors du chargement des polices Web ... Voir Craig Buckler sur l'article Codepen (@craigbuckler) " Comment utiliser le chargeur de police ".

Cliquez sur le bouton "Switch Font" pour afficher l'effet de commutation de police. Ce changement n'est pas entièrement peu évident, mais il est important que si les utilisateurs commencent à lire, ils ne perdent pas leur place. Vous pouvez ajouter un bouton "Switch Font" à n'importe quelle page pour vous aider à évaluer le style alternatif approprié:

<code class="language-css">/* 默认操作系统字体 */
body {
    font-family: arial, sans-serif;
}

/* 字体现在已加载 */
.wf-active body {
    font-family: 'Ubuntu';
}</code>

En bref: l'utilisation des polices peut être gratuite, mais essayez de minimiser le coût des utilisateurs. Si vous chargez 1 Mo de fichiers de police, votre conception Web réactive soigneusement créée ne convient pas aux appareils mobiles!

(Ce qui suit est la partie FAQ, qui a été réécrite et intégrée en fonction du texte d'origine, et une partie du contenu a été rationalisée)

Les questions fréquemment posées sur l'utilisation du chargeur de police pour améliorer les performances de la page Web

Qu'est-ce qu'un chargeur de police? Pourquoi est-ce important pour les performances des pages?

Font Loader est un outil qui vous permet de contrôler la façon dont les polices Web sont chargées sur votre site Web. Il est important pour les performances des pages car il peut aider à réduire le temps de chargement du site Web. Lorsque la page Web se charge, le navigateur doit télécharger toutes les ressources nécessaires, y compris les polices. Si la police est grande ou grande, cela ralentira le temps de chargement de la page. Les chargeurs de police vous permettent de contrôler comment et comment ces polices sont chargées, ce qui peut améliorer considérablement les performances de votre page.

Comment le chargeur de police améliore-t-il les performances de la page?

Le chargeur de police améliore les performances de la page en vous permettant de contrôler le chargement des polices Web. Vous pouvez choisir de charger des polices de manière asynchrone, ce qui signifie qu'ils ne bloqueront pas le rendu pour le reste de la page. Cela peut réduire considérablement le temps nécessaire pour que la page devienne interactive. De plus, le chargeur de police peut aider à empêcher le phénomène "Flicching de texte non utilisé" (FOUT), où le navigateur affiche des polices alternatives pendant que la police Web se charge toujours.

Quels sont les chargeurs de police couramment utilisés?

Plusieurs chargeurs de polices couramment utilisés sont disponibles, y compris le chargeur Webfont de Google et le chargeur WebFont de Typekit. Les deux outils offrent plusieurs options pour contrôler la façon dont les polices Web sont chargées. Il existe également des plugins WordPress (tels que Developry Google Fonts) qui peuvent facilement implémenter le chargement des polices sur votre site Web.

Comment implémenter le chargeur de polices sur mon site Web?

La mise en œuvre d'un chargeur de polices sur votre site Web nécessite généralement l'ajout d'un script à votre HTML. Ce script chargera le chargeur de police et vous pouvez ensuite utiliser l'API du chargeur de police pour contrôler la façon dont les polices Web sont chargées. Le processus exact peut varier en fonction du chargeur de police que vous utilisez, il est donc préférable de se référer à la documentation pour des instructions spécifiques.

Puis-je utiliser le chargeur de police avec une police Web?

La plupart des chargeurs de police sont compatibles avec n'importe quelle police Web, tant que la police est hébergée d'une manière qui permet au chargeur de police de se charger. Cela comprend les polices et les polices auto-hébergées hébergées par des services de police tels que Google Fonts ou Typekit.

L'utilisation d'un chargeur de police affectera-t-elle l'apparence de mes polices?

L'utilisation d'un chargeur de police peut affecter l'apparence de vos polices car elle peut aider à prévenir les FOT. Cependant, il ne devrait pas modifier la conception ou le style réel de la police. Si vous remarquez des modifications de l'apparence de la police après la mise en œuvre du chargeur de police, cela peut être dû à des problèmes de configuration.

Qu'est-ce que "clignotement du texte non style" (FOT)? Comment un chargeur de police l'empêche-t-il?

fout est un phénomène où le navigateur affiche des polices alternatives lorsque la police Web se charge toujours. Cela peut provoquer un bref clignotant de texte, avec la police différente de la police finale, ce qui peut rendre l'utilisateur mal à l'aise. Les chargeurs de police empêchent Fout en vous permettant de contrôler lorsque vous appliquez des polices Web au texte. Par exemple, vous pouvez choisir de masquer le texte jusqu'à ce que la police Web soit chargée, ou vous pouvez afficher le texte dans la police alternative et le remplacer après le chargement de la police Web.

Le chargeur de police peut-il améliorer le référencement de mon site Web?

Oui, les chargeurs de police peuvent améliorer le référencement de votre site Web en réduisant le temps de chargement des pages. Le temps de chargement des pages est un facteur que les moteurs de recherche envisagent lors du classement des sites Web, vous pouvez donc faire n'importe quoi pour le réduire, ce qui peut améliorer votre référencement.

Y a-t-il des inconvénients à l'utilisation d'un chargeur de police?

Un inconvénient potentiel de l'utilisation d'un chargeur de police est qu'il peut augmenter la complexité du code du site Web. Cependant, les avantages de l'amélioration des performances des pages et de l'expérience utilisateur l'emportent souvent sur ce désavantage. De plus, de nombreux chargeurs de polices ont une bonne documentation et un bon soutien, ce qui les rend relativement faciles à mettre en œuvre.

Comment savoir si le chargeur de police améliore les performances de ma page?

Vous pouvez utiliser divers outils pour mesurer les performances de votre page avant et après la mise en œuvre du chargeur de police. Ces outils peuvent fournir des mesures telles que le temps de chargement des pages, le premier temps de dessin et le temps interactif, ce qui peut vous aider à quantifier l'impact du chargeur de police. Certains outils de mesure des performances couramment utilisés incluent le phare de Google et WebPageTest.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!