Ladezeit-Optimierung für WordPress in der Praxis

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

Transcript

1. Ladezeit-Optimierung für WordPress in der Praxis David Bongard, Resonanz Online Marketing
2. ÜBERBLICK 1. Weswegen sind Ladezeiten wichtig? 2. Was macht WordPress langsam? 3. Wie optimiere ich meine Seite? 4. Was sind die richtigen Werkzeuge?
3. Schneller ist immer besser! Deswegen sind Ladezeiten wichtig
4. Argumente für ein schnelleres Web Längere Verweildauer Höhere Konversionsraten Positivere Nutzererfahrung Besseres Google-Ranking
5. Reality Check Durchschnittliche Ladezeiten 2018 in Deutschland
6. „Performance is about people.“ – Jeremy Wagner, Google WebFundamentals
7. Deswegen ist dein WordPress langsam
8. 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
9. 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
10. 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
11. 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
12. 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)
13. 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)
14. 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
15. So optimierst du deine Seite Let’s do it! Let’s do it! So optimierst du deine Seite
16. 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
17. 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
18. 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)
19. 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

20. Audit mit Lighthouse
21. Dafür gibt’s ein Plugin… Die Performance-Werkzeugkiste
22. Grundlagen Servereinstellungen im Provider-Backend prüfen oder per .htaccess optimieren Theme-Settings nutzen, wenn möglich
23. 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
24. CSS & JS minifizieren
 & zusammenfassen ‣ Manche Themes haben passende Funktionen
 schon eingebaut ‣ Gute Alternative oder als Extra:
 Autoptimize von Frank Goossens
25. 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
26. 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
27. Fragen? Weitere Fragen? David Bongard +43 (0)1 890 61 10 d.bongard@resonanz-marketing.com www.resonanz-marketing.com