Thomas Soudaz et Damien Jubeau discutent des enjeux liés à la performance des sites mobiles lors de la conférence SEOcamp. Ils soulignent l'importance des temps de chargement rapides pour la conversion et les meilleures pratiques pour optimiser les performances, telles que l'utilisation de designs minimalistes et la réduction des redirections. Le document propose également des outils pour mesurer et surveiller la performance des sites web.

1. Temps de chargement
T’as pas un site performant ?
THOMAS SOUDAZ / DAMIEN JUBEAU
SEOCAMPUS - 07/04/2016 1

2. #seocamp
Thomas Soudaz
Fondateur de la société Refficience, Consultant Web, WebPerf et SEO
@tsoudaz
Site : Refficience.com
Email : ts refficience.com

3. #seocamp
Damien Jubeau
Fondateur de la société Dareboost, solution de monitoring et d’audit de performance et qualité web
@dareboost
Site : dareboost.com
Email : Damien dareboost.com

5. t
Attente = Frustration
© Stefan dzialeka

7. #seocampUsage Mobile
Mobile
Desktop / Laptop
Objets connectés
Heuresparjour

8. #seocampData mobile
Source : akamai state of the internet
Data
Voix

9. #seocampData mobile
0
1000
2000
3000
4000
5000
6000
7000
TransfertsenMo
MàJ App
Navigateur
Musique
Geoloc
Jeux
Social
Mail
Chat
Web app
Info
e-commerce
Source : iPhone 6 Thomas Soudaz
18% !?

10. #seocamp

11. #seocamp
Source : Soasta
Mobile : 1 sec de délai pénalise la conversion
Taux de conversion
Taux de conversion
Temps de chargement (secondes)
Visites
Tauxdeconversion(%)
Visites faible qualité Visites Conversions

12. #seocampProblème de la Performance mobile
 Latence
 Capacité CPU
 Mémoire
 Consommation de batterie
 Tailles d’écrans réduites
 Tap delay
 InApp web
 Forfaits Data/Roaming

13. #seocampTransactions App vs Navigateur mobile
Source : Criteo - state of mobile e-commerce

14. #seocamp

15. #seocampUltra-Fragmentation !

16. #seocamp
Parts de marché Navigateurs mobile
Chrome
23%
Safari iOS9
23%
Safari iOS8
10%
InApp iOS
12%
Android
15%
Samsung
7%
Opera 3%
Windows Phone 3%
UC Browser 3%
Autres 2%
Source : Apple/NetmarketShare/Statcounter

17. #seocampSolutions Techniques
Choix marketing
Site mobile dédié ? Besoin ?
Même contenus desktop/mobile ?
Appli et/ou Webapp ?
Choix technique
Url Identique / m. / répertoire ?
Redirection ? Combien de redirection ? JS, JS inline ? Serveur ?
Redirection A/R ?
Et si on faisait du RWD ?
Solution tierce (plugin wp, template RWD, service d’automatisation, CDN)

18. #seocampChoix et impacts
Source : test réalisés sous WPT – 3G 100ms de latence
Top 10 Fr Techno URL Surcoût !
Leboncoin RWD Unique Surcout faible
Lefigaro RWD Unique Surtéléchargement! / 2mo
CreditAgricole.fr RWD Unique Surtéléchargement! / 1.2mo
Orange redirection serveur > site m. 2 Urls 150/200 ms
Leparisien redirection javascript > site m. 2 Urls 400/500 ms
Lequipe redirection javascript > site m. 2 Urls 400/500 ms
Lemonde redirection fichier JS > site m. 2 Urls 500/700 ms
Pages Jaunes RESS Unique
Sfr Adaptive + Tablet RWD Unique
Allociné Pas de site mobile - site WAP 1999! 

19. #seocampBonnes pratiques mobile
Objectif Speedindex : < 2500 = top 10%
 0 redirection! => Url commune desktop/tablette/mobile
 Adaptive delivery ou RESS => /! Sur-téléchargement
 Design : Flat/Flex/Minimaliste/Mobile first!
 Différer les ressources non critiques (img/css/js)
 Limiter l’usage de font (1max et pas de font icon)

20. #seocamp
on ne peut améliorer que ce que l'on mesure

21. #seocamp
TTFB
(délai avant premier octet)

22. #seocamp
200ms
Source : Google https://developers.google.com/speed/docs/insights/Server?hl=fr

23. #seocamp
Start Render
(délai avant début d'affichage)

24. #seocamp

25. #seocamp
Visually Complete
(délai avant fin d'affichage)

26. #seocamp

27. #seocamp
Speed Index

28. #seocamp

29. #seocamp

30. #seocamp
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

31. #seocamp
< 1000
(1 seconde pour le contenu « above the fold »)
https://developers.google.com/speed/docs/insights/mobile

32. #seocamp
Evolution fonctionnelle
Evolution technique
Evolution du contenu
Contributif
Dépendances aux tierces parties

33. #seocamp
Surveillance

34. #seocamp
2 approches
(complémentaires)

35. #seocamp
Real User Monitoring
(monitoring passif)
« la vraie vie »

36. #seocamp

37. #seocamp
Monitoring Synthétique
(monitoring actif)
internaute simulé

38. #seocamp
HTTPs
Boost SEO ?
(attention à la migration !)

39. #seocamp
Sécurité

40. #seocamp
HTTP est sur le chemin
de la dépréciation !

41. #seocampHTTP2
 HTTP2 pipelining
 Compression des Headers
 Push
/! HTTTP 1.1 vs HTTP2
Les fausses bonnes idées :
 Concaténation CSS/JS
 Sprite CSS
 Domain Sharding

42. #seocamp
Source : movr - scientiamobile.com

43. #seocamp
« En tant que chef de produit vous
devriez considérer la vitesse comme la
première des fonctionnalités »
Larry Page
Budget de Performance

44. #seocamp
Se fixer des objectifs
« le site doit être rapide »
« la page doit faire moins de 1Mo »
« le serveur doit répondre en 150ms »

45. #seocamp
Optimiser
Epurer
Abandonner

46. #seocamp
Respect du budget

47. #seocamp
Budget toujours KO ?
=> il évolue !

48. #seocamp
Pour chaque étape et
pour chaque interlocuteur

49. #seocampToolbox
Diagnostic Niveau
 Google Pagespeed Insights Débutant
 Outils de développement Chrome/FF/IE Intermédiaire/Avancé
 WebpageTest Avancé
Mesures RUM
 Google Analytics Débutant
 Soasta € Intermédiaire
 Basilic.io € Intermédiaire
Mesures Synthétiques
 WPT monitor Avancé
 SpeedCurve € Intermédiaire
 Dareboost € Intermédiaire

50. Questions ?
THOMAS SOUDAZ / DAMIEN JUBEAU
SEOCAMPUS - 07/04/2016 50