Website-Optimierung ist von entscheidender Bedeutung für ein gutes Ranking bei Google und anderen Suchmaschinen. Und wenn Sie mit dem Rest der Welt konkurrieren, zählt jede Millisekunde. Das Aufschieben des Ladens der Schriftarten Ihrer Website kann Ihnen einen leichten Schub geben.
Webschriftarten blockieren das Rendern
Wenn eine Ressource das Rendern blockiert, muss sie geladen werden, bevor Ihre Site ihren ersten Contentful Paint erreicht. Renderblockierende Ressourcen sollten für jede optimierte Website auf ein absolutes Minimum beschränkt werden.
Der Nachteil hier ist offensichtlich,—wenn ein Client zusätzliche Ressourcen laden muss, bevor Ihre Site geladen wird, muss er eine besonders sichere Verbindung und einen TCP-Handshake herstellen, bevor er überhaupt mit dem Herunterladen der Renderblocking-Ressource beginnt, die hinzufügen kann Hunderte von Millisekunden Ladezeiten auf dem Handy. Wenn Sie große blockierende Ressourcen laden, legen Sie auch Ihre Ladezeiten dem anderen Host aus.
Die Lösung besteht darin, die Handhabung der Schriftarten zu ändern. Standardmäßig sind Schriftarten nicht optional und der gesamte Text wird blockiert, bis er mit der richtigen Schriftart gerendert werden kann. Alle Benutzer haben jedoch Standardschriftarten wie Arial und Times New Roman installiert, sodass es möglich ist, diese Schriftarten zuerst anzuzeigen und dann nach dem Laden zur Webschriftart zu wechseln.
Sie können Geben Sie dieses Verhalten in Ihrer @font-face-Anweisung mit dem Parameter font-display an:
@font-face { font-display: swap; } Werbung
Wenn Sie jedoch Google Fonts verwenden, wird die font-face-Anweisung in der CSS-Datei definiert, die Sie zum Hinzufügen der Schriftart erhalten. Daher können Sie es nicht direkt bearbeiten, aber zum Glück hat Google kürzlich die Unterstützung für die Schriftartanzeige hinzugefügt: Swap in der API. Sie sollte standardmäßig festgelegt werden, wenn Sie eine neue Schriftart hinzufügen. Wenn Sie die Schriftart jedoch vor einiger Zeit hinzugefügt haben, können Sie sie aktualisieren, indem Sie am Ende den &display=swap URL-Parameter hinzufügen:
https ://fonts.googleapis.com/css?family=Lobster&display=swap
Das ist alles, was Sie tun müssen. Sobald die Schriftart auf Swap eingestellt ist, wird die Renderblockierung beendet. Möglicherweise stellen Sie fest, dass Ihre Site in der Standardschrift geladen wird, bevor Sie schnell zur aktualisierten Schriftart wechseln. Um dieses Problem zu minimieren, suchen Sie eine Standardschriftart, die Ihrer Haupt-Webschriftart am ehesten entspricht. Die meisten Desktop-Benutzer werden dies wahrscheinlich nicht zusammen mit dem Rest des Seitenladens bemerken. Wenn der Benutzer jedoch eine langsame mobile Verbindung verwendet, bemerken sie möglicherweise, dass die Schriftart eine Sekunde später eingeblendet wird.
Wenn Sie nicht versuchen, jede Millisekunde Leistung herauszuholen, können Sie eine andere Option verwenden: Die Option font-display: fallback rendert Block für eine kurze Zeit (in den meisten Browsern nicht länger als 100 ms), dann greifen Sie auf das Swapping zurück, wenn die Schriftart geladen wird. Dies beseitigt das Blinkproblem für die meisten Desktop-Benutzer mit guten Verbindungen, fügt jedoch im schlimmsten Fall eine Ladezeit von ~100 ms (browserabhängig) hinzu, wenn die Schriftart nicht rechtzeitig geladen wird.
Schriften.gstatic.com vorab verbinden
Dieser Tipp hat keinen Einfluss auf den Rendering-Blockierungs-Aspekt von Webfonts, beschleunigt aber insbesondere Google Fonts.
Wenn ein Client eine Ressource von einem anderen Ursprung abrufen muss, muss er einen TCP-Handshake durchführen und (falls die Site in diesem Jahrzehnt erstellt wurde) eine sichere HTTPS-Verbindung herstellen. Dies nimmt Zeit in Anspruch, daher werden die Downloads durch unnötige Roundtrips verlangsamt.
Genau das tun Google Fonts. Zuerst wird das CSS-Stylesheet von fonts.googleapis.com mit allen Informationen zu den Schriftarten geladen. Der src-Parameter der Schriftart wird dann gelesen und der Client verbindet sich mit fonts.gstatic.com, um die Schriftart herunterzuladen. Das Problem dabei ist, dass die gewünschte Schriftartdatei hinter dem CSS-Stylesheet auf einem anderen Ursprung liegt.
Werbung
Um dieses Problem zu lösen, können Sie preconnectfonts.gstatic.com verwenden. Preconnecting ist eine spezielle Linkoption, die den Browser anweist, den HTTPS-Handshake durchzuführen, bevor ihm ein Link zum Öffnen gegeben wurde. Dadurch wird die Latenzzeit bei der Durchführung von zwei Roundtrips wie diesem erheblich verkürzt.
Sie können mit dem folgenden Link-Tag eine Preconnect-Verbindung herstellen:
<link rel=”preconnect” href=”https://fonts.gstatic.com/” Crossorigin>
Der Parameter crossorigin weist den Browser an, einen HTTPS-Handshake statt einer einfachen DNS-Suche (das Standardverhalten) durchzuführen.
Wenn Sie selbst Schriftarten bereitstellen, möchten Sie um sicherzustellen, dass Ihre Cache-Control-Header richtig eingestellt sind, damit Ihre Schriftarten beim erneuten Besuch eines Nutzers aus dem Cache geladen werden. Sie können auch die Verwendung eines CDN in Betracht ziehen, wenn Sie Schriftarten selbst hosten möchten, da dies die Latenz bei statischen Objektanforderungen verringert.