Présentation lors du SeoCamp'us 2016 il traite les sujet de la performance web de façon assez large : - Usage du mobile - L'importance et les contraintes liées au format mobile - L'incidence du temps de chargement sur la conversion - L'ultra fragmentation mobile - Les solutions techniques identifier les mobiles (redirection/UA sniffing/serveur/JS) - Real user monitoring - Monitoring synthétique - HTTPs et Perf - HTTP/2 et antipattern de l'optimisation - Objectif et budget de webperformance - Outils de diagnostic et monitoring de la performance Présenté par @tsoudaz et @dareboost

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