SlideShare une entreprise Scribd logo
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 ?
Hello Thalasseo
▪ 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
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
Mais les sites mobiles n’ont pas rattrapés leur retard
contentbazaar.co/20160314/pi-way
Interface irritanteManque de réactivitéChargement lent
contentbazaar.co/20160314/pi-way
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
contentbazaar.co/20160314/pi-way
Proprietary + ConfidentialProprietary + Confidential
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
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)
Proprietary + ConfidentialProprietary + Confidential
Rapidité &
Performances
Technologies Web
Modernes
Interface &
Parcours Intuitifs
Comment travailler votre expérience mobile
pour booster vos Conversions ?
et adopter une Culture Mobile-First
Proprietary + ConfidentialProprietary + Confidential
The ideal funnel
Acquire
Engage
Convert
Retain
Your funnel
Proprietary + ConfidentialProprietary + Confidential
Acquire
Engage
Convert
Retain
Fast Page Load
Speed & Performance
The ideal funnelYour funnel
Accelerated Mobile Page (AMP)
Proprietary + ConfidentialProprietary + Confidential
Acquire
Engage
Convert
Retain
Reliable & Responsive UI
The ideal funnelYour funnel
Progressive Web App (PWA)
Intuitive UX
Proprietary + ConfidentialProprietary + Confidential
Acquire
Engage
Convert
Retain
Seamless Conversion Flow
The ideal funnelYour funnel
One-Click Payment
One-Click SignUp / SignIn
Proprietary + ConfidentialProprietary + Confidential
Acquire
Engage
Convert
Retain Re-engage with Users
The ideal funnelYour funnel
Push Notifications
Add to Home Screen
Soyez instantanés !
12
seconds
Human:
2000
9
seconds
Goldfish
8
seconds
Human:
2013
3
seconds
Recommended
load time
L’attention humaine en perspective
Proprietary + ConfidentialProprietary + Confidential
We ❤ users, and users ❤ speed !
Chrome Dev
Tools
LightHouse
Chrome User
Experience Report
1 seconde de chargement peut
impacter jusqu’à 20% vos
conversions mobiles
Proprietary + ConfidentialProprietary + Confidential
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.
Proprietary + ConfidentialProprietary + Confidential
‘‘
Annonce récente lors du Chrome Dev Summit
Chrome may identify
sites that typically load
fast or slow for users
with clear badging
‘‘
Proprietary + ConfidentialProprietary + Confidential
Source : Why mobile speed means loyal customers, Google Study, n=1,633
La vitesse de chargement impacte également la fidélité
de vos consommateurs
Proprietary + ConfidentialProprietary + Confidential
Etes vous rapide ?
Mesurez votre vitesse de chargement sur le site
Google PageSpeed Insights Indicateur à suivre
le Speed Index
Proprietary + ConfidentialProprietary + Confidential
Etes vous rapide ?
Indicateur à suivre
le Speed Index
Comment accélérer mon site ?
Mesurez votre vitesse de chargement sur le site
Google PageSpeed Insights
Réponse 1 : optimisez votre code actuel en suivant les recommandations de
PageSpeed Insights (Peut parfois être long et complexe)
Proprietary + ConfidentialProprietary + Confidential
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 !
Mesurez votre vitesse de chargement sur le site
Google PageSpeed Insights
Comment lancer une page
AMP en 6 étapes ?
(AMP = Accelerated Mobile Pages)
Proprietary + Confidential
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
Proprietary + Confidential
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
Proprietary + Confidential
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
Proprietary + Confidential
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">
Proprietary + Confidential
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
Proprietary + Confidential
5. Vos utilisateurs mobiles charge votre page instantanément
en SEO comme en SEA
Proprietary + Confidential
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
Le projet AMP Thalasseo
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)
What’s Next ?
Proprietary + Confidential
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
Proprietary + Confidential
Designez, Présentez, Développez en Mobile-First
Image from Stephanie Walter
Proprietary + Confidential
Adoptez des Technologies Récentes
Exemples de Framework Javascript modernes
Proprietary + Confidential
Upgradez votre site en Progressive Web App (PWA)
Offline
Browsing
Push
notification
Prefetch
resources
Access from
Home Screen
Proprietary + Confidential
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
Proprietary + Confidential
Formez vos équipes Dev et UX sur les meilleures pratiques
web.dev winonmobile.withgoogle.com
Proprietary + Confidential
Et pour Thalasseo, what’s next ?
Merci !

