Performance
Web
Nicolas
Hoizey
Co-‐fondateur
&
directeur
technique
Clever
Age
@nhoizey
Slide 2
Slide 2 text
Le
visage
du
Web
change
Slide 3
Slide 3 text
Les
débits
augmentent*…
Fibre
opDque
100
Mbps
*
Pour
certains
privilégiés
Slide 4
Slide 4 text
…les
pages
grossissent
Slide 5
Slide 5 text
Mais
les
apparences
sont
trompeuses
Slide 6
Slide 6 text
Le
Web
ne
Dre
pas
profit
du
débit
Slide 7
Slide 7 text
La
mobilité
prend
de
l`ampleur
• Bande
passante
faible,
variable
et
instable
• Faiblesses
intrinsèques
des
navigateurs
mobiles
– Faible
puissance
de
calcul
pour
le
rendu
– Faible
puissance
de
calcul
pour
le
JavaScript
– Taille
réduite
du
cache
Slide 8
Slide 8 text
L`u;lisateur
n`aime
pas
a
Slide 9
Slide 9 text
Etude
Akamai
en
2009
47%
des
clients
e-‐commerce
veulent
la
page
en
2s
4s
en
2006
8s
en
1999
Slide 10
Slide 10 text
Expérience
pour
CA
au
Glasgow
Caledonian
University
Site
peu
performant
ConcentraDon
+50%
AgitaDon,
stress
Slide 11
Slide 11 text
Amazon.com
Page
+100
ms
CA
-‐1%
En
2006
Slide 12
Slide 12 text
Microso_
Bing
Page
+1s
CA
-‐2,8%
Slide 13
Slide 13 text
Google
Search
Page
+0,4
s
Recherches
par
uDlisateur
-‐0,76%
Après
arrêt
de
l`expérience
Toujours
-‐0,21%
Pas
de
retour
à
la
«
normale
»
!
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Plus
que
la
performance
réelle,
c’est
sa
percep;on
qui
compte
!
Slide 17
Slide 17 text
La
percepDon
de
la
vitesse
réelle
espérée
perçue
mémorisée
@stoyanstefanov
+15%
+35%
Slide 18
Slide 18 text
Avec
un
site
plus
rapide
• Les
visiteurs
reviennent
• Ils
regardent
plus
de
pages
à
chaque
visite
• AmélioraDon
de
la
sa;sfac;on
uDlisateur
• Meilleur
taux
de
conversion
• Plus
de
chiffre
d`affaires
• Economies
d`infrastructure
(hardware
et
BP)
• Meilleur
posi;onnement
chez
Google
Slide 19
Slide 19 text
La
cascade,
base
de
travail
Slide 20
Slide 20 text
FNAC.fr
Slide 21
Slide 21 text
FNAC.fr
Serveur
5%
Client
95%
Slide 22
Slide 22 text
FNAC.fr
hnp://cas.im/wpt-‐fnac-‐110202
Slide 23
Slide 23 text
DécomposiDon
d`une
requête
DNS
Connexion
TCP
Anente
de
la
réponse
Chargement
de
la
réponse
Slide 24
Slide 24 text
DécomposiDon
d`une
requête
• Requête
DNS
• Etablissement
de
la
connexion
• Envoi
de
la
requête
du
client
vers
le
serveur
• Calcul
de
la
page
côté
serveur
– Pour
ce
qui
est
dynamique
• Envoi
de
la
réponse
du
serveur
vers
le
client
• Calcul
du
rendu
– HTML
+
CSS
• Traitements
dynamiques
– JavaScript,
expressions
CSS
Le
«
Start
render
»
n`est
pas
un
indicateur
suffisant
Slide 29
Slide 29 text
FNAC.fr
vs
Amazon.fr
Slide 30
Slide 30 text
FNAC.fr
vs
Amazon.fr
Slide 31
Slide 31 text
FNAC.fr
vs
Amazon.fr
Slide 32
Slide 32 text
FNAC.fr
vs
Amazon.fr
Slide 33
Slide 33 text
Above
the
Fold
Time
• The
fold
– Linéralement,
«
le
pli
»
– La
«
ligne
de
flonaison
»
du
site
• AFT
– (tentaDve
de
déterminer)
quand
toute
la
parDe
visible
du
site
est
affichée
– Un
délai
clé
foncDon
du
débit
– Une
classificaDon
pixels
dynamiques
/
staDques
• A
uDliser
avec
précauDon
Slide 34
Slide 34 text
W3C
:
Resource
Timing
• InstrumentaDon
intégrée
aux
navigateurs
– Travaux
de
Microso_
et
Google
• Working
Dra_
depuis
le
24
mai
2011
!
– hnp://www.w3.org/TR/2011/WD-‐resource-‐Dming-‐20110524/
Slide 35
Slide 35 text
Que
mesurer
?
• Chargement
sans
cache,
première
visite
– Important
pour
capter
de
nouveaux
visiteurs
• Chargement
avec
cache
opDmal,
nouvelle
visite
sur
une
même
page
– L’uDlisateur
s’anend
à
récupérer
la
page
instantanément
• Chargement
avec
cache
parDel,
en
cours
de
navigaDon
– 96%
des
pages
vues
Slide 36
Slide 36 text
Quelques
ou;ls
Slide 37
Slide 37 text
Quelques
ouDls
• Différents
types
d`ouDls
– VérificaDon
de
la
cascade
– Audit
de
suivi
de
bonnes
praDques
et
recommandaDons
– OpDmisaDon
• AnenDon,
ce
ne
sont
que
des
ouDls
– La
percep;on
humaine
et
le
bon
sens
doivent
rester
de
rigueur
Slide 38
Slide 38 text
webpagetest.org
Slide 39
Slide 39 text
webpagetest.org
• La
référence
– WebPagetest
:
Projet
AOL
mis
en
open
source
– De
IE6
à
IE9,
Chrome
en
cours
– Des
serveurs
partout
dans
le
monde
– Différentes
bandes
passantes
– Largement
paramétrable
– Résultats
détaillés
et
expliqués
– Enregistrement
vidéo
– ExpérimentaDon
AFT
Yahoo!
YSlow
• Extension
de
Firebug
développée
par
Yahoo!
– hnp://developer.yahoo.com/yslow/
• Analyse
la
page
et
détermine
l`usage
des
bonnes
praDques
– 23
critères
– Donne
un
«
grade
»
de
A
à
F
– Donne
des
recommandaDons
Voyages-‐sncf.com
Slide 42
Slide 42 text
Google
Pagespeed
• Différents
ouDls
développés
par
Google
– hnp://code.google.com/intl/fr/speed/page-‐
speed/
• Une
extension
pour
Firebug,
similaire
à
Yslow
– Analyse
la
page
et
donne
une
note
– Donne
des
recommandaDons
Slide 43
Slide 43 text
Google
Pagespeed
Online
Slide 44
Slide 44 text
Google
Webmaster
Tools
Slide 45
Slide 45 text
Et
les
autres…
Slide 46
Slide 46 text
OuDls
d’opDmisaDon
• Les
architectes
et
développeurs
!
• Beaucoup
d`arDsanat
– IdenDfier
les
faiblesses
– Prioriser
les
acDons
– Trouver
les
ouDls
– Industrialiser
Slide 47
Slide 47 text
Google
mod_pagespeed
• Un
module
pour
Apache,
automaDsant
l`applicaDon
de
certaines
bonnes
praDques
– hnp://code.google.com/intl/fr/speed/page-‐
speed/docs/module.html
– 15
filtres
– Seulement
9
acDfs
par
défaut
– Les
6
autres
à
uDliser
avec
prudence
Slide 48
Slide 48 text
Microso_
Doloto
• Download
time
opDmizer
– hnp://research.microso_.com/en-‐us/projects/doloto/
• OuDl
dédié
aux
applicaDons
uDlisant
beaucoup
de
code
JavaScript
/
Ajax
• Processus
opéraDonnel
– Analyse
des
uDlisaDons
du
code
– Découpage
des
foncDons
entre
code
nécessaire
au
lancement
et
code
uDlisé
ultérieurement
– Chargement
dynamique
selon
les
besoins
Slide 49
Slide 49 text
Au
travail
!
Slide 50
Slide 50 text
Eviter
les
requêtes
inuDles
• Eviter
les
redirecDons
• Pas
d’erreur
404
dans
les
ressources
liées
• Pas
de
ressources
liées
non
uDlisées
Slide 51
Slide 51 text
Réduire
la
latence
• Réduire
la
latence
réseau
– Rapprocher
le
client
du
serveur
– CDN
• Content
Delivery
Network
– PerDnent
en
cas
de
public
internaDonal
Slide 52
Slide 52 text
Réduire
le
nombre
de
requêtes
DNS
• Limiter
le
nombre
de
domaines
uDlisés
– Chaque
domaine
implique
une
requête
DNS
Slide 53
Slide 53 text
Réduire
le
nombre
de
requêtes
• Exploiter
le
cache
du
navigateur
– Configurer
le
serveur
pour
indiquer
la
date
de
pérempDon
des
ressources
– Le
navigateur
ne
demandera
la
ressource
que
si
elle
a
expiré
Slide 54
Slide 54 text
Réduire
le
nombre
de
requêtes
• Concaténer
les
codes
JavaScript
et
CSS
6
JS
-‐>
1
JS
Slide 55
Slide 55 text
Réduire
le
nombre
de
requêtes
• Combiner
les
images
sous
forme
de
sprites
• AnenDon
à
l’accessibilité
Slide 56
Slide 56 text
Réduire
le
nombre
de
requêtes
• Passez
tout
de
suite
au
slide
suivant…
• Intégrer
du
JS
ou
CSS
au
HTML
– Uniquement
si
gain
de
performance
conséquent
• A
réserver
aux
«
landing
pages
»
– Fait
perdre
la
mise
en
cache
des
JS
ou
CSS
externes
• Intégrer
des
images
au
CSS,
JS
ou
HTML
– UDlisaDon
des
data:uri
– Encodage
en
base64
Slide 57
Slide 57 text
Réduire
le
poids
des
requêtes
• Compresser
tout
– Gzip
– Gain
de
50
à
80%
!
• Minifier
les
sources
HTML,
JavaScript
et
CSS
– Suppression
des
caractères
inuDles,
blancs,
commentaires,
opDmisaDon
de
la
syntaxe
Slide 58
Slide 58 text
Réduire
le
poids
des
requêtes
• Réduire
le
poids
des
images
– Suppression
des
métadonnées
inuDles
(EXIF,
IPTC)
– Choix
des
bons
formats
• GIF
• JPEG
:
quelle
compression
?
• PNG
:
quel
format
?
8,
24,
32
– Jusqu`à
90%
de
gain
!
Slide 59
Slide 59 text
Réduire
le
poids
des
requêtes
• Eviter
les
cookies
inuDles
– Les
cookies
alourdissent
les
requêtes
vers
le
serveur
• Si
possible,
servir
les
ressources
staDques
depuis
un
domaine
sans
aucun
cookie
Slide 60
Slide 60 text
RéparDr
sur
plusieurs
domaines
• Les
navigateurs
ont
une
limite
de
téléchargements
simultanés
PAR
DOMAINE
– 2
requêtes
selon
HTTP/1.1
– 6
à
8
en
praDque
dans
tous
les
navigateurs
en
dernières
versions
– AnenDon,
2
dans
IE6
&
IE7
• Mise
en
place
de
plusieurs
domaines
– «
Domain
sharding
»
Slide 61
Slide 61 text
RéparDr
sur
plusieurs
domaines
• Téléchargements
en
parallèle
• Si
trop
de
domaines
– Trop
de
requêtes
DNS
• Consensus
pour
2
à
4
domaines
selon
usages
Slide 62
Slide 62 text
OpDmiser
le
rendu
du
navigateur
• Ordonnancer
le
chargement
des
ressources
– HTML
et
CSS
au
plus
vite
• OpDmisaDon
du
«
start
render
»
• Eviter
le
«
reflow
»
avec
des
CSS
tardives
• Flush
de
HTML
parDel
– JavaScript
le
plus
tard
possible
• Le
JS
bloque
le
chargement
pendant
son
exécuDon
– Différer
le
chargement
des
ressources
qui
ne
sont
pas
uDles
au
départ
• «
lazy
loading
»
Slide 63
Slide 63 text
OpDmiser
le
rendu
du
navigateur
• Nenoyer
les
CSS
et
JS
du
code
inuDle
• Tenir
compte
des
performances
– des
CSS
– de
JavaScript
– des
frameworks
JavaScript
Slide 64
Slide 64 text
AnenDon
aux
ressources
externes
• Ressources
provenant
de
Ders
– OuDls
de
staDsDques
– Régies
publicitaires
– Widgets
de
partenaires
• hnp://stevesouders.com/p3pc/
Slide 65
Slide 65 text
Il
faut
pra;quer
pour
progresser
!
Slide 66
Slide 66 text
Profiter
du
webperf
contest
• WebPerf
Contest
2010
– Concours
internaDonal
• hnp://webperf-‐contest.com/
• Novembre
2010
– ObjecDf
• OpDmisaDon
d`une
page
Web
• Fournie
par
la
FNAC
• hnp://entries.webperf-‐contest.com/
base-‐fnac-‐_w/index.html
Slide 67
Slide 67 text
Profiter
du
webperf
contest
• Bilans
très
instrucDfs
– hnp://braincracking.org/2011/01/10/concours-‐
webperf-‐2010-‐les-‐bases/
– hnp://www.yterium.net/Ma-‐parDcipaDon-‐au-‐
Webperf
Slide 68
Slide 68 text
Avant
Start
Render
:
2.441
s
Document
Complete
:
11.028
s
Fully
Loaded
:
17.261
s
Après
Start
Render
:
1.639
s
Document
Complete
:
1.214
s
Fully
Loaded
:
6.083
s
Slide 69
Slide 69 text
Une
veille
permanente
• Dans
la
vraie
vie
– Evénements
du
Web
Perf
User
Group
hnp://cas.im/webperf-‐user-‐group
• Sur
Diigo
– Groupe
Web
Performance
hnp://groups.diigo.com/group/web-‐performance
• Sur
Twiner
– Suivre
le
compte
@webperf_fr
Slide 70
Slide 70 text
A
vous
de
jouer
!
Illustrations : hnp://iwdrm.tumblr.com/
&
hnp://fromme-‐toyou.tumblr.com/
Slide 71
Slide 71 text
Clever Age!
c
Fondée en 2001 par des managers expérimentés, Clever Age est aujourd'hui un acteur
incontournable dans le domaine du conseil et de la réalisation de projets. L'idée directrice qui a
conduit à cette création et qui prévaut aujourd'hui encore est l'indépendance, aussi bien vis-à-vis
des éditeurs que des investisseurs.
Slide 72
Slide 72 text
Chiffres clefs
G3+!
Banque de France
90 collaborateurs!
sur 4 agences
Croissance
régulière!
et rentable
Slide 73
Slide 73 text
Rezulteo
http://www.rezulteo-pneu.fr/
!
MACSF
http://www.macsf.fr
LVMH – DIOR PCD
http://beauty.dior.com/
M6 Groupe
http://www.groupem6.fr/!
http://www.m6mobile.fr/
Fnac Market Place!
http://goo.gl/vzZA
Nouvelles Frontières
http://www.nouvelles-frontieres.fr/
Références internet et e-Commerce
Slide 74
Slide 74 text
Vet Affaires
http://www.vetaffaires.fr/
!
Aéroport de Bordeaux
http://www.bordeaux.aeroport.fr/
Atelier BNP Paribas
http://www.atelier.net/
Saint Gobain!
http://www.saint-gobain.com/
Mondial Assistance US!
http://www.mondial-assistance.us
Siplec – Groupe E. Leclerc
http://www.siplec.com/
Références internet et e-Commerce
Slide 75
Slide 75 text
Applications mobiles
Slide 76
Slide 76 text
Choix d'une solution Portail / CMS pour l'ensemble des projets
internet / extranet / intranet du groupe
Conseil fonctionnel et technique pour la réalisation!
d'une application de gestion des sinistres (assurances) puis
réalisation de l'application (JEE / EJB / Symfony)
Mission Accompagnement POC et Processus e-Commerce
dans le cadre du chantier de refonte du site internet APEC
Accompagnement dans la définition et la mise en oeuvre d'une
architecture SOA dans le cadre de la refonte globale (Back-
office et end-user)
Choix d'une architecture Portail / CMS / eCommerce pour le
groupe et ses filiales
Conseil en architecture technique