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.
(Bild: Olivier Le Moal/Shutterstock.com)
Im Sommer vergangenen Jahres stellten wir die Technik der tipps+tricks auf heise online um. Das Angebot ist vor einigen Jahren als reine AMP-Seite gestartet und baute daher auf einer komplett anderen Technik als unser sonstiger Tech-Stack auf. Da AMP mittlerweile keine Vorteile mehr bietet, wollten wir tipps+tricks in unsere standardmäßige Technikbasis integrieren. Das gelang auch – scheinbar – ohne größere Probleme.
Search Console
Die Google Search Console war hingegen nicht ganz unserer Meinung: nahezu alle URLs von tipps+tricks wurden auf einmal mit einer weitaus schlechteren Performance gelistet. Allen voran war hier der Cumulative Layout Shift (CLS) das Sorgenkind Nummer Eins. Diese Web-Performance-Metrik gibt an, wie sehr Elemente einer Seite springen, ohne dass die User mit ihnen interagiert haben. Das bedeutet, eine Layout-Verschiebung aufgrund eines Klicks ist in Ordnung, eine Layout-Verschiebung, die einfach so beim Scrollen auftritt, ist nicht in Ordnung – und wirkt sich je nach Intensität negativ auf den CLS aus.
Der Unterschied
Irritierend an den Messdaten der Search Console war, dass tipps+tricks ja nun auf derselben Technik wie alle anderen Artikel bei heise online lief, die anderen Artikel das CLS-Problem aber nicht zeigten. Was war also anders bei tipps+tricks? Als wir auch nach weiteren Kontrollen bei der Technik zunächst nichts ausmachen konnten, kamen wir schließlich doch noch auf den entscheidenden Unterschied: Das User-Verhalten ist ein anderes. Das bedeutet natürlich nicht, dass User in irgendeiner Form "schuld" sind, sondern lediglich, dass unsere Betrachtung des Problems von einer falschen Annahme ausging.
User-Verhalten
Bei den News-Beiträgen auf heise online kommen User häufig wieder oder bleiben gleich länger auf der Seite, um mehrere Beiträge von einer Übersichtsseite aus zu öffnen und zu lesen. Sie sehen das Consent-Banner einmalig, klicken es weg und nehmen dann noch etliche weitere Seitenaufrufe vor. Dabei ist der Seitenaufruf mit dem Consent-Banner nur einer von vielen pro User-Session.
Bei tipps+tricks ist das anders. Beiträge von tipps+tricks bieten für konkrete Fragen direkte Antworten, kleine Tutorials und Schritt-für-Schritt-Anleitungen. User landen bei tipps+tricks häufig direkt aus der Google-Suche, wo sie ihre Frage eingegeben haben. Der erste Aufruf landet vor dem Consent-Banner, der wird weggeklickt, die Seite lädt neu und der nächste Aufruf dient dazu, den Inhalt zu lesen. Anschließend sind die User erst einmal wieder weg. Das ist für diese Art von Inhalten auch gar nicht ungewöhnlich, verleiht dem Aufruf mit dem Consent-Banner aber ein viel höheres Gewicht. Aber was hat eigentlich das Consent-Banner mit dem CLS zu tun?
Web-Fonts
In unserem Consent-Banner laden wir dieselbe Schrift, die wir auf heise online verwenden. Aufgrund der Architektur ist das Consent-Banner aber ein iFrame von einer Subdomain. Der dort eingebundene Web-Font kann nicht von einem Cache von www.heise.de profitieren und lädt den Font erneut. Als Font-Loading-Strategie setzten wir im Consent-Banner bisher auf font-display: swap;. Das bedeutet, dass der Browser kurze Zeit mit dem Rendern auf den Web-Font wartet, dann aber auf jeden Fall die Schrift mit einem Fallback-Font rendert. Die Schrift wird jedoch abermals mit dem Web-Font neu gerendert, sobald dieser zur Verfügung steht.
Das heißt, im Consent-Banner gab es durch das Font-Loading überdurchschnittlich häufig einen Layout-Shift – besonders bei langsameren Verbindungen. Dieser Umstand ist jedoch bisher nicht sonderlich ins Gewicht gefallen. Bei tipps+tricks war das durch das geänderte User-Verhalten nun aber deutlich anders.
Die Lösung
Nachdem wir das Problem eingegrenzt hatten, war die Lösung einfach: Aus font-display: swap; wurde font-display: optional;. Das führt dazu, dass der Browser nur noch ganz kurz auf den Web-Font wartet, dann definitiv die Schrift darstellt und anschließend auch nicht mehr wechselt. In der Search Console starteten wir eine Überprüfung der Problembehebung und wenige Wochen später sah die Grafik schließlich ganz anders aus (siehe Abbildung). Übrigens fiel die Verbesserung, ebenso wie das Problem zuvor, auf den anderen heise online-Seiten nicht sonderlich ist Gewicht, obwohl wir die Optimierung natürlich auch hier vornahmen.
(map)