Upload
tranthuan
View
228
Download
1
Embed Size (px)
Citation preview
Webperformance, temps de chargement
Temps de chargementTas pas un site performant ?
Thomas SOUDAZ / DAMIEN JUBEAU
Seocampus - 07/04/2016
1
#seocamp
1
Thomas Soudaz
Fondateur de la socit Refficience, Consultant Web, WebPerf et SEO
@tsoudaz
Site : Refficience.com
Email : ts refficience.com
#seocamp
Damien Jubeau
Fondateur de la socit Dareboost, solution de monitoring et daudit de performance et qualit web
@dareboost
Site : dareboost.com
Email : Damien dareboost.com
#seocamp
#seocamp
4
celle qu'il vous est arriv trs rcemment, peut tre mme il y a quelques minutes sur votre smartphone, de consulter une page web et d'attendre
d'attendre que la page se charge, d'attentre qu'une image s'affiche, d'attendre de pouvoir cliquer sur un bouton
Et mon autre certitude...
t
Attente = Frustration
Stefan dzialeka
#seocamp
5
C'est qu'attendre vous n'aimez pas a
L'attente provoque beaucoup de frustration.
Et sur le web, c'est pire, car l'attente est perue au bout de quelques centaines de millisecondes seulement
notre capacit rester concentr sur une tche lorsqu'on attend face un crann elle est trs limite.
#seocamp
6
Et c'est pour a qu'au bout de quelques secondes peine attendre sur une page, on passe autre chose, on s'en va.
Et si mon mtier est de faire de la vente en ligne, c'est dramatique pour moi. Je viens de perdre un client, parce qu'il a trop attendu sur mon site;
Usage Mobile
Mobile
Desktop / Laptop
Objets connects
Heures par jour
#seocamp
Laudience desktop est au mieux stable au pire elle recule.
7
Data mobile
Source : akamai state of the internet
Data
Voix
#seocamp
8
Data mobile
Source : iPhone 6 Thomas Soudaz
18% !?
#seocamp
Seulement 18% pour le navigateur web !
Chat
Social
Et surtout Vidos !
15% de publicit?
9
MJ App6000.0Navigateur3000.0Musique2000.0Geoloc1500.0Jeux800.0Social800.0Mail625.0Chat500.0Web app500.0Info400.0e-commerce300.0
Transferts en Mo
#seocamp
10
Source : Soasta
Mobile : 1 sec de dlai pnalise la conversion
Taux de conversion
Taux de conversion
Temps de chargement (secondes)
Visites
Taux de conversion (%)
Visites faible qualit VisitesConversions
#seocamp
1 seconde de dlai sur mobile cest 0,4pts de taux de conversion en moins = 27% de conversion en plus
11
Problme de la Performance mobile
Latence
Capacit CPU
Mmoire
Consommation de batterie
Tailles dcrans rduites
Tap delay
InApp web
Forfaits Data/Roaming
#seocamp
85% des mobinautes sattendent avoir une XP au moins aussi rapide que sur desktop
12
Transactions App vs Navigateur mobile
Source : Criteo - state of mobile e-commerce
#seocamp
13
#seocamp
Android : 25.000 modles ! 1300 marques
iOs : 31 modles (iPhone, iPod, iPad, IPad mini et iPad pro) 1 marque
OpenSignal.com
14
Ultra-Fragmentation !
#seocamp
15
Parts de march Navigateurs mobile
Chrome 23%
Safari iOS923%
Safari iOS810%
InApp iOS
12%
Android15%
Samsung7%
Opera 3%Windows Phone 3%UC Browser 3%Autres 2%
Source : Apple/NetmarketShare/Statcounter
#seocamp
Webview?!
16
Solutions Techniques
Choix marketing
Site mobile ddi ? Besoin ?
Mme contenus desktop/mobile ?
Appli et/ou Webapp ?
Choix technique
Url Identique / m. / rpertoire ?
Redirection ? Combien de redirection ? JS, JS inline ? Serveur ?
Redirection A/R ?
Et si on faisait du RWD ?
Solution tierce (plugin wp, template RWD, service dautomatisation, CDN)
#seocamp
Choix et impacts
Source : test raliss sous WPT 3G 100ms de latence
Top 10 FrTechnoURLSurcot !LeboncoinRWDUniqueSurcout faibleLefigaroRWDUniqueSurtlchargement! / 2moCreditAgricole.frRWDUniqueSurtlchargement! / 1.2moOrangeredirection serveur > site m.2 Urls150/200 msLeparisienredirection javascript > site m.2 Urls400/500 msLequiperedirection javascript > site m.2 Urls400/500 msLemonderedirection fichier JS > site m.2 Urls500/700 msPages JaunesRESSUniqueSfrAdaptive + Tablet RWDUniqueAllocinPas de site mobile - site WAP 1999!
#seocamp
18
Bonnes pratiques mobile
Objectif Speedindex : < 2500 = top 10%
0 redirection! => Url commune desktop/tablette/mobile
Adaptive delivery ou RESS => /!\ Sur-tlchargement
Design : Flat/Flex/Minimaliste/Mobile first!
Diffrer les ressources non critiques (img/css/js)
Limiter lusage de font (1max et pas de font icon)
#seocamp
Bonne pratiques assez gnrales => cest bien dobserver les bonnes pratiques
19
on ne peut amliorer que ce que l'on mesure
#seocamp
20
TTFB(dlai avant premier octet)
#seocamp
21
200ms
Source : Google https://developers.google.com/speed/docs/insights/Server?hl=fr
#seocamp
22
Start Render(dlai avant dbut d'affichage)
#seocamp
23
#seocamp
24
Visually Complete(dlai avant fin d'affichage)
#seocamp
25
#seocamp
26
Speed Index
#seocamp
27
#seocamp
28
#seocamp
29
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
#seocamp
30
< 1000(1 seconde pour le contenu above the fold)
https://developers.google.com/speed/docs/insights/mobile
#seocamp
31
Toolbox pour savoir cmt les obtenir
Evolution fonctionnelle
Evolution techniqueEvolution du contenu
ContributifDpendances aux tierces parties
#seocamp
32
Surveillance
#seocamp
33
2 approches(complmentaires)
#seocamp
34
Real User Monitoring(monitoring passif)
la vraie vie
#seocamp
35
#seocamp
36
Monitoring Synthtique(monitoring actif)
internaute simul
#seocamp
37
HTTPs
Boost SEO?(attention la migration!)
#seocamp
38
Scurit
#seocamp
39
HTTP est sur le chemin
de la dprciation!
#seocamp
40
HTTP2
HTTP2 pipelining
Compression des Headers
Push
/!\ HTTTP 1.1 vs HTTP2
Les fausses bonnes ides :
Concatnation CSS/JS
Sprite CSS
Domain Sharding
#seocamp
Source : movr - scientiamobile.com
#seocamp
Les navigateurs mobiles sont HTTP2 ready !
87% des requtes se font depuis un navigateur supportant HTTP/2-ready et sur un OS le supportant galement
Adoption rapide des serveurs (0 en 2014 6,2% en 2015).
42
En tant que chef de produit vous devriez considrer la vitesse comme la premire des fonctionnalits
Larry Page
Budget de Performance
#seocamp
43
Se fixer des objectifs
le site doit tre rapide
la page doit faire moins de 1Mole serveur doit rpondre en 150ms
#seocamp
44
OptimiserEpurerAbandonner
#seocamp
45
Respect du budget
#seocamp
46
Budget toujours KO?
=> il volue!
#seocamp
47
Pour chaque tape et
pour chaque interlocuteur
#seocamp
48
Toolbox
DiagnosticNiveau
Google Pagespeed InsightsDbutant
Outils de dveloppement Chrome/FF/IEIntermdiaire/Avanc
WebpageTestAvanc
Mesures RUM
Google AnalyticsDbutant
Soasta Intermdiaire
Basilic.io Intermdiaire
Mesures Synthtiques
WPT monitorAvanc
SpeedCurve Intermdiaire
Dareboost Intermdiaire
#seocamp
49
Questions ?
Thomas SOUDAZ / DAMIEN JUBEAU
Seocampus - 07/04/2016
50
#seocamp
50
Lavf56.31.102