Mobile CRO – Performance Tuning & personalisierte Inhalte

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

André Goldmann

• 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: andre.goldmann@121watt.de

Los gehts!

Performance-Potentiale finden und nutzen.

Für was/wen optimieren wir?

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.

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

Was wiegt eigentlich eine Website?

Beispiel posterxxl.de:

http://www.posterxxl.de/

Was wiegt eine Website?

Requests: 118

• 1500 kb Bilder

Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

• 290,6 kb Diverses

Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

• 54,1 kb HTML

Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

• 54,1 kb HTML

• 28,6 kb CSS

Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

• 54,1 kb HTML

• 28,6 kb CSS

Requests: 118

• 1500 kb Bilder

• 802,3 kb Script

• 54,1 kb HTML

• 28,6 kb CSS

Page Size: 2.6 MB

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

Beispiel m.zalando.de:

m.zalando.de

Requests: 129

m.zalando.de

Requests: 129

• 507,3 kb Script

m.zalando.de

Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

m.zalando.de

Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS

m.zalando.de

Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS

m.zalando.de

Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS

• 21,8 kb HTML

m.zalando.de

Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS

• 21,8 kb HTML

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

m.zalando.de

Ladezeit für 834,9 kb:

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

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

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

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

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

Beispiel 121watt.de:

http://www.121watt.de

Requests: 66

• 321,2 kb Bilder

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

• 18,7 kb CSS

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

• 18,7 kb CSS

• 13 kb HTML

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

• 18,7 kb CSS

• 13 kb HTML

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script

• 18,7 kb CSS

• 13 kb HTML

Page Size: 584.7 kb

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

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

Pingdom Website Speed Test

Checklisten für den Einstieg in die Optimierung

Ladezeit-Optimierung

Server:

Caching & gzip-Kompression aktivieren

Server:

HTTP-Requests reduzieren

Server:

Weiterleitungsketten auseinandernehmen

Server:

Datenbanken optimieren

Server:

Datenbanken optimieren

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

Ladezeit Optimierung

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)

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:

Bilder nicht durch CSS- oder HTML-Angaben skalieren

Bilder:

Bildqualität reduzieren

Bilder:

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

Bilder:

Bilder per CDN laden

Bilder:

Bilder per CDN laden

Einsatz des <picture>-Element

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

Probleme bei skalierten Bildern

• kein Qualitätsverlust

• mehr Datenvolumen beim Nutzer

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

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

Beispiel: Zalando auf dem Desktop

Beispiel: Zalando auf dem Smartphone

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

Viewport-basierte Bildauswahl

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

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/

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)

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)

https://kraken.io/

kraken.io: Bilder automatisch optimieren

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

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

Kontext: Der Ort des Nutzers

Location-based Services: Angepasste Inhalte und Funktionen auf Basis der geografischen Position des Nutzers (GPS)

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

Lokale Werbung

Berechnung von Liefergebühren, Preisen etc.

Lokale Werbung

Berechnung von Liefergebühren, Preisen etc.

Vorausgefüllte Formularfelder

http://html5demos.com/geo

Geolocation nutzen!

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

Can I use Geolocation?

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

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

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

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

Beispiel: exposure.co

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.

https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf

Kontext: Aktueller Status des Nutzers

https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf

„ungeeignete Produkte“ mobil verkaufen

Problem: Produkt mobil nichtverfügbar oder sinnvoll.

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

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

Umsetzung von „Contextual Content“:

Kontext X, dann Inhalt Y

Ich brauche: Informationen über den Kontext

Ich brauche: Zusatz-Informationen für meinen Inhalt

Wie kann man das alles umsetzen?

…mit Tools natürlich.

http://www.monetate.com/

Monetate

http://www.gravity.com/

Gravity

http://www.apptus.com/

APPTUS

https://www.onespot.com/

OneSpot

http://www.monoloop.com/

Monoloop

https://www.optimizely.com/

Optimizely

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

Webpower

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

Aktuell sichtbare strukturierte Daten auf google.de

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

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

• Audio

• Downloads

• Bilder

