mobile first : évitez de perdre des clients à cause d'un site trop lent
Post on 08-Apr-2017
213 Views
Preview:
TRANSCRIPT
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
top related