Mobile CRO – Performance Tuning & personalisierte Inhalte

© 121WATT - André Goldmann@pixeldreher #convcon
Mobile CRO
Performance-Tuning & 
Content-Optimierung für 
mobile Webseiten

André Goldmann
2
• Seit 1996 Front-End-Entwickler  
& Optimierer aus Leidenschaft
• Chief Operating Ofﬁcer 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

Los gehts!

Performance-Potentiale
ﬁnden und nutzen.

Für was/wen optimieren wir?

Umsatz

Umsatz
Klicks

Umsatz
Klicks
Besucher

Umsatz
Klicks
Besucher
Algorithmen

Umsatz
Klicks
Besucher
Time on site
Algorithmen

Umsatz
Klicks
Trafﬁc
Besucher
Time on site
Algorithmen

Auf allen Ebenen für eine
bessere Conversion.

13

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

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

Was wiegt eigentlich eine
Website?

© 121WATT - André Goldmann
Beispiel posterxxl.de:
15
http://www.posterxxl.de/
Was wiegt eine Website?

Requests: 118
15

Requests: 118
• 1500 kb Bilder
15

Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
15

Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
15

Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 54,1 kb HTML
15

Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 54,1 kb HTML
• 28,6 kb CSS
15

Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 54,1 kb HTML
• 28,6 kb CSS
Page Size: 2.6 MB
15

Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
16

• GPRS: 56 kbit/sec 
2,6 MB = 46 Sekunden
16

• EDGE: 220 kbit/sec 
16

• UMTS (3G): 376 kbit/sec 
2,6 MB = 7 Sekunden
16

2,6 MB = 7 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec 
2,6 MB = 0,3 Sekunden
16

2,6 MB = 7 Sekunden
• LTE (4G): 100 Mbit/sec 
16

Beispiel m.zalando.de:
17
m.zalando.de

Requests: 129
17
m.zalando.de

Requests: 129
• 507,3 kb Script
17
m.zalando.de

Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
17
m.zalando.de

Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
17
m.zalando.de

Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 21,8 kb HTML
17
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 
17
m.zalando.de

Ladezeit für 834,9 kb:
18

834,9 kb = 15 Sekunden
18

18

834,9 kb = 0,1 Sekunden
18

18

Beispiel 121watt.de:
19
http://www.121watt.de

Requests: 66
19

Requests: 66
• 321,2 kb Bilder
19

Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
19

Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 18,7 kb CSS
19

Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 18,7 kb CSS
• 13 kb HTML
19

Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 18,7 kb CSS
• 13 kb HTML
Page Size: 584.7 kb
19

20

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

Checklisten für den Einstieg in
die Optimierung

Ladezeit-Optimierung
Server:
23

Server:
Caching & gzip-Kompression aktivieren
23

Server:
HTTP-Requests reduzieren
23

Server:
Weiterleitungsketten auseinandernehmen
23

Server:
Datenbanken optimieren
23

Server:
Datenbanken optimieren
Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
23

Ladezeit Optimierung
HTML:
24

HTML:
HTML-Kommentare entfernen
24

HTML:
HTML-Code komprimieren & ungenutztes CSS entfernen
24

HTML:
Inline CSS & JS entfernen und in Dateien ausführen (können gecached
werden)
24

HTML:
werden)
CSS: Neue Dateien nicht per @import nachladen
24

HTML:
werden)
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
24

HTML:
werden)
CSS3 statt Graﬁken für Buttons nutzen
24

HTML:
werden)
CSS3 statt Graﬁken für Buttons nutzen
Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich des
Nutzers ist)
24

Bilder:
25

Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgraﬁken; .png oder .gif für Layoutgraﬁken; Alternativ auch .svg
oder .webp)
25

Bilder:
oder .webp)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
25

Bilder:
oder .webp)
Bildqualität reduzieren
25

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

Bilder:
oder .webp)
Bilder per CDN laden
25

Bilder:
oder .webp)
Bilder per CDN laden
Einsatz des <picture>-Element
25

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

Probleme bei skalierten Bildern
27

27
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer

27
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer

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/Auﬂösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>

Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer ﬂexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
29

Beispiel: Zalando auf dem Desktop
30

Beispiel: Zalando auf dem Smartphone
31

32

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

34

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

36

37
caniuse.com/#search=picture
Aktueller Browser-Support (Stand 10/2015)

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

Wann sollten wir welche Auswahl deﬁnieren?
39

• Art-Direction-basierte Bildauswahl 
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
39

