Retours sur le concours Webperf 2010

Performances WebConcours #webperf 2010 Jean-pierre VINCENT

Qui ça ? Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick10 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.5Ko TEST=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.5Ko TEST=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 !

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 nonbloquant:

Die CSS !En inline : layout

Die CSS !Externe, non bloquant : le reste

Die CSS ! CSS inline + chargement nonbloquant :✓ Bon premier rendu✓ Cache

Die CSS ! CSS inline + chargement nonbloquant :✓ Bon premier rendu✓ Cache✓ Pas de dépendance JS (noscript)

Die CSS ! CSS inline + chargement nonbloquant :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 liframe du footer● Lazy-load du JS de lautocomplete

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 dimbrication 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 daffichage 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 ?

http://articles.nissone.com	208
http://lanyrd.com	8
http://a0.twimg.com	2

Retours sur le concours Webperf 2010

by Jean-Pierre Vincent on Jan 17, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 218

Statistics

Retours sur le concours Webperf 2010 — Presentation Transcript