Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages...
Transcript of Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages...
![Page 1: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/1.jpg)
LCA 2012
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€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/2.jpg)
LCA 2012
People
Trevorhuman
Roanrobot
![Page 3: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/3.jpg)
LCA 2012
People
Front-endBack-end
![Page 4: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/4.jpg)
LCA 2012
Software
MediaWikiplatform
Wikipediaproject
![Page 5: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/5.jpg)
LCA 2012
![Page 6: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/6.jpg)
LCA 2012
Resources
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 2229 4
![Page 7: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/7.jpg)
LCA 2012
Resources
javascriptScripts
cssStyles
jsonTranslations
![Page 8: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/8.jpg)
LCA 2012
Origins
most everything elseExtensions
Math.random();Users
skins & common stuffCore
![Page 9: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/9.jpg)
LCA 2012
Optimizations
file concatenationCombination
whitespace removalMinification
multi-graphic imagesSprites
![Page 10: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/10.jpg)
LCA 2012
Caching
one version for everythingVersioning
NEW
wait for cache expiryPurging
versions in the htmlQuery String
?v=2
![Page 11: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/11.jpg)
LCA 2012
Being a developer sucked
messy and boringMaintaining
clunky and slowUsing
good luck!Creating
![Page 12: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/12.jpg)
LCA 2012
Traffic
2008 2009 2010 20110M
100M
200M
300M
400M
500M
Unique Visitors per Month
![Page 13: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/13.jpg)
LCA 2012
Cache Invalidation
site-wide resourcesAdmins
site-wide messagesTranslators
user-specific resourcesUsers
![Page 14: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/14.jpg)
LCA 2012
Approach
no micro-optimizationEasy Gains
developers use this stuffEase of Use
it’s where the magic isClient Focus
![Page 15: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/15.jpg)
LCA 2012
Modules
Scripts, styles& messages
![Page 16: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/16.jpg)
LCA 2012
Modules
b ca
a, b & c
![Page 17: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/17.jpg)
LCA 2012
Scripts
debug, skin or languageConditions
whitespace removalMinification
{ }delayed executionWrapping
![Page 18: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/18.jpg)
LCA 2012
Styles
free rtl supportFlipping
relative urls still workRemapping
data uri sweetnessEmbedding
![Page 19: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/19.jpg)
LCA 2012
Styles
whitespace removalMinification
skin specific stylesConditions
one requestBundling
![Page 20: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/20.jpg)
LCA 2012
Messages
Bundlingone request
Conditionslanguage
![Page 21: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/21.jpg)
LCA 2012
Startup Module
site-wide settingsConfiguration
if ( IE5 ) { giveUp(); }Sanity check
module manifestDependencies
b c
a
d e
![Page 22: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/22.jpg)
LCA 2012
Client-side Loader
calculate dependenciesResolution
b c
a
give it to me all at onceBatching
ca +
run in correct orderExecution
a
![Page 23: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/23.jpg)
LCA 2012
Caching
?v=time
per-moduleVersioning
30 daysResources
5 minutesStartup Module
![Page 24: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/24.jpg)
LCA 2012
So, it turns out...
![Page 25: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/25.jpg)
LCA 2012
/html
/body
!DOCTYPE html
html
head
body
/head
Page contentp /p
script src=”all.js?version=123” /script
Order matters
![Page 26: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/26.jpg)
LCA 2012
script src=”startup”
/script
var registry = { /* manifest of all modules */ };document.write(‘<script src=”all.js?v=’ + version + ’”></script>’);
/html
/body
!DOCTYPE html
html
head
body
/head
Page contentp /p
![Page 27: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/27.jpg)
LCA 2012
script src=”startup”
/script
var registry = { /* manifest of all modules */ };document.write(‘<script src=”all.js?v=’ + version + ’”></script>’);
/html
/body
!DOCTYPE html
html
head
body
/head
Page contentp /p
![Page 28: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/28.jpg)
LCA 2012
script src=”startup”
/script
var registry = { /* manifest of all modules */ };document.write(‘<script src=”base.js?v=’ + version + ’”></script>’);
/html
/body
!DOCTYPE html
html
head
body
/head
Page contentp /p
mw.loader.load([‘extras’]); // uses document.write
script
/script
![Page 29: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/29.jpg)
LCA 2012
script src=”startup”
/script
var registry = { /* manifest of all modules */ };document.write(‘<script src=”base.js?v=’ + version + ’”></script>’);
/html
/body
!DOCTYPE html
html
head
body
/head
Page contentp /p
mw.loader.load([‘bottom’]); // adds to head using DOM methods
script
/script
mw.loader.load([‘top’]); // adds to head using document.write
script
/script
![Page 30: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/30.jpg)
LCA 2012
Embedding is sweet
Test: embedding images in the Vector skin, 27.3% reduction in total size after compression, 97.2% reduction in requestsCSSMin: http://tinyurl.com/CSSMin-php
0KB
4KB
8KB
12KB
16KB
Normal (35 requests) Embedded (1 request)
![Page 31: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/31.jpg)
LCA 2012
JSMin.php is slow
Test: minifying jQuery development distribution, 160KB of uncompressed code; 0.5% larger size than JSMin output after compressionJavaScriptMinifier: http://tinyurl.com/JavaScriptMinifier
0s
0.25s
0.50s
0.75s
1.00s
JSMin.php JavaScriptMinifier.php
![Page 32: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/32.jpg)
LCA 2012
$humans--;seriously, go robots!
is Awesome
Portedfrom python
CSSJanus: http://tinyurl.com/CSSJanus
![Page 33: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/33.jpg)
LCA 2012
Balance is important
a & b b, c & d
Batchingduplicate data may be sent
Groupscontrolled fragmentation
c & da b
![Page 34: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/34.jpg)
LCA 2012
It Works!
0KB 100KB 200KB 300KB 400KB 500KB 600KB
HTML JavaScript CSS Images
1 47 2
![Page 35: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/35.jpg)
LCA 2012
It’s Efficient!
Requests90k req/s peak load
Servers~400 servers
For resources: 4 app, 9 cache of which 40k are for resources
and 73 are cache missescache hit rate: 98.2%
![Page 36: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/36.jpg)
LCA 2012
ResourceLoader
no micro-optimizationEasy Gains
developers use this stuffEase of Use
it’s where the magic isClient Focus
![Page 37: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/37.jpg)
LCA 2012
ResourceLoader
happy serversLightweight
happy peopleSnappy Pages
happy developersEasy to Make
![Page 38: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/38.jpg)
LCA 2012
Thanks!
http://wikitech.wikimedia.org/view/Presentations
http://www.mediawiki.org/wiki/ResourceLoader
Trevor Parscal -Roan Kattouw -
@trevorparscal@catrope
![Page 39: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/39.jpg)
LCA 2012
Work @ Wikimedia
http://jobs.wikimedia.org
![Page 40: Creative Techniques for Loading Web Pages Faster€¦ · Creative Techniques for Loading Web Pages Faster low hanging fruit vs. micro-optimization Trevor Parscal - Roan Kattouw -](https://reader034.fdocuments.us/reader034/viewer/2022042219/5ed79d6227e9e96258456bf4/html5/thumbnails/40.jpg)
LCA 2012
Questions?
http://wikitech.wikimedia.org/view/Presentations
http://www.mediawiki.org/wiki/ResourceLoader
Trevor Parscal -Roan Kattouw -
@trevorparscal@catrope