Responsive Web Font Loading, eine neue Strategie

Optimierung des Ladens von Schriftarten für langsamere mobile Geräte mit responsivem Preloading und responsiven Font-Face-Deklarationen

Arjen Karel - linkedin

Last update: 2024-11-28

Responsive Font-Anzeige & responsive Preloading-Schriftartenstrategie

Als Core Web Vitals Spezialist sehe ich jeden Tag verschiedene kreative Lösungen. Die meisten ergeben nicht viel Sinn, aber hin und wieder stoße ich auf eine Strategie, die so einfach und so elegant ist, dass sie für bestimmte Websites Sinn macht.

Dieser Artikel erklärt, wie man responsives Schriftarten-Preloading für Desktops zusammen mit font display:optional implementiert, um den Flash Of Unstyled Text (FOUT) zu eliminieren, während für Mobilgeräte das 'Standardladen' der Schriftart und font-display: swap verwendet wird.

Tipp: Diese Strategie funktioniert gut für Websites mit einem größeren Critical Rendering Path.

Das Problem mit frühem Laden von Schriftarten

Bei der Optimierung der Core Web Vitals gibt es eine einfache Regel, die immer gilt:
"Alles, was Sie vor dem Largest Contentful Paint tun, verlangsamt diesen Largest Contentful Paint".

Dieses Prinzip gilt auch für Web Fonts. Die Priorisierung des Ladens von Web Fonts während des Seitenladens kann die Benutzererfahrung verbessern, aber wenn Ihre Website Schwierigkeiten hat, die Core Web Vitals Schwellenwerte zu erreichen, insbesondere für bestimmte Gerätetypen, müssen Sie UX gegen die Verbesserung des LCP abwägen.

Lassen Sie uns das folgende Beispiel einer niederländischen Zeitungswebsite betrachten. Auf einem mobilen Gerät werden 3 Schriftarten vor dem LCP-Element eingereiht. Dies lässt die 3 Schriftarten um frühe Netzwerkressourcen konkurrieren und das Bild-Timing nach hinten verschieben.

Responsive Schriftartenstrategie zur Rettung!

In Fällen wie diesem, wo es viel Konkurrenz um frühe Netzwerkressourcen gibt, ist es sinnvoll, zwischen Gerätetypen zu unterscheiden. Typischerweise können schnellere Desktop-Geräte an kabelgebundenen (und schnelleren Netzwerkverbindungen) mehr frühe Netzwerkressourcen auf einmal verarbeiten und es macht absolut Sinn, einige kritische Schriftartdateien vorzuladen.

Mobile Geräte hingegen werden möglicherweise auf dem Weg zur Arbeit unter weniger als optimalen Netzwerkbedingungen verwendet. Mobile Geräte haben auch oft langsamere CPUs und weniger verfügbaren Speicher im Vergleich zu Desktops. Diese Einschränkungen bedeuten, dass eine unterschiedliche Behandlung des Ladens von Schriftarten je nach Gerätetyp sinnvoll sein kann.

Desktop: Das Vorladen von Schriftarten verbessert die Renderleistung auf Geräten mit besserer Bandbreite und Rechenleistung. Verwenden Sie font-display: optional, um Blockierungen zu minimieren und Font-Swapping-Probleme zu beseitigen. Dies stellt sicher, dass die Schriftart nur verwendet wird, wenn sie innerhalb von 100 ms nach der Anforderung verfügbar ist, während Preloading sicherstellt, dass das Ziel getroffen wird.
Mobil: Laden Sie die Schriftart aufgrund von Netzwerkkonkurrenz nicht vor. Verwenden Sie font-display: swap für schnelleres Textrendering. Dieser Ansatz zeigt Fallback-Schriftarten sofort an, während die benutzerdefinierte Schriftart im Hintergrund weiter lädt, was eine bessere Erfahrung auf weniger leistungsstarken Geräten bietet.

Implementierung mit <link rel="preload"> und Media Queries

Anstatt die Schriftart universell zu laden, können Sie das media Attribut im <link> Tag des HTML zusammen mit CSS verwenden, um unterschiedliche Schriftartenstrategien basierend auf Gerätetypen anzuwenden.

HTML-Struktur

<head>

  <!-- Schriftart nur für Desktop vorladen -->
  <link rel="preload" href="/fonts/custom-font.woff2" 
        as="font" crossorigin="anonymous" 
        media="(min-width: 768px)">

  <style>
    /* Globale Schrifteinstellungen */
    @font-face {
        font-family: 'CustomFont';
        src: url('/fonts/custom-font.woff2') format('woff2');
        font-display: swap;
    }

    /* Desktop Schrifteinstellungen */
    @media (min-width: 767px) {
      @font-face {
        font-display: optional;
      }
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

Vorteile dieses Ansatzes

Fokus auf Desktop UX: Desktop rendert sofort mit der Web Font, wodurch FOUT oder FOIT verhindert wird.
Fokus auf mobile Leistung: font-display: swap stellt sicher, dass Benutzer Text sofort sehen, auch wenn die benutzerdefinierte Schriftart noch nicht geladen ist.
Deklarative Einfachheit: Vermeidet JavaScript, reduziert Komplexität und verbessert die Wartbarkeit.

Anwendungsfall aus der realen Welt

Wie in der Einleitung erzählt: Diese Strategie basiert auf einem Beispiel aus der realen Welt, auf das ich gestoßen bin. Eine E-Commerce-Website, die sich sowohl an Desktop- als auch an mobile Benutzer richtet, implementierte diese Strategie. Das Ergebnis:

Desktop: Verbesserter CLS und UX mit gestylten Schriftarten, die fast sofort erscheinen.
Mobil: Schnellerer First Contentful Paint und Largest Contentful Paint stellten eine schnelle Benutzererfahrung sicher, auch auf langsameren Verbindungen.

CrUX data is 28 days late.

Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.

Get Real-Time Data >>

Real-Time Insights
Faster Debugging
Instant Feedback