So verbessern Sie die Seitenleistung mit einem Schriftart geladen-js-Tutorial-php.cn

How to Improve Page Performance with a Font Loader

Zusammenfassung der Schlüsselpunkte

Die Verwendung eines Schriftartloaders kann die Leistung der Webseiten erheblich verbessern, da das Ladezeitpunkt und die Wege von Webseiten -Schriftarten steuern und damit die Ladezeit des Seitens verkürzt und "nicht styledes Text flackern" (FOUT) vermieden werden.
WebFontloader Die JavaScript -Bibliothek ist ein sehr nützliches Tool, mit dem Schriftarten aus verschiedenen Quellen im Hintergrund geladen werden können, nachdem die Seite geladen wurde, und die Anpassung des Ladevorgangs mithilfe von CSS- und JavaScript -Rückruffunktionen ermöglicht.
Die Schriftnutzung und die Benutzererfahrung müssen ausgeglichen sein. Daher kann die Verwendung von Schriftladern und die Implementierung alternativer Schriftarten dazu beitragen, eine reibungslose und schnelle Benutzererfahrung aufrechtzuerhalten.

Besonderer Dank geht an Jason Pondon für die Inspiration, die zum Schreiben dieses Artikels führte. Ansonsten könnte ich nie darüber nachdenken! Das letzte Mal, als Sie Arial, Times New Roman, Helvetica oder… (Chilling) auf einer Webseite verwendet haben… Wann war Comic Sans? Web -Schriftarten erscheinen zu spät, aber sobald sie erscheinen, schauen wir nie zurück. Schriftarten machen Spaß, (normalerweise) kostenlos und einfach zu implementieren:

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Nach dem Login kopieren

Sie können dann die Schriftart in Ihrer Seite verwenden, zum Beispiel:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

Nach dem Login kopieren

Schriftarten funktionieren auf mobilen Geräten ordnungsgemäß, sodass Benutzer eine gute Erfahrung in Ihrem reaktionsschnellen Webdesign erhalten. Oder ist es wirklich der Fall?

Nach dem Bild sind Schriftarten normalerweise die größte Ressource in der Webseite. Die Ubuntu -Schriftart oben fügt der Seite fast 250 KB hinzu, was auf langsameren Verbindungen des mobilen Netzwerks erkennbar ist. Chrome, dh, Safari und Opera lassen den leeren Platz, wenn die Schriftart geladen wird, sodass die Seite nicht verwendet werden kann. Firefox und ältere Versionen des Opera -Display -Textes in alternativen Schriftarten und Schalter - dies wird als nicht styledes Textblitz (FOUT) bezeichnet. Keine dieser Situationen ist ideal. Wir machen uns selten Sorgen über die Gewichtung von Schriftarten und machen Ausreden wie "Dies ist nur ein Problem mit der ersten Seite" oder "Viele Benutzer haben Gespenstgeforten". Wir können weniger verwendet werden. Nur wenige Menschen wagen es, offensichtliche Lösungen mit standardmäßigen Betriebssystemschriften zu übernehmen - unsere Kunden und Designer werden uns niemals verzeihen.

JavaScript WebFontloader

Zum Glück gibt es eine andere Option: WebFontloader. Diese JavaScript -Bibliothek kann nach dem Laden der Seite Schriftarten von Google, Typkit, Fonts.com, Fontdeck oder Ihrem eigenen Server im Hintergrund laden. Die Bibliothek selbst fügt der Seite zusätzliche 17 KB hinzu, wird jedoch auch als Hintergrundprozess heruntergeladen. Um die oben festgelegte Ubuntu -Schriftart zu laden

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Nach dem Login kopieren

Daher können wir bestimmen, ob einige oder alle Schriftarten basierend auf der Gerät und der Bandbreitenkapazität geladen werden. Im Idealfall können wir die Netzwerkinformations -API verwenden, aber der Browserunterstützung ist weiterhin begrenzt. Beachten Sie alternativ die Timeout -Einstellung in WebFontConfig.

CSS -Rückruffunktion

WebFontloader wendet den Klassennamen während des Betriebs auf das HTML -Element an:

.wf-loading - Alle Schriftarten sind angefordert
.wf-active - Alle Schriftarten sind verfügbar
.wf-inactive - kann keine Schriftarten

