Conférence Performance Web au forum PHP Afup 2008. Plus d'info sur http://performance.survol.fr/ Éric Daspet : http://eric.daspet.name/

1. Performance
Éric Daspet - Forum PHP AFUP 2008

2. Éric Daspet
http://eric.daspet.name/
YAHOO!
http://performance.survol.fr/
(livre en préparation)

3. Le web a changé

4. 2003 : 100Ko et 25 composants
2008 : 300Ko et 50 composants

5. de 250Ko à 312Ko
ces douzes derniers mois
WebSiteOptimization.com/speed/tweak/average-web-page

7. Est-ce important ?

8. 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

9. Et vous ?

10. +100 ms

11. Amazon : ventes -1%
+100 ms

12. +400 ms

13. Yahoo! : abandons +5 à 9%
+400 ms

14. +500 ms

15. Google : recherches -20%
+500 ms

16. -30% poids

17. Google : +30% trafic
-30% poids

18. 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

20. #1
“Users really
respond to speed”
Marissa Mayer
VP Search & User Experience, Google

21. Où agir ?

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

23. Exemple
et ça continue encore, et encore...
en réalité c’est 7 à 8 fois plus long

24. Importance du Front-End

25. Importance du Front-End
Back-end =
5%

26. Importance du Front-End
Front-end =
95%

27. 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%

29. #2
S’occuper du frontend
offre le meilleur ROI

30. 28

31. #3
Moins de requêtes HTTP
Des composants moins lourds
Des téléchargements parallèles
http://developer.yahoo.com/performance

32. Technique

33. #4
Cache HTTP

34. Premier accès Second accès
Le gain est évident, non ?

35. 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;

36. Une version = Une URL
monscript-1.4.js
monscript.js?20081113T123559
monscript.js?<?= filemtime($a); ?>

37. CDN
content delivery network
latence faible - cache automatique

38. Prefetch
charger des composants en bas de page
ils seront mis en cache et utilisés plus tard

39. Requêtes Ajax aussi
à vous de le gérer en PHP

40. 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

42. #5Minimisation
Compression
Concaténation

43. mod_deflate
mod_gzip
environ 80%

44. Retirer les espaces blancs
Réagencer le code
environ 70%
YUI compressor - http://developer.yahoo.com/yui/compressor/
Compressor Rater - http://compressorrater.thruhere.net/

45. Concaténer
(moins de requêtes HTTP)
30 minutes à faire en PHP

47. #6
Compression d’images

48. Images :
45.6%
du poids total
Top 10 sites web

49. erreur #1
Utiliser GIF quand PNG est plus léger

50. erreur #2
Ne pas passer les images par PNGcrush

51. erreur #3
Ne pas retirer les méta données

52. erreur #4
Utiliser des PNG pleines couleurs au lieu de PNG8
Design
Qualité versus Optimisation
Ingénierie

53. Deux problèmes distincts
Design
Qualité versus Optimisation
Ingénierie

55. erreur #5
Utiliser Alpha Image Loader
100ms
yahoo search

56. #7
Sprites

57. 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

58. Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

59. Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

60. Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

61. Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

62. CSS:
…
HTML:
http://alistapart.com/articles/sprites

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

66. #8
Parallélisation

67. Téléchargements parallèles
Deux composants en parallèle par domaine
GIF
GIF
GIF GIF
GIF
GIF
d’après HTTP/1.1

68. Téléchargements parallèles

69. 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

70. 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

71. 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

72. 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

74. #9
Javascript

75. Le JS bloque tout

76. Mettez vos JS en bas
juste avant </body>

77. Ou chargez les
dynamiquement
var js = document.createElement('script');
js.src = 'myscript.js';
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);

78. Utilisez une classe “js”
pour styler en attendant
JS : document.documentElement.className = “js”
CSS : .js #menu { display: none ; }

79. Pour chaque <td>
si td.clientWidth > 100
alors td.style.width = 100

80. Initialise liste vide
Pour chaque <td>
si td.clientWidth > 100
alors ajoute <td> à la liste
Pour chaque item de liste
item.style.width = 100

81. 72

82. Outils

83. Firebug
Développement web évolué

84. YSlow
Apperçus et analyses

85. AOL Page Test
Graphiques en cascade

86. http://developer.yahoo.com/performance

88. Éric Daspet
http://eric.daspet.name/
YAHOO!
http://performance.survol.fr/
(livre en préparation)

89. 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/