7 Kilobyte: was ein WordPress-Theme wirklich wiegen muss
Fast jedes Theme wirbt damit, schnell zu sein. Nachprüfbar ist das selten, weil kaum jemand Zahlen nennt, die man nachmessen kann. Also hier die Zahlen für Hafen, in Bytes, mit dem Befehl zum Nachrechnen. Und der ehrliche Teil dazu: wo ein schlankes Theme wirklich hilft und wo es überhaupt nichts rettet.
Bei Ladezeit-Versprechen lohnt sich die Frage, was genau gemessen wurde. „Unter einer Sekunde" hängt am Server und am Messort. Ein Lighthouse-Wert hängt am Inhalt der Testseite. Was dagegen fest zum Theme gehört und sich nicht wegdiskutieren lässt, ist die Menge an CSS und JavaScript, die es auf jede Seite legt. Genau die haben wir gemessen.
Die Zahlen
Im ausgelieferten Paket von Hafen 0.8.1 stecken exakt zwei Dateien, die der Browser für die Darstellung braucht:
style.css: 20.534 Bytes unkomprimiert, 6.461 Bytes mit gzipassets/js/hafen.js: 1.948 Bytes unkomprimiert, 870 Bytes mit gzip
Zusammen sind das 22.482 Bytes im Paket und 7.149 Bytes über die Leitung, verteilt auf zwei Requests. Wer mit Brotli ausliefert, was heute die meisten Hoster tun, landet noch darunter; gzip ist hier die vorsichtige Zahl.
Dazu kommt die Schrift. Hafen liefert Inter als eine einzige variable Schriftdatei mit, 48.256 Bytes, die alle Schriftstärken von 100 bis 900 abdeckt. Damit liegt der gesamte Theme-Anteil einer Seite bei 55.405 Bytes. Das ist der ganze Betrag, es kommt nichts von außen dazu: kein Google Fonts, kein Icon-Font, kein CDN.
Wer die Schrift nicht will, nimmt die mitgelieferte Stil-Variante Stapellauf. Sie stellt auf Systemschriften um, dann bleiben die 7.149 Bytes allein übrig und der Browser lädt für die Typografie gar nichts.
Woher das Gewicht sonst kommt
Zum Vergleich lohnt der Blick darauf, was ein übliches Theme mitbringt, ohne dass jemand etwas Verkehrtes getan hätte. Ein Page-Builder-Theme lädt sein eigenes Framework, dazu ein Icon-Set, oft jQuery und eine Slider-Bibliothek, meist auf jeder Seite, unabhängig davon, ob die Seite einen Slider enthält. Das sind schnell mehrere hundert Kilobyte, und der teure Teil ist nicht einmal die Größe, sondern die Zeit, die der Browser mit dem Ausführen verbringt.
Hafen kommt aus einer anderen Richtung. Layout, Farben, Abstände und Typografie stehen vollständig in der theme.json, WordPress erzeugt daraus selbst das nötige CSS. Es gibt kein Framework, weil es keins gibt, das die Blockverwaltung nicht schon mitbrächte. Und es gibt kein JavaScript für Dinge, die CSS kann; die zwei Kilobyte im Paket erledigen den klebrigen Header und den Skip-Link, mehr nicht.
Und jetzt der ehrliche Teil
Ein leichtes Theme macht keine langsame Website schnell. Es entfernt nur eine von mehreren Ursachen, und meistens nicht die größte.
In der Praxis dominieren drei andere Posten. Bilder, wenn sie in voller Kameraauflösung hochgeladen und per CSS kleingerechnet werden; ein einziges solches Bild wiegt mehr als das ganze Theme. Plugins, die ihre Skripte auf jeder Seite laden statt dort, wo sie gebraucht werden. Und das Hosting, denn keine Optimierung im Frontend hilft gegen eine Serverantwort, die eine Sekunde auf sich warten lässt.
Wer eine bestehende Seite schneller machen will, fängt deshalb nicht beim Theme an. Der Weg dahin steht in unserem Beitrag WordPress langsam? In 10 Schritten wieder schnell, und der ist unabhängig davon, welches Theme läuft. Dieser Beitrag hier beantwortet die andere Frage: was ein Theme beiträgt, wenn man neu anfängt oder wechselt.
Selbst nachmessen
Hafen steht im offiziellen WordPress-Theme-Verzeichnis. Installieren, im Browser die Netzwerkanalyse öffnen und nachzählen, wie viele Requests vom Theme kommen. Es sind zwei.
Häufige Fragen
Wie kann ich die Zahlen selbst nachprüfen?
Lade das Theme herunter und schau dir die Dateigrößen an. Am Server misst du den echten Übertragungswert in den Entwicklerwerkzeugen des Browsers unter Netzwerk, Spalte Übertragen. Dort siehst du auch, wie viele Requests wirklich vom Theme kommen.
Warum liefert Hafen die Schrift selbst aus, statt Google Fonts zu nutzen?
Aus zwei Gründen. Erstens fließen bei Google Fonts Verbindungsdaten an einen Dritten, was in Deutschland mehrfach gerichtlich Thema war. Zweitens ist eine Verbindung zu einem fremden Server auch technisch teurer als eine Datei vom eigenen. Wer gar keine mitgelieferte Schrift will, nimmt die Variante Stapellauf.
Bringt ein schlankes Theme etwas für die Core Web Vitals?
Es hilft, aber es entscheidet nicht. Weniger CSS und JavaScript verkürzen vor allem die Zeit bis zur Reaktionsfähigkeit. Der größte Bildbereich und die Layoutstabilität hängen dagegen an deinen Bildern und daran, ob Elemente nachträglich springen.
Kostet der Umstieg auf ein Block-Theme Inhalte?
Inhalte nicht, die liegen in der Datenbank und bleiben. Was neu aufgebaut werden muss, sind Layouts, die im alten Theme über dessen eigene Einstellungen liefen. Ein Testlauf auf einer Kopie ist deshalb keine Vorsicht, sondern der normale Weg.