Klassenname wird auch auf jede Schriftart angewendet:

.wf-<familyname>-<fvd>-loading</fvd></familyname> - einzelne Schriftart
.wf-<familyname>-<fvd>-active</fvd></familyname> - verfügbar in einer einzelnen Schrift
.wf-<familyname>-<fvd>-inactive</fvd></familyname> - Eine einzelne Schrift kann

wobei <familyname></familyname> eine gereinigte Version des Schriftnamens ist, und <fvd></fvd> ist eine Variantenbeschreibung, wie z. B. I4 Kursivschrift von 400 Dicke darstellt. Auf diese Weise können wir die Schriftarten nach dem Download der Schriftart wechseln - genauso wie Firefox beispielsweise:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

Nach dem Login kopieren

JavaScript -Rückruffunktion

Ähnliche JavaScript -Rückruffunktionen können in WebFontConfig definiert werden, obwohl dies selten nützlich ist, wie z. B.

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

Nach dem Login kopieren

Weitere Informationen finden Sie in der WebFontloader -Dokumentation.

minimieren Sie Fout

Wenn sich Ihre alternative Schriftart in Bezug auf Stil, Dicke oder Abstand stark von Ihrer Webschrift unterscheidet, kann das Blinken des nicht styledierten Textes hart sein. Mit nur einem kleinen Experiment können Sie jedoch die alternative Schriftart, die Dicke, die Linienhöhe und die Ränder einstellen, um sicherzustellen, dass die Seitenelemente beim Laden der Web -Schriftarten ungefähr gleich bleiben ... siehe Craig Buckler auf CodePen (@craigbuckler) Artikel. " So verwenden Sie Schriftlader ".

Klicken Sie auf die Schaltfläche "Schriftart Schalten", um den Schriftschalt -Effekt der Schriftart anzuzeigen. Diese Änderung ist nicht ganz unerwünscht, aber es ist wichtig, dass Benutzer, wenn sie mit dem Lesen beginnen, nicht ihren Platz verlieren. Sie können jeder Seite eine Schaltfläche "Switch -Schrift" hinzufügen, um den entsprechenden alternativen Stil zu bewerten:

/* 默认操作系统字体 */
body {
    font-family: arial, sans-serif;
}

/* 字体现在已加载 */
.wf-active body {
    font-family: 'Ubuntu';
}

Nach dem Login kopieren

Kurz gesagt: Kurz gesagt: Die Schriftnutzung kann kostenlos sein, aber bitte versuchen Sie, die Kosten der Benutzer zu minimieren. Wenn Sie 1 MB Schriftdateien laden, eignet sich Ihr sorgfältig erstelltes Responsive Webdesign nicht für mobile Geräte!

