Optimisation (réduction) des demandes de polices Web

Ma page d'accueil utilise actuellement 5 polices Web - j'aimerais que ce soit 6 en raison de la prise en charge inégale de Helvetica Neue. L'une des polices est les icônes «FontAwesome», les 4 autres ne sont utilisées que pour un mot ou deux (c'est-à-dire que j'ai un titre qui lit «Optimisation» écrit en lettres qui ressemblent à un vieil ordinateur).

2 de ces polices sont disponibles via Google et je demande uniquement les lettres nécessaires (et cela fonctionne très bien). Cependant, les 2 autres proviennent de openfontlibrary.org et ne sont disponibles que dans un seul format. Ce qui n'est pas un gros problème (j'en aurai besoin de toute façon pour que les copies locales soient meilleures), un quickie avec le générateur Fontsquirrel.com @ font-face et je les ai dans plusieurs formats, et le CSS pour démarrer.

Et puis je teste le temps de chargement de ma page ... ugh. Je suppose qu'il serait possible pour moi de sous-définir mes copies locales, quelqu'un a-t-il de l'expérience dans ce domaine?

optimization fonts

— adam-asdf
source

Réponses:

L'utilisation de polices Web non standard a un impact significatif sur les performances des temps de chargement des pages par rapport à l'utilisation de polices système Web sécurisées standard. C'est le cas, que vous utilisiez JavaScript ou @ font-face .

Il faut toujours analyser soigneusement si des polices Web non standard doivent être utilisées.

Quelques questions à vous poser lorsque vous envisagez d'utiliser des polices Web non standard:

Les utilisez-vous uniquement pour montrer que vous pouvez et savez comment?
Servit-il un objectif dans l'exécution d'une meilleure conception et offre-t-il une meilleure expérience utilisateur?
La méthode utilisée pour implémenter les polices est-elle compatible avec plusieurs navigateurs?
Une image peut-elle suffire, surtout si ce n'est que quelques mots sur une seule page ou seulement quelques pages?
La police est-elle suffisamment différente des polices Web sécurisées pour être utile à utiliser?
Si la police est utilisée comme corps de texte, est-elle facilement lisible ou la police est-elle conçue pour les en-têtes?

Assurez-vous que vous comprenez au moins les principes fondamentaux de la typographie et son impact sur votre conception, et utilisez-les à votre avantage.

— mardi
source

Merci pour la réponse détaillée mais je vais admettre un peu de frustration avec les réponses jusqu'à présent. Je me rends compte que cela a un impact sur le temps de chargement; Je connais la typographie et les polices Web sécurisées. Je me rends compte que je pourrais utiliser une image (ou des images-objets) et du texte alternatif. Cependant, ce sont les derniers recours pour moi. Je pourrais utiliser une pile de polices très sûre, mais cela va à l'encontre du but d'avoir des polices Web (et même les substituts nécessitent une connexion HTTP). Ensuite, vous entrez dans le référencement, les problèmes d'accessibilité de la taille de la police, les traductions, les paramètres pour les malvoyants, etc. Si cela est raisonnable , je préfère optimiser mes polices Web.

— adam-asdf

Si vous aviez lu le premier article auquel j'ai lié, vous auriez trouvé des informations sur les moyens d'améliorer les temps de chargement des pages tout en utilisant des polices Web non standard.

— mardi

Désolé, dépassé par le nombre de liens, je vais le faire maintenant.

— adam-asdf

Tu avais raison, désolé pour mon impatience (c'est en fait le deuxième lien qu'il donne). Détails auto-hébergement, TypeKit, Google, font-squirrel (en quelque sorte j'ai manqué de penser à essayer l'option avancée du générateur @ font-face), et même une analyse de différentes méthodes dans différents navigateurs. Pour ceux qui tombent sur cette route, cela a répondu à toutes mes questions.

— adam-asdf

Merci de m'avoir fait savoir que c'était le deuxième lien. Je les ai mélangés dans le post. C'est réparé maintenant, c'est donc le premier lien. Vous pouvez également examiner Cufon et sIFR, si vous ne l'avez pas déjà fait. En outre, une grande partie de ma réponse était destinée aux futurs lecteurs, afin qu'ils réfléchissent un peu avant de suivre la foule en ce qui concerne l'utilisation des polices Web.

— mardi

les 4 autres ne sont utilisés que pour un mot ou deux

