High Performance Web
           Sites




Éric Daspet                                     Nicole Sullivan
Développeur web ...
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
         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       1...
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 recomman...
14 bonnes pratiques (mises à jour)
Faire moins de requêtes HTTP
Utiliser un réseau de diffusion de contenu (CDN)
Ajouter d...
Après YSlow “A”?
1. Vider le tampon rapidement (buffer)           11. Minimiser les accès DOM

2. Utiliser GET pour Ajax  ...
#1
 Perception
temps de réponse perçu

                slow crawl boring snail
      performance speed enjoyable stagnant
               ...
temps de réponse perçu

   performance speed enjoyable         slow crawl boring snail stagnant
   urgent instant accelera...
Dans l’oeil du cyclone
• La perception et l’utilisabilité sont des mesures
  importantes
• Plus pertinentes que le simple ...
#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é     ...
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
   demand...
Cache vide / rempli
       1                  2
                         dns lookup
                                html
 ...
Cache vide / rempli
       1                  2
                         dns lookup
                                html
 ...
Cache vide / rempli
    1                 2                 3
 l’utilisateur     l’utilisateur     l’utilisateur
   demand...
Cache vide / rempli
    1                 2                 3
 l’utilisateur     l’utilisateur     l’utilisateur
   demand...
Cache vide / rempli
    1                 2                 3
 l’utilisateur     l’utilisateur     l’utilisateur
   demand...
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 d...
Cache - technique
• Expires: Wed, 24 Oct 2018 21:32:59 GMT
  Cache-Control: public;max-age=315360000


• mod_expires sous ...
Cache - mise à jour

• Une URL = Une version (en cache)
• Changer l’URL pour une nouvelle version
 • monscript-1.4.js
 • m...
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 vi...
Tester le cache du navigateur

      Ajouter une nouvelle image sur vos pages :
<img src=quot;image/blank.gifquot; height=...
Tester le cache du navigateur

      Ajouter une nouvelle image sur vos pages :
<img src=quot;image/blank.gifquot; height=...
Tester le cache du navigateur
Deux codes de réponse possibles

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

  304 – Le ...
Tester le cache du navigateur
Q1: Quel %             # utilisateurs uniques avec au
                          moins une ré...
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  ...
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  ...
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.
  ...
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
               ...
Téléchargements parallèles
Téléchargements parallèles
                           html
                      component
                      component...
Téléchargements parallèles
                           html
                      component
                      component...
Téléchargements parallèles
                           html
                      component
                      component...
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)

            ...
