creative techniques for loading web pages faster - trevor parscal
TRANSCRIPT
OSCON 2011
Creative Techniques for Loading Web Pages Faster
vs.low hanging fruit micro-optimization
Trevor Parscal -Roan Kattouw -
@trevorparscal@catrope
OSCON 2011
People
Trevorhuman
Roanrobot
OSCON 2011
People
Front-endBack-end
OSCON 2011
Software
MediaWikiplatform
Wikipediaproject
OSCON 2011
OSCON 2011
Resources
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 2229 4
OSCON 2011
Resources
javascript
Scriptscss
Stylesjson
Translations
OSCON 2011
Origins
most everything else
ExtensionsMath.random();
Usersskins & common stuff
Core
OSCON 2011
Optimizations
file concatenation
Combinationwhitespace removal
Minificationmulti-graphic images
Sprites
OSCON 2011
Caching
one version for everything
Versioning
NEW
wait for cache expiry
Purgingversions in the html
Query String
?v=2
OSCON 2011
Being a developer sucked
messy and boring
Maintainingclunky and slow
Usinggood luck!
Creating
OSCON 2011
Traffic
2008 2009 2010 20110M
100M
200M
300M
400M
500M
Unique Visitors per Month
OSCON 2011
Cache Invalidation
site-wide resources
Adminssite-wide messages
Translatorsuser-specific resources
Users
OSCON 2011
Approach
no micro-optimization
Easy Gainsdevelopers use this stuff
Ease of Useit’s where the magic is
Client Focus
OSCON 2011
Modules
Scripts,
& messages
styles
OSCON 2011
Modules
b ca
a, b & c
OSCON 2011
Scripts
debug, skin or language
Conditionswhitespace removal
Minification
{ }delayed execution
Wrapping
OSCON 2011
Styles
free rtl support
Flippingrelative urls still work
Remappingdata uri sweetness
Embedding
OSCON 2011
Styles
whitespace removal
Minificationskin specific styles
Conditionsone request
Bundling
OSCON 2011
Messages
Bundlingone request
Conditionslanguage
OSCON 2011
Startup Module
site-wide settings
Configurationif ( IE5 ) { giveUp(); }
Sanity checkmodule manifest
Dependencies
b c
a
d e
OSCON 2011
Client-side Loader
calculate dependencies
Resolution
b c
a
give it to me all at once
Batching
ca +
run in correct order
Execution
a
OSCON 2011
Caching
?v=time
per-module
Versioning30 days
Resources5 minutes
Startup Module
OSCON 2011
So, it turns out...
OSCON 2011
Embedding is sweet
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
0KB
4KB
8KB
12KB
16KB
Normal (35 requests) Embedded (1 request)
OSCON 2011
JSMin.php is slow
Test: minifying jQuery development distribution, 160KB of uncompressed code; 0.5% larger size than JSMin output after compression
JavaScriptMinifier: http://tinyurl.com/JavaScriptMinifier
0s
0.25s
0.50s
0.75s
1.00s
JSMin.php JavaScriptMinifier.php
OSCON 2011
$humans--;seriously, go robots!
is Awesome
Portedfrom python
CSSJanus: http://tinyurl.com/CSSJanus
OSCON 2011
Balance is important
a & b b, c & d
Batchingduplicate data may be sent
Groupscontrolled fragmentation
c & da b
OSCON 2011
It Works!
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 2229 4
OSCON 2011
It Works!
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 47 2
OSCON 2011
It’s Efficient!
Requests90k req/s peak load
Servers~400 servers
For resources: 4 app, 9 cache of which 40k are for resourcesand 73 are cache misses
cache hit rate: 98.2%
OSCON 2011
ResourceLoader
no micro-optimization
Easy Gainsdevelopers use this stuff
Ease of Useit’s where the magic is
Client Focus
OSCON 2011
ResourceLoader
happy servers
Lightweighthappy people
Snappy Pageshappy developers
Easy to Make
OSCON 2011
Thanks!
http://wikitech.wikimedia.org/view/Presentations
http://www.mediawiki.org/wiki/ResourceLoader
Trevor Parscal -Roan Kattouw -
@trevorparscal@catrope
OSCON 2011
Work @ Wikimedia
http://jobs.wikimedia.org