Performance Web côté client - Daspet / Sullivan - Paris Web 2008

High Performance Web Sites

Nicole [email protected]

www.stubbornella.orghttp://developer.yahoo.com/performance

Éric DaspetDéveloppeur web à Yahoo!http://eric.daspet.name/

mailto:[email protected]


http://www.stubbornella.org


http://developer.yahoo.com/performance


http://eric.daspet.name


• Éric DaspetDéveloppeur web à Yahoo!

• Nicole SullivanÉquipe Exceptional Performance à Yahoo!

Qui sommes-nous ?

Quantifier et améliorer la performance de tout produit

Yahoo! mondial

Pourquoi la performance?

1: Rapide est mieux

2: Les sites sont plus lourd

Les sites web modernes & les application web ont

changés

De 2003 à 2008:97K à 312K.

25.7 à 49.9 objects.

Les derniers 12 mois, le top1000 sites:De 250K à 310.4K.

WebSiteOptimization.com/speed/tweak/average-web-page

http://www.websiteoptimization.com/speed/tweak/average-web-page/

http://www.websiteoptimization.com/speed/tweak/average-web-page/

TF1 5s

AlloCiné 4s

FaceBook 4,6s

Skyrock 3,7s

France Telecom 10,1s

Free (portail) 4,4s

Le Monde 7,9s

Amazon France 3,7s

Google (résultats) 0,24s

Yahoo! France 1,8s

Daily Motion 2,4s

3: L’utilisateur veut un site rapide

Quel est le problème ?

• 6 sur 11 ont un chargement > 4s

• Abandons, agacement,

• Impacte votre business

+100 ms

Amazon: ventes -1%

+100 ms

+400 ms

Yahoo!: abandons +5 à 9%

+400 ms

+500 ms

Google: recherches -20%

+500 ms

-30% poids

Google: +30% trafic

-30% poids

Qu’est-ce que la performance?

Deux Types:Temps de réponse

&Efficacité du systeme

Notre focus est sur la temps de

réponse des produits web

Cueillir les fruits de la performance

(certains bas, certains hauts)

Nos buts principaux

• Moins de requêtes HTTP

• Des composants moins lourds

• Paralléliser les requêtes

Bonnes pratiqueshttp://developer.yahoo.com/performance

Mise à jour des 14 recommandations initiales20 recommandations ajoutées



14 bonnes pratiques (mises à jour)Faire moins de requêtes HTTPUtiliser un réseau de diffusion de contenu (CDN)Ajouter des entêtes “Expires” (ou Cache-control)Compresser les composants avec gzipMettre les CSS en hautDéplacer les CSS en bas (en ligne aussi)Éviter les “expression” en CSSExternaliser CSS et JavascriptRéduire les requêtes DNSMinimifier les Javascript et CSS (en ligne aussi)Éviter les redirectionsRetirer les scripts dupliquésConfigurer les ETagsRendre Ajax cachable http://developer.yahoo.com/performance/rules.html

http://developer.yahoo.com/performance/rules.html

http://developer.yahoo.com/performance/rules.html

Après YSlow “A”?1. Vider le tampon rapidement (buffer)

2. Utiliser GET pour Ajax

3. Post-charger les composants

4. Pré-charger les composants

5. Réduire le nombre d’éléments DOM

6. Séparer les composants sur plusieurs domaines

7. Réduire le nombre d’iframe

8. Pas de 404

9. Réduire la taille des cookies

10. Utiliser les domaines sans cookie pour les composants

11. Minimiser les accès DOM

12. Développer des gestionnaires d’événements sympa

13. Choisir <link> plutôt que @import

14. Éviter “filter”

15. Optimiser les images

16. Optimiser les sprites CSS

17. Ne redimensionnez pas les images en HTML

18. Rendez favicon.ico léger et cachable

19. Nouveauté iPhone 3G

20. Groupes les composants dans un document mulitpart (mobiles)

Perception

#1

temps de réponse perçu

performance speed enjoyable urgent instant accelerate

perception snap achievement better improve action pleasant pace

