mobile first : évitez de perdre des clients à cause d'un site trop lent
TRANSCRIPT
![Page 1: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/1.jpg)
Mobile-first : évitez de perdre vos clients avec un site trop lent
#ECP16 #mobile #webperf
![Page 2: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/2.jpg)
Importance du mobile
![Page 3: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/3.jpg)
Usage du mobile
![Page 4: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/4.jpg)
Mobile-only
![Page 5: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/5.jpg)
mCommerce
60% DESKTOP 40% MOBILE / TABLETTE
25% DESKTOP 75% MOBILE / TABLETTE
![Page 6: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/6.jpg)
Mobile-first • Les prévisions du Gartner sont enfin réalisées !
![Page 7: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/7.jpg)
Mobile-first • Encore plus sur certains marchés
![Page 8: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/8.jpg)
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
![Page 9: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/9.jpg)
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
![Page 10: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/10.jpg)
Des études (très) récentes
![Page 11: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/11.jpg)
Résultats
53% des visites sont abandonnées si le site mobile
met plus de 3s à charger !
![Page 12: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/12.jpg)
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
![Page 13: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/13.jpg)
Témoignages clients
![Page 14: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/14.jpg)
« 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.”
![Page 15: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/15.jpg)
« 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 » !
![Page 16: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/16.jpg)
Mobile, mobilité
![Page 17: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/17.jpg)
Impacts business • Impact du temps de chargement sur le taux de conversion
![Page 18: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/18.jpg)
Impacts business • Impact du tps de chargement sur le nombre de pages vues
![Page 19: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/19.jpg)
Impacts business • Impact du temps de chargement sur le taux de rebond
![Page 20: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/20.jpg)
Abandon
![Page 21: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/21.jpg)
Tests A/B • d
![Page 22: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/22.jpg)
Mobile vs Desktop
![Page 23: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/23.jpg)
Mobile vs Desktop • Taux de conversion mobile meilleurs si site plus rapide !
![Page 24: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/24.jpg)
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 !
![Page 25: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/25.jpg)
![Page 26: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/26.jpg)
Comment faire ?
![Page 27: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/27.jpg)
Waterfall
![Page 28: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/28.jpg)
Waterfalls
![Page 29: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/29.jpg)
Métriques techniques
![Page 30: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/30.jpg)
Métriques UX : Speed Index
![Page 31: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/31.jpg)
Speed Index
![Page 32: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/32.jpg)
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
![Page 33: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/33.jpg)
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
![Page 34: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/34.jpg)
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
![Page 35: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/35.jpg)
2 1. Réduction du poids 2. Moins de requêtes
1
1
2
FEO
![Page 36: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/36.jpg)
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 !
![Page 37: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/37.jpg)
2
1. Réduction du poids 2. Moins de requêtes 3. Remplir la page
1
3
3
1
2
FEO
![Page 38: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/38.jpg)
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
![Page 39: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/39.jpg)
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
![Page 40: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/40.jpg)
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
![Page 41: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/41.jpg)
![Page 42: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/42.jpg)
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
![Page 43: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/43.jpg)
Quelques références
![Page 44: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/44.jpg)
L’offre • Solution en mode SaaS pour accélérer l’affichage des sites
![Page 45: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/45.jpg)
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
![Page 46: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/46.jpg)
Comment ça marche ?
![Page 47: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/47.jpg)
Comment ça marche ?
![Page 48: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/48.jpg)
Comment ça marche ?
![Page 49: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/49.jpg)
Comment ça marche ?
![Page 50: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/50.jpg)
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
![Page 51: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/51.jpg)
51Des questions ?
Des questions ?
![Page 52: Mobile first : évitez de perdre des clients à cause d'un site trop lent](https://reader031.vdocuments.net/reader031/viewer/2022030307/58e819451a28ab1b298b48b7/html5/thumbnails/52.jpg)
Contacts Business Andry Ratovo [email protected] +33 6 61 31 38 80 Communication Emilie Wilhelm [email protected] +33 6 19 61 21 25
Suivez notre actualité !
Marc Naggar [email protected] +33 6 31 05 64 71