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

2 417 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 417
Sur SlideShare
0
Issues des intégrations
0
Intégrations
857
Actions
Partages
0
Téléchargements
46
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

×