quick promote swift cool maximum drive prompt advance fast hurry rush satisfying feel exceptional brisk rapid exciting

slow crawl boring snail stagnant

unexceptional yawn

unresponsive impatient delay

moderate blah subdue drag apathetic

prolong slack load sluggish sleepy

late unexciting reduced lag

complex heavy unmemorable

obscure

why wait

temps de réponse perçu

Quelle est l’expérience utilisateur ?

performance speed enjoyable urgent instant accelerate

perception snap achievement better improve action pleasant pace

quick promote swift cool maximum drive prompt advance fast hurry rush satisfying feel exceptional brisk rapid exciting

slow crawl boring snail stagnant

unexceptional yawn

unresponsive impatient delay

moderate blah subdue drag apathetic

prolong slack load sluggish sleepy

late unexciting reduced lag

complex heavy unmemorable

obscure

why wait

Dans l’oeil du cyclone

• La perception et l’utilisabilité sont des mesures importantes

• Plus pertinentes que le simple onbeforeunload - onload

• La définition de ce qu’est le onload pour l’utilisateur est vague et change d’une page à

#2“80% of consequences come from

20% of causes”

—Vilfredo Pareto

L’Importance du Front-End


Back-end =

5%


Front-end =

95%


Même ici, front-end = 88%

Exemple

et ça continue encore, et encore...en réalité c’est 7 à 8 fois plus long

Pourquoi côté client ?

• La page HTML représente moins de 10%

• 90% offrent un meilleur ROI

TF1 1,8%

AlloCiné 1,5%

FaceBook 7,2%

Skyrock 1%

France Telecom 34,7%

Free (portail) 1%

Le Monde 0,7%

Amazon France 25,1%

Google (résultats) 68,8%

Yahoo! France 30,7%

Daily Motion 8,5%

Il y a encore un travail énorme dans le domaine de la performance.

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

Cache

#3

1l’utilisateur

demande www.yahoo.com

2l’utilisateur

demande d’autres pages web

3l’utilisateur demande de

nouveau www.yahoo.com

Cache vide / rempli

http://www.yahoo.com


1l’utilisateur demande

www.yahoo.com

2user requests

other web pages

3user re-requests www.yahoo.com

Cache vide / rempli

avec un cache vide 0 0.5 1 1.5 2 2.5 3

imagestylesheet

scriptscript

dns lookupimageimageimageimageimage

dns lookupscript

imageimageimageimageimageimageimageimagescript

imageimageimageimageimageimageimageimagescript

dns lookupimageimage

htmldns lookup

Cache vide / rempli

1l’utilisateur

demande www.yahoo.com

2l’utilisateur

demande d’autres pages web

3l’utilisateur demande de

nouveau www.yahoo.com



Pourquoi du cache ?Premier accès Second accès

Le gain est évident, non ?

Cache vide / rempli

Cache vide / rempli

vide = 2.4 secondes

rempli = 0.9 seconde

rempli = 83% moins de poids (octets)

rempli = 90% moins de requêtes HTTP.

Cache - technique

• Expires: Wed, 24 Oct 2018 21:32:59 GMTCache-Control: public;max-age=315360000

• mod_expires sous ApacheExpiresDefault "access plus 1 month 15 days 2 hours"ExpiresByType image/gif "modification plus 5 hours 3 minutes"

• Tous les composants statiques

Cache - mise à jour

• Une URL = Une version (en cache)

• Changer l’URL pour une nouvelle version

• monscript-1.4.js

• monscript.js?20081113T123559monscript.js?<?= filemtime($a); ?>

Cache - CDN

• CDN - Content Delivery Network

• Serveur proche du client

• Latence faible

• Cache automatique

(malheureusement, le cache ne fonctionne pas aussi bien qu’il pourrait)

#3b

À quel point le cache bénéficie t-il à l’utilisateur ?

À quel point le cache bénéficie t-il à l’utilisateur ?

Q1: Quel % d’utilisateurs uniques voient la page avec un cache vide ?

Q2: Quel % des pages sont vues avec un cache vide ?

