Vor fünf Jahren haben wir im ScipioERP-Blog eine Web-Performance-Checkliste veröffentlicht. Letzte Woche habe ich sie gegen unsere eigene Website laufen lassen. Ein Drittel davon ist inzwischen überholt.
Zum Kontext: Diesen Sommer haben wir ilscipio.com endlich von WordPress abgelöst. Jahre mit Divi-Pagebuilder, WPML und Plugin-Updates, ersetzt durch einen statischen Hugo-Build - 349 deutsche und 233 englische Seiten, gerendert zu simplen Dateien, ausgeliefert von Caddy. Das einzige verbliebene PHP ist das Kontaktformular.
Diese Migration war ein sauberes Testfeld, also habe ich die Liste von 2021 Punkt für Punkt neu bewertet. Die Lektüre war ernüchternd. EV-Zertifikate (den grünen Balken haben Browser 2019 abgeschafft). Handoptimierte SSL-Session-Caches. Varnish-Cache-Prewarming. Drei separate Punkte über jQuery. Alles weg. Die Ratschläge waren nicht falsch. Die Plattform hat sie geschluckt. Caddy liefert HTTP/2, vernünftiges TLS und Kompression ab Werk, Browser haben das Lazy-Loading-Polyfill überflüssig gemacht, und niemand packt jQuery auf eine neue Seite.
Was überlebt hat
Der Kern der Liste von 2021 gilt weiter, er ist nur schärfer geworden.
Seiten klein halten. Unser Startseiten-HTML liegt bei 84 KB, das gesamte JavaScript bei 11 KB in drei Dateien, das CSS-Bundle bei 135 KB minifiziert. Kein Framework. Das ist nach wie vor das ganze Spiel - alles darunter ist Feinschliff.
Above the fold optimieren. Kritisches CSS inline (bei uns unter 4 KB), der Rest asynchron, und exakt die Fonts vorladen, die der erste Paint braucht. Wir deklarieren vier Schriftschnitte und laden die zwei vor, die der erste Paint braucht.
Bilder: überall WebP, width und height an jedem img-Tag, damit beim Laden nichts springt, Lazy Loading unterhalb des Folds und niemals darüber.
Was seit 2021 neu ist
fetchpriority=“high” am LCP-Bild - und an dessen Preload. Wir hatten das Attribut am Bild, aber nicht am Preload für dasselbe Bild. Der Browser hat unsere wichtigste Ressource also mit Standardpriorität geladen. Gut gemacht, Paul. Ein Attribut, und der ganze Sinn des Preloads war dahin.
Speculation Rules. Der Nachfolger des Link-Prefetchings: ein kleiner JSON-Block im Head, und der Browser lädt Seiten derselben Domain vor, wenn ein Klick wahrscheinlich wird. Die Navigation fühlt sich sofort an, ohne eine Zeile Anwendungscode.
content-visibility: auto für lange Seiten. Unsere Startseite rendert 52 Bilder, und die Abschnitte unterhalb des Folds brauchen beim Laden keine Layout-Arbeit. Den Punkt haben wir beim Schreiben dieses Beitrags gleich selbst umgesetzt.
Auf dem Server: HTTP/3, Brotli, 103 Early Hints und immutable Cache-Header für Assets mit Fingerprint. In Caddy ist das meiste davon eine Konfigurationszeile, kein Projekt.
Wo wir an unserer eigenen Liste scheitern
Aber lassen Sie mich an dieser Stelle ehrlich sein: Wir liefern eine Bildgröße für jeden Bildschirm. Kein srcset, kein sizes. Ein Smartphone lädt auf unseren Projektseiten rund viermal so viele Pixel, wie es anzeigt. Und das Hero-Bild ist WebP statt AVIF, weil Hugo kein AVIF kodieren kann und ich noch keinen externen Encoder in den Build eingebaut habe. Eine Checkliste ist eine Richtung, kein Pokal.
Der eigentliche Punkt
2021 ging es darum, einen langsamen Stack schnell zu machen: Caches vor PHP, optimierte Buffer, vorgewärmtes Varnish. 2026 steckt das meiste davon in der Plattform, und die größte Performance-Entscheidung ist die Wahl des Stacks, bevor die erste Zeile Code entsteht. Die beste Performance-Arbeit dieses Jahres war bei uns das Löschen des Pagebuilders.
Das Original von 2021 steht weiterhin im ScipioERP-Blog, falls Sie vergleichen möchten. Ich halte die Liste aktuell, sobald sich das Tooling weiterbewegt…