© 121WATT - André Goldmann@pixeldreher #convcon
Mobile CRO
Performance-Tuning &

Content-Optimierung für

mobile Webseiten
© 121WATT - André Goldmann@pixeldreher #convcon
André Goldmann
2
• Seit 1996 Front-End-Entwickler 

& Optimierer aus Leide...
© 121WATT - André Goldmann@pixeldreher #convcon
Los gehts!
© 121WATT - André Goldmann@pixeldreher #convcon
Performance-Potentiale
finden und nutzen.
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Besucher
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Besucher
Algorithmen
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Besucher
Time on site
Algorithmen
© 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Traffic
Besucher
Time on site
Alg...
© 121WATT - André Goldmann@pixeldreher #convcon
Auf allen Ebenen für eine
bessere Conversion.
© 121WATT - André Goldmann@pixeldreher #convcon
13
© 121WATT - André Goldmann@pixeldreher #convcon
13
Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr

Quelle: http...
© 121WATT - André Goldmann@pixeldreher #convcon
13
Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr

Quelle: http...
© 121WATT - André Goldmann@pixeldreher #convcon
Was wiegt eigentlich eine
Website?
© 121WATT - André Goldmann
Beispiel posterxxl.de:
15
http://www.posterxxl.de/
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
15
http://www.posterxxl.de/
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
15
http://www.posterxxl.de/
Was wiegt ein...
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
15
http://www.posterxxl...
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
15
...
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 5...
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 5...
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 5...
© 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 5...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
16
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec

2,6 MB = 46 Sekunden
16
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec

2,6 MB = 46 Sekunden
• E...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec

2,6 MB = 46 Sekunden
• E...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec

2,6 MB = 46 Sekunden
• E...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec

2,6 MB = 46 Sekunden
• E...
© 121WATT - André Goldmann
Beispiel m.zalando.de:
17
m.zalando.de
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
17
m.zalando.de
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
17
m.zalando.de
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
17
m.zalando.de
Was wi...
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
17
m.zal...
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 k...
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 k...
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 k...
© 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 k...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
18
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec

834,9 kb = 15 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec

834,9 kb = 15 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec

834,9 kb = 15 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec

834,9 kb = 15 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec

834,9 kb = 15 Sekunden...
© 121WATT - André Goldmann
Beispiel 121watt.de:
19
http://www.121watt.de
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
19
http://www.121watt.de
Was wiegt eine Website?
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
19
http://www.121watt.de
Was wiegt eine Web...
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
19
http://www.121watt.de
...
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
19
htt...
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7...
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7...
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7...
© 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
20
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec

584,7 kb = 10 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec

584,7 kb = 10 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec

584,7 kb = 10 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec

584,7 kb = 10 Sekunden...
© 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec

584,7 kb = 10 Sekunden...
© 121WATT - André Goldmann
21
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test
© 121WATT - André Goldmann@pixeldreher #convcon
Checklisten für den Einstieg in
die Optimierung
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
23
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
23
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Re...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Re...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Re...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Re...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
24
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
24
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimiere...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimiere...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimiere...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimiere...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimiere...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimiere...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
25
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (...
© 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (...
© 121WATT - André Goldmann@pixeldreher #convcon
<picture>
Responsive Bilder für unterschiedliche Anwendungsfälle
© 121WATT - André Goldmann@pixeldreher #convcon
Probleme bei skalierten Bildern
27
© 121WATT - André Goldmann@pixeldreher #convcon
Probleme bei skalierten Bildern
27
• kein Qualitätsverlust
• mehr Datenvol...
© 121WATT - André Goldmann@pixeldreher #convcon
Probleme bei skalierten Bildern
27
• kein Qualitätsverlust
• mehr Datenvol...
© 121WATT - André Goldmann@pixeldreher #convcon
Lösung: <picture>-Element
28
Bildquelle: http://www.apple.com/de/
Bildquel...
© 121WATT - André Goldmann@pixeldreher #convcon
Lösung: <picture>-Element
28
Bildquelle: http://www.apple.com/de/
Bildquel...
© 121WATT - André Goldmann@pixeldreher #convcon
Lösung: <picture>-Element
28
Bildquelle: http://www.apple.com/de/
Bildquel...
© 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/D...
© 121WATT - André Goldmann@pixeldreher #convcon
Beispiel: Zalando auf dem Desktop
30
© 121WATT - André Goldmann@pixeldreher #convcon
Beispiel: Zalando auf dem Smartphone
31
© 121WATT - André Goldmann@pixeldreher #convcon
Beispiel: Zalando auf dem Smartphone
31
© 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/D...
© 121WATT - André Goldmann@pixeldreher #convcon
Pixel-Dichten-basierte Bildauswahl (Pixeldensity)
Für den Nutzer sichtbar:...
© 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/D...
© 121WATT - André Goldmann@pixeldreher #convcon
Viewport-basierte Bildauswahl
35
Bild-Quelle: http://www.html5rocks.com/en...
© 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/D...
© 121WATT - André Goldmann
37
caniuse.com/#search=picture
Aktueller Browser-Support (Stand 10/2015)
© 121WATT - André Goldmann@pixeldreher #convcon
Lösungsansatz: <picture> & Picturefill
• JavaScript-Lösung, die das src-Ele...
© 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
39
© 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildau...
© 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildau...
© 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildau...
© 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildau...
© 121WATT - André Goldmann@pixeldreher #convcon
Auswirkungen
• Art-Direction-basierte Bildauswahl

(Bildausschnitt enorm w...
© 121WATT - André Goldmann
41
https://kraken.io/
kraken.io: Bilder automatisch optimieren
© 121WATT - André Goldmann
42
https://developers.google.com/speed/
Make the Web Faster Blog
© 121WATT - André Goldmann@pixeldreher #convcon
Responsive Content =

Contextual Content
© 121WATT - André Goldmann@pixeldreher #convcon
Was ist Contextual Content?
oder: Was ist personalisierter Content?
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Der Nutzer selbst
Nutzerdaten verwenden, um Inhalte auszuspielen:...
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Der Ort des Nutzers
Location-based Services: Angepasste Inhalte u...
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
48
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
48
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Person...
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Person...
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Person...
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Person...
© 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Person...
© 121WATT - André Goldmann
49
http://html5demos.com/geo
Geolocation nutzen!
© 121WATT - André Goldmann
50
http://caniuse.com/#search=Geolocation
Can I use Geolocation?
© 121WATT - André Goldmann
51
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist...
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Das eigentliche Gerät
Responsive Design: Angepasste Inhaltsmengen...
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Uhrzeit des Nutzers
Anpassung der Inhalte je nach Tageszeit bzw. ...
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Haltung oder Befinden des Nutzers
Sitzt der Nutzer auf dem Sofa?

...
© 121WATT - André Goldmann
55
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
© 121WATT - André Goldmann
55
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
https://dan.exposure.co/tbd-fest?slow...
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Aktueller Status des Nutzers
Nutzer wechseln zwischen den Geräten...
© 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Aktueller Status des Nutzers
57
https://think.withgoogle.com/data...
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
58
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
58
Problem: Produkt mobil nicht

verfügbar oder sinnvoll.
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
58
Problem: Produkt mobil nicht

verfügbar oder sinnvoll...
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
59
Problem: Produkt mobil nicht

verfügbar oder sinnvoll...
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
60
Problem: Produkt mobil nicht

verfügbar oder sinnvoll.
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
60
Problem: Produkt mobil nicht

verfügbar oder sinnvoll...
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
61
Problem: Produkt mobil nicht

verfügbar oder sinnvoll.
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
61
Problem: Produkt mobil nicht

verfügbar oder sinnvoll...
© 121WATT - André Goldmann@pixeldreher #convcon
Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y
© 121WATT - André Goldmann@pixeldreher #convcon
Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y
Ich brauch...
© 121WATT - André Goldmann@pixeldreher #convcon
Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y
Ich brauch...
© 121WATT - André Goldmann@pixeldreher #convcon
Wie kann man das alles
umsetzen?
…mit Tools natürlich.
© 121WATT - André Goldmann
64
http://www.monetate.com/
Monetate
© 121WATT - André Goldmann
65
http://www.gravity.com/
Gravity
© 121WATT - André Goldmann
66
http://www.apptus.com/
APPTUS
© 121WATT - André Goldmann
67
https://www.onespot.com/
OneSpot
© 121WATT - André Goldmann
68
http://www.monoloop.com/
Monoloop
© 121WATT - André Goldmann
69
https://www.optimizely.com/
Optimizely
© 121WATT - André Goldmann
70
http://www.webpower.eu/de/
Webpower
© 121WATT - André Goldmann
71
https://vwo.com/
Visual Website Optimizer
© 121WATT - André Goldmann@pixeldreher #convcon
Structured Data
© 121WATT - André Goldmann
Hier sichtbar: http://schema.org/Organization Markup + MyBusiness Seiten
Weitere mögliche Unter...
© 121WATT - André Goldmann
74
Aktuell sichtbare strukturierte Daten

auf google.de
Hier sichtbar: https://schema.org/Revie...
© 121WATT - André Goldmann
75
Aktuell sichtbare strukturierte Daten

auf google.de
Hier sichtbar: https://schema.org/Media...
© 121WATT - André Goldmann
76
Aktuell sichtbare strukturierte Daten

auf google.de
Hier sichtbar: https://schema.org/Softw...
© 121WATT - André Goldmann
Aktuell sichtbare strukturierte Daten

auf google.de
77
Hier sichtbar: https://schema.org/Event...
© 121WATT - André Goldmann@pixeldreher #convcon
https://www.google.de/webmasters/markup-helper/u/0/
Structured Data Integr...
© 121WATT - André Goldmann@pixeldreher #convcon
Structured Data Testing Tool
79
https://developers.google.com/webmasters/s...
© 121WATT - André Goldmann@pixeldreher #convcon
Schon mal an das

Gerät gedacht?
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Klick auf einen Link
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Klick auf einen Link
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Klick auf ei...
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Bewertung ge...
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hi...
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hi...
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hi...
© 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hi...
© 121WATT - André Goldmann
Telefonnummern nutzen
82
© 121WATT - André Goldmann
Telefonnummern nutzen
• Aufbau wie beim mailto: Link für E-Mails

<a href="tel:+4989416126990">...
© 121WATT - André Goldmann
Telefonnummern nutzen
• Aufbau wie beim mailto: Link für E-Mails

<a href="tel:+4989416126990">...
© 121WATT - André Goldmann
Telefonnummern nutzen
• Aufbau wie beim mailto: Link für E-Mails

<a href="tel:+4989416126990">...
© 121WATT - André Goldmann
83
www.intelliad.de/telefon-tracking/
Alternative Call-Tracking Services
© 121WATT - André Goldmann
84
https://www.infinitycloud.com/call-tracking
Alternative Call-Tracking Services
© 121WATT - André Goldmann@pixeldreher #convcon
Ausblick in die Zukunft
© 121WATT - André Goldmann
• Googles Antwort auf „Instant Articles“ von
Facebook
• Komprimiert den Code auf ein Minimum

(...
© 121WATT - André Goldmann@pixeldreher #convcon
Fragen?
87
André Goldmann

andre.goldmann@121watt.de

@pixeldreher
121WATT...
Nächste SlideShare
Wird geladen in …5
×

Mobile CRO – Performance Tuning & personalisierte Inhalte

1.067 Aufrufe

Veröffentlicht am

Meine Folien von der Conversion Conference 2015 in Berlin zum Thema Performance Optimierung & personalisierte Inhalte

Veröffentlicht in: Bildung
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.067
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile CRO – Performance Tuning & personalisierte Inhalte

  1. 1. © 121WATT - André Goldmann@pixeldreher #convcon Mobile CRO Performance-Tuning &
 Content-Optimierung für
 mobile Webseiten
  2. 2. © 121WATT - André Goldmann@pixeldreher #convcon André Goldmann 2 • Seit 1996 Front-End-Entwickler 
 & Optimierer aus Leidenschaft • Chief Operating Officer bei der 121WATT
 Geschäftsinhaber bei Pixeldreher • Seminare bei der 121WATT:
 Mobile SEO
 Technical SEO & OnPage 
 SEO-Grundlagen & SEO für E-Commerce • Twitter: @pixeldreher
 E-Mail: andre.goldmann@121watt.de
  3. 3. © 121WATT - André Goldmann@pixeldreher #convcon Los gehts!
  4. 4. © 121WATT - André Goldmann@pixeldreher #convcon Performance-Potentiale finden und nutzen.
  5. 5. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir?
  6. 6. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir? Umsatz
  7. 7. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir? Umsatz Klicks
  8. 8. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir? Umsatz Klicks Besucher
  9. 9. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir? Umsatz Klicks Besucher Algorithmen
  10. 10. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir? Umsatz Klicks Besucher Time on site Algorithmen
  11. 11. © 121WATT - André Goldmann@pixeldreher #convcon Für was/wen optimieren wir? Umsatz Klicks Traffic Besucher Time on site Algorithmen
  12. 12. © 121WATT - André Goldmann@pixeldreher #convcon Auf allen Ebenen für eine bessere Conversion.
  13. 13. © 121WATT - André Goldmann@pixeldreher #convcon 13
  14. 14. © 121WATT - André Goldmann@pixeldreher #convcon 13 Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr
 Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
  15. 15. © 121WATT - André Goldmann@pixeldreher #convcon 13 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
  16. 16. © 121WATT - André Goldmann@pixeldreher #convcon Was wiegt eigentlich eine Website?
  17. 17. © 121WATT - André Goldmann Beispiel posterxxl.de: 15 http://www.posterxxl.de/ Was wiegt eine Website?
  18. 18. © 121WATT - André Goldmann Beispiel posterxxl.de: Requests: 118 15 http://www.posterxxl.de/ Was wiegt eine Website?
  19. 19. © 121WATT - André Goldmann Beispiel posterxxl.de: Requests: 118 • 1500 kb Bilder 15 http://www.posterxxl.de/ Was wiegt eine Website?
  20. 20. © 121WATT - André Goldmann Beispiel posterxxl.de: Requests: 118 • 1500 kb Bilder • 802,3 kb Script 15 http://www.posterxxl.de/ Was wiegt eine Website?
  21. 21. © 121WATT - André Goldmann Beispiel posterxxl.de: Requests: 118 • 1500 kb Bilder • 802,3 kb Script • 290,6 kb Diverses 15 http://www.posterxxl.de/ Was wiegt eine Website?
  22. 22. © 121WATT - André Goldmann Beispiel posterxxl.de: Requests: 118 • 1500 kb Bilder • 802,3 kb Script • 290,6 kb Diverses • 54,1 kb HTML 15 http://www.posterxxl.de/ Was wiegt eine Website?
  23. 23. © 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 15 http://www.posterxxl.de/ Was wiegt eine Website?
  24. 24. © 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 15 http://www.posterxxl.de/ Was wiegt eine Website?
  25. 25. © 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 15 http://www.posterxxl.de/ Was wiegt eine Website?
  26. 26. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 2,6 MB: 16
  27. 27. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 2,6 MB: • GPRS: 56 kbit/sec
 2,6 MB = 46 Sekunden 16
  28. 28. © 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 16
  29. 29. © 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 16
  30. 30. © 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 16
  31. 31. © 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 16
  32. 32. © 121WATT - André Goldmann Beispiel m.zalando.de: 17 m.zalando.de Was wiegt eine Website?
  33. 33. © 121WATT - André Goldmann Beispiel m.zalando.de: Requests: 129 17 m.zalando.de Was wiegt eine Website?
  34. 34. © 121WATT - André Goldmann Beispiel m.zalando.de: Requests: 129 • 507,3 kb Script 17 m.zalando.de Was wiegt eine Website?
  35. 35. © 121WATT - André Goldmann Beispiel m.zalando.de: Requests: 129 • 507,3 kb Script • 243,9 kb Bilder 17 m.zalando.de Was wiegt eine Website?
  36. 36. © 121WATT - André Goldmann Beispiel m.zalando.de: Requests: 129 • 507,3 kb Script • 243,9 kb Bilder • 35,7 kb CSS 17 m.zalando.de Was wiegt eine Website?
  37. 37. © 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 17 m.zalando.de Was wiegt eine Website?
  38. 38. © 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 17 m.zalando.de Was wiegt eine Website?
  39. 39. © 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 17 m.zalando.de Was wiegt eine Website?
  40. 40. © 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
 17 m.zalando.de Was wiegt eine Website?
  41. 41. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 834,9 kb: 18
  42. 42. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 834,9 kb: • GPRS: 56 kbit/sec
 834,9 kb = 15 Sekunden 18
  43. 43. © 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 18
  44. 44. © 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 18
  45. 45. © 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 18
  46. 46. © 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 18
  47. 47. © 121WATT - André Goldmann Beispiel 121watt.de: 19 http://www.121watt.de Was wiegt eine Website?
  48. 48. © 121WATT - André Goldmann Beispiel 121watt.de: Requests: 66 19 http://www.121watt.de Was wiegt eine Website?
  49. 49. © 121WATT - André Goldmann Beispiel 121watt.de: Requests: 66 • 321,2 kb Bilder 19 http://www.121watt.de Was wiegt eine Website?
  50. 50. © 121WATT - André Goldmann Beispiel 121watt.de: Requests: 66 • 321,2 kb Bilder • 147,6 kb Script 19 http://www.121watt.de Was wiegt eine Website?
  51. 51. © 121WATT - André Goldmann Beispiel 121watt.de: Requests: 66 • 321,2 kb Bilder • 147,6 kb Script • 84,3 kb Diverses 19 http://www.121watt.de Was wiegt eine Website?
  52. 52. © 121WATT - André Goldmann Beispiel 121watt.de: Requests: 66 • 321,2 kb Bilder • 147,6 kb Script • 84,3 kb Diverses • 18,7 kb CSS 19 http://www.121watt.de Was wiegt eine Website?
  53. 53. © 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 19 http://www.121watt.de Was wiegt eine Website?
  54. 54. © 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 19 http://www.121watt.de Was wiegt eine Website?
  55. 55. © 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 19 http://www.121watt.de Was wiegt eine Website?
  56. 56. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 584,7 kb: 20
  57. 57. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 584,7 kb: • GPRS: 56 kbit/sec
 584,7 kb = 10 Sekunden 20
  58. 58. © 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 20
  59. 59. © 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 20
  60. 60. © 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 20
  61. 61. © 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 20
  62. 62. © 121WATT - André Goldmann 21 http://tools.pingdom.com/fpt/ Pingdom Website Speed Test
  63. 63. © 121WATT - André Goldmann@pixeldreher #convcon Checklisten für den Einstieg in die Optimierung
  64. 64. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit-Optimierung Server: 23
  65. 65. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit-Optimierung Server: Caching & gzip-Kompression aktivieren 23
  66. 66. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit-Optimierung Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren 23
  67. 67. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit-Optimierung Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen 23
  68. 68. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit-Optimierung Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 23
  69. 69. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit-Optimierung Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen 23
  70. 70. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: 24
  71. 71. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen 24
  72. 72. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen 24
  73. 73. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) 24
  74. 74. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) CSS: Neue Dateien nicht per @import nachladen 24
  75. 75. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) CSS: Neue Dateien nicht per @import nachladen CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain) 24
  76. 76. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) CSS: Neue Dateien nicht per @import nachladen CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain) CSS3 statt Grafiken für Buttons nutzen 24
  77. 77. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) CSS: Neue Dateien nicht per @import nachladen CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain) CSS3 statt Grafiken für Buttons nutzen Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich des Nutzers ist) 24
  78. 78. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung Bilder: 25
  79. 79. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung 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) 25
  80. 80. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung 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) Bilder nicht durch CSS- oder HTML-Angaben skalieren 25
  81. 81. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung 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) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren 25
  82. 82. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung 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) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) 25
  83. 83. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung 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) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) Bilder per CDN laden 25
  84. 84. © 121WATT - André Goldmann@pixeldreher #convcon Ladezeit Optimierung 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) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) Bilder per CDN laden Einsatz des <picture>-Element 25
  85. 85. © 121WATT - André Goldmann@pixeldreher #convcon <picture> Responsive Bilder für unterschiedliche Anwendungsfälle
  86. 86. © 121WATT - André Goldmann@pixeldreher #convcon Probleme bei skalierten Bildern 27
  87. 87. © 121WATT - André Goldmann@pixeldreher #convcon Probleme bei skalierten Bildern 27 • kein Qualitätsverlust • mehr Datenvolumen beim Nutzer
  88. 88. © 121WATT - André Goldmann@pixeldreher #convcon Probleme bei skalierten Bildern 27 • kein Qualitätsverlust • mehr Datenvolumen beim Nutzer • deutlicher Qualitätsverlust • weniger Datenvolumen beim Nutzer
  89. 89. © 121WATT - André Goldmann@pixeldreher #convcon Lösung: <picture>-Element 28 Bildquelle: 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>
  90. 90. © 121WATT - André Goldmann@pixeldreher #convcon Lösung: <picture>-Element 28 Bildquelle: 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>
  91. 91. © 121WATT - André Goldmann@pixeldreher #convcon Lösung: <picture>-Element 28 Bildquelle: 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>
  92. 92. © 121WATT - André Goldmann@pixeldreher #convcon 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 • Bild-Dateiformat-basierte Bildauswahl (SVG, WebP) 29
  93. 93. © 121WATT - André Goldmann@pixeldreher #convcon Beispiel: Zalando auf dem Desktop 30
  94. 94. © 121WATT - André Goldmann@pixeldreher #convcon Beispiel: Zalando auf dem Smartphone 31
  95. 95. © 121WATT - André Goldmann@pixeldreher #convcon Beispiel: Zalando auf dem Smartphone 31
  96. 96. © 121WATT - André Goldmann@pixeldreher #convcon 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 • Bild-Dateiformat-basierte Bildauswahl (SVG, WebP) 32
  97. 97. © 121WATT - André Goldmann@pixeldreher #convcon 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 33
  98. 98. © 121WATT - André Goldmann@pixeldreher #convcon 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 • Bild-Dateiformat-basierte Bildauswahl (SVG, WebP) 34
  99. 99. © 121WATT - André Goldmann@pixeldreher #convcon Viewport-basierte Bildauswahl 35 Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
  100. 100. © 121WATT - André Goldmann@pixeldreher #convcon 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 • Bild-Dateiformat-basierte Bildauswahl (SVG, WebP) 36
  101. 101. © 121WATT - André Goldmann 37 caniuse.com/#search=picture Aktueller Browser-Support (Stand 10/2015)
  102. 102. © 121WATT - André Goldmann@pixeldreher #convcon Lösungsansatz: <picture> & Picturefill • JavaScript-Lösung, die das src-Element im <img> mit dem jeweils definierten Bild austauscht • Download unter: http://scottjehl.github.io/picturefill/ 38
  103. 103. © 121WATT - André Goldmann@pixeldreher #convcon Wann sollten wir welche Auswahl definieren? 39
  104. 104. © 121WATT - André Goldmann@pixeldreher #convcon Wann sollten wir welche Auswahl definieren? • Art-Direction-basierte Bildauswahl
 (Bildausschnitt enorm wichtig, CTA muss sichtbar sein) 39
  105. 105. © 121WATT - André Goldmann@pixeldreher #convcon 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) 39
  106. 106. © 121WATT - André Goldmann@pixeldreher #convcon 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
 (Usergenerated Content, Performance, automatische Prozesse) 39
  107. 107. © 121WATT - André Goldmann@pixeldreher #convcon 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
 (Usergenerated Content, Performance, automatische Prozesse) • Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
 (sollte eher über andere Lösungen geregelt werden. Fallbacks sind in der Regel eh vorhanden bzw. es wird bereits das beste Format genutzt) 39
  108. 108. © 121WATT - André Goldmann@pixeldreher #convcon Auswirkungen • 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) • Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
 (sollte eher über andere Lösungen geregelt werden. Fallbacks sind in der Regel eh vorhanden bzw. es wird bereits das beste Format genutzt) 40
  109. 109. © 121WATT - André Goldmann 41 https://kraken.io/ kraken.io: Bilder automatisch optimieren
  110. 110. © 121WATT - André Goldmann 42 https://developers.google.com/speed/ Make the Web Faster Blog
  111. 111. © 121WATT - André Goldmann@pixeldreher #convcon Responsive Content =
 Contextual Content
  112. 112. © 121WATT - André Goldmann@pixeldreher #convcon Was ist Contextual Content? oder: Was ist personalisierter Content?
  113. 113. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  114. 114. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  115. 115. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  116. 116. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  117. 117. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  118. 118. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  119. 119. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  120. 120. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  121. 121. © 121WATT - André Goldmann@pixeldreher #convcon Unterschiedliche Zielgruppen – personalisierter Content 45
  122. 122. © 121WATT - André Goldmann@pixeldreher #convcon 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 46
  123. 123. © 121WATT - André Goldmann@pixeldreher #convcon Kontext: Der Ort des Nutzers Location-based Services: Angepasste Inhalte und Funktionen auf Basis der geografischen Position des Nutzers (GPS) 47
  124. 124. © 121WATT - André Goldmann Wozu kann man die Geolocation nutzen? 48
  125. 125. © 121WATT - André Goldmann Wozu kann man die Geolocation nutzen? Navigation zu einem Geschäft (festgelegte Adresse) 48
  126. 126. © 121WATT - André Goldmann Wozu kann man die Geolocation nutzen? Navigation zu einem Geschäft (festgelegte Adresse) Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.) 48
  127. 127. © 121WATT - André Goldmann Wozu kann man die Geolocation nutzen? Navigation zu einem Geschäft (festgelegte Adresse) Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.) Lokale Werbung 48
  128. 128. © 121WATT - André Goldmann 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.) 48
  129. 129. © 121WATT - André Goldmann 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. 48
  130. 130. © 121WATT - André Goldmann 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 48
  131. 131. © 121WATT - André Goldmann 49 http://html5demos.com/geo Geolocation nutzen!
  132. 132. © 121WATT - André Goldmann 50 http://caniuse.com/#search=Geolocation Can I use Geolocation?
  133. 133. © 121WATT - André Goldmann 51 https://www.maxmind.com/de/geoip2-services-and-databases Fragen ist nett. Einfach machen ist besser.
  134. 134. © 121WATT - André Goldmann@pixeldreher #convcon Kontext: Das eigentliche Gerät Responsive Design: Angepasste Inhaltsmengen, Bedienlogik & Darstellung der Website. Darstellung/Funktion der Website auf Basis des Geräts/der Geräteart Umleitung zur App-Installation 52
  135. 135. © 121WATT - André Goldmann@pixeldreher #convcon 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 53
  136. 136. © 121WATT - André Goldmann@pixeldreher #convcon 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 54
  137. 137. © 121WATT - André Goldmann 55 https://dan.exposure.co/tbd-fest Beispiel: exposure.co
  138. 138. © 121WATT - André Goldmann 55 https://dan.exposure.co/tbd-fest Beispiel: exposure.co https://dan.exposure.co/tbd-fest?slow=1
  139. 139. © 121WATT - André Goldmann@pixeldreher #convcon Kontext: Aktueller Status des Nutzers Nutzer wechseln zwischen den Geräten und erweitern/aktualisieren ihren Status während des Prozesses. 56 https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf
  140. 140. © 121WATT - André Goldmann@pixeldreher #convcon Kontext: Aktueller Status des Nutzers 57 https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf
  141. 141. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 58
  142. 142. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 58 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll.
  143. 143. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 58 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll. Lösung: Hotline nutzen und Anruf-
 Button zur Verfügung stellen.
  144. 144. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 59 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll. Lösung: Hotline nutzen und Anruf-
 Button zur Verfügung stellen.
  145. 145. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 60 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll.
  146. 146. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 60 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll. Lösung 2: Link zum Produkt per
 E-Mail zuschicken, um am Desktop
 die Conversion auszulösen.
  147. 147. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 61 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll.
  148. 148. © 121WATT - André Goldmann „ungeeignete Produkte“ mobil verkaufen 61 Problem: Produkt mobil nicht
 verfügbar oder sinnvoll. Lösung 2: Link zum Produkt per
 E-Mail zuschicken, um am Desktop
 die Conversion auszulösen.
  149. 149. © 121WATT - André Goldmann@pixeldreher #convcon Umsetzung von „Contextual Content“: 62 Kontext X, dann Inhalt Y
  150. 150. © 121WATT - André Goldmann@pixeldreher #convcon Umsetzung von „Contextual Content“: 62 Kontext X, dann Inhalt Y Ich brauche:
 Informationen über den Kontext
  151. 151. © 121WATT - André Goldmann@pixeldreher #convcon Umsetzung von „Contextual Content“: 62 Kontext X, dann Inhalt Y Ich brauche:
 Informationen über den Kontext Ich brauche:
 Zusatz-Informationen für meinen Inhalt
  152. 152. © 121WATT - André Goldmann@pixeldreher #convcon Wie kann man das alles umsetzen? …mit Tools natürlich.
  153. 153. © 121WATT - André Goldmann 64 http://www.monetate.com/ Monetate
  154. 154. © 121WATT - André Goldmann 65 http://www.gravity.com/ Gravity
  155. 155. © 121WATT - André Goldmann 66 http://www.apptus.com/ APPTUS
  156. 156. © 121WATT - André Goldmann 67 https://www.onespot.com/ OneSpot
  157. 157. © 121WATT - André Goldmann 68 http://www.monoloop.com/ Monoloop
  158. 158. © 121WATT - André Goldmann 69 https://www.optimizely.com/ Optimizely
  159. 159. © 121WATT - André Goldmann 70 http://www.webpower.eu/de/ Webpower
  160. 160. © 121WATT - André Goldmann 71 https://vwo.com/ Visual Website Optimizer
  161. 161. © 121WATT - André Goldmann@pixeldreher #convcon Structured Data
  162. 162. © 121WATT - André Goldmann Hier sichtbar: http://schema.org/Organization Markup + MyBusiness Seiten Weitere mögliche Untergliederungen wären z.B.: • Airline • Corporation • EducationalOrganization • GovernmentOrganization • LocalBusiness • NGO • PerformingGroup • SportsOrganization 73 Aktuell sichtbare strukturierte Daten
 auf google.de
  163. 163. © 121WATT - André Goldmann 74 Aktuell sichtbare strukturierte Daten
 auf google.de Hier sichtbar: https://schema.org/Review Markup für Sterne & Reviews sowie
 https://schema.org/BreadcrumbList für Breadcrumbs. Reviews & Sterne können z.B. für folgende Seiten-Typen genutzt werden: • Organisationen • Produkte • „Plätze“ (Orte) • Angebote • Marken • Events • Services • Kreative Arbeiten
  164. 164. © 121WATT - André Goldmann 75 Aktuell sichtbare strukturierte Daten
 auf google.de Hier sichtbar: https://schema.org/MediaObject Markup Weitere mögliche Untergliederungen wären z.B.: • Audio • Downloads • Bilder • Musikvideos • Videos im allgemeinen
  165. 165. © 121WATT - André Goldmann 76 Aktuell sichtbare strukturierte Daten
 auf google.de Hier sichtbar: https://schema.org/SoftwareApplication Markup Weitere mögliche Untergliederungen wären z.B.: • MobileApplication (Apps) • Videogames • WebApplication
  166. 166. © 121WATT - André Goldmann Aktuell sichtbare strukturierte Daten
 auf google.de 77 Hier sichtbar: https://schema.org/Event Markup Weitere mögliche Untergliederungen wären z.B.: • BusinessEvent • ComedyEvent • DanceEvent • DeliveryEvent • EducationEvent • Festival • FoodEvent • SaleEvent • SportsEvent
  167. 167. © 121WATT - André Goldmann@pixeldreher #convcon https://www.google.de/webmasters/markup-helper/u/0/ Structured Data Integration 78
  168. 168. © 121WATT - André Goldmann@pixeldreher #convcon Structured Data Testing Tool 79 https://developers.google.com/webmasters/structured-data/testing-tool/
  169. 169. © 121WATT - André Goldmann@pixeldreher #convcon Schon mal an das
 Gerät gedacht?
  170. 170. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81
  171. 171. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung
  172. 172. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Klick auf einen Link
  173. 173. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Klick auf einen Link
  174. 174. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Video angesehen Klick auf einen Link
  175. 175. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Video angesehen Bewertung geschrieben Klick auf einen Link
  176. 176. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Video angesehen Kommentar hinterlassen Bewertung geschrieben Klick auf einen Link
  177. 177. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Video angesehen Kommentar hinterlassen Bewertung geschrieben Klick auf einen Link Allgemeine Interaktion
  178. 178. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Video angesehen Kommentar hinterlassen Bewertung geschrieben Klick auf einen Link Allgemeine Interaktion Social Sharing
  179. 179. © 121WATT - André Goldmann@pixeldreher #convcon Mögliche Conversions… 81 Bestellung Anmeldung Video angesehen Kommentar hinterlassen Bewertung geschrieben Klick auf einen Link Allgemeine Interaktion Social Sharing ?
  180. 180. © 121WATT - André Goldmann Telefonnummern nutzen 82
  181. 181. © 121WATT - André Goldmann Telefonnummern nutzen • Aufbau wie beim mailto: Link für E-Mails
 <a href="tel:+4989416126990">089 / 416 126 990</a> 82
  182. 182. © 121WATT - André Goldmann Telefonnummern nutzen • Aufbau wie beim mailto: Link für E-Mails
 <a href="tel:+4989416126990">089 / 416 126 990</a> • internationale Nummern-Präfix für das Land nutzen (Bsp.: +49 statt 0) 82
  183. 183. © 121WATT - André Goldmann Telefonnummern nutzen • Aufbau wie beim mailto: Link für E-Mails
 <a href="tel:+4989416126990">089 / 416 126 990</a> • internationale Nummern-Präfix für das Land nutzen (Bsp.: +49 statt 0) • nach Möglichkeit eigene „Online“-Rufnummer nutzen, um Tracking zu ermöglichen 82
  184. 184. © 121WATT - André Goldmann 83 www.intelliad.de/telefon-tracking/ Alternative Call-Tracking Services
  185. 185. © 121WATT - André Goldmann 84 https://www.infinitycloud.com/call-tracking Alternative Call-Tracking Services
  186. 186. © 121WATT - André Goldmann@pixeldreher #convcon Ausblick in die Zukunft
  187. 187. © 121WATT - André Goldmann • Googles Antwort auf „Instant Articles“ von Facebook • Komprimiert den Code auf ein Minimum
 (AMP HTML) • Code wird bei Google gecached und ausgegeben • Analytics, Ad-Code und Co. werden entfernt Monetarisierung kann über neue, eigens für AMP angelegte Ad-Formate, Abomodelle und Bezahlschranken vorgenommen werden 86 https://www.ampproject.org/ Accelerated Mobile Pages (AMP)
  188. 188. © 121WATT - André Goldmann@pixeldreher #convcon Fragen? 87 André Goldmann
 andre.goldmann@121watt.de
 @pixeldreher 121WATT
 Luise-Ullrich-Str. 20
 80636 München Tel.: 089 / 416 126 993 @121WATTT | info@121watt.de
 www.121watt.de

×