Contenu connexe

Tendances

SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
Peak Ace
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Peak Ace
 
Synodiance > AMP - EBG - 04/04/2016
Synodiance > AMP - EBG - 04/04/2016Synodiance > AMP - EBG - 04/04/2016
Synodiance > AMP - EBG - 04/04/2016
Search Foresight
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Peak Ace
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
USERADGENTS
 
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Virginie Clève - largow ☕️
 
Internet mobile en 2020 : Progressive web apps PWA et Google AMP
Internet mobile en 2020 : Progressive web apps PWA et Google AMPInternet mobile en 2020 : Progressive web apps PWA et Google AMP
Internet mobile en 2020 : Progressive web apps PWA et Google AMP
Virginie Clève - largow ☕️
 
Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon
Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon
Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon
Peak Ace
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Peak Ace
 
La Performance Mobile : Un enjeux pour le SEO mais pas que.. !
La Performance Mobile : Un enjeux pour le SEO mais pas que.. !La Performance Mobile : Un enjeux pour le SEO mais pas que.. !
La Performance Mobile : Un enjeux pour le SEO mais pas que.. !
David Eichholtzer
 
Synodiance > SEM Local - EBG - 04/11/2015
Synodiance > SEM Local - EBG - 04/11/2015Synodiance > SEM Local - EBG - 04/11/2015
Synodiance > SEM Local - EBG - 04/11/2015
Search Foresight
 
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
Peak Ace
 
Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015
Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015
Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015Search Foresight
 
La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...
La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...
La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...
Peak Ace
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Peak Ace
 
Le mobile first index - Petit déjeuner de Genève du 16 Mai
 Le mobile first index - Petit déjeuner de Genève du 16 Mai Le mobile first index - Petit déjeuner de Genève du 16 Mai
Le mobile first index - Petit déjeuner de Genève du 16 Mai
Peak Ace
 
Internet mobile en 2020 : objectif #PWAMP par Virginie Clève
Internet mobile en 2020 : objectif #PWAMP par Virginie ClèveInternet mobile en 2020 : objectif #PWAMP par Virginie Clève
Internet mobile en 2020 : objectif #PWAMP par Virginie Clève
La Cuisine du Web
 
App Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les storesApp Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les stores
Virginie Clève - largow ☕️
 
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Search Foresight
 
Synodiance > La nouvelle donne du SEO - 13/02/2015
Synodiance > La nouvelle donne du SEO - 13/02/2015Synodiance > La nouvelle donne du SEO - 13/02/2015
Synodiance > La nouvelle donne du SEO - 13/02/2015
Search Foresight
 

Tendances (20)

SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Synodiance > AMP - EBG - 04/04/2016
Synodiance > AMP - EBG - 04/04/2016Synodiance > AMP - EBG - 04/04/2016
Synodiance > AMP - EBG - 04/04/2016
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
 
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
 
Internet mobile en 2020 : Progressive web apps PWA et Google AMP
Internet mobile en 2020 : Progressive web apps PWA et Google AMPInternet mobile en 2020 : Progressive web apps PWA et Google AMP
Internet mobile en 2020 : Progressive web apps PWA et Google AMP
 
Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon
Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon
Le Mobile First Index - Petit Déjeuner du 20 Juin à Lyon
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
 
La Performance Mobile : Un enjeux pour le SEO mais pas que.. !
La Performance Mobile : Un enjeux pour le SEO mais pas que.. !La Performance Mobile : Un enjeux pour le SEO mais pas que.. !
La Performance Mobile : Un enjeux pour le SEO mais pas que.. !
 
Synodiance > SEM Local - EBG - 04/11/2015
Synodiance > SEM Local - EBG - 04/11/2015Synodiance > SEM Local - EBG - 04/11/2015
Synodiance > SEM Local - EBG - 04/11/2015
 
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
 
Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015
Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015
Synodiance > SEO Mobile - L'après 21 Avril - 06/05/2015
 
La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...
La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...
La recherche sur Google devient mobile, mobilisez-vous ! - SEO CAMPUS Lorrain...
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
 
