Web UX - Performance Web

A presentation at Web UX in May 2011 in Nimes, France by Nicolas Hoizey

PerformanceWeb Nicolas( Hoizey ( Co.fondateur*&*directeur*technique* Clever *Age* @ nhoizey *

Lesdébitsaugmentent*…* FibreopDque 100Mbps **Pourcertainsprivilégiés*

Lamobilitéprenddel ` ampleur* •   Bandepassantefaible,*variable*etinstable •   Faiblessesintrinsèquesdesnavigateurs mobiles* –   Faiblepuissancedecalculpourlerendu* –   FaiblepuissancedecalculpourleJavaScript* –   Tailleréduiteducache

EtudeAkamaien2009 47%*des*clientse.commerce veulentlapageen2s* 4sen2006* 8sen1999*

ExpériencepourCAau GlasgowCaledonianUniversity* Sitepeuperformant* * ConcentraDon*+50%* AgitaDon,*stress*

GoogleSearch Page*+0,4s RecherchesparuDlisateur*.0,76%* * Aprèsarrêtdel ` expérience Toujours*.0,21%* Pasderetouràla*«*normale*»!

Plusquelaperformanceréelle,* c’estsa percep;on *qui*compte*!*

LapercepDondelavitesse* réelle* espérée* perçue* mémorisée * @stoyanstefanov* +15%* +35%*

Avecunsiteplusrapide* •   Lesvisiteurs reviennent( •   Ilsregardent plus(de(pages àchaquevisite •   AmélioraDondela* sa;sfac;on *uDlisateur* •   Meilleurtauxde* conversion( •   Plusde chiffre(d `affaires( •   Economies *d` infrastructure*(hardwareetBP)* •   Meilleur* posi;onnement *chez*Google*

FNAC.fr* hnp://cas.im/wpt.fnac.110202 * *

DécomposiDond ` unerequête* DNS* Connexion* TCP* Anentede laréponse Chargement* delaréponse*

DécomposiDond ` unerequête* •   RequêteDNS •   Etablissementdelaconnexion •   Envoidelarequêteduclientversleserveur* •   Calculdelapagecôté*serveur* –   Pourcequiestdynamique* •   Envoidelaréponseduserveurversleclient* •   Calculdurendu* –   HTML*+*CSS* •   Traitementsdynamiques –   JavaScript,*expressions*CSS*

FNAC.fr* Start% Render% ~*1,8s* Document% Complete% ~*7,7s*

hnp://cas.im/wpt.amazon.110202 * * Amazon.fr* Start% Render% ~*1,75s* Document% Complete% ~*4,3s*

Le(«(Start(render(»(n ` est(pas( un(indicateur(suﬃsant(

Above%the%Fold%Time * •   The% fold * –   Linéralement,*«lepli*»* –   La*«*ligne*deflonaison»dusite* •   AFT* –   (tentaDvededéterminer)*quand* toutelaparDevisibledusiteest* aﬃchée* –   Undélaiclé*foncDon*dudébit –   UneclassificaDonpixels* dynamiques*/*staDques* •   AuDliseravecprécauDon

W3C*:* Resource%Timing * •   InstrumentaDonintégréeauxnavigateurs –   TravauxdeMicroso_etGoogle* •   Working * Dra_ *depuis*le24mai2011!* –   hnp://www.w3.org/TR/2011/WD.resource.Dming.20110524/ *

Quemesurer?* •   Chargementsanscache,*première*visite* –   Importantpourcapterdenouveauxvisiteurs •   ChargementaveccacheopDmal,*nouvelle*visitesurune mêmepage –   L’uDlisateurs’anendà*récupérer*lapageinstantanément* •   ChargementaveccacheparDel,encoursdenavigaDon –   96%*des*pagesvues

QuelquesouDls •   Différentstypesd ` ouDls* –   VérificaDondelacascade –   AuditdesuividebonnespraDqueset* recommandaDons* –   OpDmisaDon* •   AnenDon,cenesontquedesouDls* –   La* percep;on(humaine etle* bon(sens *doivent* resterderigueur*

webpagetest.org* •   Laréférence –   WebPagetest *:*Projet*AOL*misenopensource –   DeIE6à*IE9,*Chrome*en*cours* –   Desserveurspartoutdanslemonde** –   Différentesbandespassantes –   Largementparamétrable –   Résultatsdétaillésetexpliqués –   Enregistrementvidéo –   ExpérimentaDonAFT

Firefox*+*Firebug* WebkitDeveloperTools* Chrome*+*Speed*Tracer* IE9DeveloperTools* Lesnavigateurs

Yahoo!*YSlow* •   ExtensiondeFirebugdéveloppée parYahoo! –   hnp://developer.yahoo.com/yslow/ * •   Analyselapageetdétermine* l ` usagedesbonnespraDques –   23critères –   Donneun«*grade*»deAàF* –   DonnedesrecommandaDons* Voyages.sncf.com*

GooglePagespeed •   DifférentsouDlsdéveloppésparGoogle* –   hnp://code.google.com/intl/fr/speed/page. speed/ * •   UneextensionpourFirebug,*similaire*àYslow* –   Analyselapageet donneunenote* –   Donnedes recommandaDons*

OuDlsd’opDmisaDon •   Lesarchitectesetdéveloppeurs!* •   Beaucoupd ` arDsanat –   IdenDfierlesfaiblesses* –   PrioriserlesacDons* –   TrouverlesouDls* –   Industrialiser*

Googlemod_pagespeed •   UnmodulepourApache,*automaDsant* l ` applicaDondecertainesbonnespraDques –   hnp://code.google.com/intl/fr/speed/page. speed/docs/module.html * –   15filtres –   Seulement9acDfspardéfaut* –   Les6autresàuDliseravecprudence*

Microso_Doloto •   Do wn lo ad* t ime* o pDmizer* –   hnp://research.microso_.com/en.us/projects/doloto/ * •   OuDldédiéauxapplicaDonsuDlisantbeaucoup decodeJavaScript*/*Ajax* •   ProcessusopéraDonnel –   AnalysedesuDlisaDonsducode* –   DécoupagedesfoncDonsentrecodenécessaireau* lancementetcodeuDliséultérieurement* –   Chargementdynamiqueselonlesbesoins*

EviterlesrequêtesinuDles •   EviterlesredirecDons* •   Pasd’erreur404danslesressourcesliées* •   PasderessourcesliéesnonuDlisées

Réduirelalatence* •   Réduirelalatenceréseau** –   Rapprocherleclientduserveur –   CDN* •   Content* Delivery *Network* –   PerDnentencasdepublicinternaDonal

RéduirelenombrederequêtesDNS •   LimiterlenombrededomainesuDlisés –   ChaquedomaineimpliqueunerequêteDNS

Réduirelenombrederequêtes* •   Exploiterlecachedunavigateur* –   Configurerleserveurpourindiquerladatede pérempDondesressources* –   Lenavigateurnedemanderalaressourcequesi elleaexpiré*

Réduirelenombrederequêtes* •   ConcaténerlescodesJavaScriptet*CSS % 6(JS(K>(1(JS(

Réduirelenombrederequêtes* •   Combinerlesimagessousformede sprites * * •   AnenDonàl’accessibilité*

Réduirelenombrederequêtes* •   Passeztoutdesuiteau* slide *suivant…* •   IntégrerduJSouCSSauHTML* –   Uniquementsigaindeperformanceconséquent •   Aréserveraux*«*landing*pages*»* –   FaitperdrelamiseencachedesJSouCSS externes* •   IntégrerdesimagesauCSS,JSouHTML –   UDlisaDondes data:uri * –   Encodageenbase64*

Réduirelepoidsdesrequêtes* •   Compressertout –   Gzip* –   Gainde50à80%! •   MinifierlessourcesHTML,*JavaScript*etCSS* –   SuppressiondescaractèresinuDles,*blancs,* commentaires,*opDmisaDon*delasyntaxe

Réduirelepoidsdesrequêtes* •   Réduirelepoidsdesimages* –   SuppressiondesmétadonnéesinuDles(EXIF,*IPTC)* –   Choixdesbonsformats •   GIF* •   JPEG*:*quelle*compression*?* •   PNG*:*quel*format*?*8,*24,32 –   Jusqu ` à*90%degain*!*

Réduirelepoidsdesrequêtes* •   EviterlescookiesinuDles –   Lescookiesalourdissentlesrequêtesversle* serveur* •   Sipossible,*servir*lesressourcesstaDques depuisundomainesansaucuncookie

RéparDrsurplusieursdomaines •   Lesnavigateursontunelimitede téléchargementssimultanésPARDOMAINE –   2requêtesselonHTTP/1.1 –   6à8enpraDquedanstouslesnavigateursen dernièresversions –   AnenDon,2dansIE6&*IE7* •   Miseenplacedeplusieursdomaines –   «*Domain*sharding*»*

RéparDrsurplusieursdomaines •   Téléchargementsenparallèle* •   Sitropdedomaines –   TropderequêtesDNS •   Consensuspour2à4domainesselonusages

OpDmiserlerendudunavigateur* •   Ordonnancerlechargementdesressources* –   HTMLetCSSauplusvite •   OpDmisaDondu«*start*render*»* •   Eviterle«*reflow*»*avec*desCSStardives* •   Flush deHTMLparDel –   JavaScriptleplustardpossible* •   LeJSbloquelechargementpendantsonexécuDon –   Différerlechargementdesressourcesquinesont pasuDlesaudépart •   «*lazy*loading*»*

OpDmiserlerendudunavigateur* •   NenoyerlesCSSetJSducodeinuDle •   Tenircomptedesperformances –   desCSS –   deJavaScript –   desframeworksJavaScript*

AnenDonauxressourcesexternes •   RessourcesprovenantdeDers –   OuDlsdestaDsDques* –   Régiespublicitaires –   Widgets departenaires* •   hnp://stevesouders.com/p3pc/*

Profiterduwebperfcontest •   WebPerfContest2010* –   ConcoursinternaDonal •   hnp://webperf.contest.com/ * •   Novembre2010 –   ObjecDf* •   OpDmisaDond ` unepageWeb •   FournieparlaFNAC •   hnp://entries.webperf.contest.com/* base.fnac._w/index.html *

Profiterduwebperfcontest •   BilanstrèsinstrucDfs* –   hnp://braincracking.org/2011/01/10/concours. webperf.2010.les.bases/ * –   hnp://www.yterium.net/Ma.parDcipaDon.au. Webperf *

Avant( StartRender * ** :*2.441*s* DocumentComplete * :*11.028*s* FullyLoaded * ** :*17.261*s* Après( StartRender * ** :*1.639*s* DocumentComplete * :*1.214*s* FullyLoaded * ** :*6.083*s**

Uneveillepermanente* •   Danslavraievie –   EvénementsduWebPerfUserGroup hnp://cas.im/webperf.user.group * •   SurDiigo –   GroupeWebPerformance* hnp://groups.diigo.com/group/web.performance * •   SurTwiner –   Suivrelecompte* @webperf_fr *

A(vous(de(jouer(!( Illustrations : hnp://iwdrm.tumblr.com/ & hnp://fromme.toyou.tumblr.com/ *

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.

Chiffres clefs
G3+ ! Banque de France
90 collaborateurs ! sur 4 agences
Croissance
`régulière`
!
et rentable

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

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

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

Nicolas Hoizey
@nhoizey

1 / 76

L'utilisateur n'aime pas attendre. Sa perception de la vitesse d'un site Web a donc une influence sur son comportement. Cette perception peut être orientée positivement en travaillant intelligemment l'optimisation des performances côté client du site Web.

Le premier réflexe quand on parle de performances Web est de se tourner vers des tests de montée en charge et des optimisations côté serveur, alors que l'optimisation des performances côté client peut être plus simple, plus efficace, et plus rentable.

Nous aborderons dans cette conférence les différents aspects de l'optimisation côté client des performances Web, en attirant l'attention sur – par exemple – les téléchargements bloquants, les manières optimales d'inclure le code JavaScript et CSS, et leur impact sur les performances perçues par les internautes.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Début de conf de @nhoizey sur la Performance Web. Voyons jusqu'où il va aller dans la technique. #WebUX
— Jérémy Lecour (@jlecour) May 26, 2011
Et il ns dit que le web ne tire pas profit du haut débit T @PIA_Emmanuel: @nhoizey nous parle maintenant de perf sur le web #web_ux
— Marie-Laure Biscaye (@marilor) May 26, 2011
@nhoizey avec les performances sur le web #web_ux débit, mobilité... , "l'internaute n'aime pas attendre."
— Yoan M. (@yoanmaman) May 26, 2011
@nhoizey : un site peu performant génère du stress et nécessite 50% de concentration supplémentaire #web_ux
— Emmanuel Valensi (@LV_Emmanuel) May 26, 2011
@nhoizey nous explique la cascade #web_ux http://t.co/OF9QOAR
— Emmanuel Valensi (@LV_Emmanuel) May 26, 2011
Les gifs animés de la conference de @nhoizey sont simplement wow ! #web_ux #webux
— Sébastien Desbenoit (@desbenoit) May 26, 2011
#web_ux : start render : la FNAC met 13,6 secondes à s'afficher Vs. Amazon seulement 6,9! @nhoizey
— Amanda Martinez (@MartinezAmandaa) May 26, 2011
FNAC met 2x + de temps à s'afficher qu'AMAZON @nhoizey #web_ux #webux
— Yoan M. (@yoanmaman) May 26, 2011
http://webpagetest.org pour tester la perf de son site depuis l'étranger et sur différents navigateurs via @nhoizey #web_ux
— Emmanuel Valensi (@LV_Emmanuel) May 26, 2011
webpagetest.org permet de tester les performances d'un site web, avec video à l'appui. #web_ux #webux @nhoizey
— Yoan M. (@yoanmaman) May 26, 2011
Effectivement, @nhoizey plonge bien dans la technique tout en restant clair. Parfait pour le public de #WebUX
— Jérémy Lecour (@jlecour) May 26, 2011
Les pubs sont parmi les éléments les plus bloquants sur une page web ! #web_ux /via @nhoizey
— Emmanuel Valensi (@LV_Emmanuel) May 26, 2011
Ah, on dirait que c'est @nhoizey qui gagne la palme du tweet-bruit à #WebUX.
— Olivier B-G. ☃ (@lespacedunmatin) May 26, 2011
Et ça à l'air positif ! \o/ RT @lespacedunmatin: Ah, on dirait que c'est @nhoizey qui gagne la palme du tweet-bruit à #WebUX.
— Nicolas Hoizey (@nhoizey) May 26, 2011
#webux @nhoizey oui très positif merci pour cette présentation
— h4ppyFish (@_fisching) May 26, 2011

Web UX - Performance Web

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Buzz and feedback