Temps de chargement
T’as pas un site performant ?
THOMAS SOUDAZ / DAMIEN JUBEAU
SEOCAMPUS - 07/04/2016 1
#seocamp
Thomas Soudaz
Fondateur de la société Refficience, Consultant Web, WebPerf et SEO
@tsoudaz
Site : Refficience.com...
#seocamp
Damien Jubeau
Fondateur de la société Dareboost, solution de monitoring et d’audit de performance et qualité web
...
t
Attente = Frustration
© Stefan dzialeka
#seocampUsage Mobile
Mobile
Desktop / Laptop
Objets connectés
Heuresparjour
#seocampData mobile
Source : akamai state of the internet
Data
Voix
#seocampData mobile
0
1000
2000
3000
4000
5000
6000
7000
TransfertsenMo
MàJ App
Navigateur
Musique
Geoloc
Jeux
Social
Mail...
#seocamp
#seocamp
Source : Soasta
Mobile : 1 sec de délai pénalise la conversion
Taux de conversion
Taux de conversion
Temps de cha...
#seocampProblème de la Performance mobile
 Latence
 Capacité CPU
 Mémoire
 Consommation de batterie
 Tailles d’écrans...
#seocampTransactions App vs Navigateur mobile
Source : Criteo - state of mobile e-commerce
#seocamp
#seocampUltra-Fragmentation !
#seocamp
Parts de marché Navigateurs mobile
Chrome
23%
Safari iOS9
23%
Safari iOS8
10%
InApp iOS
12%
Android
15%
Samsung
7...
#seocampSolutions Techniques
Choix marketing
Site mobile dédié ? Besoin ?
Même contenus desktop/mobile ?
Appli et/ou Webap...
#seocampChoix et impacts
Source : test réalisés sous WPT – 3G 100ms de latence
Top 10 Fr Techno URL Surcoût !
Leboncoin RW...
#seocampBonnes pratiques mobile
Objectif Speedindex : < 2500 = top 10%
 0 redirection! => Url commune desktop/tablette/mo...
#seocamp
on ne peut améliorer que ce que l'on mesure
#seocamp
TTFB
(délai avant premier octet)
#seocamp
200ms
Source : Google https://developers.google.com/speed/docs/insights/Server?hl=fr
#seocamp
Start Render
(délai avant début d'affichage)
#seocamp
#seocamp
Visually Complete
(délai avant fin d'affichage)
#seocamp
#seocamp
Speed Index
#seocamp
#seocamp
#seocamp
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
#seocamp
< 1000
(1 seconde pour le contenu « above the fold »)
https://developers.google.com/speed/docs/insights/mobile
#seocamp
Evolution fonctionnelle
Evolution technique
Evolution du contenu
Contributif
Dépendances aux tierces parties
#seocamp
Surveillance
#seocamp
2 approches
(complémentaires)
#seocamp
Real User Monitoring
(monitoring passif)
« la vraie vie »
#seocamp
#seocamp
Monitoring Synthétique
(monitoring actif)
internaute simulé
#seocamp
HTTPs
Boost SEO ?
(attention à la migration !)
#seocamp
Sécurité
#seocamp
HTTP est sur le chemin
de la dépréciation !
#seocampHTTP2
 HTTP2 pipelining
 Compression des Headers
 Push
/! HTTTP 1.1 vs HTTP2
Les fausses bonnes idées :
 Conca...
#seocamp
Source : movr - scientiamobile.com
#seocamp
« En tant que chef de produit vous
devriez considérer la vitesse comme la
première des fonctionnalités »
Larry Pa...
#seocamp
Se fixer des objectifs
« le site doit être rapide »
« la page doit faire moins de 1Mo »
« le serveur doit répondr...
#seocamp
Optimiser
Epurer
Abandonner
#seocamp
Respect du budget
#seocamp
Budget toujours KO ?
=> il évolue !
#seocamp
Pour chaque étape et
pour chaque interlocuteur
#seocampToolbox
Diagnostic Niveau
 Google Pagespeed Insights Débutant
 Outils de développement Chrome/FF/IE Intermédiair...
Questions ?
THOMAS SOUDAZ / DAMIEN JUBEAU
SEOCAMPUS - 07/04/2016 50
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
Prochain SlideShare
Chargement dans…5
×

Webperformance : mobile, monitoring, http/2, budget performance

2 953 vues

Publié le

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

Publié dans : Technologie
0 commentaire
10 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 953
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 018
Actions
Partages
0
Téléchargements
52
Commentaires
0
J’aime
10
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webperformance : mobile, monitoring, http/2, budget performance

  1. 1. Temps de chargement T’as pas un site performant ? THOMAS SOUDAZ / DAMIEN JUBEAU SEOCAMPUS - 07/04/2016 1
  2. 2. #seocamp Thomas Soudaz Fondateur de la société Refficience, Consultant Web, WebPerf et SEO @tsoudaz Site : Refficience.com Email : ts refficience.com
  3. 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
  4. 4. t Attente = Frustration © Stefan dzialeka
  5. 5. #seocampUsage Mobile Mobile Desktop / Laptop Objets connectés Heuresparjour
  6. 6. #seocampData mobile Source : akamai state of the internet Data Voix
  7. 7. #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% !?
  8. 8. #seocamp
  9. 9. #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
  10. 10. #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
  11. 11. #seocampTransactions App vs Navigateur mobile Source : Criteo - state of mobile e-commerce
  12. 12. #seocamp
  13. 13. #seocampUltra-Fragmentation !
  14. 14. #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
  15. 15. #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)
  16. 16. #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! 
  17. 17. #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)
  18. 18. #seocamp on ne peut améliorer que ce que l'on mesure
  19. 19. #seocamp TTFB (délai avant premier octet)
  20. 20. #seocamp 200ms Source : Google https://developers.google.com/speed/docs/insights/Server?hl=fr
  21. 21. #seocamp Start Render (délai avant début d'affichage)
  22. 22. #seocamp
  23. 23. #seocamp Visually Complete (délai avant fin d'affichage)
  24. 24. #seocamp
  25. 25. #seocamp Speed Index
  26. 26. #seocamp
  27. 27. #seocamp
  28. 28. #seocamp https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  29. 29. #seocamp < 1000 (1 seconde pour le contenu « above the fold ») https://developers.google.com/speed/docs/insights/mobile
  30. 30. #seocamp Evolution fonctionnelle Evolution technique Evolution du contenu Contributif Dépendances aux tierces parties
  31. 31. #seocamp Surveillance
  32. 32. #seocamp 2 approches (complémentaires)
  33. 33. #seocamp Real User Monitoring (monitoring passif) « la vraie vie »
  34. 34. #seocamp
  35. 35. #seocamp Monitoring Synthétique (monitoring actif) internaute simulé
  36. 36. #seocamp HTTPs Boost SEO ? (attention à la migration !)
  37. 37. #seocamp Sécurité
  38. 38. #seocamp HTTP est sur le chemin de la dépréciation !
  39. 39. #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
  40. 40. #seocamp Source : movr - scientiamobile.com
  41. 41. #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
  42. 42. #seocamp Se fixer des objectifs « le site doit être rapide » « la page doit faire moins de 1Mo » « le serveur doit répondre en 150ms »
  43. 43. #seocamp Optimiser Epurer Abandonner
  44. 44. #seocamp Respect du budget
  45. 45. #seocamp Budget toujours KO ? => il évolue !
  46. 46. #seocamp Pour chaque étape et pour chaque interlocuteur
  47. 47. #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
  48. 48. Questions ? THOMAS SOUDAZ / DAMIEN JUBEAU SEOCAMPUS - 07/04/2016 50

×