Web und Shop, Aus dem Haus

Erst neu gebaut, dann beschleunigt, jetzt 98 von 100 Speed-Punkten

7 Minuten Lesezeit

Auf einen Blick

  • PageSpeed Insights gibt unserer Startseite 100 von 100 Punkten auf dem Computer und 98 auf dem Telefon. Gemessen am 7. September 2026 an der öffentlich erreichbaren muv.com.
  • Beim Laden springt nichts und blockiert nichts: Layout Shift 0, Blocking Time 0 Millisekunden. Das sind die beiden Werte, die ein Besucher wirklich spürt.
  • Der größte Posten auf dem Weg dorthin lag nicht im Programm, sondern in der Auslieferung: 344 KB, die bei jedem Besuch erneut übertragen wurden.
  • Behoben mit ein paar Zeilen in einer Konfigurationsdatei. Am Code selbst war vierzigmal weniger zu holen.
  • Nachprüfbar: Die Seite ist öffentlich, das Test-Werkzeug ist öffentlich.

Der zweite Schritt#

Im August ist unsere neue Website online gegangen. Selbst programmiert, ohne Baukasten – und beim Umbau haben wir gleich ausgeräumt: Die Mediathek ist von 57,9 auf 15,4 Megabyte geschrumpft, die Datenbank von 128,6 auf 51,7. Wie wir das gemacht haben, steht in einem eigenen Beitrag.

Damit war schon mal der erste Schritt erledigt. Eine Seite mit einer Größe von 537 statt 1.582 Kilobyte ist eine schöne Zahl, aber sie sagt nur, wie Groß die Seite (und deren Inhalt) ist. Wie schnell das beim Besucher ankommt, entscheidet der Webserver und die Internet-Verbindung. Darüber sagt die Größe leider gar nichts aus.

Also kam als logische Konsequenz nach dem Umbau die Optimierung der Geschwindigkeit. Das Ergebnis steht seit dem 7. September fest:

PageSpeed Insights, muv.comMobilComputer
Leistung98100
First Contentful Paint1,7 s0,4 s
Largest Contentful Paint2,0 s0,4 s
Total Blocking Time0 ms0 ms
Cumulative Layout Shift00,003
Speed Index2,8 s0,4 s

Warum die 98 (Mobil) mehr wert ist als die 100 (Computer)#

Die beiden Spalten entstehen unter völlig verschiedenen Bedingungen. Für den Computer nimmt das Test-Werkzeug von Google eine schnelle Leitung an. Für Mobil simuliert es ein „Moto G Power“ – ein Android-Gerät der unteren Mittelklasse – und drosselt gleichzeitig die Verbindung auf den langsamen 4G Standard.

Deshalb liegen die Mobilwerte fast überall deutlich unter den Werten für den Computer. Mobil dauert bei uns der Seitenaufbau 2,0 Sekunden statt 0,4. Das wir unter diesen Bedingungen noch einen Wert von 98 erhalten liegt an der von uns durchgeführten bestmöglichen Optimierung.

Zwei Werte in der Tabelle sind „glatte“ Nullen – und die sind uns mehr wert als die Gesamtnote! Blocking Time 0 Millisekunden heißt, dass es keinen Moment gibt, in dem ein Skript rechnet (blockiert) und die Seite dadurch auf Tippen und Wischen nicht reagiert. Layout Shift 0 heißt, dass beim Laden nichts springt: kein Text, der verrutscht, weil ein Bild noch kommt, kein Knopf, der unter dem Daumen weghüpft. Auf dem Telefon steht dort eine „glatte“ echte Null, auf dem Computer sind es 0,003.

Um die Zahlen einordnen zu können, ist es wichtig, folgendes zu wissen:
Erstens: Gemessen wurde die öffentlich erreichbare https://muv.com, nicht ein Testsystem im Labor. Zweitens: mit dem Werkzeug von Google, nicht mit unserem eigenen. Der Bericht trägt Datum und Uhrzeit, 7. September 2026 um 13:52, und nennt das Gerät und die Drosselung, mit denen er erzeugt wurde.

Und weil wir bei Zahlen genau bleiben: So ein Wert schwankt um ein, zwei Punkte, je nach Auslastung der Messstelle. Der Aussagewert liegt nicht in der 98, sondern darin, dass nichts Wesentliches mehr offen ist.

Die 344 Kilobyte, die niemand gebraucht hat#

Die größte Optimierung auf dem Weg dorthin war keine Programmierarbeit (die haben wir ja schon beim Umbau der Site geleistet – indem wir schon mit der Geschwindigkeitsoptimierung im Hinterkopf programmiert haben).

Das Geschwindigkeits-Problem war: der Server hat die HTML-Seite komprimiert ausgeliefert, alles andere aber nicht. Stylesheets, Skripte, die Dateien des Cookie-Banners: alles unkomprimiert.

Im folgenden unsere durchgeführte Messungen:

Dateibisher ausgeliefertkomprimiert
Cookie-Banner, Stylesheet118,0 KB12,7 KB
WordPress-Interaktivität93,5 KB17,0 KB
Vue.js78,2 KB30,9 KB
Cookie-Banner, Konfiguration56,7 KB12,5 KB
Cookie-Banner, Einwilligungen48,8 KB12,6 KB
unser Theme25,6 KB4,3 KB
unser Basis-Theme21,0 KB4,1 KB
zusammen439,1 KB94,2 KB

