1.
Mobile-first : évitez de perdre vos
clients avec un site trop lent
#ECP16
#mobile
#webperf

2.
Importance du mobile

3.
Usage du mobile

4.
Mobile-only

5.
mCommerce
60% DESKTOP
40% MOBILE / TABLETTE
25% DESKTOP
75% MOBILE / TABLETTE

6.
Mobile-first
• Les prévisions du Gartner sont enfin réalisées !

7.
Mobile-first
• Encore plus sur certains marchés

8.
100 ms = 1% de CA en moins
• 57 % des visiteurs quittent un site e-commerce s'il met plus
de 4 secondes à s'afficher
• 26 % des visiteurs quittent un site e-commerce s'il met plus
de 2 secondes à s'afficher
• 60% des mobinautes s'attendent à un chargement de 3s
maximum pour un site mobile
• ... Et 74% quittent une page après 5 secondes d'attente

9.
Des attentes fortes
• 71% des mobinautes s’attendent à ce qu’une page web se
charge au moins aussi rapidement sur mobile que sur
ordinateur (contre 58% en 2009)
• 46% estiment que les sites se chargent généralement plus
lentement sur mobile que sur ordinateur
• Pour 60% des mobinautes, une page web doit se charger en
moins de 3 secondes sur un mobile

10.
Des études (très) récentes

11.
Résultats
53% des visites sont
abandonnées si le site mobile
met plus de 3s à charger !

12.
Résultats
46% des
consommateurs
disent qu’attendre
des pages qui se
chargent est ce
qu’il détestent le
plus quand il
surfent sur mobile

13.
Témoignages clients

14.
« On a la 4G non ? »
• “Facebook … will give
employees an
opportunity to see
what using the app
with an incredibly slow
connection feels like
and help close the
"empathy gap"
between Silicon Valley
and emerging
markets.”

15.
« Il a Free, il a tout compris »
37% des possesseurs de
smartphone atteignent la
limite de leur forfait data
au moins une fois.
Bien 15% disent que ça
arrive « fréquemment » !

16.
Mobile, mobilité

17.
Impacts business
• Impact du temps de chargement sur le taux de conversion

18.
Impacts business
• Impact du tps de chargement sur le nombre de pages vues

19.
Impacts business
• Impact du temps de chargement sur le taux de rebond

20.
Abandon

21.
Tests A/B
• d

22.
Mobile vs Desktop

23.
Mobile vs Desktop
• Taux de conversion mobile meilleurs si site plus rapide !

24.
Impact SEO
• Google tient compte du
temps de réponse dans son
classement
• Google expérimente un
label “Slow” sur ses résultats
• Attention au HTTPS !

25.
Comment faire ?

26.
Waterfall

27.
Waterfalls

28.
Métriques techniques

29.
Métriques UX : Speed Index

30.
Speed Index

31.
Métriques business
• Temps pour interagir avec la page (TTFC, TTI)
• Temps de parcours
• trouver un produit
• mettre un produit dans le panier
• finaliser une commande

32.
Quel site web mobile ?
• m.monsite.fr
• double maintenance
• redirections pénalisantes
• Responsive
• la fausse bonne idée
• Adaptatif
• une URL, des contenus différents

33.
Cache & CDN
• But : répondre plus vite et au plus près de l’internaute
• Cache
• plusieurs types (Varnish le plus connu)
• protège et soulage les backends
• CDN = Cache distribué
• Ne répond pas à toutes les situations
• tout n’est pas cachable (mais ESI/Ajax)
• le monde est vaste
• les latences réseaux peuvent être importantes

34.
2
1. Réduction du poids
2. Moins de requêtes
1
1
2
FEO

35.
Third-Parties
• Plus de la moitié des requêtes et du
poids des pages mobiles !
• Beaucoup de redirections, de
résolutions DNS …
• … pour du contenu pas toujours
visible
• Attention au nombre mais surtout à
la façon de les charger !

36.
2
1. Réduction du poids
2. Moins de requêtes
3. Remplir la page
1
3
3
1
2
FEO

37.
Passer en HTTP2
• SPDY = pré-HTTP2
• Une seule connexion et
des requêtes multiplexées
(streams)
• Beaucoup de requêtes en
parallèles
• Compression des headers
• Server Push

38.
Passer à AMP ?
• Accelerated Mobile Page
• Contraintes (très) fortes de webperf
• pages cachables
• chargement limité des scripts, widgets, etc …
• Limitations dans les fonctionnalités (pas de cart par ex)
• a démarré pour les sites de contenu
• seulement du parcours de catalogue aujourd’hui
• Activable facilement avec un CMS

39.
En résumé
• Site adpatatif
• Cache & CDN
• Réduire le poids des pages
• compression, Gzip, minification
• Faire moins de requêtes
• concaténation, inlining, lazyloading
• Remplir la page au dessus de la ligne de flottaison
• lazyloading, deferJS, CSS le plus haut possible et inliné, progressive JPEG, Ajax
• Passer au HTTP2 ...
• ... et plus encore
• prefetching/preloading, sharding/unsharding, URL versionning, font async loading

40.
Fasterize
• Startup française indépendante créée il y a 5 ans
• Leader européen du FEO (Front End Optimization)
• Plus de 250 Millions de pages vues traitées par mois
• Présence internationale : Europe, Asie (Chine continentale),
Amérique du Nord, Amérique Latine
• Lauréat de nombreux concours : EBG, SFR, Ville de Paris,
Eurocloud

41.
Quelques références

42.
L’offre
• Solution en mode SaaS pour accélérer l’affichage des sites

43.
Use case
• Améliorer les temps de chargement
• taux de transfo
• SEO
• nb de pages vues / visites
• Absorber les pics de charge
• soldes
• passage TV
• ventes privées
• Mise en place de CDN / multi-CDN
• internationalisation
• Asie, Brésil, Turquie, Russie, Inde

44.
Comment ça marche ?

45.
Comment ça marche ?

46.
Comment ça marche ?

47.
Comment ça marche ?

48.
Concrètement ?
• Pas de modification de code / pas de modification
d’infrastructure
• Etapes
• fiche technique à remplir
• mini audit + personnalisation de la configuration
• recette en mode « preview »
• mise en place tests A/B
• ajout d’un CNAME au niveau de l’enregistrement DNS ...
• Pas de mode projet
• Planning prévisionnel : 10/15 jours

49.
51
Des questions ?

50.
Contacts
Business
Andry Ratovo
andry@fasterize.com
+33 6 61 31 38 80
Communication
Emilie Wilhelm
emilie@fasterize.com
+33 6 19 61 21 25
Suivez notre actualité !
Marc Naggar
marc@fasterize.com
+33 6 31 05 64 71