Mobile-first : évitez de perdre vos clients avec un site trop lent

#ECP16 #mobile #webperf

Importance du mobile

Usage du mobile

Mobile-only

mCommerce

60% DESKTOP 40% MOBILE / TABLETTE

25% DESKTOP 75% MOBILE / TABLETTE

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

Mobile-first • Encore plus sur certains marchés

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

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

Des études (très) récentes

Résultats

53% des visites sont abandonnées si le site mobile

met plus de 3s à charger !

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

Témoignages clients

« 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.”

« 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 » !

Mobile, mobilité

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

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

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

Abandon

Tests A/B • d

Mobile vs Desktop

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

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 !

Comment faire ?

Waterfall

Waterfalls

Métriques techniques

Métriques UX : Speed Index

Speed Index

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

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

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

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

1

1

2

FEO

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 !

2

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

1

3

3

1

2

FEO

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

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

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

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

Quelques références

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

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

Comment ça marche ?

Comment ça marche ?

Comment ça marche ?

Comment ça marche ?

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

51Des questions ?

Des questions ?

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