advertisement

Pourquoi la performance?

50 %
50 %
advertisement
Information about Pourquoi la performance?
Technology

Published on November 25, 2008

Author: stubbornella

Source: slideshare.net

Description

Quantifier et améliorer la performance de tout produit Yahoo! mondial avec Éric Daspet pour ParisWeb 2008
advertisement

High Performance Web Sites Éric Daspet Nicole Sullivan Développeur web à Yahoo! nicolesl@yahoo-inc.com http://eric.daspet.name/ www.stubbornella.org http://developer.yahoo.com/performance

Qui sommes-nous ? • Éric Daspet Développeur web à Yahoo! • Nicole Sullivan Équipe Exceptional Performance à Yahoo!

Quantifier et améliorer la performance de tout produit Yahoo! mondial

you?

Pourquoi la performance?

1: Rapide est mieux

7

10

11

12

13

2: Les sites sont plus lourd

Les sites web modernes & les application web ont changer

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

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 pratiques http://developer.yahoo.com/performance Mise à jour des 14 recommandations initiales 20 recommandations ajoutées

14 bonnes pratiques (mises à jour) Faire moins de requêtes HTTP Utiliser un réseau de diffusion de contenu (CDN) Ajouter des entêtes “Expires” (ou Cache-control) Compresser les composants avec gzip Mettre les CSS en haut Déplacer les CSS en bas (en ligne aussi) Éviter les “expression” en CSS Externaliser CSS et Javascript Réduire les requêtes DNS Minimifier les Javascript et CSS (en ligne aussi) Éviter les redirections Retirer les scripts dupliqués Configurer les ETags Rendre Ajax cachable http://developer.yahoo.com/performance/rules.html

Après YSlow “A”? 1. Vider le tampon rapidement (buffer) 11. Minimiser les accès DOM 2. Utiliser GET pour Ajax 12. Développer des gestionnaires d’événements sympa 3. Post-charger les composants 13. Choisir <link> plutôt que @import 4. Pré-charger les composants 14. Éviter “filter” 5. Réduire le nombre d’éléments DOM 15. Optimiser les images 6. Séparer les composants sur plusieurs domaines 16. Optimiser les sprites CSS 7. Réduire le nombre d’iframe 17. Ne redimensionnez pas les images en HTML 8. Pas de 404 18. Rendez favicon.ico léger et cachable 9. Réduire la taille des cookies 19. Nouveauté iPhone 3G 10. Utiliser les domaines sans cookie pour les 20. Groupes les composants dans un document composants mulitpart (mobiles)

#1 Perception

temps de réponse perçu slow crawl boring snail performance speed enjoyable stagnant unexceptional urgent instant accelerate yawn perception unresponsive impatient delay snap achievement moderate blah subdue drag better improve action pleasant pace apathetic quickprolong swift load sluggish sleepy promote slack cool late unexciting reduced lag maximum drive prompt advance complex heavy unmemorable fast hurry rush satisfying feel obscure exceptional brisk rapid exciting why wait

temps de réponse perçu performance speed enjoyable slow crawl boring snail stagnant urgent instant accelerate unexceptional yawn perception snap achievement unresponsive impatient delay better improve action pleasant pace moderate blah subdue drag apathetic prolong slack load sluggish sleepy quick promote swift cool maximum drive prompt advance late unexciting reduced lag complex heavy unmemorable fast hurry rush satisfying feel obscure exceptional brisk rapid exciting why wait Quelle est l’expérience utilisateur ?

Dans l’oeil du cyclone • La perception et l’utilisabilité sont des mesures importantes • Plus pertinentes que le simple onunload - onload • La définitionest vague et change d’une page à l’utilisateur de ce qu’est le onload pour l’autre.

#2 “80% of consequences come from 20% of causes” —Vilfredo Pareto

L’Importance du Front-End

L’Importance du Front-End Back-end = 5%

L’Importance du Front-End Front-end = 95%