Ajouter une nouvelle image sur vos pages :<img src="image/blank.gif" height="1" width="1"/>

avec ces entêtes HTTP dans la réponse :Expires: Thu, 15 Apr 2004 20:00:00 GMTLast-Modified: Wed, 28 Sep 2006 23:49:57 GMT

}1 px

Tester le cache du navigateur

Tester le cache du navigateur

Deux codes de réponse possibles

200 – Le navigateur n’a pas l’image en cache

304 – Le navigateur a l’image dans son cache mais doit vérifier la dernière date de mise à jour

Tester le cache du navigateurQ1: Quel % d’utilisateurs uniques voient la page avec un cache vide ?

# utilisateurs uniques avec au moins une réponse 200

# total d’utilisateurs uniques

Q2: Quel % des pages sont vues avec un cache vide ?

# total de réponses 200# de 200 + # de 304

}1 px

0,25

0,50

0,75

1,00

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

uu avec cache vide pv avec cache vide

Résultats surprenants

40-60% utilisateurs

20% pages vues

À emporter chez vous

1.Les utilisateurs avec un cache vide sont plus fréquents que vous ne le pensez.

2.En conséquence, optimisez et pour un cache rempli et pour un cache vide

Téléchargements parallèles

#4


Deux composants en parallèle par domaine

GIF GIF

GIF

GIF

GIF

GIF

d’après HTTP/1.1


Deux en parallèle

Quatre en parallèle

Huit en parallèle

htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent

0 0,425 0,850 1,275 1,700



0 0,375 0,750 1,125 1,500

Deux en parallèle


Huit en parallèle


0 0,425 0,850 1,275 1,700



0 0,375 0,750 1,125 1,500


0 0,375 0,750 1,125 1,500

Deux en parallèle


Huit en parallèle


0 0,425 0,850 1,275 1,700

Optimiser les téléchargements parallèles

temps de réponse

(secondes)

alias


temps de réponse

(secondes)

alias

0

0,2

0,4

0,6

0,8

1,0

1,2

1,4

1 2 4 5 10

36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)


temps de réponse

(secondes)

alias

0

0,2

0,4

0,6

0,8

1,0

1,2

1,4

1 2 4 5 10

36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average


temps de réponse

(secondes)

règle d’or : utiliser au moins 2 domaines, pas plus de 4

0

0,2

0,4

0,6

0,8

1,0

1,2

1,4

1 2 4 5 10

36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average

À emporter chez vous

• attention au gâchis de temps CPU

• la durée d’une requête DNS varie suivant votre FAI et votre localisation géographique

• le nom de domaine peut ne pas être en cache

Résumé

What the 80/20 Rule Tells Us about Reducing HTTP Requests


Browser Cache Usage – Exposed! http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

When the Cookie Crumbles http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

Maximizing Parallel Downloads in the Carpool Lane










#5Optimiser les images et

les sprites

CSS Sprites

http://alistapart.com/articles/sprites

…

CSS:

HTML:

CSS Sprites

L’image combinée est plus légèrehttp://alistapart.com/articles/sprites

…

CSS:

HTML:

Pourquoi est-ce que ça fonctionne ?

Les balises HTML sont comme des fenêtres.

Un exemple pratique ?

CSS Sprites

background-image: url(sprites.png) ;background-position: -100px -200px;background-repeat: no-repeat ;width: 15px ;height: 15px ;

On évite des dizaines de requêtes HTTP

Optimiser les sprites1. Combien de pages a

votre site ?

2. Votre site est-il modulaire ? (il devrait !)

3. Combien de temps votre équipe peut passer sur la maintenance ?

Éviter les filtresPourquoi utiliser AlphaImageLoader ?

IE6 ne supporte pas la transparence partielle nativement. Le filtre force ce support.

Problèmes avec les filtres

• Bloque le rendu, gèle le navigateur

• Plus grosse consomation mémoire

• Par élément, pas par image !

Solution: éviter AlphaImageLoader

1. MIEUX: à éviter complètement, utiliser PNG8 qui dégrade correctement dans IE < 7

