ladezeit-optimierung für wordpress in der praxis€¦ · zur folge haben * bei shared hosts auch...
TRANSCRIPT
Ladezeit-Optimierung für WordPress in der PraxisDavid 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 CheckDurchschnittliche 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. ServerReagiert auf Anfrage des Browsers, führt Programmierung aus, liefert Dateien
2. ÜbertragungDaten werden an Browser gesendet
3. BrowserWebseite wird gerendert, Scripte werden ausgeführt
ENGPASS #1Antwortzeit 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 #2Datenü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 Servern werden Dateien abgerufen)
ENGPASS #2 - DATENÜBERTRAGUNGOptimierungsmö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 #3Browser-Rendering
‣ Browser wartet mit dem Rendering der Seite bis das JavaScript und CSS im HTML-Header geladen sind
Optimierungsmöglichkeiten1. 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. 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: z.B. Enfold von kriesi.at
‣ Gute Alternative oder als Extra: Autoptimize von Frank Goossens
CMS Caching
‣ W3 Total Cache Großer Funktionsumfang, erfordert z.T. Expertenwissen
‣ WP RocketSehr gute kommerzielle Lösung
‣ Super CacheTolle kostenlose Lösung, auch für Einsteiger geeignet
5 Schritte für Einsteiger1. Servereinstellungen prüfen (Schwierigkeitsgrad 3/5)
2. .htaccess-Optimierung (Schwierigkeitsgrad 3/5)
3. Bilder mit EWWW Image Optimizer verkleinern (Schwierigkeitsgrad 1/5)
4. Autoptimize zur Optimierung von CSS/JS (Schwierigkeitsgrad 2-4/5, je nach Theme)
5. CMS-Caching mit Super Cache (Schwierigkeitsgrad 2/5)
Fragen?Weitere Fragen?
David Bongard
+43 (0)1 890 61 10
www.resonanz-marketing.com