Bericht von der SmashingConf Freiburg 2023 🥨

Zu Beginn des neuen Schuljahres besuchte ich eine Konferenz, die vom Smashing Magazine in Freiburg organisiert wurde. Einer der Hauptsponsoren war die Firma SpeedCurve, deren Tool wir bei PageSpeed.ONE häufig zur Überwachung der Webseiten unserer Kunden verwenden.

Die gesamte Konferenz ist eher auf Frontend-Entwicklung, CSS und Webdesign ausgerichtet als auf Web-Performance, aber einige Vorträge und Präsentationen waren auch für meine Arbeit bei PageSpeed.ONE höchst nützlich.

WarmUp mit der INP-Metrik

Gleich am Sonntag nach unserer Ankunft nahmen wir an einem kleinen Workshop teil, der von Andy Davies geleitet wurde. Andy ist Performance-Berater bei SpeedCurve und es lohnt sich, ihm auf der Plattform X (Twitter) zu folgen, wo er wertvolle Tipps aus dem Bereich der Performance (Webgeschwindigkeit) gibt.

Im Workshop führte uns Andy in die neue INP-Metrik ein, die im März 2024 die derzeitige FID-Metrik aus der Kollektion der Core Web Vitals ersetzen wird. Nach einer kurzen Einführung erfuhren wir, wie man die INP-Metrik misst, die Schwachstellen einer Webseite findet und einige Tipps, wie man die INP-Metrik verbessern kann.

Hier sind einige grundlegende Ratschläge und Tipps.

• Die INP-Metrik ist eng mit der Total Blocking Time verbunden.
• Je weniger DOM-Elemente Sie haben, desto besser ist die Total Blocking Time.
• Wenn Sie die Messung von realen Benutzern auf der Webseite (RUM) eingerichtet haben, können Sie Probleme mit INP über das Tool SpeedCurve finden.
• INP auf einzelnen Webseiten können Sie auch über die Google Search Console finden.

Falls Sie nicht die Möglichkeit haben, alle Benutzer auf der Webseite zu messen, können Sie Probleme mit INP manuell suchen.

Der Ablauf ist etwa folgendermaßen:

• Öffnen Sie ein anonymes Browserfenster. Aktivierte Plugins könnten die Messung beeinflussen.
• Öffnen Sie DevTools.
• Aktivieren Sie in der Registerkarte Performance die Aufnahme von Timeline und versuchen Sie, die Webseite zu durchklicken, zu scrollen und andere Interaktionen durchzuführen.
• Auf der Timeline sehen Sie dann die einzelnen Interaktionen und wichtige Informationen dazu.
• Besonders interessieren uns die Long Tasks, die nach Interaktionen entstehen.
• Diese Long Tasks müssen anschließend analysiert, aufgeteilt oder verschoben werden.

Wie Sie weitere Metriken der Core Web Vitals testen können, erfahren Sie auch in unserem Artikel von Zuzana Šumlanská.

Erster Konferenztag

Am ersten Tag verfolgten wir Vorträge zu Designsystemen, Barrierefreiheit im Web, neuen CSS-Eigenschaften und Neuigkeiten in den Chrome-DevTools.

Jecelyn Yeen zeigte in ihrem Vortrag „Modern Web Debugging“ viele Tipps aus den DevTools. Besonders beeindruckt hat mich die Registerkarte Quick Source, die eine schnelle Vorschau auf Dateien bietet, die Sie direkt über die Funktion Overrides auf Ihrer lokalen Festplatte bearbeiten können.

Sie aktivieren die Registerkarte über den Befehl Cmd+Shift+P und schreiben „Quick Source“.

Ein weiterer Tipp, der mir auffiel, ist die Möglichkeit, eine Abfolge von Befehlen auf der Webseite mit der Funktion Recorder aufzuzeichnen. Dies ermöglicht das Senden im JSON-Format an einen Kollegen, der die Befehlskette dann abspielen kann.

Wie eine solche Aufzeichnung abläuft, zeigt Jecelyn in ihrem YouTube-Video.

Zweiter Konferenztag

Am zweiten Tag erwarteten uns technischere Vorträge. Zum Beispiel präsentierte Christine Vallaure in ihrem Vortrag „Design Beyond Breakpoints“ viele Neuigkeiten aus dem Grafik-Tool Figma. Miriam Suzanne zeigte in ihrer Präsentation, was alles in CSS mit Container Queries möglich ist und welche Eigenschaften noch in Planung sind.

Zur Mittagszeit gab es die Möglichkeit, sich für einen weiteren Mini-Workshop mit Andy Davies anzumelden. In seinem einstündigen Vortrag zeigte Andy diesmal die häufigsten Fehler, die die Core Web Vitals beeinträchtigen. Aus dem Publikum wählte er drei Webseiten aus und zeigte direkt deren Mängel auf. Es handelte sich meist um sich wiederholende Probleme, die die Metriken LCP und CLS verschlechtern.

Worauf sollten Sie also bei Ihrer Webseite achten?

• Verwenden Sie nicht zu viele externe Webfonts.
• Für Webfonts verwenden Sie ausschließlich das Format Woff2.
• Setzen Sie kein Lazy Loading auf ein Bild, das ein LCP-Element ist und so schnell wie möglich geladen werden muss.
• Nutzen Sie Priority Hints. Fügen Sie dem Bild, das Sie priorisieren möchten, den Parameter fetchpriority="high" hinzu und erhöhen Sie so seine Download-Priorität.
• Verzögern Sie das Laden und Verarbeiten unnötiger Javascript-Dateien.
• Achten Sie darauf, dass alle Bilder die Dimensionen width und height angegeben haben.

Es war eine schöne und praktische Demonstration, dass auch kleine Anpassungen die Metriken der Core Web Vitals LCP und CLS schnell verbessern können.

Die Konferenz fand in der wunderschönen historischen Stadt Freiburg im Westen Deutschlands statt. Die Abende verbrachten wir mit dem Probieren von lokalem Bier und deutscher Küche. Alles war ausgezeichnet und ich freue mich schon jetzt auf eine weitere gemeinsame Konferenz.

Tags:INPCore Web Vitals