SlideShare a Scribd company logo
1 of 154
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
Pourquoi la performance?
Pourquoi la performance?
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)
Pourquoi la performance?
#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%
Pourquoi la performance?
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
Pourquoi la performance?
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/

More Related Content

What's hot

We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOErlé Alberton
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...RESONEO
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performantRefficience
 
Référencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampRéférencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampSEO CAMP
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressDaniel Roch - SeoMix
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Semrush France
 
Seo campus 2016 : Comment faire du SEO sur Baidu, le moteur de recherche n°1...
Seo campus 2016  : Comment faire du SEO sur Baidu, le moteur de recherche n°1...Seo campus 2016  : Comment faire du SEO sur Baidu, le moteur de recherche n°1...
Seo campus 2016 : Comment faire du SEO sur Baidu, le moteur de recherche n°1...Veronique Duong
 
La guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalLa guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalDaniel Roch - SeoMix
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Patrick Valibus
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueJean-Pierre Vincent
 
100 jours pour développer son trafic !
100 jours pour développer son trafic !100 jours pour développer son trafic !
100 jours pour développer son trafic !Erlé Alberton
 

What's hot (13)

We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Référencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampRéférencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO Camp
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
Seo campus 2016 : Comment faire du SEO sur Baidu, le moteur de recherche n°1...
Seo campus 2016  : Comment faire du SEO sur Baidu, le moteur de recherche n°1...Seo campus 2016  : Comment faire du SEO sur Baidu, le moteur de recherche n°1...
Seo campus 2016 : Comment faire du SEO sur Baidu, le moteur de recherche n°1...
 
La guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalLa guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS Drupal
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
 
100 jours pour développer son trafic !
100 jours pour développer son trafic !100 jours pour développer son trafic !
100 jours pour développer son trafic !
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 

Viewers also liked

What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skillRuss Weakley
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
 

Viewers also liked (20)

After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Cache
CacheCache
Cache
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skill
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 

Similar to Pourquoi la performance?

Techniques d'accélération des pages web
Techniques d'accélération des pages webTechniques d'accélération des pages web
Techniques d'accélération des pages webJean-Pierre Vincent
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Aymen Loukil
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...pierredargham
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Aymen Loukil
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Brigitte Marandon
 
Performances Web - Afup 2008
Performances Web - Afup 2008Performances Web - Afup 2008
Performances Web - Afup 2008Eric D.
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Adyax
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfObject Vingt Trois
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéFasterize
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyJean-Pierre Vincent
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifiéAdrien Russo
 
Techniques d&rsquo;accélération des pages Web
Techniques d&rsquo;accélération des pages WebTechniques d&rsquo;accélération des pages Web
Techniques d&rsquo;accélération des pages WebMicrosoft
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...SEO CAMP
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 

Similar to Pourquoi la performance? (20)

Techniques d'accélération des pages web
Techniques d'accélération des pages webTechniques d'accélération des pages web
Techniques d'accélération des pages web
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Performances Web - Afup 2008
Performances Web - Afup 2008Performances Web - Afup 2008
Performances Web - Afup 2008
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
Techniques d&rsquo;accélération des pages Web
Techniques d&rsquo;accélération des pages WebTechniques d&rsquo;accélération des pages Web
Techniques d&rsquo;accélération des pages Web
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 

Pourquoi la performance?

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