SlideShare une entreprise Scribd logo
1  sur  148
Télécharger pour lire hors ligne
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
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
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       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)
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
#1
 Perception
temps de réponse perçu

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

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




Quelle est l’expérience utilisateur ?
Dans l’oeil du cyclone
• La perception et l’utilisabilité sont des mesures
  importantes
• Plus pertinentes que le simple onbeforeunload -
  onload
• La définitionest vague et change d’une page à
  l’utilisateur
                de ce qu’est le onload pour
#2
“80% of consequences come from
                 20% of causes”
                   —Vilfredo Pareto
L’Importance du Front-End
L’Importance du Front-End



Back-end =

5%
L’Importance du Front-End



                        Front-end =

                        95%
L’Importance du Front-End




Même ici, front-end = 88%
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
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 requêtes HTTP.
Cache - technique
• Expires: Wed, 24 Oct 2018 21:32:59 GMT
  Cache-Control: public;max-age=315360000


• mod_expires sous Apache
  ExpiresDefault quot;access plus 1 month 15 days 2 hoursquot;
  ExpiresByType image/gif quot;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://smushit.com
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
IBM Page
      Detailer
      Packet sniffer.
Windows seulement (IE, FF, ...).
Démo gratuite, licence à $300

http://alphaworks.ibm.com/tech/
           pagedetailer
Firebug
Développement web évolué.
         Gratuit.
YSlow
Apperçus et analyses de
 performance. Gratuit.
Gomez
     Mesures tierces.
Comparaison de concurrence.
HTTPfox
   ??
Webpagetest.org
       ??
smush.it
L’optimisation des images sans
       perte de qualité
Équilibrer le budget
  performance.
Trois étapes

• Mesurer la performance et
  les tendances

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

• Estimer l’impact de toutes les
  améliorations de
  performance
Estimer ? comment ?
               Traquer :
      • Poids de la page *
      • Temps de réponse
      • Requêtes HTTP


* Pour les sites plus complexes, traquer le poids de la page par
            type de composants : css, js, images, flash
Fonctionnalités = Optimisation
Vérifier les attentes.



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

      • Est-ce que les optimisations ont amélioré la
        situation autant que vous le pensiez ?
Allouer du temps,
  équilibrer le budget




améliorations de performance
             vs
  nouvelles fonctionnalités

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

      par Steve Souders,
   avec des recherches de Yahoo!
Exceptional
Performance
  sur YDN
http://developer.yahoo.com/
        performance
Articles sur le
  YUIBlog
 http://yuiblog.com/blog/
  category/performance
Notre atelier demain

• Côté pratique
• Démo des outils
• Apprendre faire une évaluation de performance
• Comment convaincre le business a participer
• Où se trouve plus d’info
Questions ?
Éric Daspet                 Nicole Sulivan

http://eric.daspet.name/        nicole@stubbornella.org
                                www.stubbornella.org
http://performance.survol.fr/   “stubbornella” sur le web
(livre en préparation)          http://smushit.com/

Contenu connexe

En vedette

Presentation elektronik2
Presentation elektronik2Presentation elektronik2
Presentation elektronik2Lemon Sour
 
Lampen und leuchten shop ist ein größten online shop-beleuchtung
Lampen und leuchten shop ist ein größten online shop-beleuchtungLampen und leuchten shop ist ein größten online shop-beleuchtung
Lampen und leuchten shop ist ein größten online shop-beleuchtungshoplampen
 
Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...
Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...
Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...eSAT Journals
 
Etude sur l'hygiène nasale des Français
Etude sur l'hygiène nasale des FrançaisEtude sur l'hygiène nasale des Français
Etude sur l'hygiène nasale des FrançaisIpsos France
 
Avaliação da corrosividade do nitrato 4 apresentação.ppt
Avaliação da corrosividade do nitrato 4   apresentação.pptAvaliação da corrosividade do nitrato 4   apresentação.ppt
Avaliação da corrosividade do nitrato 4 apresentação.pptEtemistocles UFRN gomes da silva
 
Cursos tecnicos itaguai
Cursos tecnicos itaguaiCursos tecnicos itaguai
Cursos tecnicos itaguaiitamob
 
Aula 7 grupo 5 a eng. ambiental
Aula 7   grupo 5 a eng. ambientalAula 7   grupo 5 a eng. ambiental
Aula 7 grupo 5 a eng. ambientalYuri José
 
Desmantelar Os U.S.A
Desmantelar Os U.S.ADesmantelar Os U.S.A
Desmantelar Os U.S.AHelena
 
