Performance-Optimierung für WordPress-Websites
-
Upload
andre-goldmann -
Category
Presentations & Public Speaking
-
view
420 -
download
0
Transcript of Performance-Optimierung für WordPress-Websites
![Page 1: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/1.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Performance-Optimierung für WordPress-Websites
![Page 2: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/2.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Wie kriegen wir unsere Daten schnell durch die Leitung?
![Page 3: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/3.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl163
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
![Page 4: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/4.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Wie schwer ist eigentlich eine [mobile] Website?
![Page 5: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/5.jpg)
© 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?
![Page 6: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/6.jpg)
© 121WATT - André Goldmann
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
![Page 7: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/7.jpg)
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 kb Diverses
• 21,8 kb HTML
Page Size: 834,9 kb
7
m.zalando.de
Wie schwer ist eine [mobile] Website?
![Page 8: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/8.jpg)
© 121WATT - André Goldmann
Was bedeutet das für mobile?
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
![Page 9: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/9.jpg)
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7 kb CSS
• 13 kb HTML
Page Size: 584.7 kb
9
http://www.121watt.de
Wie schwer ist eine [mobile] Website?
![Page 10: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/10.jpg)
© 121WATT - André Goldmann
Was bedeutet das für mobile?
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
![Page 11: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/11.jpg)
© 121WATT - André Goldmann
11
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test
![Page 12: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/12.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
![Page 13: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/13.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
![Page 14: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/14.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Checklisten für den Einstieg in die Optimierung
![Page 15: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/15.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Ladezeit-Optimierungam Server/Hosting
![Page 16: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/16.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
16
http://wp-rocket.me/de/
Ladezeit-Optimierung am Server
![Page 17: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/17.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
17
https://de.wordpress.org/plugins/wp-super-cache/
Ladezeit-Optimierung am Server
![Page 18: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/18.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
18
https://de.wordpress.org/plugins/redirection/
Ladezeit-Optimierung am Server
![Page 19: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/19.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
19
http://www.mysql.com/products/workbench/
Ladezeit-Optimierung am Server
![Page 20: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/20.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
20
https://de.wordpress.org/plugins/wp-optimize/
Ladezeit-Optimierung am Server
![Page 21: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/21.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
21
https://infinitewp.com/
Ladezeit-Optimierung am Server
![Page 22: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/22.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
Verwendung eines Content-Delivery-Networks
22
https://deliciousbrains.com/wp-offload-s3/
Ladezeit-Optimierung am Server
![Page 23: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/23.jpg)
© 121WATT - André Goldmann
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
Verwendung eines Content-Delivery-Networks
Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
23
http://www.elegantthemes.com/plugins/monarch/
Ladezeit-Optimierung am Server
![Page 24: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/24.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Ladezeit-Optimierungim HTML-Code
![Page 25: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/25.jpg)
© 121WATT - André Goldmann
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)
![Page 26: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/26.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Ladezeit-Optimierungfür Bilder und Grafiken
![Page 27: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/27.jpg)
© 121WATT - André Goldmann
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
![Page 28: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/28.jpg)
© 121WATT - André Goldmann
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)
Bildqualität reduzieren
28
http://optimus.io/
Ladezeit-Optimierung für Bilder und Grafiken
![Page 29: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/29.jpg)
© 121WATT - André Goldmann
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)
Bildqualität reduzieren
29
https://kraken.io/
Ladezeit-Optimierung für Bilder und Grafiken
![Page 30: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/30.jpg)
© 121WATT - André Goldmann
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)
Bildqualität reduzieren
Bilder per CDN laden
30
https://deliciousbrains.com/wp-offload-s3/
Ladezeit-Optimierung für Bilder und Grafiken
![Page 31: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/31.jpg)
© 121WATT - André Goldmann
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)
Bildqualität reduzieren
Bilder per CDN laden
Icons als Font laden (http://fontello.com/ oder https://icomoon.io/)
31
https://icomoon.io/
Ladezeit-Optimierung für Bilder und Grafiken
![Page 32: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/32.jpg)
© 121WATT - André Goldmann
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)
Bildqualität reduzieren
Bilder per CDN laden
Icons als Font laden (http://fontello.com/ oder https://icomoon.io/)
Einsatz des HTML5 <picture>-Elements
32
https://de.wordpress.org/plugins/picturefillwp/
Ladezeit-Optimierung für Bilder und Grafiken
![Page 33: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/33.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
<picture>Responsive Bilder für unterschiedliche Anwendungsfälle
![Page 34: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/34.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Probleme bei skalierten Bildern
34
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
![Page 35: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/35.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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>
![Page 36: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/36.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 37: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/37.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Beispiel: Zalando auf dem Desktop
37
![Page 38: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/38.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Beispiel: Zalando auf dem Smartphone
38
![Page 39: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/39.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
39
![Page 40: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/40.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 41: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/41.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
41
![Page 42: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/42.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Viewport-basierte Bildauswahl
42
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
![Page 43: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/43.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 44: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/44.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 45: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/45.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Wie optimiert man für den individuellen Nutzer?
![Page 46: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/46.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Was ist Contextual-Content?oder: Was ist personalisierter Content?
![Page 47: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/47.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Unterschiedliche Zielgruppen – personalisierter Content
47
![Page 48: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/48.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 49: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/49.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Kontext: Der Ort des Nutzers
Location-based Services: Angepasste Inhalte und Funktionen auf Basis der geografischen Position des Nutzers (GPS)
49
![Page 50: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/50.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 51: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/51.jpg)
© 121WATT - André Goldmann
51
http://html5demos.com/geo
Geolocation nutzen!
![Page 52: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/52.jpg)
© 121WATT - André Goldmann
52
http://caniuse.com/#search=Geolocation
Can I use Geolocation?
![Page 53: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/53.jpg)
© 121WATT - André Goldmann
53
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist besser.
![Page 54: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/54.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 55: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/55.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 56: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/56.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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
![Page 57: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/57.jpg)
© 121WATT - André Goldmann
57
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
https://dan.exposure.co/tbd-fest?slow=1
![Page 58: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/58.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Umsetzung von „Contextual-Content“:
58
Kontext X, dann Inhalt Y
Ich brauche: Informationen über den Kontext
Ich brauche: Zusatz-Informationen für meinen Inhalt
![Page 59: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/59.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
Wie kann man das alles umsetzen?
…mit Tools natürlich.
![Page 60: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/60.jpg)
© 121WATT - André Goldmann
60
http://www.monetate.com/
Monetate
![Page 61: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/61.jpg)
© 121WATT - André Goldmann
61
http://www.gravity.com/
Gravity
![Page 62: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/62.jpg)
© 121WATT - André Goldmann
62
http://www.apptus.com/
APPTUS
![Page 63: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/63.jpg)
© 121WATT - André Goldmann
63
https://www.onespot.com/
OneSpot
![Page 64: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/64.jpg)
© 121WATT - André Goldmann
64
http://www.monoloop.com/
Monoloop
![Page 65: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/65.jpg)
© 121WATT - André Goldmann
65
https://www.optimizely.com/
Optimizely
![Page 66: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/66.jpg)
© 121WATT - André Goldmann
66
http://www.webpower.eu/de/
Webpower
![Page 67: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/67.jpg)
© 121WATT - André Goldmann
67
https://vwo.com/
Visual Website Optimizer
![Page 68: Performance-Optimierung für WordPress-Websites](https://reader031.fdocuments.net/reader031/viewer/2022021918/588629601a28ab8f2c8b67d5/html5/thumbnails/68.jpg)
© 121WATT - André Goldmann@fuchsfaktor10 #asl16
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]