Performances Web - Afup 2008Presentation Transcript
Performance
Éric Daspet - Forum PHP AFUP 2008
Éric Daspet
http://eric.daspet.name/
YAHOO!
http://performance.survol.fr/
(livre en préparation)
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) 4,4s
AlloCiné 4s
Skyrock 3,7s
Amazon France 3,7s
Daily Motion 2,4s
Yahoo! France 1,8s
Google (résultats) 0,24s
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) 4,4s
AlloCiné 4s
Skyrock 3,7s
Amazon France 3,7s
Daily Motion 2,4s
Yahoo! France 1,8s
Google (résultats) 0,24s
#1
“Users really
respond to speed”
Marissa Mayer
VP Search & User Experience, Google
Où agir ?
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 ?
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) 1%
AlloCiné 1,5%
Skyrock 1%
Amazon France 25,1%
Daily Motion 8,5%
Yahoo! France 30,7%
Google (résultats) 68,8%
#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/performance
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 Apache)
ExpiresDefault quot;access plus 1 month 15 days 2 hoursquot;
ExpiresByType image/gif quot;modification plus 5 hours 3 minutesquot;
Une version = Une URL
monscript-1.4.js
monscript.js?20081113T123559
monscript.js?<?= filemtime($a); ?>
L’image combinée est plus légère
CSS:
…
HTML:
http://alistapart.com/articles/sprites
#8
Parallélisation
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
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
#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';
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);
Utilisez une classe “js”
pour styler en attendant
JS : document.documentElement.className = “js”
CSS : .js #menu { display: none ; }
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 liste
item.style.width = 100
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/
(livre en préparation)
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/
Let LinkedIn power your SlideShare experience
+
Let LinkedIn power your SlideShare experience
Customize SlideShare content based on your interests
We will import your LinkedIn profile and you will be visible on SlideShare.
Keep up to date when your LinkedIn contacts post on SlideShare