Bisher wurden also 439 Kilobyte übertragen. In Zukunft sind es nur noch 94! Wer am Schreibtisch mit Glasfaser sitzt, merkt davon wenig. Im Zug – mit zwei Balken Empfang – entscheidet es, ob die Seite noch angezeigt bekommt, oder ob man es später nochmal versucht. Genau diesen Fall misst Google in der Mobilwertung.

Der Aufwand für die Behebung: ein paar Zeilen in einer Konfigurationsdatei. Kein Programmieren, kein Umbau, kein Risiko.

Zur Einordnung: Alle Stylesheets unseres Themes zu verkleinern hat 8,5 Kilobyte gebracht. Das war saubere Arbeit und richtig, aber an der komprimierten Auslieferung lag vierzigmal mehr Gewinn.

Wie lange sich der Browser etwas merken darf#

Zur Auslieferung gehört eine zweite Angabe: wie lange ein Browser sich den Inhalt einer Datei marken darf. Bei uns fehlte sie bisher. Jeder wiederkehrende Besucher (Browser) hat deshalb bei jeder einzelnen Datei nachgefragt, ob sie noch aktuell ist.

Je länger sich ein Browser den Inhalt einer Datei merken darf, desto weniger wird übertragen und desto schneller lädt die Seite. Ein gängiger Wert ist z.B. ein Jahr. Diese Angabe hat jedoch einen einen Haken, den man wissen sollte: Ändert sich nach dem ersten Laden etwas am Stylesheet, sieht ein Besucher die Änderung bis zum Ende des eingestellten Zeitraums (bis zu einem Jahr) nicht. In der Test-Umgebung kann also alles gut aussehen, beim Besucher der Seite nicht.

Deshalb bekommt bei uns jede Datei bei jeder Änderung automatisch eine neue Adresse. Automatisch ist dabei der wichtige Teil. Alles andere wird zwangsläufig irgendwann einmal übersehen oder vergessen.

Bei den Schriftdateien geht das technisch nicht (das hat WordPress-interne Gründe). Deshalb haben wir dort 30 Tage eingestellt.

Drei kleinere Sachen#

Das Bild im Kopfbereich. Google misst die Ladezeit nicht bis zum letzten Byte, sondern bis das größte sichtbare Element fertig ist. Das ist die Zeile Largest Contentful Paint in der Tabelle oben. Bei uns ist dieses Element das Bild im oberen blauen Header. Man kann es dem Browser als vorrangig kennzeichnen, damit er es früh anfordert. Genau das haben wir auch getan. Leider führte dies dazu, dass der Code nun doppelt in jeder Seite stand: am Header-Bild und an einem Blog-Vorschaubild ganz unten. Zwei Bilder mit Vorrang ergibt leider kein Bild mit Vorrang. Ursache war eine Doppelzuständigkeit zwischen WordPress und unserem Theme. Das haben wir umprogrammiert: Jetzt vergibt es das Theme, genau einmal.

Bilder, die Mobil niemand sieht. Unsere Kopfzeilen beinhalten rechts ein Bild, welches auf schmalen Bildschirmen ausgeblendet ist. „Nicht angezeigt“ heißt aber nicht „nicht geladen“: Die Datei wurde zuerst geladen (übertragen) und danach versteckt (nicht angezeigt). Jetzt entscheidet der Browser vor dem Laden, ob er sie überhaupt anzeigt (und damit benötigt). Diese Umprogrammierung brachte eine erhebliche Geschwindigkeits-Steigerung.

Links, die für einen Daumen zu flach waren. Die Einträge in unserer oberen Leiste waren 20 Pixel hoch. Für eine optimale Barrierefreiheit sind jedoch 24 Pixel besser. Der Grund ist klar: Je kleiner, desto leichter tippt man auf einem Telefon daneben. Solange man am PC mit einer Maus arbeitet fällt dies leider gar nicht auf. Dieses Problem betraf auch den Fernwartungslink und die E-Mail-Adresse im Fußbereich.

Sehen Sie selbst nach#

Wenn eine Seite langsam ist, liegt das seltener am Programm als an der Auslieferung des Servers. Deshalb sehen wir in dieser Reihenfolge nach:

  • erst der Server
  • dann das erste Bild
  • dann der Code.

Keines der hier beschriebenen Probleme war eine Besonderheit unserer Seite.

Die meisten davon finden sich auf jeder WordPress-Installation, die ein paar Jahre gewachsen ist.

Wo Ihre Seite steht, sehen Sie in einer Minute selbst:

  1. pagespeed.web.dev aufrufen.
  2. Adresse (URL) Ihrer eigenen Website eintragen.
  3. Primär auf „Telefon“ achten (nicht auf „Computer“).

Wenn Ihnen das Ergebnis nicht gefällt, messen wir die Seite für Sie gerne durch und sagen Ihnen, was zu verbessern ist. Auch dann, wenn die Antwort lautet, dass sich der Aufwand nicht lohnt.

Das ist der neueste Beitrag.