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.
t
Attente = Frustration
© Stefan dzialeka

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

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

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.
#seocamp

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.
#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.
#seocampTransactions App vs Navigateur mobile
Source : Criteo - state of mobile e-commerce

12.
#seocamp

13.
#seocampUltra-Fragmentation !

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.
#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.
#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.
#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.
#seocamp
on ne peut améliorer que ce que l'on mesure

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

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

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

22.
#seocamp

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

24.
#seocamp

25.
#seocamp
Speed Index

26.
#seocamp

27.
#seocamp

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

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

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

31.
#seocamp
Surveillance

32.
#seocamp
2 approches
(complémentaires)

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

34.
#seocamp

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

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

37.
#seocamp
Sécurité

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

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.
#seocamp
Source : movr - scientiamobile.com

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.
#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.
#seocamp
Optimiser
Epurer
Abandonner

44.
#seocamp
Respect du budget

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

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

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.
Questions ?
THOMAS SOUDAZ / DAMIEN JUBEAU
SEOCAMPUS - 07/04/2016 50