Verzögertes Laden von Webfonts und die font-display-Regel

  • Für Performance- und SEO-Nerds versus Ästhetik-Nerds.


    Heise hat die Entdeckung gemacht, dass ein allgemein übliches

    Code
    font-display: swap;

    beim Abfragen von Webfonts u.U. die Seitenladung (Performance) unangenehm beeinflussen kann, so, dass die Google-Search-Konsole diesbzgl. schlechte Werte ermittelt.


    Die Anweisung oben sorgt dafür, dass, wenn ein Webfont nicht sofort abgeholt werden kann, der Browser eine Fallback-Schriftart lädt, dann aber doch den Webfont nachlädt, wenn dieser bei weiteren Versuchen, die im Hintergrund stattfinden, erreichbar ist; was dazu führt, dass die WebSeite technisch ermittelt länger braucht, um fertig zu sein.


    Eine Anweisung

    Code
    font-display: optional;

    kann das Problem vermeiden. Wenn der Font nicht abholbar ist, wird nicht mehr im Hintergrund nach ihm gesucht. Er wird nicht mittendrin nachgeladen und Fallbackschriftarten werden verwendet.


    Selbstverständlich sind Aspekte wie Browser-/Server-Caches/Caches, in dem die Webfonts ggf. schon liegen, also gar nicht neu abgeholt werden müssen zu beachten, die den gefühlten und technischen Gewinn gegen 0 gehen lassen könnten, also schwer messbar und nachvollziehbar.


    Nur nebenbei erwähnt: Der Satz "Da AMP mittlerweile keine Vorteile mehr bietet...". Es hatten also mal wieder die Recht, die sich ohne Hektik auf die stetige Weiterentwicklung der Webtechnologien (Hard- und Software) verlassen, als auf irgendwelche sonderlichen und arbeitsintensiven Erfindungen der Google-Kontrolleties (und dazu dient AMP).


    Wie eine Zeile CSS den Cumulative Layout Shift bei 3700 URLs verbessert
    Mit einer kleinen Anpassung im CSS reduzierten wir die Layout Shifts bei heise tipps+tricks drastisch. Eine Spurensuche enthüllte die Ursache.
    www.heise.de


    font-display - CSS: Cascading Style Sheets | MDN
    The font-display descriptor for the @font-face at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.
    developer.mozilla.org