• Musikvideos

• Videos im allgemeinen

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

• MobileApplication (Apps)

• Videogames

• WebApplication

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

Structured Data Testing Tool

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

Schon mal an das Gerät gedacht?

Mögliche Conversions…

Bestellung

Bestellung Klick auf einen Link

Bestellung

Anmeldung

Klick auf einen Link

Bestellung

Anmeldung

Video angesehen

Bestellung

Anmeldung

Video angesehenBewertung geschrieben

Bestellung

Anmeldung

Video angesehen

Kommentar hinterlassen

Bewertung geschrieben

Bestellung

Anmeldung

Video angesehen

Allgemeine Interaktion

Bestellung

Anmeldung

Video angesehen

Allgemeine Interaktion Social Sharing

Bestellung

Anmeldung

Video angesehen

Allgemeine Interaktion Social Sharing

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

www.intelliad.de/telefon-tracking/

Alternative Call-Tracking Services

https://www.infinitycloud.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

https://www.ampproject.org/

Accelerated Mobile Pages (AMP)

Fragen?

André Goldmann andre.goldmann@121watt.de@pixeldreher

121WATTLuise-Ullrich-Str. 2080636 München

Tel.: 089 / 416 126 993

@121WATTT | info@121watt.dewww.121watt.de

Mobile CRO – Performance Tuning & personalisierte Inhalte

Education

Transcript of Mobile CRO – Performance Tuning & personalisierte Inhalte

RESULTS BOOK...Range Officer Krušelj Davor, CRO Range Officer Lučić Goran, CRO Range Officer Drlje Mato, CRO Range Officer Moser Tatjana, CRO Range Officer Kovač Tanja, CRO 10m

Anfang des Kapitels NutriMe Gewicht: Personalisierte Medizinprodukte zum Abnehmen 5.

CRO Survey | A CRO program initiative

Personalisierte Onkologie Therapie nach Maß · 1 ₂-KOLUMNE Eckart von Hirschhausen Personalisierte Onkologie NCT IM FOCUS Erfolgreiches Rudern gegen Krebs Eva Winkler und Holger

Vendor-Sponsor Successful Communication · Transfer of Obligations CRO Responsibilities CRO applies standardized tools & trackers CRO controls / manages day-to-day activities CRO

Individuelle und personalisierte Kundenansprache mit Automatisierungen erfolgreich umsetzen

Personalisierte Geschenke für Weihnachten basteln...1. 2. Personalisierte Gutscheinbox Gutschein ist ja nicht gleich Gutschein. Manche Geschenke wie beispielsweise eine Reise lassen

PERSONALISIERTE VILLEN Your dreams begin here · PERSONALISIERTE VILLEN 1 Index Einführung Villa Bahía Villa La Mar Villa Azul Villa Ibiza La Torre La Nao Villa Mirador Cumbre del

Ihre Full Service Agentur | Werbeagentur Studiowerbung · Vorteile für Ihre Kunden „VlP"-Status Personalisierte Inhalte Informationsvorsprung Spannendes Einkaufserlebnis Infos

COMISSÃO DE ARQUIVOS DIGITAIS APLICAÇÕES PRATICAS CRO/RS - ATIVIDADES INTRA-CRO - ATIVIDADES EXTRA-CRO.

INHALTE - U-TOUR

MK-Inhalte 2010

Personalisierte Informationsdienste Nikolaus Berger Berlin, 02. Juli 2004.

Catalogo Cro

MCprint.eu: Fotogeschenke Katalog 2013 · Individuelle Fotogeschenke Personalisierte Fototassen Individuelle Fotogeschenke Personalisierte Fototassen Fototasse – Magic Foto(rot)

|transkript Spezial Laborwelt 1-2/2013: Personalisierte Medizin

TWT Trendradar: Myswear & Farfetch bietet personalisierte Schuhe an

Personalisierte Krebstherapie Aufrecht durch das Tal der Tränen.

Personalisierte Medizin

Personalisierte Suche, Christian Vollmert, luna-park - mailingtage 2013