low hanging fruit vs. micro-optimization Creative Techniques for Loading Web Pages Faster Trevor Parscal - @trevorparscal Roan Kattouw - @catrope OSCON 2011
People Roan Trevor robot human OSCON 2011
People Back-end Front-end OSCON 2011
Software MediaWiki Wikipedia platform project OSCON 2011
OSCON 2011
Resources HTML JavaScript CSS Images 1 29 4 22 0KB 100KB 200KB 300KB 400KB 500KB 600KB OSCON 2011
Resources Scripts Styles Translations javascript css json OSCON 2011
Origins Core Extensions Users skins & common stuff most everything else Math.random(); OSCON 2011
Optimizations Minification Combination Sprites whitespace removal file concatenation multi-graphic images OSCON 2011
Caching ?v=2 NEW Versioning Query String Purging one version for everything versions in the html wait for cache expiry OSCON 2011
Being a developer sucked Creating Maintaining Using good luck! messy and boring clunky and slow OSCON 2011
Traffic 500M 400M 300M 200M 100M 0M 2008 2009 2010 2011 Unique Visitors per Month OSCON 2011
Cache Invalidation Users Admins Translators user-specific resources site-wide resources site-wide messages OSCON 2011
Approach Easy Gains Client Focus Ease of Use no micro-optimization it’s where the magic is developers use this stuff OSCON 2011
Modules Scripts, styles & messages OSCON 2011
Modules a c b a, b & c OSCON 2011
Scripts { } Wrapping Minification Conditions delayed execution whitespace removal debug, skin or language OSCON 2011
Styles Embedding Remapping Flipping data uri sweetness relative urls still work free rtl support OSCON 2011
Styles Bundling Minification Conditions one request whitespace removal skin specific styles OSCON 2011
Messages Bundling Conditions one request language OSCON 2011
Startup Module d e c b a Sanity check Dependencies Configuration if ( IE5 ) { giveUp(); } module manifest site-wide settings OSCON 2011
Client-side Loader b c a c + a a Resolution Batching Execution calculate dependencies give it to me all at once run in correct order OSCON 2011
Caching ?v=time Versioning Startup Module Resources per-module 5 minutes 30 days OSCON 2011
So, it turns out... OSCON 2011
Embedding is sweet 16KB 12KB 8KB 4KB 0KB Normal (35 requests) Embedded (1 request) Test: embedding images in the Vector skin, 27.3% reduction in total size after compression, 97.2% reduction in requests CSSMin: http://tinyurl.com/CSSMin-php OSCON 2011
JSMin.php is slow 1.00s 0.75s 0.50s 0.25s 0s JSMin.php JavaScriptMinifier.php Test: minifying jQuery development distribution, 160KB of uncompressed code; 0.5% larger size than JSMin output after compression JavaScriptMinifier: http://tinyurl.com/JavaScriptMinifier OSCON 2011
is Awesome Ported $humans--; from python seriously, go robots! CSSJanus: http://tinyurl.com/CSSJanus OSCON 2011
Balance is important a & b b, c & d b a c & d Batching Groups duplicate data may be sent controlled fragmentation OSCON 2011
It Works! HTML JavaScript CSS Images 1 29 4 22 0KB 100KB 200KB 300KB 400KB 500KB 600KB OSCON 2011
It Works! HTML JavaScript CSS Images 1 7 2 4 0KB 100KB 200KB 300KB 400KB 500KB 600KB OSCON 2011
It’s Efficient! Requests Servers ~400 servers 90k req/s peak load For resources: 4 app, 9 cache of which 40k are for resources and 73 are cache misses cache hit rate: 98.2% OSCON 2011
ResourceLoader Easy Gains Client Focus Ease of Use no micro-optimization it’s where the magic is developers use this stuff OSCON 2011
ResourceLoader Easy to Make Lightweight Snappy Pages happy developers happy servers happy people OSCON 2011
Thanks! http://wikitech.wikimedia.org/view/Presentations http://www.mediawiki.org/wiki/ResourceLoader Trevor Parscal - @trevorparscal Roan Kattouw - @catrope OSCON 2011
Work @ Wikimedia http://jobs.wikimedia.org OSCON 2011
Recommend
More recommend
