Webfonts ou polices chargées localement?

98

Depuis les problèmes provoqués par l'utilisation de Cufon, je me suis éloigné de l'utilisation de ressources de polices externes, mais dernièrement, j'ai cherché des méthodes alternatives de chargement des polices pour voir s'il y avait une meilleure façon; de meilleures méthodes ont un moyen d'apparaître à l'improviste.

Il y a beaucoup de nouvelles méthodes là-bas, et des variations pour chaque méthode il semble; Dois-je utiliser typekit ? ou google webfonts (avec js ou css)? dois-je continuer à utiliser des polices de chargement localement (par exemple, la méthode générée par fontsquirrel.com)?

Je vais énumérer les méthodes qui semblent les plus bien reçues ci-dessous, avec quelques tests, mais vaut-il vraiment la peine de passer à une police Web? Il semble que cela porterait une charge de ressources plus élevée (requêtes http) et aurait moins de types de formats de fichiers (moins de compatibilité), etc. Mais il semble que les fichiers soient chargés de manière asynchrone et efficace dans la plupart des cas.

  1. Est-ce juste une question de situation et de besoin? Si c'est vrai, que sont-ils?
  2. Existe-t-il des différences drastiques entre ces méthodes?
  3. Existe-t-il une meilleure méthode que je n'ai pas répertoriée?
  4. Quels sont les avantages / inconvénients de la performance? Regardez? dépendances? compatibilités?

Je recherche vraiment les meilleures pratiques ici, les performances sont importantes, mais l'évolutivité et la facilité d'utilisation aussi. Sans parler de l'apparence et de la sensation.


Google CSS

  • utilise uniquement une feuille de style externe
  • utilise uniquement le plus petit type de fichier compatible
  • peut utiliser @importou <link>ou prendre le contenu de styleshee ( @font-face) et le mettre directement dans votre propre feuille de style.

résultats de test

  78ms load of html
  36ms load of css

entrez la description de l'image ici


Méthode Google JS

  • utilise webfont.jspour charger le style
  • utilise uniquement le plus petit type de fichier compatible
  • ajoute l' :rootélément avec la classe
  • ajoute un script à la tête.

résultats de test

    171ms load of html
    176ms load of js
    32ms load of css

entrez la description de l'image ici


Méthode Typekit

  • ajoute l' :rootélément avec la classe.
  • peut utiliser un *.jsextrait de code ou un fichier de *.jsfichier chargé en externe
  • utilise à la data:font/opentypeplace du fichier de police.
  • ajoute un script à la tête
  • ajoute le CSS intégré à la tête
  • ajoute une feuille de style externe à la tête

    vous pouvez facilement ajouter / supprimer / ajuster des polices et des sélecteurs ciblés à partir de typekit.com

résultats de test

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

entrez la description de l'image ici


… Et la méthode Font Squirrel

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Ou avec des données: méthode de police…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}
Darcher
la source
4
C'est une bonne question.
dachi
1
Je ne sais pas si c'est la meilleure méthode, mais j'utilise toujours Google CSS comme ça<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
lefoy
J'ai développé un site Web comme font-squirrel, uniquement pour les Georgianpolices Web locales . J'utilise la méthode font-squirrel, et j'aimerais aussi voir une excellente réponse à cette question.
dachi
1
C'est un très bel article sur la façon de déclarer des @font-facedéclarations pare-balles , peut-être que vous trouverez des informations utiles. paulirish.com/2009/bulletproof-font-face-implementation-syntax
lefoy
Je peux commencer à bénéficier d'une prime lorsque disponible pour obtenir des réponses meilleures / améliorées si vous n'en acceptez pas une avant.
Davit

Réponses:

34

Tout d'abord, je vais clarifier quelque chose sur l'offre de Google. Il chargera en fait le plus petit format que votre navigateur peut gérer. WOFF propose des fichiers de petite taille et votre navigateur le prend en charge, c'est donc celui que vous voyez. WOFF est également assez largement soutenu. Cependant, dans Opera par exemple, vous obtiendrez probablement la version TrueType de la police.

La logique de la taille du fichier est également, je crois, pourquoi Font Squirrel les essaie dans cet ordre. Mais ce sont surtout des spéculations de ma part.

