Als ich meine Webseite mit PageSpeed Insights analysierte, las ich zum ersten Mal von Cumulative Layout Shifts (CLS). Das ist ein Maß dafür, wie sehr sich die Elemente einer Webseite beim Laden verschieben.
Das Problem tritt auf, wenn der Browser die Webseite schon anzeigt, bevor alle Elemente geladen sind.
In meinem Fall waren die Webfonts die Ursache des Problems. Die Webseite wurde mit den Standardschriften angezeigt und erst nach dem Laden der Webfonts wurden die Elemente mit der geladenen Font neu positioniert, was zu einem unschönen Verschieben der Elemente führte.
Webfont-Fallbacks #
Eine praktische Lösung hierzu sind Webfont-Fallbacks. Dabei werden die Standardschriften, die vor dem Laden der Webfonts für die Darstellung verwendet werden, so gewählt und manipuliert, das beim Austauschen möglichst wenig Verschiebung passiert.
Dabei spielen einige CSS-Attribute der verwendeten Fonts eine Rolle:
size-adjustascent-overridedescent-overrideline-gap-override
Im Artikel “Improved font fallbacks” von Katie Hempenius werden diese Attribute und ihr Einsatz sehr gut dargestellt. Im Prinzip kann man mit diesen vier Attributen eine Standardschrift, wie Arial, so manipulieren, dass sie der Webfont sehr ähnlich sieht und dabei fast den gleichen Platz einnimmt.
Die vier Werte manuell zu bestimmen ist tricky. Umso besser ist es, dass es den “Fallback Font Generator” von Brian Louis Ramirez gibt, wo man über Schieberegler die beiden Schriftarten (Standardschrift und eigene Webfont) übereinander lagern und manipulieren kann, bis beide sehr gut übereinstimmen.
Meine Hauptschriftart ist “Roboto” von Christian Robertson. Als serifenlose Schriftart ist die ähnlichste Standardschrift die “Arial”.
Initial sah mein CSS so aus:
body {
font-family: Roboto, Arial, sans-serif;
}
Arial ist aber nicht deckungsgleich zur Roboto, wodurch die Seite beim Laden der Webfonts verschoben wurde.
Mit dem Fallback Font Generator habe ich die vier Attribute so manipuliert, dass die Arial der Roboto sehr ähnlich sieht und dabei fast den gleichen Platz einnimmt.
@font-face {
font-family: 'Roboto-Fallback';
src: local(Arial);
size-adjust: 99%;
ascent-override: 91%;
descent-override: 23%;
line-gap-override: 5%;
}
body {
font-family: "Roboto", "Roboto-Fallback", sans-serif;
}
Referenzen & weiterführende Links #
- “Cumulative Layout Shift optimieren” von Addy Osmani und Barry Pollard über Cumulative Layout Shifts
- “Improved font fallbacks” von Katie Hempenius über die vier CSS-Attribute
size-adjust,ascent-override,descent-overrideundline-gap-override - “Fallback Font Generator” von Brian Louis Ramirez
- “Cumulative Layout Shift Debugger” in der SEO Toolbox