Titre de la confrence
Temps de chargementTas pas un site performant ?Thomas SOUDAZ /
DAMIEN JUBEAUSeocampus - 07/04/20161
#seocamp
1
Thomas SoudazFondateur de la socit Refficience, Consultant Web,
WebPerf et SEO
@tsoudazSite : Refficience.comEmail : ts refficience.com
#seocampDamien JubeauFondateur de la socit Dareboost, solution
de monitoring et daudit de performance et qualit web
@dareboostSite : dareboost.comEmail : Damien dareboost.com
#seocamp
#seocamp4 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
#seocamp5C'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.
#seocamp6Et 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
MobileDesktop / LaptopObjets connectsHeures 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 mobileSource : iPhone 6 Thomas Soudaz18% !?
#seocampSeulement 18% pour le navigateur web !ChatSocialEt
surtout Vidos !
15% de publicit?9
#seocamp
10
Source : SoastaMobile : 1 sec de dlai pnalise la conversion
Taux de conversionTaux de conversion
Temps de chargement (secondes)VisitesTaux de conversion
(%)Visites faible qualit VisitesConversions
#seocamp1 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
#seocamp85% des mobinautes sattendent avoir une XP au moins
aussi rapide que sur desktop
12
Transactions App vs Navigateur mobileSource : Criteo - state of
mobile e-commerce
#seocamp
13
#seocampAndroid : 25.000 modles ! 1300 marquesiOs : 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
iOS12%Android15%Samsung7%Opera 3%Windows Phone 3%UC Browser
3%Autres 2%Source : Apple/NetmarketShare/Statcounter
#seocampWebview?!16
Solutions TechniquesChoix marketingSite mobile ddi ? Besoin ?Mme
contenus desktop/mobile ?Appli et/ou Webapp ?
Choix techniqueUrl 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)
#seocampChoix et impactsSource : test raliss sous WPT 3G 100ms
de latenceTop 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 mobileObjectif 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)
#seocampBonne pratiques assez gnrales => cest bien dobserver
les bonnes pratiques 19
on ne peut amliorer que ce que l'on mesure
#seocamp20
TTFB(dlai avant premier octet)
#seocamp21
200msSource : Google
https://developers.google.com/speed/docs/insights/Server?hl=fr
#seocamp22
Start Render(dlai avant dbut d'affichage)
#seocamp23
#seocamp24
Visually Complete(dlai avant fin d'affichage)
#seocamp25
#seocamp26
Speed Index
#seocamp27
#seocamp28
#seocamp29
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
#seocamp30
< 1000(1 seconde pour le contenu above the
fold)https://developers.google.com/speed/docs/insights/mobile
#seocamp31Toolbox pour savoir cmt les obtenir
Evolution fonctionnelleEvolution techniqueEvolution du
contenuContributifDpendances aux tierces parties
#seocamp32
Surveillance
#seocamp33
2 approches(complmentaires)
#seocamp34
Real User Monitoring(monitoring passif)
la vraie vie
#seocamp35
#seocamp36
Monitoring Synthtique(monitoring actif)
internaute simul
#seocamp37
HTTPs
Boost SEO?(attention la migration!)
#seocamp38
Scurit
#seocamp39
HTTP est sur le cheminde la dprciation!
#seocamp40
HTTP2 HTTP2 pipelining Compression des Headers Push/!\ HTTTP 1.1
vs HTTP2Les fausses bonnes ides : Concatnation CSS/JS Sprite CSS
Domain Sharding
#seocamp
Source : movr - scientiamobile.com
#seocampLes 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 fonctionnalitsLarry PageBudget de
Performance
#seocamp43
Se fixer des objectifsle site doit tre rapidela page doit faire
moins de 1Mole serveur doit rpondre en 150ms
#seocamp44
OptimiserEpurerAbandonner
#seocamp45
Respect du budget
#seocamp46
Budget toujours KO?
=> il volue!
#seocamp47
Pour chaque tape et pour chaque interlocuteur
#seocamp48
ToolboxDiagnosticNiveau Google Pagespeed InsightsDbutant Outils
de dveloppement Chrome/FF/IEIntermdiaire/Avanc
WebpageTestAvancMesures RUM Google AnalyticsDbutant Soasta
Intermdiaire Basilic.io IntermdiaireMesures Synthtiques WPT
monitorAvanc SpeedCurve Intermdiaire Dareboost Intermdiaire
#seocamp
49
Questions ?Thomas SOUDAZ / DAMIEN JUBEAUSeocampus -
07/04/201650
#seocamp
50