2. Sinon: Utiliser un hack CSS avec l’underscore pour que le filtre ne s’applique que à IE < 7

#elem {

background: url(some.png);_background: none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='some.png', sizingMethod='crop');

}

Amélioration progressive de

PNG8Créer l’image avec transparence binaire. Dans Fireworks, ajouter quelques pixels

en semi-transparence.

Les bons navigateurs ont +Et les dinausores ont un cas par défaut acceptable

IE6

FirefoxOperaIE7+Safari

Données de testsRetirer Alpha Image Loader

100msYahoo! search

Réduire les images

Deux problèmes distincts

Qualité versus Optimisation

Design

Ingénierie

Réduire les images

Étape 1: Qualité, le graphiste choisit la qualité (par exemple via “save for the web”)Étape 2: Compression sans perte pour retirer les dernier octets de l’image.

LE PROBLÈMEOptimizing images sucks.

LOURD = LENT

Images, qui s’en

préoccupe ? Top 10 sites web

45.6% du poids des pages vient des images.

7 ERREURSOptimisation d’images

erreur #1Utiliser GIF quand PNG est plus léger

20.42%

erreur #2Ne pas passer les images par PNGcrush

16.05%

erreur #3Ne pas retirer les méta données JPEG

11.85%

erreur #4Utiliser des PNG pleines couleurs au lieu de PNG8

erreur #5Utiliser Alpha Image Loader

100msyahoo search

erreur #6Envoyer les images générées dynamiquement “telles quelles”

38-55% google charts api

erreur #7Ne pas combiner les images

SOLUTION?

Outils excellents,tellement de possibilités

JPEG Tran

PngOptimizer

OptiPNG

UN OUTIL. BEAUCOUP D’ALGORITHMES.

Smush it optimise automatiquement les images en utilisant le meilleur outil open source

démo

http://smushit.com

http://smushit.com

http://smushit.com

IBM Page Detailer

Packet sniffer. Windows seulement (IE, FF, ...).Démo gratuite, licence à $300

http://alphaworks.ibm.com/tech/pagedetailer





FirebugDéveloppement web évolué.

Gratuit.

YSlowApperçus et analyses de performance. Gratuit.

GomezMesures tierces.

Comparaison de concurrence.

HTTPfox??

Webpagetest.org??

smush.itL’optimisation des images sans

perte de qualité

Équilibrer le budget performance.

Trois étapes

• Mesurer la performance et les tendances

• Estimer l'impact en performance de toutes les nouvelles fonctionnalités

• Estimer l’impact de toutes les améliorations de performance

Estimer ? comment ?Traquer :

• Poids de la page *

• Temps de réponse

• Requêtes HTTP

* Pour les sites plus complexes, traquer le poids de la page par type de composants : css, js, images, flash

Fonctionnalités = Optimisation

Vérifier les attentes.

• L’impact de chaque fonctionnalité était-il ce que vous aviez estimé ?

• Est-ce que les optimisations ont amélioré la situation autant que vous le pensiez ?

Allouer du temps, équilibrer le budget

améliorations de performance vs

nouvelles fonctionnalités

122

High Performance Web Sites

Connaissances fondamentales pour les ingénieur web

front-end

par Steve Souders, avec des recherches de Yahoo!

Exceptional Performance

sur YDNhttp://developer.yahoo.com/

performance





Articles sur le YUIBlog

http://yuiblog.com/blog/category/performance

http://yuiblog.com/blog/

http://yuiblog.com/blog/

Notre atelier demain

• Côté pratique

• Démo des outils

• Apprendre faire une évaluation de performance

• Comment convaincre le business a participer

• Où se trouve plus d’info

Questions ?

Éric Daspet

http://eric.daspet.name/

http://performance.survol.fr/(livre en préparation)

Nicole Sulivan

[email protected]“stubbornella” sur le webhttp://smushit.com/







http://smushit.com

http://smushit.com

Performance Web côté client - Daspet / Sullivan - Paris Web 2008

Documents

Transcript of Performance Web côté client - Daspet / Sullivan - Paris Web 2008