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