Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Schneller ist immer besser! Deswegen sind Ladezeiten wichtig

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Reality Check Durchschnittliche Ladezeiten 2018 in Deutschland

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Deswegen ist dein WordPress langsam

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

Audit mit Lighthouse

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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