L’Importance du Front-End 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 ? TF1 1,8% AlloCiné 1,5% • La page HTML FaceBook 7,2% représente moins de Skyrock 1% 10% France Telecom 34,7% Free (portail) 1% Le Monde 0,7% • 90% offrent un meilleur Amazon France 25,1% ROI 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/

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

#3 Cache

Cache vide / rempli 1 2 3 l’utilisateur l’utilisateur l’utilisateur demande demande d’autres demande de www.yahoo.com pages web nouveau www.yahoo.com

Cache vide / rempli 1 2 dns lookup html image image dns lookup script 3 image image image image l’utilisateur user requests image image user re-requests demande other web pages image image www.yahoo.com www.yahoo.com script image image image image image image image image script dns lookup image image image image image dns lookup script script stylesheet image avec un cache vide 0 0.5 1 1.5 2 2.5 3

Cache vide / rempli 1 2 dns lookup html image image dns lookup script 3 image image image image l’utilisateur user requests image image user re-requests demande other web pages image image www.yahoo.com www.yahoo.com script image image image image image image image image script dns lookup image image image image image dns lookup script script stylesheet image avec un cache vide 0 0.5 1 1.5 2 2.5 3

Cache vide / rempli 1 2 3 l’utilisateur l’utilisateur l’utilisateur demande demande d’autres demande de www.yahoo.com pages web nouveau www.yahoo.com

Cache vide / rempli 1 2 3 l’utilisateur l’utilisateur l’utilisateur demande demande d’autres demande de www.yahoo.com pages web nouveau www.yahoo.com

Cache vide / rempli 1 2 3 l’utilisateur l’utilisateur l’utilisateur demande demande d’autres demande de www.yahoo.com pages web 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 requetes HTTP.

Cache - technique • Expires: Wed, 24 Oct 2018 21:32:59 GMT Cache-Control: public;max-age=315360000 • mod_expires sous Apache ExpiresDefault quot;access plus 1 month 15 days 2 hoursquot; ExpiresByType image/gif quot;modification plus 5 hours 3 minutesquot; • 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?20081113T123559 monscript.js?<?= filemtime($a); ?>

Cache - CDN • CDN - Content Delivery Network • Serveur proche du client • Latence faible • Cache automatique

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

À 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 ?

Tester le cache du navigateur Ajouter une nouvelle image sur vos pages : <img src=quot;image/blank.gifquot; height=quot;1quot; width=quot;1quot;/> }1 px avec ces entêtes HTTP dans la réponse : Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

Tester le cache du navigateur Ajouter une nouvelle image sur vos pages : <img src=quot;image/blank.gifquot; height=quot;1quot; width=quot;1quot;/> }1 px avec ces entêtes HTTP dans la réponse : Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

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 navigateur Q1: Quel % # utilisateurs uniques avec au moins une réponse 200 d’utilisateurs uniques voient la # total d’utilisateurs uniques page avec un cache vide ? Q2: Quel % des # total de réponses 200 # de 200 + # de 304 pages sont vues avec un cache vide ? }1 px

Résultats surprenants 1.00 0.75 0.50 0.25 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 1.00 0.75 0.50 0.25 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

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

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

#4 Téléchargements parallèles

Téléchargements parallèles Deux composants en parallèle par domaine GIF GIF GIF GIF GIF GIF d’après HTTP/1.1

Téléchargements parallèles

Téléchargements parallèles html component component Deux en parallèle component component component component component component component component 0 0.425 0.850 1.275 1.700 Quatre en parallèle Huit en parallèle

Téléchargements parallèles html component component Deux en parallèle component component component component component component component component 0 0.425 0.850 1.275 1.700 html component component Quatre en parallèle component component component component component component component component 0 0.375 0.750 1.125 1.500 Huit en parallèle