• Pixel-Dichten-basierte Bildauswahl 
(Zielgruppe ist im High-Resolution Bereich)
39

• Viewport-basierte Bildauswahl 
(Usergenerated Content, Performance, automatische Prozesse)
39

(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

Auswirkungen
(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

41
https://kraken.io/
kraken.io: Bilder automatisch optimieren

42
https://developers.google.com/speed/
Make the Web Faster Blog

Responsive Content = 
Contextual Content

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

Unterschiedliche Zielgruppen – personalisierter Content
45

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

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

Wozu kann man die Geolocation nutzen?
48

Navigation zu einem Geschäft (festgelegte Adresse)
48

Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
48

Lokale Werbung
48

Lokale Werbung
Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.)
48

Lokale Werbung
Berechnung von Liefergebühren, Preisen etc.
48

Lokale Werbung
Berechnung von Liefergebühren, Preisen etc.
Vorausgefüllte Formularfelder
48

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

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

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

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

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

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

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

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

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

Kontext: Aktueller Status des Nutzers
57
https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf

„ungeeignete Produkte“ mobil verkaufen
58

58
Problem: Produkt mobil nicht 
verfügbar oder sinnvoll.

58
Lösung: Hotline nutzen und Anruf- 
Button zur Verfügung stellen.

59
Lösung: Hotline nutzen und Anruf- 
Button zur Verfügung stellen.

60

60
Lösung 2: Link zum Produkt per 
E-Mail zuschicken, um am Desktop 
die Conversion auszulösen.

61

61
Lösung 2: Link zum Produkt per 
E-Mail zuschicken, um am Desktop 
die Conversion auszulösen.

Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y

62
Ich brauche: 
Informationen über den Kontext

62
Ich brauche: 
Informationen über den Kontext
Ich brauche: 
Zusatz-Informationen für meinen Inhalt

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

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

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

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

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

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

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

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

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

Structured Data

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

74
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

75
auf google.de
Hier sichtbar: https://schema.org/MediaObject Markup
• Audio
• Downloads
• Bilder
• Musikvideos
• Videos im allgemeinen

76
auf google.de
Hier sichtbar: https://schema.org/SoftwareApplication Markup
• MobileApplication (Apps)
• Videogames
• WebApplication

auf google.de
77
Hier sichtbar: https://schema.org/Event Markup
• BusinessEvent
• ComedyEvent
• DanceEvent
• DeliveryEvent
• EducationEvent
• Festival
• FoodEvent
• SaleEvent
• SportsEvent

https://www.google.de/webmasters/markup-helper/u/0/
Structured Data Integration
78

Structured Data Testing Tool
79
https://developers.google.com/webmasters/structured-data/testing-tool/

Schon mal an das 
Gerät gedacht?

Mögliche Conversions…
81

81
Bestellung

81
Bestellung
Klick auf einen Link

81
Bestellung
Anmeldung

81
Bestellung
Anmeldung
Video angesehen

81
Bestellung
Anmeldung
Video angesehen
Bewertung geschrieben

81
Bestellung
Anmeldung
Video angesehen
Kommentar hinterlassen

81
Bestellung
Anmeldung
Video angesehen
Allgemeine Interaktion

81
Bestellung
Anmeldung
Video angesehen
Allgemeine Interaktion Social Sharing

81
Bestellung
Anmeldung
Video angesehen
Allgemeine Interaktion Social Sharing
?

Telefonnummern nutzen
82

• Aufbau wie beim mailto: Link für E-Mails 
<a href="tel:+4989416126990">089 / 416 126 990</a>
82

<a href="tel:+4989416126990">089 / 416 126 990</a>
• internationale Nummern-Präﬁx für das Land nutzen (Bsp.: +49 statt 0)
82

<a href="tel:+4989416126990">089 / 416 126 990</a>
• internationale Nummern-Präﬁx für das Land nutzen (Bsp.: +49 statt 0)
• nach Möglichkeit eigene „Online“-Rufnummer nutzen, um Tracking zu
ermöglichen
82

83
www.intelliad.de/telefon-tracking/
Alternative Call-Tracking Services

84
https://www.inﬁnitycloud.com/call-tracking
Alternative Call-Tracking Services

Ausblick in die Zukunft

• 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)

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

Mobile CRO – Performance Tuning & personalisierte Inhalte

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Destacado

Destacado (18)

Similar a Mobile CRO – Performance Tuning & personalisierte Inhalte

Similar a Mobile CRO – Performance Tuning & personalisierte Inhalte (9)

Mobile CRO – Performance Tuning & personalisierte Inhalte