Performances Web - Afup 2008

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% traﬁc -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

#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;modiﬁcation plus 5 hours 3 minutesquot;

Une version = Une URL monscript-1.4.js monscript.js?20081113T123559 monscript.js?<?= ﬁlemtime($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 15 16 17 uu avec cache vide pv avec cache vide

#5Minimisation Compression Concaténation

mod_deﬂate mod_gzip environ 80%

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

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 Ingénierie

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 ; height: 15px ; On évite des dizaines de requêtes HTTP

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

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/

http://www.seomix.fr	2050
http://www.korben.info	1993
http://korben.info	953
http://performance.survol.fr	528
http://www.willdurand.fr	443
http://blog.monbouquet.com	194
http://www.paperblog.fr	87
http://www.abricocotier.fr	50
http://www.taggle.org	24
http://willdurand.fr	9
http://thierrypoinot.com	7
http://it-info2009.blogspot.com	7
http://lanyrd.com	7
http://wiki.ntmy.fr	6
http://www.linkedin.com	5
http://www.boolean.me	5
http://paper.li	4
http://www.slideshare.net	4
http://feeds.feedburner.com	3
http://static.slideshare.net	3
http://blogofboubou.blogspot.com	3
http://web.archive.org	2
http://blogofboubou.blogspot.fr	2
http://guilmain.wordpress.com	2
http://blog.thierrypoinot.com	2
http://static.slidesharecdn.com	1
http://www.newsgator.com	1
https://korben.info	1
http://www.netvibes.com	1
http://it-info2009.blogspot.fr	1
http://arbonaute.net23.net	1
http://webcache.googleusercontent.com	1
http://3cp31cdi32db2.om.mail.yahoo.net	1
http://planet.inertie.org	1
http://localhost	1
http://feedroxor.com	1
http://[2a00:1450:8002::84]	1

Performances Web - Afup 2008

by Eric D.

Accessibility

Categories

Upload Details

Usage Rights

37 Embeds 6,405

Statistics