WordPress Optimieren: JS & CSS Dateien kontrollieren
Eine der größten Bremsen was die Ladezeiten einer Webseite angeht sind die HTTP Anfragen. Das sind alle Dateien oder Medien die bei einem Seitenaufruf angefordert werden. Viele Webseiten die wir optimieren haben über 100 Anfragen pro Seitenaufruf. Das darunter Ladezeiten und Conversion leiden ist kein Wunder. Selbst die schnellsten Server / Webspaces stoßen irgendwann an ihre Grenzen. Ein Mittel um zu kontrollieren wo was geladen wird ist das Plug-in Assets CleanUp Lite.
WordPress Ladezeiten testen
Als erstes setzen wir eine frische WP Installation auf. Wir installieren also WordPress, für diesen Test 5.4.2 und das Theme Hello Elementor, das wir auch für viele Kundenprojekte nutzen. Um die Testergebnisse nicht zu verfälschen deaktivieren wir jegliches Caching. Die Ladezeiten messen wir mit Hilfe der Netzwerkanalyse der Developer Tools. Die Developer Tools könnt ihr öffnen indem ihr auf einen freien Bereich der Webseite einen Rechtsklick macht und dann im Kontextmenü auf untersuchen klickt.
Nun starten wir eine Messung unserer leeren WordPress Webseite. Die Ladezeiten liegen ohne Caching bei ca. 200ms.
WordPress Plug-in installieren
Für unseren Test nutzen wir das beliebte Plug-in Contact Form 7. Ein Kontaktformular ist ein gutes Beispiel. Denn in den meisten Fällen wird es nur auf der Kontaktseite benötigt, die CSS & JS Dateien werden aber unnötiger Weise auf allen Seiten geladen. Nach der Aktivierung des Plug-ins laden wir die Seite neu.
Wir haben 1 Plug-in installiert, die HTTP Anfragen sind von 7 auf 11 gestiegen und unsere Ladezeiten sind von 200ms auf 270ms gestiegen. Das scheint nicht viel zu sein, sind aber immerhin ca. 30% schlechtere Ladezeiten. Wenn man bedenkt das viele Webseiten 20+ Plug-ins installiert haben, summiert sich das ganze schnell auf 2 Sekunden. Und mit dem Ansteigen der Ladezeiten gibt es weniger Kundenfragen und sogar die Kosten für Google Ads können steigen.
WordPress Plug-in Assets CleanUp
Mit Assets CleanUp Lite lassen sich JS & CSS Dateien einfach für bestimmte Seiten deaktivieren. Wenn man den Editor einer Seite öffnet findet man die Einstellungen unterhalb des Inhaltsbereich.
Für große Webseiten ist diese Vorgehensweise etwas umständlich da man jede Seite einzeln bearbeiten müsste. Erst mit der Pro Variante lassen sich Plug-ins für die komplette Webseite deaktivieren, und für bestimmte Seiten wie z. B. der Kontaktseite eine Ausnahme setzen.
Professionelles Webhosting
Made in Germany
- Bis zu 4x Backups täglich
- Litespeed, Nginx, Redis
- Plesk Obsidian
- SSL Inklusive
- NVMe Speicher
- Intel Xeon Prozessoren
- Rechenzentrum Frankfurt
- Traffic Inklusive
Weitere Features
Das Plug-in bietet in der kostenlosen Version aber noch ein paar mehr Features für die Optimierung und auch was die Sicherheit der Webseite angeht:
- Optimierung von CSS & JS Dateien
- Optimierung des Quelltextes der Webseite
- Einbinden eines CDN
- Optimierung von Google Fonts
- Deaktivieren der XML-RPC
Nach der WordPress Optimierung
Nachdem wir auf unserer Demo Webseite die CSS & JS des Kontaktformulars für die Startseite deaktivierten hatten, haben wir noch alle zusätzlichen Optimierungen die in der kostenlosen Variante zur Verfügung stehen aktiviert und damit 3 HTTP Anfragen und ein paar Prozent an Ladezeit eingespart.
Die Aktivierung unseres Litespeed Caches hat die Ladezeiten noch einmal halbiert. Wie schnell lädt eine frische WordPress Webseite auf deinem Webspace?
