Wie verbessert die Optimierung von Webfonts die Core Web Vitals?

Kurze Antwort: Fonts wirken an zwei Stellen auf die Core Web Vitals: Eine spät geladene Schrift verzögert das Rendern des Textes und vergrößert den LCP; der Wechsel von der Fallback-Schrift zur Webfont verschiebt Zeilen und erzeugt CLS. Optimierung beseitigt beide Kosten.

Umsetzungsliste

• Nur WOFF2 ausliefern; Familien und Schnitte reduzieren, wenn möglich auf eine Variable Font wechseln.
• Subsetting anwenden: per unicode-range nur den genutzten Zeichenvorrat senden; Umlaute und ß müssen nachweislich im Subset enthalten sein.
• Fonts von der eigenen Domain ausliefern; die kritische Schrift per Preload vorziehen, damit die Entdeckungsverzögerung entfällt.
• font-display bewusst wählen: Bei swap die Fallback-Metriken mit size-adjust und ascent-override an die Webfont angleichen; genau dieser Wechsel ist die CLS-Quelle.
• Ist das LCP-Element ein Text, hat die Schrift, die ihn zeichnet, Vorrang.

Messen Sie zweistufig: mit den Font-Prüfungen von Lighthouse beginnen, die reale Wirkung an den LCP- und CLS-Verteilungen in CrUX validieren. Googles veröffentlichte Schwellen: LCP unter 2,5 Sekunden, CLS unter 0,1.