La charge de Polices Google avec <lien> de manière asynchrone ou différé sans Face à la Police Observateur

Je suis désireux d'utiliser les Polices Google "Noto Serif" pour mon site.
Mon problème est que quand je l'ai tester avec Google PageSpeed Insights, il me dit que je suis parfait, sauf pour une chose:

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" >

Votre page a 1 blocage CSS ressources. Cela provoque un retard dans
le rendu de votre page. Aucun au-dessus du pli du contenu sur votre page
pourrait être rendu sans attendre les ressources suivantes pour charger.
Essayez de reporter ou de charger de manière asynchrone de blocage de ressources, ou en ligne, la
critique des portions de ces ressources directement dans le HTML.

Je suis au courant d'une mauvaise solution pour cela. C'est à lien de la police à l'aide de <script> au bas du fichier HTML. Le problème avec cette solution c'est qu'il provoque un Flash de Texte non stylé chaque fois que vous cliquez sur quelque chose dans mon site web.

Je suis en utilisant jekyll hébergé par GitHub Pages, donc je ne pense pas que je peux l'installer Face à la Police Observateur 🙁

Veuillez utiliser localfont.com pour toutes les raisons évidentes...

OriginalL'auteur Stuffed Marshmallow | 2016-11-16

  1. 8

    Ici ya go, de les inclure dans la balise body et pas la balise head

    <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet" lazyload>
    OH MON DIEU, VOUS ÊTES UN ANGE!!!! 100/100 SCORE POUR LA PREMIÈRE FOIS DE MA VIE! MERCI THANKY THANKY THANKY THANKYOUUUUU! Vous gagnez de la vie, vous êtes incroyable!!! Vous êtes un super-héros! Tu as sauvé le monde! MERCI!!!! J'ai ajouté ceci au bas de mon code html, avant </body>, et avant le <script> qui anime la barre de navigation déroulant. IL FONCTIONNE!
    Le "lazyload" attribut vient de abandonné proposition du W3C, et il a été appliqué que par Internet Explorer et Edge. Je ne recommande pas de l'utiliser sur un site web public. Pour charger de manière asynchrone de Google Polices dans tous navigateurs, vous devez utiliser le code JavaScript de Polices Web Loader.
    Pour preuve le commentaire de soren veuillez consulter caniuse.com/#feat=lazyload et vous verrez qu'il ist droit. Donc, ne pas utiliser cette solution dans votre environnement de production.
    Utiliser @mirza-sisic de réponse (5 upvotes, 0 downvotes). Celui-ci est de 13, 8.

    OriginalL'auteur Paddy

  2. 15

    Vous pouvez charger les polices web de manière asynchrone avec ce script:

    <script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

    Vous aurez besoin cette bibliothèque, c'est assez facile à mettre en œuvre. J'ai appris cela à partir d'un cours que j'ai pris récemment, Responsive Web Design Fundamentals, si vous êtes intéressés, vous pouvez le vérifier ici.

    OriginalL'auteur Mirza Sisic