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

d.bongard@resonanz-marketing.com

www.resonanz-marketing.com