Performance-Optimierung für WordPress-Websites

© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Performance-Optimierung
für WordPress-Websites

Wie kriegen wir unsere Daten
schnell durch die Leitung?

3
Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr 
Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
Google hat errechnet, dass eine 4/10 Sekunde täglich Acht Mio. weniger Suchen bedeuten würde 
Quelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience

Wie schwer ist eigentlich eine
[mobile] Website?

© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 54,1 kb HTML
• 28,6 kb CSS
Page Size: 2.6 MB 
5
http://www.posterxxl.de/
Wie schwer ist eine [mobile] Website?

Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec 
2,6 MB = 46 Sekunden
• EDGE: 220 kbit/sec 
2,6 MB = 12 Sekunden
• UMTS (3G): 376 kbit/sec 
2,6 MB = 7 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 
2,6 MB = 0,3 Sekunden
• LTE (4G): 100 Mbit/sec 
2,6 MB = 0,02 Sekunden
6

Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 21,8 kb HTML
Page Size: 834,9 kb 
 
7
m.zalando.de

Ladezeit für 834,9 kb:
834,9 kb = 15 Sekunden
834,9 kb = 0,1 Sekunden
8

Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 18,7 kb CSS
• 13 kb HTML
Page Size: 584.7 kb 
9
http://www.121watt.de

Ladezeit für 584,7 kb:
10

11
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test

Checklisten für den Einstieg in
die Optimierung

Ladezeit-Optimierung
am Server/Hosting

Server:
Caching & gzip-Kompression aktivieren
16
http://wp-rocket.me/de/
Ladezeit-Optimierung am Server

Server:
HTTP-Requests reduzieren
17
https://de.wordpress.org/plugins/wp-super-cache/

Server:
Weiterleitungsketten auseinandernehmen
18
https://de.wordpress.org/plugins/redirection/

Server:
Datenbanken optimieren
19
http://www.mysql.com/products/workbench/

Server:
20
https://de.wordpress.org/plugins/wp-optimize/

Server:
21
https://inﬁnitewp.com/

Server:
Verwendung eines Content-Delivery-Networks
22
https://deliciousbrains.com/wp-ofﬂoad-s3/

Server:
Verwendung eines Content-Delivery-Networks
Fertige Social Widgets (von Facebook & Co.)
bitte nicht nutzen
23
http://www.elegantthemes.com/plugins/monarch/

im HTML-Code

25
http://wp-rocket.me/de/
Ladezeit-Optimierung im HTML-Code
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS
entfernen
Inline CSS & JS entfernen und in Dateien
ausführen (können gecached werden)
CSS & JavaScript komprimieren und an der
richtigen Stelle integrieren (am besten via
CDN oder Subdomain)

für Bilder und Graﬁken

Bilder:
Bildgrößen und Datei-Formate richtig wählen
(.jpg für Fotos/Hintergrundgrafiken; .png
oder .gif für Layoutgrafiken; Alternativ
auch .svg oder .webp)
27
Ladezeit-Optimierung für Bilder und Grafiken

Bilder:
Bildqualität reduzieren
28
http://optimus.io/

Bilder:
29
https://kraken.io/

Bilder:
Bilder per CDN laden
30
https://deliciousbrains.com/wp-ofﬂoad-s3/