Téléchargements parallèles html component component Deux en parallèle component component component component component component component component 0 0.425 0.850 1.275 1.700 html component component Quatre en parallèle component component component component component component component component 0 0.375 0.750 1.125 1.500 html component component component component component Huit en parallèle component component component component component 0 0.375 0.750 1.125 1.500

Optimiser les téléchargements parallèles temps de réponse (secondes) alias

Optimiser les téléchargements parallèles 1.4 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) 1.2 1.0 0.8 temps de réponse (secondes) 0.6 0.4 0.2 0 1 2 4 5 10 alias

Optimiser les téléchargements parallèles 1.4 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average 1.2 1.0 0.8 temps de réponse (secondes) 0.6 0.4 0.2 0 1 2 4 5 10 alias

Optimiser les téléchargements parallèles 1.4 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average 1.2 1.0 0.8 temps de réponse (secondes) 0.6 0.4 0.2 0 1 2 4 5 10 règle d’or : utiliser au moins 2 domaines, pas plus de 4

À 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

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

Résumé What the 80/20 Rule Tells Us about Reducing HTTP Requests ! http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ 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 ! http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

#5 Optimiser les images et les sprites

CSS Sprites CSS: … HTML: http://alistapart.com/articles/sprites

CSS Sprites CSS: … HTML: L’image combinée est plus légère http://alistapart.com/articles/sprites

Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.

Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.

Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.

Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.

Un exemple pratique ?

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 sprites 1. 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 filtres Pourquoi 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 PNG8 Créer l’image avec transparence binaire. Dans Fireworks, ajouter quelques pixels en semi-transparence.

IE6 Firefox Opera IE7+ Safari Les bons navigateurs ont + Et les dinausores ont un cas par défaut acceptable

Données de tests Retirer Alpha Image Loader 100ms Yahoo! search

Réduire les images

Deux problèmes distincts Design Qualité versus Optimisation 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ÈME Optimizing images sucks.

LOURD = LENT

Images, qui s’en préoccupe ? Top 10 sites web 45.6% du poids des pages vient des images.

.94

7 ERREURS Optimisation d’images

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

erreur #2 Ne pas passer les images par PNGcrush 16.05%

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

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

erreur #5 Utiliser Alpha Image Loader 100ms yahoo search

erreur #6 Envoyer les images générées dynamiquement “telles quelles” 38-55% google charts api

erreur #7 Ne pas combiner les images

SOLUTION?

JPEG Tran Outils excellents, tellement de possibilités PngOptimizer OptiPNG

UN OUTIL. BEAUCOUP D’ALGORITHMES. Smush it optimise automatiquement les images en utilisant le meilleur outil open source

démo http://smush.it

Outils.

IBM Page Detailer Packet sniffer. Windows seulement (IE, FF, ...). Démo gratuite, licence à $300 http://alphaworks.ibm.com/tech/ pagedetailer

Firebug Développement web évolué. Gratuit.

YSlow Apperçus et analyses de performance. Gratuit.

Gomez Mesures tierces. Comparaison de concurrence.

HTTPfox ??

Webpagetest.org Waterfall of your page load performance as well as a comparison against an optimization checklist.

smush.it L’optimisation des images sans perte de qualité

Gestion du projet d’amélioration des performances.

É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 124

Pour plus d’informations :

High Performance Web Sites Connaissances fondamentales pour les ingénieur web front-end par Steve Souders, avec des recherches de Yahoo!

Exceptional Performance sur YDN http://developer.yahoo.com/ performance

Articles sur le YUIBlog http://yuiblog.com/blog/ category/performance

Liens book: http://www.oreilly.com/catalog/9780596514211/ examples: http://stevesouders.com/examples/ image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6 CSS sprites: http://alistapart.com/articles/sprites inline images: http://tools.ietf.org/html/rfc2397 jsmin: http://crockford.com/javascript/jsmin dojo compressor: http://dojotoolkit.org/docs/shrinksafe HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer Fasterfox: http://fasterfox.mozdev.org/ LiveHTTPHeaders: http://livehttpheaders.mozdev.org/ Firebug: http://getfirebug.com/ YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

