Performance
Éric Daspet - Forum PHP AFUP 2008
Éric Daspet
http://eric.daspet.name/

                YAHOO!

           http://performance.survol.fr/
               (liv...
Le web a changé
2003 : 100Ko et 25 composants
2008 : 300Ko et 50 composants
de 250Ko à 312Ko
       ces douzes derniers mois
WebSiteOptimization.com/speed/tweak/average-web-page
Est-ce important ?
France Telecom       10,1s
Le Monde             7,9s
TF1                  5s
FaceBook             4,6s
Free (portail)     ...
Et vous ?
+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
France Telecom       10,1s
Le Monde             7,9s
TF1                  5s
FaceBook             4,6s
Free (portail)     ...
#1
    “Users really
 respond to speed”
                             Marissa Mayer
        VP Search & User Experience, Go...
Où agir ?
Où agir ?
   Optimiser le code PHP ?
 Index de base de données ?
       Requêtes SQL ?
    Ajouter des serveurs ?
       I...
Exemple




et ça continue encore, et encore...
en réalité c’est 7 à 8 fois plus long
Importance du Front-End
Importance du Front-End



Back-end =

5%
Importance du Front-End



                          Front-end =

                          95%
France Telecom       34,7%
Le Monde             0,7%
TF1                  1,8%
FaceBook             7,2%
Free (portail)   ...
#2
 S’occuper du frontend
  offre le meilleur ROI
28
#3
  Moins de requêtes HTTP
Des composants moins lourds
Des téléchargements parallèles


http://developer.yahoo.com/perfor...
Technique
#4
Cache HTTP
Premier accès         Second accès




                Le gain est évident, non ?
Expires: Wed, 24 Oct 2018 21:32:59 GMT
Cache-Control: public;max-age=315360000


                   (mod_expires sous Apac...
Une version = Une URL
           monscript-1.4.js
    monscript.js?20081113T123559
   monscript.js?<?= filemtime($a); ?>
CDN
content delivery network
    latence faible - cache automatique
Prefetch
  charger des composants en bas de page
ils seront mis en cache et utilisés plus tard
Requêtes Ajax aussi
   à vous de le gérer en PHP
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  ...
#5Minimisation
 Compression
 Concaténation
mod_deflate
 mod_gzip
     environ 80%
Retirer les espaces blancs
   Réagencer le code
                            environ 70%
     YUI compressor - http://devel...
Concaténer
(moins de requêtes HTTP)

             30 minutes à faire en PHP
#6
Compression d’images
Images :
 45.6%
du poids total
  Top 10 sites web
erreur #1
Utiliser GIF quand PNG est plus léger
erreur #2
Ne pas passer les images par PNGcrush
erreur #3
Ne pas retirer les méta données
erreur #4
Utiliser des PNG pleines couleurs au lieu de PNG8

  Design
           Qualité versus Optimisation


           ...
Deux problèmes distincts
   Design
            Qualité versus Optimisation


                                  Ingénierie
erreur #5
Utiliser Alpha Image Loader



                              100ms
                              yahoo search
#7
     Sprites
background-image: url(sprites.png) ;
background-position: -100px -200px;
background-repeat: no-repeat ;
width: 15px ;
heig...
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.
CSS:



        …

HTML:



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




CSS:



                    …

HTML:



                          http://alistapart.c...
#8
 Parallélisation
Téléchargements parallèles
Deux composants     en parallèle     par domaine




                       GIF
               ...
Téléchargements parallèles
Téléchargements parallèles
                           html
                      component
                      component...
Téléchargements parallèles
                           html
                      component
                      component...
Téléchargements parallèles
                           html
                      component
                      component...
Optimiser
les téléchargements parallèles
             1.4       36 x 36 px (0.9 Kb)     116 x 61 px (3.4 Kb)

            ...
#9
 Javascript
Le JS bloque tout
Mettez vos JS en bas
     juste avant </body>
Ou chargez les
    dynamiquement
       var js = document.createElement('script');
                  js.src = 'myscript.js...
Utilisez une classe “js”
pour styler en attendant
JS : document.documentElement.className = “js”
         CSS : .js #menu ...
Pour chaque <td>
    si td.clientWidth > 100
    alors td.style.width = 100
Initialise liste vide

Pour chaque <td>
    si td.clientWidth > 100
    alors ajoute <td> à la liste

Pour chaque item de ...
72
Outils
Firebug
Développement web évolué
YSlow
Apperçus et analyses
AOL Page Test
 Graphiques en cascade
http://developer.yahoo.com/performance
Éric Daspet
http://eric.daspet.name/

                YAHOO!

           http://performance.survol.fr/
               (liv...
Images sous licence CC
      http://www.flickr.com/photos/giuntinijerome/3046524272
            http://www.flickr.com/photos...
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Performances Web - Afup 2008
Prochain SlideShare
Chargement dans…5
×

Performances Web - Afup 2008

107 950 vues

Publié le

Conférence Performance Web au forum PHP Afup 2008.

Plus d'info sur http://performance.survol.fr/

Éric Daspet : http://eric.daspet.name/

Publié dans : Technologie
0 commentaire
16 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
107 950
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8 181
Actions
Partages
0
Téléchargements
193
Commentaires
0
J’aime
16
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Performances Web - Afup 2008

  1. 1. Performance Éric Daspet - Forum PHP AFUP 2008
  2. 2. Éric Daspet http://eric.daspet.name/ YAHOO! http://performance.survol.fr/ (livre en préparation)
  3. 3. Le web a changé
  4. 4. 2003 : 100Ko et 25 composants 2008 : 300Ko et 50 composants
  5. 5. de 250Ko à 312Ko ces douzes derniers mois WebSiteOptimization.com/speed/tweak/average-web-page
  6. 6. Est-ce important ?
  7. 7. France Telecom 10,1s Le Monde 7,9s TF1 5s FaceBook 4,6s Free (portail) 4,4s AlloCiné 4s Skyrock 3,7s Amazon France 3,7s Daily Motion 2,4s Yahoo! France 1,8s Google (résultats) 0,24s
  8. 8. Et vous ?
  9. 9. +100 ms
  10. 10. Amazon : ventes -1% +100 ms
  11. 11. +400 ms
  12. 12. Yahoo! : abandons +5 à 9% +400 ms
  13. 13. +500 ms
  14. 14. Google : recherches -20% +500 ms
  15. 15. -30% poids
  16. 16. Google : +30% trafic -30% poids
  17. 17. France Telecom 10,1s Le Monde 7,9s TF1 5s FaceBook 4,6s Free (portail) 4,4s AlloCiné 4s Skyrock 3,7s Amazon France 3,7s Daily Motion 2,4s Yahoo! France 1,8s Google (résultats) 0,24s
  18. 18. #1 “Users really respond to speed” Marissa Mayer VP Search & User Experience, Google
  19. 19. Où agir ?
  20. 20. Où agir ? Optimiser le code PHP ? Index de base de données ? Requêtes SQL ? Ajouter des serveurs ? Installer APC ? Changer de développeur ? Mettre des caches applicatifs ?
  21. 21. Exemple et ça continue encore, et encore... en réalité c’est 7 à 8 fois plus long
  22. 22. Importance du Front-End
  23. 23. Importance du Front-End Back-end = 5%
  24. 24. Importance du Front-End Front-end = 95%
  25. 25. France Telecom 34,7% Le Monde 0,7% TF1 1,8% FaceBook 7,2% Free (portail) 1% AlloCiné 1,5% Skyrock 1% Amazon France 25,1% Daily Motion 8,5% Yahoo! France 30,7% Google (résultats) 68,8%
  26. 26. #2 S’occuper du frontend offre le meilleur ROI
  27. 27. 28
  28. 28. #3 Moins de requêtes HTTP Des composants moins lourds Des téléchargements parallèles http://developer.yahoo.com/performance
  29. 29. Technique
  30. 30. #4 Cache HTTP
  31. 31. Premier accès Second accès Le gain est évident, non ?
  32. 32. 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;
  33. 33. Une version = Une URL monscript-1.4.js monscript.js?20081113T123559 monscript.js?<?= filemtime($a); ?>
  34. 34. CDN content delivery network latence faible - cache automatique
  35. 35. Prefetch charger des composants en bas de page ils seront mis en cache et utilisés plus tard
  36. 36. Requêtes Ajax aussi à vous de le gérer en PHP
  37. 37. 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
  38. 38. #5Minimisation Compression Concaténation
  39. 39. mod_deflate mod_gzip environ 80%
  40. 40. Retirer les espaces blancs Réagencer le code environ 70% YUI compressor - http://developer.yahoo.com/yui/compressor/ Compressor Rater - http://compressorrater.thruhere.net/
  41. 41. Concaténer (moins de requêtes HTTP) 30 minutes à faire en PHP
  42. 42. #6 Compression d’images
  43. 43. Images : 45.6% du poids total Top 10 sites web
  44. 44. erreur #1 Utiliser GIF quand PNG est plus léger
  45. 45. erreur #2 Ne pas passer les images par PNGcrush
  46. 46. erreur #3 Ne pas retirer les méta données
  47. 47. erreur #4 Utiliser des PNG pleines couleurs au lieu de PNG8 Design Qualité versus Optimisation Ingénierie
  48. 48. Deux problèmes distincts Design Qualité versus Optimisation Ingénierie
  49. 49. erreur #5 Utiliser Alpha Image Loader 100ms yahoo search
  50. 50. #7 Sprites
  51. 51. 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
  52. 52. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  53. 53. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  54. 54. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  55. 55. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  56. 56. CSS: … HTML: http://alistapart.com/articles/sprites
  57. 57. L’image combinée est plus légère CSS: … HTML: http://alistapart.com/articles/sprites
  58. 58. #8 Parallélisation
  59. 59. Téléchargements parallèles Deux composants en parallèle par domaine GIF GIF GIF GIF GIF GIF d’après HTTP/1.1
  60. 60. Téléchargements parallèles
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. #9 Javascript
  66. 66. Le JS bloque tout
  67. 67. Mettez vos JS en bas juste avant </body>
  68. 68. Ou chargez les dynamiquement var js = document.createElement('script'); js.src = 'myscript.js'; var head = document.getElementsByTagName('head')[0]; head.appendChild(js);
  69. 69. Utilisez une classe “js” pour styler en attendant JS : document.documentElement.className = “js” CSS : .js #menu { display: none ; }
  70. 70. Pour chaque <td> si td.clientWidth > 100 alors td.style.width = 100
  71. 71. Initialise liste vide Pour chaque <td> si td.clientWidth > 100 alors ajoute <td> à la liste Pour chaque item de liste item.style.width = 100
  72. 72. 72
  73. 73. Outils
  74. 74. Firebug Développement web évolué
  75. 75. YSlow Apperçus et analyses
  76. 76. AOL Page Test Graphiques en cascade
  77. 77. http://developer.yahoo.com/performance
  78. 78. Éric Daspet http://eric.daspet.name/ YAHOO! http://performance.survol.fr/ (livre en préparation)
  79. 79. Images sous licence CC http://www.flickr.com/photos/giuntinijerome/3046524272 http://www.flickr.com/photos/bright/118197469/ http://www.flickr.com/photos/xxxtoff/219781763/ http://www.flickr.com/photos/deadsquid/2614952166/Scr http://www.flickr.com/photos/boozysmurf/53877099/ http://www.flickr.com/photos/12495774@N02/2405297371/ http://www.flickr.com/photos/dullhunk/202872717/ Merci à Nicole Sullivan (une partie des slides sont d’elle) Contenu en partie sous licence CC http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

×