Le mobile first index - Petit déjeuner de Genève du 16 Mai
 Le mobile first index - Petit déjeuner de Genève du 16 Mai Le mobile first index - Petit déjeuner de Genève du 16 Mai
Le mobile first index - Petit déjeuner de Genève du 16 Mai
 
Internet mobile en 2020 : objectif #PWAMP par Virginie Clève
Internet mobile en 2020 : objectif #PWAMP par Virginie ClèveInternet mobile en 2020 : objectif #PWAMP par Virginie Clève
Internet mobile en 2020 : objectif #PWAMP par Virginie Clève
 
App Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les storesApp Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les stores
 
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
 
Synodiance > La nouvelle donne du SEO - 13/02/2015
Synodiance > La nouvelle donne du SEO - 13/02/2015Synodiance > La nouvelle donne du SEO - 13/02/2015
Synodiance > La nouvelle donne du SEO - 13/02/2015
 

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

Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Peak Ace
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Peak Ace
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Peak Ace
 
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanéAMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
semrush_webinars
 
Le marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par UniversemLe marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par Universem
Universem
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?
Virginie Clève - largow ☕️
 
Competitic ergonomie et design site internet - numerique en entreprise
Competitic   ergonomie et design site internet  - numerique en entrepriseCompetitic   ergonomie et design site internet  - numerique en entreprise
Competitic ergonomie et design site internet - numerique en entreprise
COMPETITIC
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Peak Ace
 
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Peak Ace
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
Peak Ace
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
Object Vingt Trois
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
Philippe YONNET
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
Semrush France
 
SEO mobile en 2014
SEO mobile en 2014SEO mobile en 2014
SEO mobile en 2014
David Eichholtzer
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
iProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
Madeline Pinthon
 
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
COMPETITIC
 
Synodiance > SEO - Tendances SEO - French Web - 01/12/2014
Synodiance > SEO - Tendances SEO - French Web - 01/12/2014Synodiance > SEO - Tendances SEO - French Web - 01/12/2014
Synodiance > SEO - Tendances SEO - French Web - 01/12/2014
Search Foresight
 
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
Peak Ace
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
Refficience
 

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

Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
 
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanéAMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
 
Le marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par UniversemLe marketing mobile en 3 étapes par Universem
Le marketing mobile en 3 étapes par Universem
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?
 
Competitic ergonomie et design site internet - numerique en entreprise
Competitic   ergonomie et design site internet  - numerique en entrepriseCompetitic   ergonomie et design site internet  - numerique en entreprise
Competitic ergonomie et design site internet - numerique en entreprise
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
 
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
SEO mobile en 2014
SEO mobile en 2014SEO mobile en 2014
SEO mobile en 2014
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
2011 05 05 rendez accessible votre site internetvia un telephone portable by ...
 
