Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web...
Transcript of Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web...
![Page 1: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/1.jpg)
OSCON 2011
Creative Techniques for Loading Web Pages Faster
vs.low hanging fruit micro-optimization
Trevor Parscal -Roan Kattouw -
@trevorparscal@catrope
![Page 2: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/2.jpg)
OSCON 2011
People
Trevorhuman
Roanrobot
![Page 3: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/3.jpg)
OSCON 2011
People
Front-endBack-end
![Page 4: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/4.jpg)
OSCON 2011
Software
MediaWikiplatform
Wikipediaproject
![Page 5: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/5.jpg)
OSCON 2011
![Page 6: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/6.jpg)
OSCON 2011
Resources
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 2229 4
![Page 7: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/7.jpg)
OSCON 2011
Resources
javascript
Scriptscss
Stylesjson
Translations
![Page 8: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/8.jpg)
OSCON 2011
Origins
most everything else
ExtensionsMath.random();
Usersskins & common stuff
Core
![Page 9: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/9.jpg)
OSCON 2011
Optimizations
file concatenation
Combinationwhitespace removal
Minificationmulti-graphic images
Sprites
![Page 10: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/10.jpg)
OSCON 2011
Caching
one version for everything
Versioning
NEW
wait for cache expiry
Purgingversions in the html
Query String
?v=2
![Page 11: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/11.jpg)
OSCON 2011
Being a developer sucked
messy and boring
Maintainingclunky and slow
Usinggood luck!
Creating
![Page 12: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/12.jpg)
OSCON 2011
Traffic
2008 2009 2010 20110M
100M
200M
300M
400M
500M
Unique Visitors per Month
![Page 13: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/13.jpg)
OSCON 2011
Cache Invalidation
site-wide resources
Adminssite-wide messages
Translatorsuser-specific resources
Users
![Page 14: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/14.jpg)
OSCON 2011
Approach
no micro-optimization
Easy Gainsdevelopers use this stuff
Ease of Useit’s where the magic is
Client Focus
![Page 15: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/15.jpg)
OSCON 2011
Modules
Scripts,
& messages
styles
![Page 16: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/16.jpg)
OSCON 2011
Modules
b ca
a, b & c
![Page 17: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/17.jpg)
OSCON 2011
Scripts
debug, skin or language
Conditionswhitespace removal
Minification
{ }delayed execution
Wrapping
![Page 18: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/18.jpg)
OSCON 2011
Styles
free rtl support
Flippingrelative urls still work
Remappingdata uri sweetness
Embedding
![Page 19: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/19.jpg)
OSCON 2011
Styles
whitespace removal
Minificationskin specific styles
Conditionsone request
Bundling
![Page 20: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/20.jpg)
OSCON 2011
Messages
Bundlingone request
Conditionslanguage
![Page 21: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/21.jpg)
OSCON 2011
Startup Module
site-wide settings
Configurationif ( IE5 ) { giveUp(); }
Sanity checkmodule manifest
Dependencies
b c
a
d e
![Page 22: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/22.jpg)
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
![Page 23: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/23.jpg)
OSCON 2011
Caching
?v=time
per-module
Versioning30 days
Resources5 minutes
Startup Module
![Page 24: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/24.jpg)
OSCON 2011
So, it turns out...
![Page 25: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/25.jpg)
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)
![Page 26: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/26.jpg)
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
![Page 27: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/27.jpg)
OSCON 2011
$humans--;seriously, go robots!
is Awesome
Portedfrom python
CSSJanus: http://tinyurl.com/CSSJanus
![Page 28: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/28.jpg)
OSCON 2011
Balance is important
a & b b, c & d
Batchingduplicate data may be sent
Groupscontrolled fragmentation
c & da b
![Page 29: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/29.jpg)
OSCON 2011
It Works!
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 2229 4
![Page 30: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/30.jpg)
OSCON 2011
It Works!
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 47 2
![Page 31: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/31.jpg)
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%
![Page 32: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/32.jpg)
OSCON 2011
ResourceLoader
no micro-optimization
Easy Gainsdevelopers use this stuff
Ease of Useit’s where the magic is
Client Focus
![Page 33: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/33.jpg)
OSCON 2011
ResourceLoader
happy servers
Lightweighthappy people
Snappy Pageshappy developers
Easy to Make
![Page 34: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/34.jpg)
OSCON 2011
Thanks!
http://wikitech.wikimedia.org/view/Presentations
http://www.mediawiki.org/wiki/ResourceLoader
Trevor Parscal -Roan Kattouw -
@trevorparscal@catrope
![Page 35: Creative Techniques for Loading Web Pages Faster · OSCON 2011 Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw](https://reader030.fdocuments.us/reader030/viewer/2022011908/5f5b7ae65597206518030457/html5/thumbnails/35.jpg)
OSCON 2011
Work @ Wikimedia
http://jobs.wikimedia.org