Seit unserem letzten Update ist kaum ein Monat vergangen, und wir haben intensiv an dem gearbeitet, was meiner Meinung nach das wirkungsvollste Feature-Paket ist, das wir je für Static Studio veröffentlicht haben – vollständig automatisierte Performance-Optimierung.
Wenn du schon einmal Stunden damit verbracht hast, PageSpeed-Werte zu optimieren – Optimierungs-Plugins zu installieren, Lazy Loading zu konfigurieren und mit render-blockierenden Ressourcen zu hantieren –, kennst du das Problem.
Wir wollten das vollständig überflüssig machen, und ich freue mich, dir zu zeigen, wie.
Das Problem
WordPress-Websites sind bekanntermaßen schwierig für Google PageSpeed zu optimieren. Eine typische Website lädt Dutzende CSS- und JavaScript-Dateien, von denen die meisten das Rendern blockieren, und Bilder werden fast nie in modernen Formaten wie WebP ausgeliefert. Das Ergebnis? Niedrige PageSpeed-Werte, insbesondere auf Mobilgeräten.
Die übliche Lösung besteht darin, 2–3 zusätzliche Plugins zu installieren (Caching, Bildoptimierung, CSS-/JS-Minifizierung), jedes davon zu konfigurieren, zu hoffen, dass sie sich nicht gegenseitig behindern, und anschließend PageSpeed erneut auszuführen, um zu sehen, ob sich der Wert tatsächlich verbessert. Und wieder von vorn.
Wir finden, dass dies ohne Konfiguration und vollständig automatisiert funktionieren sollte – und jetzt ist es so.
WebP-Konvertierung & Bildoptimierung
Wie in unserem letzten Update angekündigt, haben wir Bunny Optimizer für jede Website in Static Studio aktiviert – kostenlos.
Damit wird der Bildbereich von PageSpeed automatisch abgedeckt:
- Automatische WebP-Konvertierung für alle Bilder (mit Fallbacks für ältere Browser)
- Responsive Bildtransformation für verschiedene Bildschirmgrößen
- Bildkomprimierung ohne sichtbaren Qualitätsverlust
All das läuft am Edge und wirkt sich daher überhaupt nicht auf deine Push-Zeiten aus – dieselbe Geschwindigkeit, bessere Ergebnisse. Und um es klarzustellen: Dies ist ohne zusätzliche Kosten für alle Studio-Websites enthalten. Anderswo würdest du dafür normalerweise 9,50 $ pro Monat und Website bezahlen.
CSS- & JS-Aggregation
Das ist die große Neuerung. Wir aggregieren und minimieren deine CSS- und JavaScript-Dateien jetzt automatisch während des statischen Exports (derzeit optional – du kannst die Funktion unter Tools -> Simply Static Studio -> Optimization -> Minify & Aggregation aktivieren).
Was bedeutet das in der Praxis?
Statt dass dein Browser 8–12 separate CSS-Dateien und eine Handvoll JavaScript-Dateien lädt (jeweils eine separate HTTP-Anfrage, die das Rendern blockiert), fassen wir sie in optimierten Bundles zusammen. Weniger Anfragen, kleinere Dateien, schnellere Ladezeiten.
Das passiert im Hintergrund:
- Mehrere
<link>-Stylesheet-Tags werden zu einem einzigen CSS-Bundle zusammengeführt - Mehrere
<script>-Tags werden zu weniger JS-Bundles zusammengeführt - Alles wird minimiert – Leerzeichen, Kommentare und unnötiger Code werden entfernt
- Ausführungsreihenfolge und Abhängigkeitsketten bleiben erhalten (damit nichts kaputtgeht)
- Relative URLs in CSS (Hintergrundbilder, Schriftpfade) werden automatisch aufgelöst
Dies läuft als Teil der statischen Exportpipeline, sodass nichts konfiguriert werden muss – es funktioniert einfach. Der Aggregationsschritt wird nach dem Zurückstellen von CSS/JS und vor der Generierung des Critical CSS ausgeführt, sodass die gesamte Optimierungskette korrekt sequenziert ist.
Generierung von Critical CSS
Das ist das letzte Puzzleteil – und dasjenige, das bei den PageSpeed-Werten wirklich einen deutlichen Unterschied macht.
Das Problem beim Zurückstellen von CSS (einer gängigen Performance-Technik) besteht darin, dass der Browser die Seite zunächst ohne Styles rendert und sie anschließend erneut rendert, sobald das vollständige CSS geladen ist. Dadurch kommt es zu Layoutverschiebungen – Elemente springen auf dem Bildschirm hin und her –, und Google bestraft dies bei der Metrik Cumulative Layout Shift (CLS) stark.
Critical CSS löst dieses Problem, indem nur das CSS extrahiert wird, das für den Above-the-Fold-Inhalt benötigt wird (also das, was der Nutzer vor dem Scrollen sieht), und direkt in den HTML-Code eingebettet wird. Der Browser kann die sichtbaren Inhalte sofort mit den korrekten Styles rendern, während der Rest des CSS im Hintergrund geladen wird.
Wir haben dies mit Penthouse umgesetzt, einschließlich einer Integration eines Headless-Browsers, der jede Seite rendert, das Above-the-Fold-CSS ermittelt und in den Exportprozess einfügt. Es werden mehrere Viewport-Größen (Mobilgeräte und Desktop) unterstützt, damit das Critical CSS beide Bereiche abdeckt.
Das Ergebnis: null CLS, ein schneller First Contentful Paint und deutlich höhere PageSpeed-Werte – und das, ohne dass du auch nur eine einzige Einstellung berühren musst.
Keine Konfiguration, vollständig automatisiert
Um es klar zu sagen: Du musst nichts tun.
Es gibt keine Einstellungen zu konfigurieren, keine Plugins zu installieren und keine Kontrollkästchen zu aktivieren. Jede Website auf Static Studio durchläuft automatisch die vollständige Optimierungspipeline:
- Statischer Export – WordPress → statisches HTML + Assets
- Bildoptimierung – WebP-Konvertierung und responsive Größenanpassung über Bunny Optimizer
- CSS/JS-Zurückstellung – Nicht kritische Ressourcen werden für schnelleres Rendering zurückgestellt
- CSS/JS-Aggregation – Mehrere Dateien werden zu weniger Bundles zusammengeführt und minifiziert (falls aktiviert)
- Generierung von Critical CSS – CSS für den sichtbaren Bereich wird extrahiert und inline eingebunden
Das ist dieselbe Optimierungspipeline, für die andere Plattformen einen Aufpreis verlangen oder die du manuell konfigurieren musst. Wir führen sie einfach bei jedem Push automatisch aus.
Was das für deine Werte bedeutet
Jede Website ist anders, aber das beobachten wir auf den Websites unserer Kunden:
- Weniger render-blockierende Ressourcen (von mehr als 8 Dateien auf 1–2 Bundles reduziert)
- Deutlich geringere CSS/JS-Gesamtgröße (nach der Minifizierung 20–40 % kleiner)
- Null CLS auf Mobilgeräten und Desktop
- Deutliche Verbesserungen bei FCP und LCP, insbesondere auf Mobilgeräten
Wenn du deine eigenen Werte überprüfen möchtest, musst du die Plattform nicht einmal verlassen – öffne einfach den neuen Performance-Bereich.
Performance-Bereich
Wir haben außerdem einen brandneuen Performance-Bereich direkt in das Studio-Dashboard integriert. Klicke für eine beliebige Website auf die Spalte „Performance“, und du erhältst drei Tabs:
PageSpeed Insights
Deine Google-PageSpeed-Werte, direkt über die Google API abgerufen und automatisch täglich aktualisiert. Wechsle zwischen Mobilgerät und Desktop oder aktualisiere die Werte jederzeit manuell. Keine zusätzlichen Tools, kein Kopieren und Einfügen von URLs – alles ist direkt verfügbar.
Globaler TTFB
Sieh genau, wie schnell deine Website von verschiedenen Standorten weltweit antwortet. Wir verteilen deine statische Website über den gesamten Globus, um die Latenz zu minimieren. Dieser Tab zeigt dir den Beleg dafür – die Zeit bis zum ersten Byte aus jeder Region.
Nutzung
Deine Bandbreite, dein Speicher und deine Cache-Trefferquote der letzten 30 Tage. Sieh, wie viel deines Traffics aus dem Cache ausgeliefert wird (je höher, desto besser), und verfolge deine durchschnittliche Antwortzeit über mehr als 120 Rechenzentren weltweit.
Das ist das Dashboard, das wir schon immer entwickeln wollten: Du optimierst deine Website einmal (oder besser gesagt, wir übernehmen das für dich) und kannst anschließend einfach die Werte beobachten. Kein Wechseln mehr zwischen verschiedenen Tools und keine manuellen Berichte.
Blick nach vorn
Wir machen hier nicht Halt. Unsere Roadmap für die nächsten Monate umfasst:
- Agenturprogramm (White-Label-Modus, Tagging, Teamverwaltung) – demnächst!
- Entfernung ungenutzter CSS-/JS-Dateien (Tree-Shaking) für noch kleinere Payloads
- Vollständige API-Abdeckung für die Plattform
Wie immer: Falls dir für deinen speziellen Workflow etwas fehlt, lass es uns wissen (support@simplystatic.com)!
Ich könnte nicht begeisterter davon sein, wie weit Static Studio in nur wenigen Monaten gekommen ist – wir machen Performance-Optimierung zu etwas, worüber du nie wieder nachdenken musst.
Genau darum geht es bei statischem WordPress: schnell, sicher und ohne Wartungsaufwand.
Inhaltsverzeichnis
