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