An RS 422 IBIS Model for EMI Analyst
An RS 422 IBIS Model for EMI AnalystAn RS 422 IBIS Model for EMI Analyst
An RS 422 IBIS Model for EMI AnalystEMI Software LLC
 
Htii pressões hiperbáricas
Htii pressões hiperbáricasHtii pressões hiperbáricas
Htii pressões hiperbáricasJoyce Domingues
 
Liquid Fuel Nuclear Reactors
Liquid Fuel Nuclear ReactorsLiquid Fuel Nuclear Reactors
Liquid Fuel Nuclear ReactorsRobert Hargraves
 
Advantages of Soft Start Motor Control
Advantages of Soft Start Motor ControlAdvantages of Soft Start Motor Control
Advantages of Soft Start Motor ControlDesign World
 
Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016
Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016
Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016Search Foresight
 

En vedette (15)

Presentation elektronik2
Presentation elektronik2Presentation elektronik2
Presentation elektronik2
 
Lampen und leuchten shop ist ein größten online shop-beleuchtung
Lampen und leuchten shop ist ein größten online shop-beleuchtungLampen und leuchten shop ist ein größten online shop-beleuchtung
Lampen und leuchten shop ist ein größten online shop-beleuchtung
 
Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...
Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...
Analysis of symmetrical &amp; asymmetrical pwm based three phase ac to ac con...
 
Etude sur l'hygiène nasale des Français
Etude sur l'hygiène nasale des FrançaisEtude sur l'hygiène nasale des Français
Etude sur l'hygiène nasale des Français
 
Avaliação da corrosividade do nitrato 4 apresentação.ppt
Avaliação da corrosividade do nitrato 4   apresentação.pptAvaliação da corrosividade do nitrato 4   apresentação.ppt
Avaliação da corrosividade do nitrato 4 apresentação.ppt
 
Cursos tecnicos itaguai
Cursos tecnicos itaguaiCursos tecnicos itaguai
Cursos tecnicos itaguai
 
Aula 7 grupo 5 a eng. ambiental
Aula 7   grupo 5 a eng. ambientalAula 7   grupo 5 a eng. ambiental
Aula 7 grupo 5 a eng. ambiental
 
Desmantelar Os U.S.A
Desmantelar Os U.S.ADesmantelar Os U.S.A
Desmantelar Os U.S.A
 
Separação de materiais
Separação de materiaisSeparação de materiais
Separação de materiais
 
An RS 422 IBIS Model for EMI Analyst
An RS 422 IBIS Model for EMI AnalystAn RS 422 IBIS Model for EMI Analyst
An RS 422 IBIS Model for EMI Analyst
 
Htii pressões hiperbáricas
Htii pressões hiperbáricasHtii pressões hiperbáricas
Htii pressões hiperbáricas
 
Liquid Fuel Nuclear Reactors
Liquid Fuel Nuclear ReactorsLiquid Fuel Nuclear Reactors
Liquid Fuel Nuclear Reactors
 
Polietileno
PolietilenoPolietileno
Polietileno
 
Advantages of Soft Start Motor Control
Advantages of Soft Start Motor ControlAdvantages of Soft Start Motor Control
Advantages of Soft Start Motor Control
 
Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016
Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016
Synodiance > 10 régles pour un site web bien référencé - Webikeo - 09/02/2016
 

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

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
 
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
 
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
 
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
 
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
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifiéAdrien Russo
 
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
 

Similaire à Performance Web côté client - Daspet / Sullivan - Paris Web 2008 (20)

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
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
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
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
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
 
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 ?
 
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
 
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
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
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...
 
Optimisation de son site web
Optimisation de son site webOptimisation de son site web
Optimisation de son site web
 
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
 

Plus de Association Paris-Web

Petite arithmétique de l’UX : choisir, renoncer, construire
Petite arithmétique de l’UX : choisir, renoncer, construirePetite arithmétique de l’UX : choisir, renoncer, construire
Petite arithmétique de l’UX : choisir, renoncer, construireAssociation Paris-Web
 
Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008
Ergonomie des interfaces riches  - Amélie Boucher - Paris Web 2008Ergonomie des interfaces riches  - Amélie Boucher - Paris Web 2008
Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008Association Paris-Web
 
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008Association Paris-Web
 
Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008
Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008
Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008Association Paris-Web
 
Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008
Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008
Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008Association Paris-Web
 
ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...
ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...
ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...Association Paris-Web
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Association Paris-Web
 
Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008
Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008
Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008Association Paris-Web
 
Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...
Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...
Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...Association Paris-Web
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008Association Paris-Web
 
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008Association Paris-Web
 