(Folgendes ist der FAQ Häufig gestellte Fragen zur Verwendung von Schriftart Loader zur Verbesserung der Webseitenleistung

Was ist ein Schriftlader? Warum ist es wichtig für die Seitenleistung?

Schriftart geloder ist ein Tool, mit dem Sie steuern können, wie Web -Schriftarten auf Ihrer Website geladen werden. Es ist wichtig für die Seitenleistung, da es dazu beitragen kann, die Ladezeit der Website zu verkürzen. Wenn die Webseite geladen wird, muss der Browser alle erforderlichen Ressourcen, einschließlich Schriftarten, herunterladen. Wenn die Schriftart groß oder groß ist, verlangsamt dies die Ladezeit der Seite. Mit Schriftladern können Sie steuern, wie und wie diese Schriftarten geladen werden, was Ihre Seitenleistung erheblich verbessern kann.

Wie verbessert der Schriftlader die Seitenleistung?

Schriftlast verbessert die Seitenleistung, indem Sie das Laden von Webschriften steuern. Sie können asynchron Schriftarten laden, was bedeutet, dass sie das Rendern für den Rest der Seite nicht blockieren. Dies kann die Zeit, die die Seite benötigt, um interaktiv zu werden. Darüber hinaus kann der Schriftlader dazu beitragen, das Phänomen des "nicht styierten Textes flackern" (FOut) zu verhindern, wobei der Browser alternative Schriftarten anzeigt, während die Web -Schriftart noch geladen wird.

Was sind die häufig verwendeten Schriftlader?

Es stehen mehrere häufig verwendete Schriftlader zur Verfügung, darunter den WebFont Loader von Google und den WebFont Loader von Typekit. Beide Tools bieten mehrere Optionen, um zu steuern, wie Web -Schriftarten geladen werden. Es gibt auch einige WordPress -Plugins (z. B. Entwicklungsgoogle -Schriftarten), die das Laden von Schriftarten auf Ihrer Website problemlos implementieren können.

So implementieren Sie einen Schriftartader auf meiner Website?

Implementieren eines Schriftartaders auf Ihrer Website müssen normalerweise ein Skript zu Ihrem HTML hinzugefügt werden. In diesem Skript lädt der Schriftart geladen und Sie können dann die API des Schriftladers verwenden, um zu steuern, wie Web -Schriftarten geladen werden. Der genaue Vorgang kann je nach Verwendung des von Ihnen verwendeten Schriftladers variieren. Es ist daher besser, auf die Dokumentation für bestimmte Anweisungen zu verweisen.

Kann ich den Schriftart geladen mit einer Webschrift verwenden?

Die meisten Schriftlader sind mit jeder Webschrift kompatibel, solange die Schriftart so gehostet wird, dass der Schriftart geladen wird. Dies beinhaltet selbst gehostete Schriftarten und Schriftarten, die von Schriftarten wie Google-Schriftarten oder Typkit gehostet werden.

beeinflusst die Verwendung eines Schriftladers das Erscheinungsbild meiner Schriftarten?

Die Verwendung eines Schriftladers kann das Erscheinungsbild Ihrer Schriftarten beeinflussen, da dies dazu beitragen kann, Fout zu verhindern. Es sollte jedoch nicht das tatsächliche Design oder Stil der Schriftart ändern. Wenn Sie Änderungen im Erscheinen der Schriftart nach der Implementierung des Schriftladers feststellen, kann dies auf Konfigurationsprobleme zurückzuführen sein.

Was ist "nicht styled text blinking" (fout)? Wie verhindert ein Schriftlader dies?

fout ist ein Phänomen, bei dem der Browser alternative Schriftarten anzeigt, wenn die Webschriftart noch geladen wird. Dies kann dazu führen, dass ein kurzes Text flackern wird, wobei die Schriftart von der endgültigen Schriftart unterscheidet, was den Benutzer unwohl fühlen kann. Schriftlader verhindern Fout, indem Sie steuern können, wenn Sie Web -Schriftarten auf Text anwenden. Sie können beispielsweise den Text ausblenden, bis die Web -Schriftart geladen ist, oder Sie können den Text in der alternativen Schriftart anzeigen und nach dem Laden der Webschrift ersetzen.

Kann Schriftartader die SEO meiner Website verbessern?

Ja, Schriftlader können die SEO Ihrer Website verbessern, indem sie die Ladenzeit verkürzen. Die Ladezeit von Seite ist ein Faktor, den Suchmaschinen beim Ranking von Websites berücksichtigen, sodass Sie alles tun können, um sie zu reduzieren, was Ihre SEO verbessern kann.

Gibt es Nachteile bei der Verwendung eines Schriftladers?

Ein potenzieller Nachteil der Verwendung eines Schriftartaders ist, dass er die Komplexität des Website -Codes erhöhen kann. Die Vorteile einer verbesserten Seitenleistung und Benutzererfahrung überwiegen jedoch häufig diesen Nachteil. Darüber hinaus haben viele Schriftlader eine gute Dokumentation und Unterstützung, was sie relativ einfach zu implementieren.

Wie kann ich feststellen, ob der Schriftart geladen meine Seitenleistung verbessert?

Sie können verschiedene Tools verwenden, um Ihre Seitenleistung vor und nach der Implementierung des Schriftartsladers zu messen. Diese Tools können Metriken wie die Ladezeit von Seiten, die erste Zeichnenzeit und die interaktive Zeit bereitstellen, mit denen Sie die Auswirkungen des Schriftartaders quantifizieren können. Einige häufig verwendete Tools zur Leistungsmessung umfassen den Leuchtturm von Google und WebPagetest.

Das obige ist der detaillierte Inhalt vonSo verbessern Sie die Seitenleistung mit einem Schriftart geladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!