Synodiance > SEO - Tendances SEO - French Web - 01/12/2014
Synodiance > SEO - Tendances SEO - French Web - 01/12/2014Synodiance > SEO - Tendances SEO - French Web - 01/12/2014
Synodiance > SEO - Tendances SEO - French Web - 01/12/2014
 
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
 

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

  • 1. Comment booster ses performances Mobile avec la technologie AMP ?
  • 2. Speakers ▪ Arnaud REYRE CEO @ Atomic Search ▪ Alexandre SIAHOU Responsable Digital Marketing @ Thalasseo ▪ Sébastien FOURAULT Spécialiste UX Mobile @ Google
  • 3. 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 ?
  • 5. ▪ 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
  • 6. Quels sont les challenges d’expérience utilisateur sur le web mobile ?
  • 7. 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
  • 8. Proprietary + ConfidentialProprietary + Confidential 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
  • 9. Proprietary + ConfidentialProprietary + Confidential 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
  • 10. Proprietary + ConfidentialProprietary + Confidential Mais les sites mobiles n’ont pas rattrapés leur retard contentbazaar.co/20160314/pi-way Interface irritanteManque de réactivitéChargement lent contentbazaar.co/20160314/pi-way 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 contentbazaar.co/20160314/pi-way
  • 11. Proprietary + ConfidentialProprietary + Confidential 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
  • 12. Proprietary + Confidential 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)
  • 13. Proprietary + ConfidentialProprietary + Confidential Rapidité & Performances Technologies Web Modernes Interface & Parcours Intuitifs Comment travailler votre expérience mobile pour booster vos Conversions ? et adopter une Culture Mobile-First
  • 14. Proprietary + ConfidentialProprietary + Confidential The ideal funnel Acquire Engage Convert Retain Your funnel
  • 15. Proprietary + ConfidentialProprietary + Confidential Acquire Engage Convert Retain Fast Page Load Speed & Performance The ideal funnelYour funnel Accelerated Mobile Page (AMP)
  • 16. Proprietary + ConfidentialProprietary + Confidential Acquire Engage Convert Retain Reliable & Responsive UI The ideal funnelYour funnel Progressive Web App (PWA) Intuitive UX
  • 17. Proprietary + ConfidentialProprietary + Confidential Acquire Engage Convert Retain Seamless Conversion Flow The ideal funnelYour funnel One-Click Payment One-Click SignUp / SignIn
  • 18. Proprietary + ConfidentialProprietary + Confidential Acquire Engage Convert Retain Re-engage with Users The ideal funnelYour funnel Push Notifications Add to Home Screen
  • 21. Proprietary + ConfidentialProprietary + Confidential We ❤ users, and users ❤ speed ! Chrome Dev Tools LightHouse Chrome User Experience Report 1 seconde de chargement peut impacter jusqu’à 20% vos conversions mobiles
  • 22. Proprietary + ConfidentialProprietary + Confidential 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.
  • 23. Proprietary + ConfidentialProprietary + Confidential ‘‘ Annonce récente lors du Chrome Dev Summit Chrome may identify sites that typically load fast or slow for users with clear badging ‘‘
  • 24. Proprietary + ConfidentialProprietary + Confidential Source : Why mobile speed means loyal customers, Google Study, n=1,633 La vitesse de chargement impacte également la fidélité de vos consommateurs
  • 25. Proprietary + ConfidentialProprietary + Confidential Etes vous rapide ? Mesurez votre vitesse de chargement sur le site Google PageSpeed Insights Indicateur à suivre le Speed Index
  • 26. Proprietary + ConfidentialProprietary + Confidential Etes vous rapide ? Indicateur à suivre le Speed Index Comment accélérer mon site ? Mesurez votre vitesse de chargement sur le site Google PageSpeed Insights Réponse 1 : optimisez votre code actuel en suivant les recommandations de PageSpeed Insights (Peut parfois être long et complexe)
  • 27. Proprietary + ConfidentialProprietary + Confidential 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 ! Mesurez votre vitesse de chargement sur le site Google PageSpeed Insights
  • 28. Comment lancer une page AMP en 6 étapes ? (AMP = Accelerated Mobile Pages)
  • 29. Proprietary + Confidential 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
  • 30. Proprietary + Confidential 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
  • 31. Proprietary + Confidential 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
  • 32. Proprietary + Confidential 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">
  • 33. Proprietary + Confidential 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
  • 34. Proprietary + Confidential 5. Vos utilisateurs mobiles charge votre page instantanément en SEO comme en SEA
  • 35. Proprietary + Confidential 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
  • 36. Le projet AMP Thalasseo
  • 37. 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)
  • 38. Nous sommes passés au Mobile First !
  • 39. La Page Vente Flash : un choix clé
  • 40. 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
  • 41. 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)
  • 42. Activation du Protocole de Test (2/2) Page AMP utilisé dans les SERP mobile Faster Page Lower Bounce Rate
  • 43. 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)
  • 44. Résultats des Tests Google Ads Taux de Transformation Coût d’Acquisition +30% -39% (source Eulerian Analytics)
  • 46. Proprietary + Confidential 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
  • 47. Proprietary + Confidential Designez, Présentez, Développez en Mobile-First Image from Stephanie Walter
  • 48. Proprietary + Confidential Adoptez des Technologies Récentes Exemples de Framework Javascript modernes
  • 49. Proprietary + Confidential Upgradez votre site en Progressive Web App (PWA) Offline Browsing Push notification Prefetch resources Access from Home Screen
  • 50. Proprietary + Confidential 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
  • 51. Proprietary + Confidential Formez vos équipes Dev et UX sur les meilleures pratiques web.dev winonmobile.withgoogle.com
  • 52. Proprietary + Confidential Et pour Thalasseo, what’s next ?