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

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!

Quantiﬁer 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

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% traﬁc -30% poids

Qu’est-ce que la performance?

Deux Types: Temps de réponse & Efﬁcacité 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 “ﬁlter” 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 onbeforeunload - onload • La déﬁnitionest vague et change d’une page à l’utilisateur de ce qu’est le onload pour

#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/

#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 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 requêtes 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;modiﬁcation 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?<?= ﬁlemtime($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éﬁcie t-il à l’utilisateur ?

À quel point le cache bénéﬁcie 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 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ériﬁer 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

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

#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

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.

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 ﬁltres Pourquoi utiliser AlphaImageLoader ? IE6 ne supporte pas la transparence partielle nativement. Le ﬁltre force ce support.

Problèmes avec les ﬁltres • 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 ﬁltre 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.

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://smushit.com

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

smush.it L’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, ﬂash

Fonctionnalités = Optimisation

Vériﬁer 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 YDN http://developer.yahoo.com/ performance

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

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/

http://www.lesbazeilles.com	16
http://www.slideshare.net	9
http://lanyrd.com	5

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

by Association Paris-Web

Accessibility

Upload Details

Usage Rights

3 Embeds 30

Statistics

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