Si vous travaillez dans un environnement où chaque requête et chaque octet comptent, vous devrez effectuer un profilage pour savoir lequel fonctionne le mieux pour votre cas d'utilisation. Les utilisateurs ne verront-ils qu'une seule page et ne reviendront jamais? Si tel est le cas, les règles de mise en cache n'ont pas autant d'importance. S'ils naviguent ou reviennent, Google peut avoir de meilleures règles de mise en cache que votre serveur. La latence est-elle le plus gros problème ou la bande passante? En cas de latence, visez moins de requêtes, alors hébergez-le localement et combinez les fichiers autant que possible. S'il s'agit de bande passante, choisissez l'option qui se termine par le plus petit code et le plus petit format de police.

Maintenant, passons à la considération CSS vs JS. Examinons le morceau suivant de HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

Dans de nombreux cas, script1, style1et style2serait le blocage. Cela signifie que le navigateur ne peut pas continuer à afficher le document tant que cette ressource n'a pas été chargée (bien que les navigateurs modernes gèrent un peu cela). Ce qui peut en fait être une bonne chose, surtout avec les feuilles de style. Cela empêche un flash de contenu non stylé, et il empêche également le changement géant qui se produirait lors de l'application des styles (et le changement de contenu est vraiment ennuyeux en tant qu'utilisateur).

D'un autre côté, script2ce ne serait pas un blocage. Il peut être chargé plus tard et le navigateur peut passer à l'analyse et à l'affichage du reste du document. Cela peut donc être bénéfique aussi.

En parlant spécifiquement des polices (et plus précisément de l'offre de Google), je m'en tiendrai probablement à une méthode CSS (j'aime bien @importparce qu'elle continue de styler avec la feuille de style, mais cela pourrait être juste moi). Le fichier JS chargé par le script ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) est plus volumineux que la @font-facedéclaration, et ressemble à beaucoup plus de travail. Et je ne pense pas que le chargement de la police elle-même (le WOFF ou le TTF) soit bloquant, donc cela ne devrait pas trop retarder les choses. Personnellement, je ne suis pas un grand fan des CDN, mais le fait est qu'ils sont VRAIMENT rapides. Les serveurs de Google battront la plupart des plans d'hébergement partagé par un glissement de terrain, et comme leurs polices sont si populaires, les gens peuvent même les avoir déjà mises en cache.

Et c'est tout ce que j'ai.

Je n'ai aucune expérience avec Typekit, donc je l'ai laissé hors de ma théorie. S'il y a des inexactitudes, sans compter les généralisations entre les navigateurs pour des arguments, veuillez les signaler.

ZachRabbit
la source
J'ai pensé en grande partie que cela serait situationnel, mais vous faites également une bonne note sur les problèmes de blocage et de FOUT. J'ai lu cela ici: paulirish.com/2009/fighting-the-font-face-fout & stevesouders.com/blog/2009/10/13/font-face-and-performance . Je vais faire quelques tests et publier des différences de performances ce soir. Merci pour l'excellent aperçu.
darcher
11

Je pense que vous avez très bien traité des temps de chargement dans votre question. De mon point de vue, il y a quelques sources qui devraient être ajoutées à la liste, et quelques autres considérations qui devraient être examinées pour avoir une vue complète des options.


Quelques autres sources de polices réputées

cloud.typography

http://www.typography.com/cloud/

D'après ce que je peux dire, les polices sont intégrées sous forme de données dans un fichier CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Voici mes spécifications:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Voici leur description de très haut niveau de leur déploiement .

Fonts.com

Je n'ai pas utilisé ce service, mais c'est un fournisseur de polices très établi, et les informations qu'ils ont répertoriées sur leur site sont assez impressionnantes. Je n'ai pas de spécifications sur leurs méthodes exactes, mais voici ce que je sais qu'ils ont:

  • Certaines des polices les plus connues au monde disponibles
  • Une très grande bibliothèque de polices (plus de 20000)
  • Téléchargements de polices de bureau pour créer des maquettes
  • Un outil personnalisé pour tester les polices Web dans le navigateur
  • Contrôles et sous-ensembles de typographie fins
  • Options d'auto-hébergement

FontSpring

Affilié à FontSquirrel. Les polices peuvent être achetées ici pour un prix fixe. Les fichiers de polices et le CSS d'accompagnement sont fournis, pour être déployés sur votre propre serveur, un peu comme FontSquirrel.


Spécifications étendues

En ce qui concerne les avantages et les inconvénients généraux de chaque service de police, voici quelques comparaisons:

Taille de la bibliothèque de polices

  • Fonts.com : 20,000+
  • FontSpring : plus de 1000
  • FontSquirrel : 300+
  • Google : plus de 600
  • Typekit : 900+
  • Typography.com (cloud.typography.com): probablement 300+ (35 familles)

Tarification

  • Fonts.com : 20 $ / mois pour 500 000 pages vues
  • FontSpring : varie selon la police (achat unique de polices)
  • FontSquirrel : gratuit
  • Google : gratuit
  • Typekit : 4 $ / mois pour 500 000 pages vues
  • Typography.com : 12,50 $ / mois pour 1000000 de pages vues

Qualité de la police

La qualité des polices Web peut varier un peu. Cela peut englober des éléments tels que les formes de lettres elles-mêmes ou l'espacement ou la taille du jeu de caractères. Tous ces éléments déterminent l'impression générale de qualité qu'une police donnera. Bien que les options gratuites aient de bonnes options, elles ont également des polices qui ne sont pas aussi de haute qualité, vous devez donc choisir avec soin parmi ces sources.

  • Fonts.com : élevé
  • FontSpring : mixte à élevé
  • FontSquirrel : Mixte
  • Google : mixte
  • Typekit : élevé
  • Typography.com : Très élevé (je donne à cela une désignation «très élevée» car Fonts.com, FontSpring et Typekit prennent en charge plusieurs fonderies de types, où il ne s'agit que de polices de la fonderie H&FJ, qui est parmi les meilleures au monde)

Qualité de police II: typographie

Il y a beaucoup de raffinements dans la typographie de bureau qui ont été très difficiles à obtenir dans les polices Web. Certains de ces services offrent des moyens de les fournir.

  • Fonts.com : crénage, espacement des lettres, ligatures, caractères alternatifs, fractions, etc.
  • FontSpring : Aucun
  • FontSquirrel : Aucun
  • Google : aucun
  • Typekit : Aucun
  • Typography.com : petites majuscules, ligatures, caractères alternatifs, styles de nombres alternatifs, fractions, etc.

Prise en charge du navigateur

Cela se résume principalement aux formats de police pris en charge par chaque service. Les principaux sont:

  • EOT: pour Internet Explorer (IE 4+)
  • TrueType et OpenType: formats traditionnels (Safari 3.1+, FF 3.5+, Opera 10+)
  • WOFF: nouveau standard pour les polices Web (FF 3.6+, Chrome 5+)
  • SVG: IOS <4.2

Plus d'informations sur la règle @ Font-Face et des astuces utiles sur les polices Web

Tous ces services prennent en charge les principaux formats de police. Avec les polices auto-hébergées, tant que vous utilisez la bonne syntaxe, vous devriez être couvert. Voici une mise à jour 2011 de la syntaxe à l'épreuve des balles de FontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Performance I: Téléchargements

Pour autant que je sache, l'utilisation de la syntaxe ci-dessus permet aux navigateurs de saisir le format spécifique qui leur convient, il n'y a donc pas de téléchargements inutiles sur les formats de police qui ne fonctionnent pas.

Les services payants comme Fonts.com, Typekit ou Typography.com utilisent des méthodes pour détecter le format correct, puis fournissent le bon format de police, souvent sous forme de données base64 dans un fichier CSS.

D'après ce que je peux voir, les différences dans les méthodes que vous avez énumérées ci-dessus sont assez négligeables pour les utilisateurs d'Internet haut débit (cela semble être une différence de <200 ms), mais pourraient valoir la peine d'être prises en compte pour les appareils sur des réseaux plus lents, en particulier pour les visites de pages non mises en cache.

Performance II: sous-ensemble

Si vous savez qu'il n'y aura que certains caractères que vous souhaitez utiliser, vous pouvez créer votre police avec un sous-ensemble de caractères et ainsi réduire la taille du téléchargement.

  • Fonts.com : contrôle très détaillé
  • FontSpring : peut recompiler en tant que sous-ensemble via le générateur de polices Web FontSquirrel
  • FontSquirrel : peut recompiler en tant que sous-ensemble via le générateur de polices Web
  • Google : contrôle très détaillé
  • Typekit : options limitées de "tous les caractères" ou "par défaut"
  • Typography.com : Contrôle très détaillé

Performance III: Livraison

  • Fonts.com : CDN global ou votre propre serveur
  • FontSpring : basé sur votre serveur
  • FontSquirrel : basé sur votre serveur
  • Google : super-CDN mondial
  • Typekit : CDN global
  • Typography.com : CDN mondial (125 000 serveurs)

Support linguistique

  • Fonts.com : 40 langues, dont l'Asie et le Moyen-Orient
  • FontSpring : Western, selon la police
  • FontSquirrel : Western, selon la police
  • Google : occidental, selon la police
  • Typekit : Western, selon la police
  • Typography.com : Western, selon la police

Test et mise en œuvre

  • Fonts.com : très simple, avec des outils étendus et personnalisables
  • FontSpring : technique (faites-le vous-même)
  • FontSquirrel : technique (faites-le vous-même)
  • Google : facile
  • Typekit : Facile
  • Typography.com : des tests faciles, un peu plus impliqué pour changer une fois déployé
nwalton
la source
Cela ne répond pas à la question des OP. Il compare simplement plusieurs polices Web.
stackErr
C'est le plus informatif sur chaque fournisseur, merci pour toutes ces informations!
darcher
10

Eh bien, comme tu es après

... à la recherche des meilleures pratiques ici, les performances sont importantes, tout comme l'évolutivité et la facilité d'utilisation. Sans parler de l'apparence et de la sensation.

la réponse est (comme toujours dans la conception de sites Web): cela dépend!

Une chose est sûre, je ne recommanderais pas d'utiliser l'approche JS (illustrée dans votre deuxième exemple).

Personnellement, je n'aime pas créer des éléments de présentation et des styles CSS en fonction de Javascript, même si la grande majorité des utilisateurs l'ont activé. Il s'agit de ne pas mélanger les choses.

Et comme vous pouvez le voir dans votre exemple donné, il existe une sorte de FOUC (flas de contenu non stylé), car la page est déjà rendue par le navigateur avant que la police ne soit disponible. Dès qu'elle l'est, la page est redessinée. Et plus le site est grand, plus l'impact (sur les performances) est grand!

Je n'utiliserais donc jamais aucune solution JS pour l'incorporation de polices.

Voyons maintenant les méthodes CSS pures.
Depuis un certain temps, voici une discussion sur "vs @ import". Personnellement, je préfère éviter d'utiliser @import et toujours utiliser <link>uniquement. Mais c'est principalement une question de préférences personnelles. La seule chose que vous ne devriez jamais faire est de mélanger les deux!

Local vs CDN
Lorsque vous décidez d'héberger vos fichiers de polices localement ou d'utiliser un CDN, alors à mon avis cela dépend principalement du nombre de polices différentes et des polices respectives que vous souhaitez intégrer.

Pourquoi est-ce important ou joue-t-il un rôle?
Du point de vue des performances, je recommanderais d'inclure la police Base64 encodée dans votre (une) feuille de style. Mais seulement le format .woff, car il est utilisé par presque tous les navigateurs modernes, ce qui signifie pour la majorité de vos visiteurs. Pour tous les autres utilisateurs vivent avec la demande supplémentaire.

Mais en raison de la "surcharge" causée par le codage Base64 et la taille d'un fichier de police (même au format .woff), cette technique ne doit être utilisée que si vous n'avez pas plus de 3 ou 4 polices différentes. Et assurez-vous toujours que votre serveur délivre les fichiers (CSS) gzipés.

Le gros avantage de cela est que vous n'avez pas de demande supplémentaire pour le fichier de police. Et après le chargement de la première page (quelle que soit la page de votre site), le fichier CSS est mis en cache. C'est également un avantage si vous utilisez le cache d'application HTML5 (ce que vous ferez certainement).

Outre le fait qu'un auteur ne doit pas utiliser plus d'un maximum de 3 ou 4 polices différentes sur son site, jetons un œil à la méthode d'utilisation du CDN de Google.

Tout d'abord, sachez que vous pouvez (et devez toujours) inclure toutes les polices souhaitées en une seule <link>, comme ceci:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Cela entraînera la réponse suivante:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Comme vous pouvez le voir, il existe 9 fichiers de polices différents, ce qui signifie un total de 10 demandes (y compris celle de l'élément lien), si l'utilisateur ne dispose pas d'une ou plusieurs des polices demandées installées localement. Et ces demandes sont répétées à chaque nouvelle demande de page sur votre site (bien qu'aucune donnée ne soit transférée)! De plus, la réponse à la demande de l ' <link>n'est jamais mise en cache.

Recommandation:
Après tout, je recommande vraiment d'inclure vos fichiers de polices au format .woff Base64 encodés dans votre feuille de style!

Voir ce bel article pour un exemple et une description de la façon de le faire!

Netsurfer
la source
Merci beaucoup, cherchait cette solution!
ken du
3

J'utilise la méthode css en ligne car la surcharge de la demande supplémentaire est supérieure à l'augmentation de la taille lors de l'encodage bease64. Ceci est également compensé par la compression gizip par le serveur des fichiers css.

Une autre option consiste à utiliser le chargement asynchrone des polices, mais le plus souvent, les utilisateurs verront les polices apparaître après le chargement.

Quelle que soit la méthode, vous pouvez réduire la taille du fichier de police en n'incluant que les jeux de caractères que vous utiliserez.

Chris Gunawardena
la source
Il n'y a pas de surcharge supplémentaire mentionnée ci-dessus lors de l'utilisation de HTTP2.
Chris Gunawardena
1

Personnellement, j'utilise Google Fonts. Ils ont une belle variété de choix et ils ont récemment amélioré la compression des polices en passant également à la compression Zopfli . Google s'efforce de rendre le Web plus rapide, donc j'imagine que plus d'optimisation sur cette partie viendra également d'eux.

Quoi que vous choisissiez comme livraison de polices externalisée, vous obtiendrez toujours des réductions de vitesse par les demandes d'obtention des polices. La meilleure chose, vue du point de vue de la vitesse, serait de servir les polices vous-même. Si vous ne vous souciez pas des millisecondes supplémentaires nécessaires pour charger à partir d'une livraison externalisée, vous devriez y aller si vous pensez que la facilité de les utiliser vaut les millisecondes.

Je ne connais pas Typekit et les autres, mais avec Google Fonts, vous pouvez choisir de recevoir des sous-ensembles spécifiques et une plage de caractères pour accélérer encore plus la livraison.

Choisir un sous-ensemble:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Choisir une plage de caractères:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Vous pouvez utiliser dns-prefetch pour améliorer encore plus la vitesse avec la livraison des polices.

Je pense, et j'espère, que Google fera tout son possible pour accélérer au maximum la livraison de leurs polices. Les millisecondes nécessaires pour les charger ne nuisent pas à mon site Web, alors je les utilise avec plaisir.

Longue histoire courte:

Si la livraison des polices en quelques millisecondes nuit à votre site, par exemple en le faisant charger plus que la seconde recommandée, je pense que vous devriez les héberger vous-même.

Jeremy Karlsson
la source
1
Bon point sur le <link rel=dns-prefetch href='//fonts.googleapis.com'>Je l'utilise pour l'analyse, la cartographie thermique et les sous-domaines, pour une raison quelconque, il ne s'est pas enregistré pour fonctionner pour les polices Web externes. Et le temps de chargement diffère considérablement d'une police à l'autre, je suppose que si vous utilisez une police assez populaire (peut être mise en cache) ou seulement une sélection de polices, l'utilisation de polices Web est une excellente source de polices assez rapide. Je posterai des tests de vitesse ici sous peu.
darcher
1

La meilleure option est d'importer les polices en utilisant ajax, comme ceci:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Je fais cela sur ma page Web et augmente de 9 points dans le test Google Insights.

Phok7
la source
Intéressant. Je vais devoir me pencher sur PageSpeeds avec cette méthode.
darcher
2
Et l' asyncattribut? Cela fait la même chose.
Tymek