Mobile CRO – Performance Tuning & personalisierte Inhalte

© 121WATT - André Goldmann@pixeldreher #convcon

Mobile CROPerformance-Tuning &Content-Optimierung fürmobile Webseiten


André Goldmann

2

• Seit 1996 Front-End-Entwickler & Optimierer aus Leidenschaft

• Chief Operating Officer bei der 121WATTGeschäftsinhaber bei Pixeldreher

• Seminare bei der 121WATT: Mobile SEOTechnical SEO & OnPage SEO-Grundlagen & SEO für E-Commerce

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

mailto:[email protected]


Los gehts!


Performance-Potentiale finden und nutzen.


Für was/wen optimieren wir?



Umsatz



Umsatz

Klicks



Umsatz

Klicks

Besucher



Umsatz

Klicks

Besucher

Algorithmen



Umsatz

Klicks

Besucher

Time on siteAlgorithmen



Umsatz

Klicks

Traffic

Besucher

Time on siteAlgorithmen


Auf allen Ebenen für eine bessere Conversion.

© 121WATT - André Goldmann@pixeldreher #convcon13


Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

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


Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

Google hat errechnet, dass eine 4/10 Sekunde täglich Acht Mio. weniger Suchen bedeuten würdeQuelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience

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

http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience


Was wiegt eigentlich eine Website?

© 121WATT - André Goldmann

Beispiel posterxxl.de:

15

http://www.posterxxl.de/

Was wiegt eine Website?

http://posterxxl.de



Requests: 118

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

• 290,6 kb Diverses

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

• 802,3 kb Script


• 54,1 kb HTML

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

• 802,3 kb Script


• 54,1 kb HTML

• 28,6 kb CSS

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

• 802,3 kb Script


• 54,1 kb HTML

• 28,6 kb CSS

15



http://posterxxl.de



Requests: 118

• 1500 kb Bilder

• 802,3 kb Script


• 54,1 kb HTML

• 28,6 kb CSS

Page Size: 2.6 MB

15



http://posterxxl.de


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 2,6 MB = 12 Sekunden

16






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

16







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

16







• 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


Beispiel m.zalando.de:

17

m.zalando.de


http://m.zalando.de

http://m.zalando.de



Requests: 129

17

m.zalando.de


http://m.zalando.de

http://m.zalando.de



Requests: 129

• 507,3 kb Script

17

m.zalando.de


http://m.zalando.de

http://m.zalando.de



Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

17

m.zalando.de


http://m.zalando.de

http://m.zalando.de



Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS

17

m.zalando.de


http://m.zalando.de

http://m.zalando.de



Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS


17

m.zalando.de


http://m.zalando.de

http://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


http://m.zalando.de

http://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


http://m.zalando.de

http://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


http://m.zalando.de

http://m.zalando.de



Ladezeit für 834,9 kb:

18




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

18





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

18






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

18







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

18








• LTE (4G): 100 Mbit/sec 834,9 kb = 0,008 Sekunden

18


Beispiel 121watt.de:

19

http://www.121watt.de


http://121watt.de




Requests: 66

19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script


19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script


• 18,7 kb CSS

19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script


• 18,7 kb CSS

• 13 kb HTML

19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script


• 18,7 kb CSS

• 13 kb HTML

19



http://121watt.de




Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script


• 18,7 kb CSS

• 13 kb HTML

Page Size: 584.7 kb

19



http://121watt.de





20





20






20







20








20








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

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:




CSS: Neue Dateien nicht per @import nachladen

24



HTML:





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

24



HTML:






CSS3 statt Grafiken für Buttons nutzen

24



HTML:






CSS3 statt Grafiken für Buttons nutzen

Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich des Nutzers ist)

24



Bilder:

25

http://fontello.com/

https://icomoon.io/



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


https://icomoon.io/



Bilder:


Bilder nicht durch CSS- oder HTML-Angaben skalieren

25


https://icomoon.io/



Bilder:



Bildqualität reduzieren

25


https://icomoon.io/



Bilder:




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

25


https://icomoon.io/



Bilder:





Bilder per CDN laden

25


https://icomoon.io/



Bilder:





Bilder per CDN laden

Einsatz des <picture>-Element

25


https://icomoon.io/


<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

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

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

Das Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus. <picture>

<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">

<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">

<img src="images/kitten-curled.png" alt="a cute kitten">

</picture>

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










</picture>











</picture>




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


Beispiel: Zalando auf dem Desktop

30


Beispiel: Zalando auf dem Smartphone

31


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 immerin 100x100 Pixeln per CSS ausgegeben

33








34


Viewport-basierte Bildauswahl

35

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

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








36


37

caniuse.com/#search=picture

Aktueller Browser-Support (Stand 10/2015)

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


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

http://scottjehl.github.io/picturefill/


Wann sollten wir welche Auswahl definieren?

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





• 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


Auswirkungen



• 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


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



45



45



45



45



45



45



45



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 geografischen 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!

http://html5demos.com/geo


50

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

Can I use Geolocation?

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


51

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

Fragen ist nett. Einfach machen ist besser.

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


Kontext: Das eigentliche Gerät

Responsive Design: Angepasste Inhaltsmengen, 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 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


55

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

Beispiel: exposure.co



55


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 nichtverfü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 Desktopdie Conversion auszulösen.



61




61


Lösung 2: Link zum Produkt per E-Mail zuschicken, um am Desktopdie 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

http://schema.org/Organization


74


Hier sichtbar: https://schema.org/Review Markup für Sterne & Reviews sowiehttps://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

https://schema.org/Review

https://schema.org/BreadcrumbList


75


Hier sichtbar: https://schema.org/MediaObject Markup


• Audio

• Downloads

• Bilder

• Musikvideos

• Videos im allgemeinen

https://schema.org/MediaObject


76


Hier sichtbar: https://schema.org/SoftwareApplication Markup


• MobileApplication (Apps)

• Videogames

• WebApplication

https://schema.org/SoftwareApplication



77

Hier sichtbar: https://schema.org/Event Markup


• BusinessEvent

• ComedyEvent

• DanceEvent

• DeliveryEvent

• EducationEvent

• Festival

• FoodEvent

• SaleEvent

• SportsEvent

https://schema.org/Event


https://www.google.de/webmasters/markup-helper/u/0/

Structured Data Integration

78

https://www.google.de/webmasters/markup-helper/u/0/


Structured Data Testing Tool

79

https://developers.google.com/webmasters/structured-data/testing-tool/

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

Klick auf einen Link



81

Bestellung

Anmeldung

Video angesehen




81

Bestellung

Anmeldung

Video angesehenBewertung geschrieben




81

Bestellung

Anmeldung

Video angesehen

Kommentar hinterlassen

Bewertung geschrieben




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




• internationale Nummern-Präfix für das Land nutzen (Bsp.: +49 statt 0)

82




• 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


83

www.intelliad.de/telefon-tracking/

Alternative Call-Tracking Services


84

https://www.infinitycloud.com/call-tracking

Alternative Call-Tracking Services

https://www.infinitycloud.com/call-tracking


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 [email protected]@pixeldreher

121WATTLuise-Ullrich-Str. 2080636 München

Tel.: 089 / 416 126 993

@121WATTT | [email protected]
