SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile perf with AMP?

Comment booster ses
performances Mobile avec
la technologie AMP ?

Speakers
▪ Arnaud REYRE
CEO @ Atomic Search
▪ Alexandre SIAHOU
Responsable Digital Marketing @ Thalasseo
▪ Sébastien FOURAULT
Spécialiste UX Mobile @ Google

De quoi allons nous parler ?
▪ Présentation de Thalasseo et de ses enjeux
▪ Quels sont les challenges d’expérience utilisateur
sur le web mobile ?
▪ Comment booster ses perf mobiles avec AMP ?
▪ What’s next ?

▪ Leader de la vente de séjours bien-être en France
▪ Fondé en 2004
▪ Basé à Aix-en-Provence
▪ Agence de voyages qui a généré le plus d’interactions sur
Facebook en septembre 2019
Présentation de Thalasseo

Quels sont les challenges
d’expérience utilisateur sur
le web mobile ?

Proprietary + ConfidentialProprietary + Confidential
1h18min
25 min
Les français sont maintenant nettement mobile-first
Source : Médiamétrie // Netratings, Aout 2019
2h 27 min
Tous les Français Les 15-34 ans

Source : Mary Meeker 2019, Daily hours spent with digital media per adult user, USA
Le temps passé sur un écran croît principalement
grâce au mobile
Mobile
Desktop / Laptop
Other Connected Devices

Les attentes des consommateurs changent
55% 60% 76%
de croissance de
recherches mobiles
contenant “Idées”
des voyageurs préférerait
une courte liste d’options
reflétant leur préférences
plutôt qu’une liste exhaustive
des voyageurs abandonnent
une réservation quand le
checkout prend plus d’1
minute
Curieux Exigeants Impatients
Sources: Google data 2019, Google/Ipsos, April 2018, Google/Phocuswright August 2018

Mais les sites mobiles n’ont pas rattrapés leur retard
contentbazaar.co/20160314/pi-way
Interface irritanteManque de réactivitéChargement lent
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Taux de conversionTemps passé par écran
MobileDesktop
4x
Mobile
conversion rate
Desktop
conversion rate
1/2
Source: StatCounter, Quarterly Ecommerce Report from Monetate
Ce qui peut expliquer des conversions mobiles plus faibles

Proprietary + Confidential
%des utilisateurs de
smartphones sont moins
enclins à acheter un produit
ou service après avoir vécu
une mauvaise expérience sur
un site mobile ou application
Source: Google/Greenberg, Rising Expectations in Consumer Experiences, March 2017, U.S. (n of 1,501 consumers 18-54)

Rapidité &
Performances
Technologies Web
Modernes
Interface &
Parcours Intuitifs
Comment travailler votre expérience mobile
pour booster vos Conversions ?
et adopter une Culture Mobile-First

The ideal funnel
Acquire
Engage
Convert
Retain
Your funnel

Acquire
Engage
Convert
Retain
Fast Page Load
Speed & Performance
The ideal funnelYour funnel
Accelerated Mobile Page (AMP)

Acquire
Engage
Convert
Retain
Reliable & Responsive UI
Progressive Web App (PWA)
Intuitive UX

Acquire
Engage
Convert
Retain
Seamless Conversion Flow
One-Click Payment
One-Click SignUp / SignIn

Acquire
Engage
Convert
Retain Re-engage with Users
Push Notifications
Add to Home Screen

12
seconds
Human:
2000
9
seconds
Goldfish
8
seconds
Human:
2013
3
seconds
Recommended
load time
L’attention humaine en perspective

We ❤ users, and users ❤ speed !
Chrome Dev
Tools
LightHouse
Chrome User
Experience Report
1 seconde de chargement peut
impacter jusqu’à 20% vos
conversions mobiles

1 seconde de chargement peut impacter jusqu’à 20%
vos conversions mobiles
1.7
1.6
1.4
1.2
1.0
0.8
0.6
0.4
0.2
0.0
1.2 1.5 1.8 2. 2.5 2.7 3.0 3.3 3.5 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
Load time (seconds)
Conversionrate(%)
1.9% conversion rate
(2.5 seconds)
1.5% conversion rate
(3.5 seconds)
1 second
27% more
conversions
Conversion rate (%)
Source: "Mobile performance conversion rate"
Note: Data under 2.4 sec
removed due to high rate
of 404s and other errors
skewing results.

‘‘
Annonce récente lors du Chrome Dev Summit
Chrome may identify
sites that typically load
fast or slow for users
with clear badging
‘‘

Source : Why mobile speed means loyal customers, Google Study, n=1,633
La vitesse de chargement impacte également la fidélité
de vos consommateurs

Etes vous rapide ?
Mesurez votre vitesse de chargement sur le site
Google PageSpeed Insights Indicateur à suivre
le Speed Index

Etes vous rapide ?
Indicateur à suivre
le Speed Index
Comment accélérer mon site ?
Google PageSpeed Insights
Réponse 1 : optimisez votre code actuel en suivant les recommandations de
PageSpeed Insights (Peut parfois être long et complexe)

