Ich versuche, die Ladegeschwindigkeit meiner mobilen Webseite zu optimieren, und für diesen Effekt benutze ich die Webseite:
Diese Website bewertet meine Quelle und sagt mir, was ich verbessern kann. Auf meiner Website lade ich eine Schrift herunter:
%Vor% und anscheinend blockiert dies das Rendern meiner Seite. Nun, wenn dies JavaScript wäre, könnte ich das async -Wort im Tag verwenden und es würde das Problem beheben, aber das ist keine JavaScript-Datei, die ich lade!
Besteht trotzdem die Möglichkeit, dass diese Ressource meinen Browser nicht blockiert und zwingt ihn zu warten, bis er heruntergeladen ist?
Sie können es mit JavaScript machen:
%Vor%Die Schriftart wird mit dem Hauptrendering out-of-band geladen. Das bedeutet natürlich, dass es eine visuelle Änderung geben wird, wenn die Schriftart geladen wird ... und wenn der Benutzer JavaScript deaktiviert hat, wird die Schriftart überhaupt nicht geladen.
Oder wie dandavis darauf hinweist, könnten Sie einfach ein style -Element am Ende von body verwenden, kurz vor dem schließenden </body> -Tag:
Das ist ungültiger HTML-Code, aber A) Ich habe noch nie einen Browser gefunden, der interessiert, und B) Wenn man es anschaut, sieht es so aus, als würden die Nightlies der HTML5-Spezifikation das if erlauben Sie fügen das Attribut scoped hinzu:
(Das Attribut scoped wurde aus der Spezifikation gezogen.)
Die Vorteile gegenüber JavaScript sind:
Theoretisch kann der Prefetch-Scanner des Browsers das style -Element finden und den Download früher starten (obwohl dies nicht besonders wahrscheinlich ist, wenn Sie das JavaScript in head setzen). und
Es funktioniert auch, wenn der Benutzer JavaScript deaktiviert hat.
Alternativ könnten Sie auch Ihr Element link an das Ende von body verschieben, aber das ist zur Zeit ungültig und das scoped -Attribut scheint (noch?) nicht zu gelten. (Warum sollte es auf style und nicht auf link[rel=stylesheet] angewendet werden? Ich habe keine Ahnung, und vielleicht ist es einfach eine Sache, noch nicht da zu sein ...)
Tags und Links javascript html css render google-font-api