retours sur le concours webperf 2010
DESCRIPTION
Les retours sur le concoursTRANSCRIPT
Performances Web
Concours #webperf 2010
Jean-pierre VINCENT
Qui ça ?Jean-pierre VINCENT
braincracking.org (veille techno)@theystolemynick
10 ans de WebConsultant, formateur, expertise
Le retour des soirées
Des chiffres● 30 jours (nov. 2010)● 250 inscriptions● 55 participants● 2 tiers de français● 3 gagnants
La cible● 1 site : www.fnac.com/enfants.asp ●
La cible● www.fnac.com/enfants.asp ● En version statique :• Onload 17s• Start render 4s
La cible● www.fnac.com/enfants.asp ● En version statique :• Start render 4s• Freeze au démarrage
Le résultat
Les basesCache navigateur
<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpeg "access plus 10 years"# ../..</IfModule>
Les bases● Cache navigateur● Compression gzip<IfModule mod_gzip.c>mod_gzip_on yesmod_gzip_dechunk yesmod_gzip_item_include file \.(html|txt|css|js|json)$mod_gzip_item_exclude file \.(jpg|png|gif|ico)$</IfModule>
Les bases● Cache navigateur● Compression gzip● Le cookie•
Les bases● Cache navigateur● Compression gzip● Le cookie• 0.5KoTEST=ok; OrderInSession=0; accept=ok; UID=0E3649C79-3AFD-18B8-7817-FA868BC99668; SID=e85f0b48-ae1d-a5f5-aa15-fbffdc4e1c1a; TTL=241020101353; s_cc=true; campaign=FnacAff; s_ev14=%5B%5B%27FnacAff%27%2C%271291388510515%27%5D%5D; s_cpc=1; s_sq=%5B%5BB%5D%5D
Les bases● Cache navigateur● Compression gzip● Le cookie• 0.5KoTEST=ok; OrderInSession=0; accept=ok; UID=0E3649C79-3AFD-18B8-7817-FA868BC99668; SID=e85f0b48-ae1d-a5f5-aa15-fbffdc4e1c1a; TTL=241020101353; s_cc=true; campaign=FnacAff; s_ev14=%5B%5B%27FnacAff%27%2C%271291388510515%27%5D%5D; s_cpc=1; s_sq=%5B%5BB%5D%5D
115 fois
Les bases● Cache navigateur● Compression gzip● Le cookie• Sous-domaines pour statiques•
Les bases● Cache navigateur● Compression gzip● Le cookie• Sous-domaines pour statiques• Redéfinir le cookie sur www.*
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images• Origine : 80 images pour 500Ko•
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images• Origine : 80 images pour 500Ko• Jouable : 250Ko
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images• Passage en PNG 8bit• Réduction du nombre de couleurs• Outils (jpgtran, pngcrush ...)
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images● Concaténer, minifier JS et CSS• Outils !
Les bases● Cache navigateur● Compression gzip● Le cookie● Les images● Concaténer, minifier JS et CSS• Outils !
Techniques de la mort
Die HTTP, Die
Die CSS !Le CSS ?
● Requête bloquante
● Mais indispensable
Die CSS !Techniques de base :
✓ Minifié / concaténé / gzipé
Die CSS !Techniques de base :
✓ Minifié / concaténé / gzipé
⚠ Nettoyage (28Ko => 12 Ko)
Die CSS !Chargement non bloquant du CSS :
● Start render : 200ms !
Die CSS !FOUC (1s)
Die CSS !Chargement non bloquant du CSS :
● Start render : 200ms !
⚠ FOUC
Die CSS !Chargement non bloquant du CSS :
● Start render : 200ms !
⚠ FOUC
✗ Dépendance JS
Die CSS !
CSS inline ?
Die CSS !CSS inline :
✓ Bon premier rendu
✓ Pas de dépendance JS
✗ Pas de cache
Die CSS !CSS inline + chargement non
bloquant:
Die CSS !En inline : layout
Die CSS !Externe, non bloquant : le reste
Die CSS !CSS inline + chargement non
bloquant :
✓ Bon premier rendu
✓ Cache
Die CSS !CSS inline + chargement non
bloquant :
✓ Bon premier rendu
✓ Cache
✓ Pas de dépendance JS (noscript)
Die CSS !CSS inline + chargement non
bloquant :
Layout inline,
● Externe : le reste
● Utilisation de <noscript>
Die JS !Le JS ?
● Requête bloquante
● Mais indispensable
● 60Ko (gzipé)
Die JS !JS concaténé, minifié, gzipé ...
Die JS !JavaScript defer, chargement asynchrone
Die JS !JavaScript defer, chargement asynchrone
⚠ Correction des dépendances inlines
Die JS !JS : paralléliser
✓ Gain : 70ms :)⚠ Dépendances
Die HTTP !
La foire au lazy-loading
Die HTTP !
Lazy-load des images produits :
Moins de poids + Moins de requêtes + Super scores = Meilleur classement
Die HTTP !
Lazy-load des images produits :
Moins de poids + Moins de requêtes + Super scores ≠ Expérience utilisateur !
Die HTTP !
Lazy-load des images produits :
✗ onmousemove
Die HTTP !
Lazy-load des images produits :
✗ onmousemove ✗ Dépendance à JS
Die HTTP !
Lazy-load des images produits :
✗ onmousemove ✗ Dépendance à JS
✓ La solution : JS + noscript
Die HTTP !
● Lazy-load de l'iframe du footer
● Lazy-load du JS de l'autocomplete
Die HTTP ! Encodage des images
● Encodage en base64● data:uri / MHTML● Dans CSS ou dans le HTML
Die HTTP ! Encodage des images✓ 0 requêtes
⚠ +30% de poids⚠ Dans le HTML : pas de cache⚠ CSS spécifiques IE
Die HTTP ! Encodage des images
⚠ La surprise : le coût CPU
Die HTTP !1 query to rule them all
Bien tenté ;)
Dernière technique ultime
Savoir coder
Savoir coderPage de départ :
● 213Ko● 2000 noeuds DOM● Validateur : 2300 parse error
« Sensation » de lenteur
Savoir coderRefactoring complet du HTML :
● Poids -50%● nœuds DOM -50%● Correction des erreurs● Plus d'imbrication de tableaux
= « Sensation » de fluidité
Savoir coderRefactoring complet du CSS :● Reset pour supprimer des règles● Suppression des filter()● Dégradation gracieuse acceptée● Utilisation de :before● Dégradé avec un png transparent
Conclusions
● Temps d'affichage divisé par 10● Techniques universelles : 70% du gain
● Temps > connaissances● Bonnes pratiques : #win● L'ère des grandes découvertes est finie ?● À quand le prochain concours ?