Guide 39; Optimisation des caractères Web

La typographie est la base d’une bonne conception du Web: la lisibilité, la lisibilité, l’accessibilité et une bonne marque sont les clés d’un message réussi. Webfonts prend en charge tout cela en permettant un texte sélectionnable, consultable et extensible, tout en fournissant un rendu cohérent et clair, quelle que soit la taille et la résolution de l’écran. Cependant, cette meilleure expérience utilisateur peut avoir un coût en termes de performance: chaque caractère que vous utilisez est une ressource supplémentaire que les visiteurs doivent télécharger lorsqu’ils visitent votre site, augmentant ainsi le temps nécessaire pour charger la page.
Cependant, l’utilisation de polices de page Web ne signifie pas que votre page doit être lente. En fait, l’utilisation de polices optimisées et de politiques prudentes sur la façon de les charger et de les appliquer à un site peut aider à réduire la taille totale de la page et à augmenter la vitesse de la page. En outre, l’optimisation de la police de caractères du site Web augmentera le niveau d’importance du site Web de base, en particulier les paramètres CLS. Qu’est – ce qu’une police Web? Il existe deux types de polices de base utilisées sur le Web: les polices de sécurité Web: il s’agit de polices standard pré – installées sur l’appareil, y compris Times New Roman, Arial et courier. Webfonts: ces polices ne sont pas pré – installées et doivent être téléchargées à partir du navigateur avant d’être affichées. Pour les gens Insouciants, les polices Web sont une collection de lettres de l’alphabet, du moins pour ceux d’entre nous qui parlent anglais. Mais creuser profondément, c’est en fait un ensemble de glyphes, chacun étant une forme vectorielle qui décrit des lettres ou des symboles dans plusieurs langues, pas seulement en anglais.
Deux variables déterminent la taille d’un fichier de police spécifique: la complexité du chemin vectoriel de chaque police et le nombre de polices dans une police spécifique. Par exemple, une police Web populaire, Open sans, contient 897 caractères, dont des caractères latins, grecs et cyrilliques. Ouvrir San C
Il contient des centaines de glyphes. Héberger et fournir des polices Web lorsque vous choisissez d’utiliser des polices Web, elles doivent être stockées quelque part. Il existe deux options pour héberger les polices Web: l’auto – Hébergement: héberger les ressources de polices sur le serveur Web et le reste des fichiers du site. Hébergement par des tiers: utilisez des services de police tels que Adobe typekit, fonts. Polices com ou Google. Chaque option a ses avantages et ses inconvénients. Bien qu’il soit plus facile de mettre en place une solution tierce, cela signifie que vous n’avez aucun contrôle sur le rendement et la sécurité, ni même sur l’arrêt du service. En 2015, lorsque le serveur typekit s’est effondré, les sites Web du monde entier ont été déplacés vers Arial et Georgia.
Mais si vous n’êtes pas préoccupé par les interruptions (typekit n’a été inactif que pendant quatre heures), que ce soit la vitesse ou la livraison, si vous ne voulez pas gérer les ressources de polices autogérées, l’hébergement par un tiers peut être votre choix préféré. L’optimisation des rôles suggère que l’optimisation des rôles Web est un sujet complexe et qu’il existe de nombreuses façons d’optimiser la répartition des rôles. La façon exacte dont vous optimisez les polices dépendra de vos préférences d’hôte, de la conception et du serveur de votre site Web, de vos compétences techniques et de l’effort que vous êtes prêt à déployer pour améliorer les performances des polices.
Avant de commencer à optimiser les polices, il est préférable de savoir exactement combien de polices vous avez utilisées. Une façon simple est d’exécuter votre site Web à l’aide d’outils de test de vitesse tels que gtmetrix ou pingdom afin que vous puissiez analyser le diagramme de cascade généré et voir les requêtes http. Parfois, les plug – ins et les sujets peuvent utiliser des caractères que vous ne connaissez pas. Voici quelques étapes pour optimiser la prestation des rôles. 1.
L’utilisation de polices personnalisées a augmenté grâce au soutien du Navigateur pour les règles CSS @ font face qui sont maintenant populaires pour vérifier et surveiller l’utilisation des polices. Selon l’archive http, 67% des pages Web utilisent maintenant des polices personnalisées et les demandes http pour les sites Web sont en moyenne de quatre caractères.
Le jury ne sait pas exactement combien de rôles il y a trop, bien que la règle générale soit que trois sont un groupe de personnes, il vaut mieux en laisser deux: l’un est le titre, l’autre le texte. Réduire au minimum le nombre de polices Web utilisées permet non seulement de réduire le nombre total de requêtes http, mais aussi d’assurer une conception optimisée et cohérente du site. Prenez lingscars par exemple. Il y a tellement de personnages et d’autres éléments absurdes que je veux me gratter les yeux. Heureusement, il n’utilise que des polices sécurisées pour le Web afin de le charger plus rapidement. Il est également important de tenir compte des changements, tels que les poids en italique, en gras et autres. Chaque changement de police augmente le poids de la taille du fichier, donc essayez d’éviter d’ajouter des polices que vous n’avez pas l’intention d’utiliser.
2. Sous – ensemble de ressources de caractères il est préférable de minimiser l’ensemble de caractères à moins que vous ne fournissiez une traduction sur le site. Cela signifie que les caractères ne sont fournis que dans la langue dont vous avez besoin. Comme l’explique Ilya grigorik, spécialiste de Google Web Perf, de nombreuses polices peuvent être subdivisées en sous – ensembles ou même en plusieurs gammes Unicode pour ne fournir que les polices requises pour une page particulière. En utilisant @ font face, vous pouvez utiliser le descripteur de plage Unicode pour spécifier une liste de valeurs de plage qui peuvent être définies à trois formes différentes:
Un seul point de code (par exemple U + 416): représente un seul caractère. Intervalle (par exemple U + 400 – 4ff): indique les points de code de début et de fin de la plage de caractères. Plage de caractères sauvages (par exemple.
EB que j’ai déjà. Un autre inconvénient est que lorsque la police est chargée dans le navigateur, il y a de l’espace blanc (texte invisible clignotant, aussi connu sous le nom de foit) ou du texte non stylisé (contenu non stylisé clignotant, aussi connu sous le nom de foic). Cela n’est absolument pas nécessaire pour les utilisateurs qui ont déjà installé des polices sur leur ordinateur local. La solution à ce problème est simple: utilisez local () pour vérifier si les polices existent déjà dans le système utilisateur. La liste locale (‘font name’) dans la liste SRC garantit qu’aucune requête HTTP n’est faite pour les caractères existants. 5. Par défaut, les demandes de caractères sont envoyées à l’avance et @ font face retarde le chargement des caractères. Cela signifie que la demande de police est retardée jusqu’à ce que le contenu de la page soit chargé. C’est une bonne chose en termes de vitesse et de performance si vous appréciez la technologie d’amélioration progressive. Cependant, si l’expérience utilisateur est prioritaire et que vous n’aimez pas l’expérience forte, vous voudrez peut – être ignorer ce comportement pour des caractères spécifiques, comme le texte du titre. Vous pouvez utiliser le chargement et le rendu de rôles personnalisés , Affichage des caractères ou API de chargement des caractères. Dites au navigateur que vous aurez bientôt besoin d’une police, mais ne dites pas comment l’utiliser. Voici comment utiliser: HTML: CSS: @ @ font – face {font – family: ‘AWESOME font’; font style: normal; font Weight: 400; SRC: local (‘AWESOME font’), URL (‘font \/ awesome-l.wolf2’) Format (‘wolf2’), \/ * will be Pre – loaded * \/ url (‘font \/ awesome-l.wolff’) Format (‘wolf2’), \/ * will \ * \/ url (‘font \/ awesome-l.wolff’) Format (‘Wolff’) Format (‘Wolff’) Format (‘Wolff’) Format (‘Wolff’), URL (‘font \/ awesome-l.ttf’) Format (‘truetyyyyyyformat) Format (‘ truetytypypypypypy) Format (‘truetypypyppe’), URL (‘font \/ awesome-l.eot’) Format (‘Embedded – opentype’); Unicode range: U + 000 – 5ff; \/ * Latin * \/} Il est préférable de placer l’instruction @ font face au – dessus de toutes les étiquettes . Pour en savoir plus sur la façon d’utiliser l’affichage des polices, consultez la page Affichage des polices des conseils CSS.
Pour le grand public. 6. Un cache approprié doit être effectué parce que la police est une ressource statique et ne sera pas mise à jour fréquemment. Il peut être mis en cache localement dans le Navigateur pour empêcher les utilisateurs de télécharger à nouveau les caractères la prochaine fois qu’ils visitent votre site Web. Cela réduit la quantité de données que le navigateur utilisateur doit télécharger et le nombre de requêtes http. Le Guide de base Web de Google recommande de s’assurer que les serveurs fournissent des horodatages de durée de vie maximale durables et des jetons de revalidation pour une réutilisation efficace des caractères sur différentes pages du site. Vous devriez également éviter d’utiliser le stockage local ou indexé DB pour stocker des caractères parce qu’ils ont tous leurs propres problèmes de performance. N’oubliez pas que la mise en cache du navigateur ne peut s’appliquer qu’aux caractères du domaine ou du CDN que vous servez: vous n’avez aucun contrôle sur les caractères de mise en cache du navigateur fournis par des tiers tels que Google font, etc. Conclusion comme nous l’avons mentionné précédemment, l’optimisation des caractères Web est un sujet très complexe. Vous pouvez utiliser de nombreuses techniques pour mieux fournir les polices, et cet article ne touche que la surface. Je vous encourage donc à en savoir plus sur les méthodes d’optimisation qui vous conviennent le mieux, ainsi que sur votre site Web. En optimisant les polices Web, vous pouvez améliorer la mise en page cumulative, qui est l’un des éléments clés du Web. Voici quelques autres ressources pour optimiser les polices Web. Optimisation de la police de page Web – Google Web basis – Options de police de page Web et vitesse – varvy. Optimisation des polices Web de com – Étude de cas de nerdwallet – analyse de performance des polices Web – Guide d’optimisation des polices Web dans keycdn WordPress – combien de caractères avez – vous kinsta