Images CC utilisées “Zipper Pocket” by jogales: http://www.flickr.com/photos/jogales/11519576/ “Need for Speed” by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/ “I wonder what flavour it is?” by blather: http://www.flickr.com/photos/deadlyphoto/411770353/ “takeout boxes from Grand Shanghai” by massdistraction: http://www.flickr.com/photos/sharynmorrow/11263821/ “takeout” by dotpolka : http://www.flickr.com/photos/dotpolka/249129144/ “ice cream cone melting/rome” by Megandavid : http://www.flickr.com/photos/megandavid/189332042/ “nikon em bokeh” by dsevilla: http://www.flickr.com/photos/dsevilla/249202834/ “maybe” by Tal Bright: http://www.flickr.com/photos/bright/118197469/ “how do they do that” by Fort Photo: http://www.flickr.com/photos/fortphoto/388825145/ “Gorgeous iceberg 7 [Le Toit du Monde]” by Adventure Addict http://www.flickr.com/photos/adventureaddict/ 35290307/ “molasses-spice cookies” ilmungo: http://www.flickr.com/photos/ilmungo/65345233/ “Driving is fun” by Ben McLeod: http://www.flickr.com/photos/benmcleod/59948935/ “Dozen eggs” by aeA: http://www.flickr.com/photos/raeallen/96238870/ “Max speed 15kmh” by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/ “Stairway to heaven” ognita: http://www.flickr.com/photos/ognita/503915547/ “flaps up” by http://www.flickr.com/photos/jurvetson/74274113/ “Fast Cat” by http://www.flickr.com/photos/raylopez/708023176/ “blues” by http://www.flickr.com/photos/pankaj/1877184829/

Images CC utilisées “Vintage Kodak Studio Scales Set and Bottle” by http://www.flickr.com/photos/captkodak/ 272746539/ “Assumtion, Minissota” by http://www.flickr.com/photos/afiler/226337382/ Merci encore à Nate Koechley (Yahoo!) et à l’équipe YUI

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 Nicole Sulivan http://eric.daspet.name/ nicole@stubbornella.org www.stubbornella.org http://performance.survol.fr/ “stubbornella” sur le web (livre en préparation) http://smushit.com/

#elem presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

La performance au travail: Pourquoi et comment l’évaluer?

Une connotation négative est parfois attribuée à la mesure de la performance et à l’implantation de standards de productivité. Mais à l’heure où ...
Read more

Pourquoi La Performance dissertations et mémoires 1 - 25

Dissertation Gratuites et de Recherche : Pourquoi La Performance 1 - 25
Read more

Pourquoi et comment mesurer la performance sociale des ...

La performance sociale d’une entreprise, dont le bien-être de ses collaborateurs, ne doit pas ou plus être considérée comme un « luxe inutile ». En ...
Read more

pourquoi mesurer la performance d'une entreprise ? | Yahoo ...

Hello tout le monde, voila j'ai un sujet à traité sur la mesure de la performance. J'aimerais obtenir des informations sur " pourquoi mesurer ...
Read more

Romina De Novellis, pourquoi la performance ? - YouTube

Rating is available when the video has been rented. Interview de Romina De Novellis (extrait) copyright Galerie Laure Roynette
Read more

Pourquoi la performance bouleverse la fonction publique ...

I I Ou la reconquête du mérite des fonctionnaires. Mais au cours de l'été 2007, la recherche de la performance dans la fonction publique, va connaître ...
Read more

Pourquoi mesurer la performance d'une entreprise ? | Yahoo ...

Meilleure réponse: Pour répondre à des diverses questions : Clients => fonds de roulement Banques => Liquidité et solvabilité Actionnaires ...
Read more

Tableaux de bord : pourquoi mesurer la performance ?

Tableaux de bord : pourquoi mesurer la performance ? par Alain Fernandez BPMS.info/Nodeway.org
Read more