Optimiser
les téléchargements parallèles
             1,4
                       36 x 36 px (0.9 Kb)   116 x 61 px (3.4 Kb...
Optimiser
les téléchargements parallèles
             1,4
                       36 x 36 px (0.9 Kb)   116 x 61 px (3.4 Kb...
À emporter chez vous


• attention au gâchis de temps CPU
• la durée d’une requête DNS varie suivant votre
  FAI et votre ...
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-resea...
#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
             ...
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: ...
Optimiser les sprites
1. Combien de pages a
   votre site ?

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

3. Com...
Éviter les filtres
   Pourquoi utiliser AlphaImageLoader ?

IE6 ne supporte pas la transparence partielle
   nativement. Le...
Problèmes avec les filtres

 • Bloque le rendu, gèle le navigateur
 • Plus grosse consomation mémoire
 • Par élément, pas p...
Solution: éviter
          AlphaImageLoader
1. MIEUX: à éviter complètement, utiliser PNG8 qui dégrade
   correctement dan...
Amélioration
    progressive de
        PNG8
Créer l’image avec transparence binaire.
Dans Fireworks, ajouter quelques pix...
IE6




                                            Firefox
                                            Opera
            ...
Données de tests
  Retirer Alpha Image Loader



                               100ms
                               Yahoo...
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: Compre...
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%
    ...
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 ope...
démo




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

http://alpha...
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 f...
Estimer ? comment ?
               Traquer :
      • Poids de la page *
      • Temps de réponse
      • Requêtes HTTP


*...
Fonctionnalités = Optimisation
Vérifier les attentes.



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

      • Es...
Allouer du temps,
  équilibrer le budget




améliorations de performance
             vs
  nouvelles fonctionnalités

   ...
High Performance
   Web Sites
Connaissances fondamentales
  pour les ingénieur web
         front-end

      par Steve Sou...
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 convainc...
Questions ?
Éric Daspet                 Nicole Sulivan

http://eric.daspet.name/        nicole@stubbornella.org
                      ...
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Upcoming SlideShare
Loading in …5
×

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

11,040 views
10,224 views

Published on

80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.

Nous aborderons les principales problématiques et les solutions à mettre en œuvre. Forts de l'expérience de l'équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en œuvre les actions correctrices sur vos sites Web.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,040
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
96
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 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
  2. Qui sommes-nous ? • Éric Daspet Développeur web à Yahoo! • Nicole Sullivan Équipe Exceptional Performance à Yahoo!
  3. Quantifier et améliorer la performance de tout produit Yahoo! mondial
  4. you?
  5. Pourquoi la performance?
  6. 1: Rapide est mieux
  7. 7
  8. 10
  9. 11
  10. 12
  11. 13
  12. 2: Les sites sont plus lourd
  13. Les sites web modernes & les application web ont changés
  14. De 2003 à 2008: 97K à 312K. 25.7 à 49.9 objects.
  15. Les derniers 12 mois, le top1000 sites: De 250K à 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page
  16. 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
  17. 3: L’utilisateur veut un site rapide
  18. Quel est le problème ? • 6 sur 11 ont un chargement > 4s • Abandons, agacement, • Impacte votre business
  19. +100 ms
  20. Amazon: ventes -1% +100 ms
  21. +400 ms
  22. Yahoo!: abandons +5 à 9% +400 ms
  23. +500 ms
  24. Google: recherches -20% +500 ms
  25. -30% poids
  26. Google: +30% trafic -30% poids
  27. Qu’est-ce que la performance?
  28. Deux Types: Temps de réponse & Efficacité du systeme
  29. Notre focus est sur la temps de réponse des produits web
  30. Cueillir les fruits de la performance (certains bas, certains hauts)
  31. Nos buts principaux • Moins de requêtes HTTP • Des composants moins lourds • Paralléliser les requêtes
  32. Bonnes pratiques http://developer.yahoo.com/performance Mise à jour des 14 recommandations initiales 20 recommandations ajoutées
  33. 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
  34. 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)
  35. #1 Perception
  36. 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
  37. 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 ?
  38. Dans l’oeil du cyclone • La perception et l’utilisabilité sont des mesures importantes • Plus pertinentes que le simple onbeforeunload - onload • La définitionest vague et change d’une page à l’utilisateur de ce qu’est le onload pour
  39. #2 “80% of consequences come from 20% of causes” —Vilfredo Pareto
  40. L’Importance du Front-End
  41. L’Importance du Front-End Back-end = 5%
  42. L’Importance du Front-End Front-end = 95%
  43. L’Importance du Front-End Même ici, front-end = 88%
  44. Exemple et ça continue encore, et encore... en réalité c’est 7 à 8 fois plus long
  45. 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%
  46. Il y a encore un travail énorme dans le domaine de la performance.
  47. http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  48. http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  49. #3 Cache
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 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
  56. Pourquoi du cache ? Premier accès Second accès Le gain est évident, non ?
  57. Cache vide / rempli
  58. Cache vide / rempli vide = 2.4 secondes rempli = 0.9 seconde rempli = 83% moins de poids (octets) rempli = 90% moins de requêtes HTTP.
  59. 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
  60. 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); ?>
  61. Cache - CDN • CDN - Content Delivery Network • Serveur proche du client • Latence faible • Cache automatique
  62. #3b (malheureusement, le cache ne fonctionne pas aussi bien qu’il pourrait)
  63. À quel point le cache bénéficie t-il à l’utilisateur ?
  64. À 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 ?
  65. 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
  66. 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
  67. 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
  68. 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
  69. 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
  70. 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
  71. 40-60% utilisateurs 20% pages vues
  72. À 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
  73. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  74. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  75. #4 Téléchargements parallèles
  76. Téléchargements parallèles Deux composants en parallèle par domaine GIF GIF GIF GIF GIF GIF d’après HTTP/1.1
  77. Téléchargements parallèles
  78. 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
  79. 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
  80. 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
  81. Optimiser les téléchargements parallèles temps de réponse (secondes) alias
  82. 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
  83. 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
  84. 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
  85. À 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
  86. http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
  87. http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
  88. 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/
  89. #5 Optimiser les images et les sprites
  90. CSS Sprites CSS: … HTML: http://alistapart.com/articles/sprites
  91. CSS Sprites CSS: … HTML: L’image combinée est plus légère http://alistapart.com/articles/sprites
  92. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  93. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  94. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  95. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  96. Un exemple pratique ?
  97. Un exemple pratique ?
  98. 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
  99. 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 ?
  100. Éviter les filtres Pourquoi utiliser AlphaImageLoader ? IE6 ne supporte pas la transparence partielle nativement. Le filtre force ce support.
  101. Problèmes avec les filtres • Bloque le rendu, gèle le navigateur • Plus grosse consomation mémoire • Par élément, pas par image !
  102. 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'); }
  103. Amélioration progressive de PNG8 Créer l’image avec transparence binaire. Dans Fireworks, ajouter quelques pixels en semi-transparence.
  104. IE6 Firefox Opera IE7+ Safari Les bons navigateurs ont + Et les dinausores ont un cas par défaut acceptable
  105. Données de tests Retirer Alpha Image Loader 100ms Yahoo! search
  106. Réduire les images
  107. Deux problèmes distincts Design Qualité versus Optimisation Ingénierie
  108. 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.
  109. LE PROBLÈME Optimizing images sucks.
  110. LOURD = LENT
  111. Images, qui s’en préoccupe ? Top 10 sites web 45.6% du poids des pages vient des images.
  112. .94
  113. 7 ERREURS Optimisation d’images
  114. erreur #1 Utiliser GIF quand PNG est plus léger 20.42%
  115. erreur #2 Ne pas passer les images par PNGcrush 16.05%
  116. erreur #3 Ne pas retirer les méta données JPEG 11.85%
  117. erreur #4 Utiliser des PNG pleines couleurs au lieu de PNG8
  118. erreur #5 Utiliser Alpha Image Loader 100ms yahoo search
  119. erreur #6 Envoyer les images générées dynamiquement “telles quelles” 38-55% google charts api
  120. erreur #7 Ne pas combiner les images
  121. SOLUTION?
  122. JPEG Tran Outils excellents, tellement de possibilités PngOptimizer OptiPNG
  123. UN OUTIL. BEAUCOUP D’ALGORITHMES. Smush it optimise automatiquement les images en utilisant le meilleur outil open source
  124. démo http://smushit.com
  125. IBM Page Detailer Packet sniffer. Windows seulement (IE, FF, ...). Démo gratuite, licence à $300 http://alphaworks.ibm.com/tech/ pagedetailer
  126. Firebug Développement web évolué. Gratuit.
  127. YSlow Apperçus et analyses de performance. Gratuit.
  128. Gomez Mesures tierces. Comparaison de concurrence.
  129. HTTPfox ??
  130. Webpagetest.org ??
  131. smush.it L’optimisation des images sans perte de qualité
  132. Équilibrer le budget performance.
  133. 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
  134. 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
  135. Fonctionnalités = Optimisation
  136. 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 ?
  137. Allouer du temps, équilibrer le budget améliorations de performance vs nouvelles fonctionnalités 122
  138. High Performance Web Sites Connaissances fondamentales pour les ingénieur web front-end par Steve Souders, avec des recherches de Yahoo!
  139. Exceptional Performance sur YDN http://developer.yahoo.com/ performance
  140. Articles sur le YUIBlog http://yuiblog.com/blog/ category/performance
  141. 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
  142. Questions ?
  143. É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/

×