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?


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ürdeQuelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience

http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

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?

http://posterxxl.de


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


http://m.zalando.de

http://m.zalando.de



Ladezeit für 834,9 kb:

• GPRS: 56 kbit/sec 834,9 kb = 15 Sekunden

• EDGE: 220 kbit/sec 834,9 kb = 4 Sekunden

• UMTS (3G): 376 kbit/sec 834,9 kb = 2 Sekunden

• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 834,9 kb = 0,1 Sekunden

• LTE (4G): 100 Mbit/sec 834,9 kb = 0,008 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


http://121watt.de

http://www.121watt.de



Ladezeit für 584,7 kb:

• GPRS: 56 kbit/sec 584,7 kb = 10 Sekunden

• EDGE: 220 kbit/sec 584,7 kb = 3 Sekunden

• UMTS (3G): 376 kbit/sec 584,7 kb = 2 Sekunden

• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 584,7 kb = 0,08 Sekunden

• LTE (4G): 100 Mbit/sec 584,7 kb = 0,005 Sekunden

10


11

http://tools.pingdom.com/fpt/

Pingdom Website Speed Test




Checklisten für den Einstieg in die Optimierung


Ladezeit-Optimierungam 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://infinitewp.com/



Server:





Verwendung eines Content-Delivery-Networks

22

https://deliciousbrains.com/wp-offload-s3/



Server:





Verwendung eines Content-Delivery-Networks

Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen

23

http://www.elegantthemes.com/plugins/monarch/



Ladezeit-Optimierungim 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)


Ladezeit-Optimierungfür Bilder und Grafiken


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-offload-s3/



Bilder:




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

31

https://icomoon.io/


http://fontello.com/

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/picturefillwp/


http://fontello.com/

https://icomoon.io/


<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

35Bildquelle: http://www.apple.com/de/

Bildquelle: http://www.apple.com/de/

Das Picture Element übergibt, passend zum Endgerät/Auflö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>

http://www.apple.com/de/

http://www.apple.com/de/


Einleitung <picture> Element

Durch das <picture> Element sind Entwickler/Designer flexibler 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 immerin 100x100 Pixeln per CSS ausgegeben

40







41


Viewport-basierte Bildauswahl

42

Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

http://www.html5rocks.com/en/tutorials/responsive/picture-element/


Wann sollten wir welche Auswahl definieren?

• 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 Offload™ 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 geografischen 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!

http://html5demos.com/geo


52

http://caniuse.com/#search=Geolocation

Can I use Geolocation?

http://caniuse.com/#search=Geolocation


53

https://www.maxmind.com/de/geoip2-services-and-databases

Fragen ist nett. Einfach machen ist besser.

https://www.maxmind.com/de/geoip2-services-and-databases


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 Befinden des Nutzers

Sitzt der Nutzer auf dem Sofa?Befindet 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

https://dan.exposure.co/tbd-fest


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 Officer bei der 121WATTCEO bei Pixeldreher CEO bei Fuchsfaktor10 – Virtual-Reality-Studio für 360°-Videos

• Seminare bei der 121WATT: Mobile SEO & User Experience SeminarTechnical SEO & OnPage SEO Basis-Seminar WordPress Intensiv-SeminarInstagram-Marketing Seminar

• Twitter: @fuchsfaktor10E-Mail: [email protected]

mailto:[email protected]

Presentations & Public Speaking

Performance-Optimierung für WordPress-Websites