iomedia
insider
die Neuigkeiten von iomedia!
Wenn Schriftarten die Leistung einer Website beeinflussen
Nun, da das Projekt sich dem Ende zuneigt, wurde jede Optimierung sorgfältig ausgearbeitet, um eine optimale Leistung zu gewährleisten. Dann ist es an der Zeit, die endgültige Schriftart des Kunden zu integrieren...
Die Feststellung
Schon eine einfache Änderung reicht aus, um die Leistungswerte deutlich zu verschlechtern. Dies ist ein Problem, auf das wir bei den Projekten unserer Kunden regelmäßig stoßen.
In vielen Fällen handelt es sich bei den verwendeten Schriftarten um maßgeschneiderte Fonts, die ausgewählt wurden, um einer Markenidentität gerecht zu werden. Sie sind selten für das Web optimiert und komplexer zu laden.
Wenn sie schwer sind, erscheint der Text und verändert sich dann. Die Zeilen verschieben sich, die Blöcke passen sich an. Dieses Phänomen, das oft unauffällig ist, aber für Tools zur Leistungsanalyse problematisch darstellt, wird durch den CLS (Content Layout Shift) gemessen, insbesondere über Google Lighthouse.
Die Folgen sind konkret:
- Eine verschlechterte Benutzererfahrung
- Ein Rückgang der Leistungswerte
Der Ursprung des Problems
Selbst bei Anwendung der empfohlenen Best Practices muss der Browser zunächst eine temporäre Schriftart anzeigen und erst dann die endgültige Schriftart anwenden, sobald diese geladen ist.
Dieser Übergang führt zu visuellen Verschiebungen, die direkt für den CLS verantwortlich sind.
Unser Ansatz
Anstatt nur darauf abzuzielen, das Laden zu beschleunigen, haben wir uns dafür entschieden, an der Wahrnehmung zu arbeiten.
Das Ziel ist einfach: Jegliche visuelle Unterbrechung bereits bei der ersten Anzeige zu vermeiden. Dazu sorgen wir dafür, dass die zuerst angezeigte Schriftart bereits sehr nah am endgültigen Ergebnis liegt.
Umsetzung
Dieser Ansatz basiert auf mehreren Prinzipien:
Hosting und Verwaltung der Schriftarten direkt auf der Website, auch für Google- oder Adobe-Schriftarten, um die Kontrolle zu behalten
Verwendung von Systemschriftarten als Fallback, ohne zusätzliches Laden
Präzise Anpassung der Metriken (Höhe, Breite, Abstand) der Fallback-Schriftart, um sie optisch an die endgültige Schriftart anzunähern
Ergebnis
Der Inhalt wird sofort und ohne Unterbrechung angezeigt, und der Übergang ist kaum wahrnehmbar. Dies führt zu:
Eine deutliche Verringerung des CLS
Eine Verbesserung der Leistungswerte
Ein stabileres und qualitativ hochwertigeres Nutzererlebnis
Fazit
Diese Optimierungen bleiben oft unbemerkt, sowohl für den Nutzer als auch für den Kunden. Doch gerade diese kleinen Anpassungen verbessern die wahrgenommene Qualität einer Website tatsächlich.
Bei uns sind sie ein fester Bestandteil unseres Ansatzes: an diesen unsichtbaren Details zu arbeiten, um von Anfang an ein reibungsloses Erlebnis zu gewährleisten. Es sind diese unauffälligen Optimierungen, die den Unterschied ausmachen.