Bilder:
Icons als Font laden (http://fontello.com/
oder https://icomoon.io/)
31
https://icomoon.io/

Bilder:
Icons als Font laden (http://fontello.com/
oder https://icomoon.io/)
Einsatz des HTML5 <picture>-Elements
32
https://de.wordpress.org/plugins/pictureﬁllwp/

<picture>
Responsive Bilder für unterschiedliche Anwendungsfälle

Probleme bei skalierten Bildern
34
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer

Lösung: <picture>-Element
35
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Das Picture Element übergibt, passend zum Endgerät/Auﬂösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>

Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer ﬂexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
36

Beispiel: Zalando auf dem Desktop
37

Beispiel: Zalando auf dem Smartphone
38

39

Pixel-Dichten-basierte Bildauswahl (Pixeldensity)
Für den Nutzer sichtbar: 
Bild 100x100 Pixel
für 2fache Pixel-Dichte (iPhone & Co.): 
Bild 200x200 Pixel
für 1,5fache Pixeldichte: 
Bild 150x150 Pixel
Das Bild selbst wird jedoch immer 
in 100x100 Pixeln per CSS ausgegeben
40

41

Viewport-basierte Bildauswahl
42
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

Wann sollten wir welche Auswahl deﬁnieren?
• Art-Direction-basierte Bildauswahl 
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl 
(Zielgruppe ist im High-Resolution Bereich)
• Viewport-basierte Bildauswahl 
(User-Generated Content, Performance, automatische Prozesse)
43

Meine ❤ Performance-Plugins für WordPress
WP Rocket (Caching, Komprimierung, CDN & HTTP-Request-Reduzierung)
OptimusHQ (Bildoptimierung bereits beim Upload)
WP Ofﬂoad™ S3 (automatischer Upload ins CDN)
Redirection (für Weiterleitungen) - Alternativ „Yoast SEO Premium“
44

Wie optimiert man für den
individuellen Nutzer?

Was ist Contextual-Content?
oder: Was ist personalisierter Content?

Unterschiedliche Zielgruppen – personalisierter Content
47

Kontext: Der Nutzer selbst
Nutzerdaten verwenden, um Inhalte auszuspielen:
• Verbindung zu Social Networks nutzen
• Daten in Cookies speichern oder „nach Login“
Personalisierte Inhalte des Nutzers
Registrierungsoptionen ein/ausblenden
Sortierung der Inhalte
48

Kontext: Der Ort des Nutzers
Location-based Services: Angepasste Inhalte und Funktionen auf Basis der
geograﬁschen Position des Nutzers (GPS)
49

Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
Lokale Werbung
Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.)
Berechnung von Liefergebühren, Preisen etc.
Vorausgefüllte Formularfelder
50

51
http://html5demos.com/geo
Geolocation nutzen!

52
http://caniuse.com/#search=Geolocation
Can I use Geolocation?

53
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist besser.

Kontext: Das eigentliche Gerät
Responsive-Design: Angepasste Inhaltsmengen, Bedienlogiken & die
Darstellung der Website.
Darstellung/Funktion der Website auf Basis des Geräts/der
Geräteart
Umleitung zur App-Installation
54

Kontext: Uhrzeit des Nutzers
Anpassung der Inhalte je nach Tageszeit bzw. größeren
Zeitabschnitten, wie wochentags & Wochenende oder der aktuellen
Jahreszeit.
Kontaktmöglichkeiten oder Anreise-Informationen am Tag eines
Events
Layout zur Weihnachtszeit etc. automatisch angepasst
Abends eher gedeckte Farben als am Tag
55

Kontext: Haltung oder Beﬁnden des Nutzers
Sitzt der Nutzer auf dem Sofa? 
Beﬁndet er sich gestresst und beengt auf dem Markt oder in der Bahn?
Hinweis auf sensible Daten vorab geben
Geräteausrichtung nutzen, um Inhalte besser darzustellen
56

57
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
https://dan.exposure.co/tbd-fest?slow=1

Umsetzung von „Contextual-Content“:
58
Kontext X, dann Inhalt Y
Ich brauche: 
Informationen über den Kontext
Ich brauche: 
Zusatz-Informationen für meinen Inhalt

Wie kann man das alles
umsetzen?
…mit Tools natürlich.

60
http://www.monetate.com/
Monetate

61
http://www.gravity.com/
Gravity

62
http://www.apptus.com/
APPTUS

63
https://www.onespot.com/
OneSpot

64
http://www.monoloop.com/
Monoloop

65
https://www.optimizely.com/
Optimizely

66
http://www.webpower.eu/de/
Webpower

67
https://vwo.com/
Visual Website Optimizer

André Goldmann
68
• Seit 1996 Front-End Entwickler  
& Optimierer aus Leidenschaft
• Chief Operating Ofﬁcer bei der 121WATT 
CEO bei Pixeldreher 
CEO bei Fuchsfaktor10 – Virtual-Reality-Studio für 360°-Videos
• Seminare bei der 121WATT: 
Mobile SEO & User Experience Seminar 
Technical SEO & OnPage  
SEO Basis-Seminar 
WordPress Intensiv-Seminar 
Instagram-Marketing Seminar
• Twitter: @fuchsfaktor10 
E-Mail: andre.goldmann@121watt.de

Performance-Optimierung für WordPress-Websites

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie Performance-Optimierung für WordPress-Websites

Performance-Optimierung für WordPress-Websites