Internationalisation - Francois Yergeau - Paris Web 2008
Internationalisation - Francois Yergeau - Paris Web 2008Internationalisation - Francois Yergeau - Paris Web 2008
Internationalisation - Francois Yergeau - Paris Web 2008Association Paris-Web
 
Comment décider des modèles de navigation pour ses applications Web ? - Patri...
Comment décider des modèles de navigation pour ses applications Web ? - Patri...Comment décider des modèles de navigation pour ses applications Web ? - Patri...
Comment décider des modèles de navigation pour ses applications Web ? - Patri...Association Paris-Web
 
Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...
Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...
Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...Association Paris-Web
 
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008Association Paris-Web
 
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008Association Paris-Web
 

Plus de Association Paris-Web (20)

Atelier d'aide aux orateurs 2012
Atelier d'aide aux orateurs 2012Atelier d'aide aux orateurs 2012
Atelier d'aide aux orateurs 2012
 
Petite arithmétique de l’UX : choisir, renoncer, construire
Petite arithmétique de l’UX : choisir, renoncer, construirePetite arithmétique de l’UX : choisir, renoncer, construire
Petite arithmétique de l’UX : choisir, renoncer, construire
 
KISS dans une grande entreprise ?
KISS dans une grande entreprise ?KISS dans une grande entreprise ?
KISS dans une grande entreprise ?
 
Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008
Ergonomie des interfaces riches  - Amélie Boucher - Paris Web 2008Ergonomie des interfaces riches  - Amélie Boucher - Paris Web 2008
Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008
 
Vendredi 14 novembre Paris Web 2008
Vendredi 14 novembre Paris Web 2008Vendredi 14 novembre Paris Web 2008
Vendredi 14 novembre Paris Web 2008
 
Jeudi 13 novembre Paris Web 2008
Jeudi 13 novembre Paris Web 2008Jeudi 13 novembre Paris Web 2008
Jeudi 13 novembre Paris Web 2008
 
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
 
Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008
Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008
Identité 2.0 et Web sémantique - David Larlet - Paris Web 2008
 
Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008
Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008
Qualité éditoriale : la grande oubliée - Joël Ronez - Paris Web 2008
 
ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...
ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...
ReNo, le référentiel de qualité Web du gouvernement luxembourgeois - Gautier ...
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
 
Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008
Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008
Panorama des bonnes pratiques Web - Francois Nonnenmacher - Paris Web 2008
 
Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...
Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...
Internautes et robots des moteurs de recherche, mais comment font-ils pour s’...
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
 
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
 
Internationalisation - Francois Yergeau - Paris Web 2008
Internationalisation - Francois Yergeau - Paris Web 2008Internationalisation - Francois Yergeau - Paris Web 2008
Internationalisation - Francois Yergeau - Paris Web 2008
 
Comment décider des modèles de navigation pour ses applications Web ? - Patri...
Comment décider des modèles de navigation pour ses applications Web ? - Patri...Comment décider des modèles de navigation pour ses applications Web ? - Patri...
Comment décider des modèles de navigation pour ses applications Web ? - Patri...
 
Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...
Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...
Les standards du Web en entreprise : l’exemple de BNP Paribas Personal Financ...
 
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
 
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008
 

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
  • 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 changés
  • 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 onbeforeunload - onload • La définitionest vague et change d’une page à l’utilisateur de ce qu’est le onload pour
  • 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 requêtes 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
  • 130. IBM Page Detailer Packet sniffer. Windows seulement (IE, FF, ...). Démo gratuite, licence à $300 http://alphaworks.ibm.com/tech/ pagedetailer
  • 132. YSlow Apperçus et analyses de performance. Gratuit.
  • 133. Gomez Mesures tierces. Comparaison de concurrence.
  • 134. HTTPfox ??
  • 136. smush.it L’optimisation des images sans perte de qualité
  • 137. Équilibrer le budget performance.
  • 138. 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
  • 139. 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
  • 141. 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 ?
  • 142. Allouer du temps, équilibrer le budget améliorations de performance vs nouvelles fonctionnalités 122
  • 143. High Performance Web Sites Connaissances fondamentales pour les ingénieur web front-end par Steve Souders, avec des recherches de Yahoo!
  • 144. Exceptional Performance sur YDN http://developer.yahoo.com/ performance
  • 145. Articles sur le YUIBlog http://yuiblog.com/blog/ category/performance
  • 146. 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
  • 148. É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/