Est-ce une déclaration littérale?
Si oui, pourquoi vous embêtez-vous à incorporer ces polices, sous-ensembles ou non? Vous ne devriez même pas optimiser dans ce cas, simplement supprimer . Créez des images du texte dont vous avez besoin et utilisez votre technique de remplacement de texte préférée. Vous ajoutez des requêtes HTTP et du temps de téléchargement sur votre site pour quelques mots .

— Su '
source

Cela m'est venu à l'esprit, j'ai juste l'impression que si je dis que je peux coder avec CSS3 quelques polices Web et qu'une conception réactive via des requêtes multimédias est probablement sage.

— adam-asdf

J'ai remarqué que vous avez beaucoup de respect dans cette communauté (et une expérience apparemment pratique). Qu'est-ce que je regarde? Je sais que les requêtes http (s) prennent du temps, mais donnez-moi quelque chose pour prendre une décision éclairée ... parlons-nous de 2 secondes ou de 2 microsecondes? Je suis pratique mais ayant une formation en design je suis orienté esthétique. Donnez-moi un moyen de prendre une décision éclairée, s'il vous plaît.

— adam-asdf

@Su 'est tout à fait correct. Chaque site est différent dans la mesure où HTTPRequests, tout dépend vraiment de la route entre le client et votre serveur. Une personne utilisant l'accès à distance (toujours) ou une connexion satellite subira des temps de chargement plus longs qu'une personne sur DSL ou T1. Une bonne esthétique est extrêmement importante, mais une bonne structure et optimisation sont tout aussi importantes. Minimiser la marge de temps de chargement est une pratique courante, limitant ainsi le nombre de requêtes HTTP sur votre site. Faire une image des mots réduira le temps de chargement et vos utilisateurs ne sauront rien. Examinez également les sprites CSS.

— Christopher

@Christopher Je suis content que vous ayez mentionné les sprites, je suppose que vous pourriez dire que je cherche un moyen de créer une version personnalisée et disponible localement des sprites dans les polices Web.

— adam-asdf

@ user1332729 Facile, faites comme suggéré par Su '(Créez des images des mots) et appliquez-y les principes CSS Sprite. Bang, il est aussi optimisé que possible sans passer par les formats d'image. Que voulez-vous dire localement disponible? Pour vous ou votre client?

— Christopher

Pour faire le suivi, j'ai fini par utiliser les options avancées du générateur @ font-face pour sous-définir mes polices, donc je n'ai chargé que les caractères nécessaires.

L'une des options était d'encoder en Base64 les polices (ce qui m'a permis de les incorporer dans mon fichier CSS). Si la mémoire est suffisante, il Base64 code la .woffet la .ttfpolice.

Bien que j'aime prendre en charge autant d'utilisateurs que possible de navigateurs, j'ai décidé que cela ne valait pas la peine de ralentir les utilisateurs de navigateurs modernes avec des données supplémentaires, probablement redondantes, j'ai donc utilisé Modernizr (qui utilise yep / nope.js) pour charger de façon asynchrone un CSSfichier séparé avec des références à tous les formats de police conformément à la syntaxe de police pare-balles renforcée .

J'ai fait des allers-retours entre l'encodage Base64 de la .woffpolice et l'inclusion du reste des déclarations de police dans le CSSfichier principal ou uniquement l'inclusion de l'encodage Base64 .woffdans le fichier principal CSS, puis l'inclusion des autres formats dans un CSSfichier que j'ai chargé de manière asynchrone via Modernizr.load.

Je préfère les temps de chargement rapides à l'esthétique, donc FOUC n'était pas une grande préoccupation, mais je noterai que la plupart des navigateurs ont en quelque sorte `` cligné des yeux '' sur les polices lors du chargement (ce qui était après que les polices encodées en Base64 CSSavaient été chargées) asynchrones.

Sur le plan positif, une fois que les polices ont été chargées et stockées dans le cache (les en-têtes expirant depuis longtemps définis sur le serveur), le `` clignotement '' a été éliminé et j'ai pu charger des ensembles étendus de polices afin que les utilisateurs qui parlent d'autres langues (et utilisent le Widget de traduction Google inclus) verrait toujours du texte stylisé.

Comme c'était mon propre site, j'ai pu expérimenter mais je le faisais en grande partie pour "montrer", je suis plus conservateur avec les sites clients.

Une autre technique que j'ai implémentée consistait à mettre toutes les .svgpolices dans un seul fichier et à les identifier chacune avec son propre ID plutôt que de les avoir chacune dans un fichier séparé comme le produit le générateur @ font-face.

— adam-asdf
source