Ladezeit-Optimierung für WordPress in der Praxis David Bongard, Resonanz Online Marketing 

ÜBERBLICK 1. Weswegen sind Ladezeiten wichtig? 2. Was macht WordPress langsam? 3. Wie optimiere ich meine Seite? 4. Was sind die richtigen Werkzeuge? 

Schneller ist immer besser! Deswegen sind Ladezeiten wichtig 

Argumente für ein schnelleres Web Längere Verweildauer Höhere Konversionsraten Positivere Nutzererfahrung Besseres Google-Ranking 

Reality Check Durchschnittliche Ladezeiten 2018 in Deutschland 

„Performance is about people.“ – Jeremy Wagner, Google WebFundamentals 

Deswegen ist dein WordPress langsam 

Exkurs: Was passiert bei einem Website-Aufruf? 1. Server
 Reagiert auf Anfrage des Browsers, führt Programmierung aus, liefert Dateien 2. Übertragung
 Daten werden an Browser gesendet 3. Browser
 Webseite wird gerendert, Scripte werden ausgeführt 

ENGPASS #1
 Antwortzeit des Servers ‣ Antwortzeit abhängig von Wechselspiel der verfügbaren Ressourcen und dem Ressourcenbedarf der Webseite ‣ Sehr günstige Shared Webspaces leiden oft an knappen Ressourcen (wenig Arbeitsspeicher, wenig Prozessorleistung) ‣ Viel Traffic* kann den Server spürbar langsamer machen, im Extremfall bis zu Stillstand ‣ Veraltete Softwareversionen können schlechte Leistungswerte zur Folge haben
 
 * bei Shared Hosts auch Traffic der anderen Seiten auf dem Host 

ENGPASS #1 - ANTWORTZEIT DES SERVERS
 PHP-Versionen https://kinsta.com/de/blog/php-benchmarks/ WordPress 5,0 PHP 5.6 Benchmark: 91,64 req/sec WordPress 5,0 PHP 7.0 Benchmark Restultate: 206,71 req/sec WordPress 5,0 PHP 7.1 Benchmark Restultate: 210,98 req/sec WordPress 5,0 PHP 7.2 Benchmark Restultate: 229,18 req/sec 

ENGPASS #1 - ANTWORTZEIT DES SERVERS
 Optimierungsmöglichkeiten 1. besseres/ teureres Hosting 2. Umstellung der PHP-Version 3. Nutzung von serverseitigem Caching 4. Ressourcenfresser optimieren oder entfernen 5. CMS-Caching nutzen 6. HTTP/2-Protokoll 7. Für Profis: CDNs nutzen, um Dateien auszulagern und Traffic-Spitzen besser abzufangen 

ENGPASS #2
 Datenübertragung ‣ Größe der Dateien ‣ Anzahl der der einzelnen Dateien, je nach Server und Browser (ohne HTTP/2) ‣ Anzahl der DNS-Lookups (von wie vielen Domains Dateien abgerufen werden) 

ENGPASS #2 - DATENÜBERTRAGUNG
 Optimierungsmöglichkeiten 1. Bilder passend skalieren und optimieren (z.B. Meta-Daten entfernen) 2. Nicht benötigte Dateien reduzieren (z.B. WordPress-Emojis) 3. CSS, JS und HTML minifizieren und zusammenfassen 4. gzip/deflate serverseitig aktivieren 5. Browsercaching besser nutzen 6. Verzögertes / asynchrones Laden von Inhalten (lazy loading von Bildern, asynchrones Laden z.B. für JavaScript) 

ENGPASS #3
 Browser-Rendering ‣ Browser wartet mit dem Rendering der Seite bis das JavaScript und CSS im HTML-Header geladen sind Optimierungsmöglichkeiten 1. nicht sofort benötigtes JavaScript im Footer laden 2. Für Profis: kritisches CSS und CSS, das nicht Above the Fold gebraucht wird, trennen 

So optimierst du deine Seite Let’s do it! Let’s do it! So optimierst du deine Seite 

Welche Kennzahlen? PageSpeed Score YSlow Score Ladezeiten 
 z.B. Time to First Byte, Onload Time, Fully Loaded Page Size in MB Zahl der Requests Mögliche Daten zur Website-Performance 

Was kann ich erreichen? Meist gilt die 80:20- Regel. In 20% der Zeit schafft man 80% der Optimierung. 20% 20% 80% 80% Aufwand Ergebnis bringt bringt 

Was kann ich erreichen? Am Ende hängt der Grad eures Erfolges von drei Dingen ab: 1. Ausgangszustand der Webseite 2. Technisches Know How 3. Budget (Zeit & Geld) 

Analyse- Werkzeuge • Pagespeed Insights von Google (https://developers.google.com/ speed/pagespeed/insights/) 
 • Lighthouse in Chrome 
 • GTmetrix 
 • https://www.uptrends.com/de/ tools/website-ladezeit-check
 • https://tools.pingdom.com
 

Audit mit Lighthouse 

Dafür gibt’s ein Plugin… Die Performance-Werkzeugkiste 

Grundlagen Servereinstellungen im Provider-Backend prüfen oder per .htaccess optimieren Theme-Settings nutzen, wenn möglich 

Bilder optimieren ‣ Unnötige Bilder vermeiden (z.B. über Icon-Fonts) ‣ Auf richtige Skalierung achten:
 add_image_size() + Regenerate Thumbnails von Alex Mills ‣ Plugins zur Bildoptimierung nutzen:
 z.B. EWWW Image Optimizer ‣ Kostenloses CDN & Lazy Loading:
 Jetpack vom Automattic 

CSS & JS minifizieren
 & zusammenfassen ‣ Manche Themes haben passende Funktionen
 schon eingebaut ‣ Gute Alternative oder als Extra:
 Autoptimize von Frank Goossens 

CMS Caching ‣ W3 Total Cache
 Großer Funktionsumfang, erfordert z.T. Expertenwissen ‣ WP Rocket
 Sehr gute kommerzielle Lösung ‣ Super Cache
 Tolle kostenlose Lösung, auch für Einsteiger geeignet 

5 Schritte für Einsteiger 1. Servereinstellungen prüfen 2. .htaccess-Optimierung 3. Bilder mit EWWW Image Optimizer verkleinern 4. Autoptimize zur Optimierung von CSS/JS (Schwierigkeitsgrad je nach Theme) 5. CMS-Caching mit Super Cache Schwierigkeitsgrad 

Fragen? Weitere Fragen? David Bongard +43 (0)1 890 61 10 [email protected] www.resonanz-marketing.com