Etes vous rapide ?
Indicateur à suivre
le Speed Index
Comment accélérer mon site ?
Réponse 1 : optimisez votre code actuel en suivant les recommandations de
PageSpeed Insights (Peut parfois être long et complexe)
Réponse 2 : construisez des landing pages avec la technologie AMP !
Google PageSpeed Insights

Comment lancer une page
AMP en 6 étapes ?
(AMP = Accelerated Mobile Pages)

0. Identifiez votre page la plus stratégique
Une page lente avec un fort trafic
Slow pages have low Mobile
Speed Score in Google Ads

Web pages, today
1. Cette page charge beaucoup d’éléments lourds
HTML 20 KB
CSS 300 KB
Images 3 MB
JS 600 KB
Font 80 KB
Total 4 MB
Speed Index 12s to load in 3G

Web pages, today Accelerated Mobile Pages
2. Vous développez cette page à l’identique avec le
framework AMP (qui est très léger)
AMP-HTML 20 KB
CSS 0 KB
(CSS is included in HTML)
AMP-Images 200 KB
(offscreen images are
loaded only if displayed)
AMP-JS 200 KB
Font 80 KB
Total 600 KB
Speed Index 5s to load in 3G

The canonical page
4 MB - 12 sec
The AMP page
600 KB - 5 sec
3. Vous reliez la page AMP à la page canonique
Ce lien permet une redirection de vos utilisateurs mobiles vers la page AMP (en SEO)
https://brand.com/promo.html https://brand.com/amp/promo.html
<link rel="AMPHTML"
href="https://brand.com/amp/promo.html">
<link rel="CANONICAL"
href="https://brand.com/promo.html">

4. Google détecte votre page AMP et la met en cache
The AMP page from your servers
600 KB - 5 sec
https://brand.com/amp/promo.html
The AMP page from Google
cache
600 KB - 1 sechttps://www.google.com/amp/s/brand.co
m/amp/promo.html

5. Vos utilisateurs mobiles charge votre page instantanément
en SEO comme en SEA

in conversion rates
62% increase 39% increase
in conversion rates
100% increase
in conversion rates
95% increase
in conversion rates
19% increase
in conversion rates
80% increase
in conversion rates
3% increase
in conversion rates
33% increase
in conversion rates
6. Vous A/B testez votre page AMP pour mesurer l’impact
business

Un trafic majoritairement sur mobile
2014 2015 2016 2017 2018 2019
+8 pt
+6 pt
+11 pt
+ 5 pt
+10 pt
54%du Trafic Global du site
Internet de Thalasseo provient
du mobile en 2019
(source Google Analytics)

Nous sommes passés au Mobile First !

La Page Vente Flash : un choix clé

Principaux Pré-requis Techniques
▪ Mettre à jour le code de suivi amp-analytics
▪ Intégrer les codes de tracking tiers
▪ Implémenter les images avec la balise <amp-img>
▪ Mettre à jour le fichier Json
▪ Héberger la page AMP sur le nom de domaine

Activation du Protocole de Test (1/2)
▪ Partie Test : 50%
▪ Dates : du 11 février 2019 au 30 avril 2019
▪ Mofidications Apportées : rechercher
"https://www.thalasseo.com/promo-
thalasso" et le remplacer par
"https://www.thalasseo.com/amp/promo-
thalasso.html" dans l'URL finale pour mobile
▪ Campagnes : toutes
(source Google Ads)

Activation du Protocole de Test (2/2)
Page AMP utilisé dans les SERP mobile
Faster Page
Lower Bounce Rate

Impact de la Page AMP sur l’Expérience
Utilisateur
Temps de Chargement Taux de Rebond
-85% -6% Faster Page
Lower Bounce Rate
(source Google Analytics)

Résultats des Tests Google Ads
Taux de Transformation Coût d’Acquisition
+30% -39%
(source Eulerian Analytics)

Adoptez un modèle de gouvernance WebPerf
Un dashboard
centralisé
Des KPIs partagés
entre les équipes IT &
métier
Un référent webperf
côté IT et un autre
référent côté métier
1 2 3

Designez, Présentez, Développez en Mobile-First
Image from Stephanie Walter

Adoptez des Technologies Récentes
Exemples de Framework Javascript modernes

Upgradez votre site en Progressive Web App (PWA)
Offline
Browsing
Push
notification
Prefetch
resources
Access from
Home Screen

Faites des Test Utilisateurs mobiles fréquents
Image from The Colony
Toutes les semaines
Faites tester votre site mobile à des
collaborateurs
Tous les mois
Faites tester votre site mobile à des vrais
utilisateurs
Tous les semestres
Organiser un focus group avec des clients

Formez vos équipes Dev et UX sur les meilleures pratiques
web.dev winonmobile.withgoogle.com

Et pour Thalasseo, what’s next ?

SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile perf with AMP?

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile perf with AMP?

Similaire à SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile perf with AMP? (20)

SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile perf with AMP?