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

Présentation au sujet: "Temps de chargement T’as pas un site performant ? THOMAS SOUDAZ / DAMIEN JUBEAU SEOCAMPUS - 07/04/2016 1."— Transcription de la présentation:

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

4

5 t Attente = Frustration © Stefan dzialeka

6

7 #seocamp Usage Mobile Mobile Desktop / Laptop Objets connectés Heures par jour

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

9 #seocamp Data mobile Source : iPhone 6 Thomas Soudaz 18% !?

10 #seocamp

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

12 #seocamp Problè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 #seocamp Transactions App vs Navigateur mobile Source : Criteo - state of mobile e-commerce

14 #seocamp

15 Ultra-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 #seocamp Solutions 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 #seocamp Choix et impacts Source : test réalisés sous WPT – 3G 100ms de latence Top 10 FrTechnoURLSurcoût ! LeboncoinRWDUniqueSurcout faible LefigaroRWDUniqueSurtéléchargement! / 2mo CreditAgricole.frRWDUniqueSurtéléchargement! / 1.2mo Orangeredirection serveur > site m.2 Urls150/200 ms Leparisienredirection javascript > site m.2 Urls400/500 ms Lequiperedirection javascript > site m.2 Urls400/500 ms Lemonderedirection fichier JS > site m.2 Urls500/700 ms Pages JaunesRESSUnique SfrAdaptive + Tablet RWDUnique AllocinéPas de site mobile - site WAP 1999! 

19 #seocamp Bonnes 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 Visually Complete (délai avant fin d'affichage)

26 #seocamp

27 Speed Index

28 #seocamp

29

30 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 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 #seocamp HTTP2  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 #seocamp Toolbox DiagnosticNiveau  Google Pagespeed InsightsDébutantGoogle Pagespeed Insights  Outils de développement Chrome/FF/IEIntermédiaire/AvancéOutils de développement Chrome/FF/IE  WebpageTestAvancéWebpageTest Mesures RUM  Google AnalyticsDébutant  Soasta €IntermédiaireSoasta  Basilic.io €IntermédiaireBasilic.io Mesures Synthétiques  WPT monitorAvancé  SpeedCurve €IntermédiaireSpeedCurve  Dareboost €IntermédiaireDareboost

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