Glühwein, Lebkuchen, Performance-Quiz: Rückblick auf das CGNwebperf Meetup #25

Dieses Jahr habe ich ziemlich viele Meetups zu ganz unterschiedlichen Themen besucht. Mich reizen dabei der Blick über den “Tellerrand” der eigenen Projekte und der fachliche Austausch über Firmengrenzen hinweg – und ich lasse mich gerne überraschen und inspirieren.

Was die Web-Entwicklung angeht, hat sich in den letzten Jahren eine Menge verändert, aber man sollte nicht vergessen, dass neben React und ES6 immer noch viele Websites mit klassischen Technologien betrieben werden, die uns auch noch viele weitere Jahre begleiten werden.

Diese Vielfalt zeigte auch das breite thematische Spektrum der sieben Kurzvorträge beim Nikolaus-Special des Cologne Web Performance Meetups. Hier gab es Anwendungsbeispiele mit React, Preact, PHP sowie ganz allgemein zu diversen HTTP-Headern und Metriken.

Performance im Zeitalter von React, Preact, und PHP

So gesehen war der Talk “CMS & Performance” von Thorsten Reiter ein gutes Beispiel dafür, welches Optimierungspotenzial oft in klassischen PHP-basierten Projekten steckt, und wie man mit einem Varnish-Cache und Edge-Side-Includes (ESI) die Performance deutlich verbessern kann.

Ähnlich wie ein Varnish-Cache ist auch der Einsatz von HTTPS und HSTS eine Verbesserung, die relativ unabhängig vom nachgelagerten Technologie-Stack eingeführt werden kann. Bei der Recherche zu meinem Vortrag “HSTS – Improving Security without Losing Performance” zur richtigen Verwendung des HTTP-Headers Strict-Transport-Security habe ich den Vortrag “Is TLS fast yet?” von Ilya Grigorik wiederentdeckt und konnte feststellen, dass u. a. mit TLS 1.3 und HTTP/2 viele gute Ideen zum Standard geworden sind und dass es 2018 keine Ausrede mehr geben sollte, kein HTTPS zu verwenden.

Web-Entwicklung findet gegenwärtig gerne mithilfe von Frameworks wie React, Angular oder Vue.js statt. Damit dies nicht zu Lasten von Web Performance und Barrierefreiheit geht, kann man zusätzlich zum clientseitigen Rendering statische Dokumente auf dem Server erzeugen. In komplexen Single Page Applications mit User Login ergeben sich dabei Herausforderungen, über deren Lösung mein Kollege Ole Bläsing in seinem Talk zum “Prerendering mit Puppeteer” berichtete.

Code Golf und Client Hints gegen Funklöcher

Um React ging es auch im dritten Vortrag dieses Abends, und zwar konkret um die kleine, feine Variante Preact, deren Entwickler sich das ehrgeizige Ziel gesetzt haben, die anstehende Version X wieder mit weniger als 3 KB (gezippt) auszuliefern. Marvin Hagemeister, der bei uns als Developer arbeitet und einer der Core Developer von Preact ist, zeigte uns in seinem Talk diverse Details, die dazu dienen, nicht nur Dateigröße, sondern auch Ausführungsgeschwindigkeit zu optimieren. Dass es sich dabei nicht nur um “Code Golf” handelt, machte der Berufspendler Marvin anhand der bekannt schlechten Internetverbindung auf den Bahnstrecken zwischen Wuppertal, Düsseldorf und Köln deutlich.

Die Netzverfügbarkeit war auch später am Abend nochmal Thema. Ich habe eine App der Bundesnetzagentur, die fast überall in NRW 3G, gelegentlich 2G, aber bisher noch kein einziges Funkloch gefunden hat. Allerdings führt schon der schnelle Wechsel von Funkzellen dazu, dass die tatsächlich nutzbare Netzwerkleistung deutlich schlechter als der scheinbar verfügbare Standard ist. Und genau das sollte man auch bei Entwicklung und Testing von Websites nicht vergessen.

Tatsächlich könnten wir, wenn wir wollten, einiges über die Netzwerkanbindung der meisten unserer Nutzer wissen. Wie das geht, erklärte Christian Schäfer in seiner Präsentation von bekannteren und unbekannteren HTTP-Headern. Mithilfe von Client-Hints verraten Browser (aktuell “nur” Chrome und Opera) einiges über ihre Fähigkeiten und ihre Umgebung, u. a. Bildschirmgröße und effektive Netzwerkgeschwindigkeit. So konnte Christian beispielsweise die Nutzbarkeit einer digitalen Zeitungsausgabe für Berufspendler dadurch retten, dass bei effektiver 2G-Verbindung keine Werbung mehr ausgespielt wird.

Stumme Tonspuren, relevante Metriken und ein unterhaltsames Performance-Quiz

Walter Ebert präsentierte zum Thema “Hero Video Performance” verschiedene Situationen, in denen seitenfüllende Web-Videos am besten gar nicht angezeigt werden müssen. Und wenn man sie nur als bewegtes Hintergrundbild anzeigt, dann sollte man davon absehen, den Nutzern das Video inklusive mehrerer Megabyte stumm geschalteter Tonspur zum Download aufzudrängen.

Meetup-Organisator Stefan Böck suchte mit “Time to Interactive” nach einer Antwort auf die häufig gestellte Frage, welche der vielen möglichen Metriken denn überhaupt relevant für eine Performancemessung sind.

Da war es nur konsequent, dass beim alljährlichen Performance-Quiz am Ende des Meetups auf die Frage “Welches ist die wichtigste Performance-Metrik?” die Aussage “It depends” eine gültige Antwort war. Gut gefallen hat mir außerdem auf die Frage “Mit welcher Engine soll Edge künftig laufen?” die mögliche Antwort “Lieber gar nicht mehr!”

Zur Blog-Startseite