Creative Techniques for Loading Web Pages Faster

Transcription

1 low hanging fruit vs. micro-optimization Creative Techniques for Loading Web Pages Faster Trevor Parscal - Roan

2 People Roan robot Trevor human

3 People Back-end Front-end

4 Software MediaWiki platform Wikipedia project

5

6 Resources HTML JavaScript CSS Images KB 100KB 200KB 300KB 400KB 500KB 600KB

7 Resources Scripts javascript Styles css Translations json

8 Origins Core skins & common stuff Extensions most everything else Users Math.random();

9 Optimizations Minification whitespace removal Combination file concatenation Sprites multi-graphic images

10 Caching NEW?v=2 Versioning one version for everything Query String versions in the html Purging wait for cache expiry

11 Being a developer sucked Creating good luck! Maintaining messy and boring Using clunky and slow

12 Traffic 500M 400M 300M 200M 100M 0M Unique Visitors per Month

13 Cache Invalidation Users user-specific resources Admins site-wide resources Translators site-wide messages

14 Approach Easy Gains no micro-optimization Client Focus it s where the magic is Ease of Use developers use this stuff

15 Modules Scripts, styles & messages

16 Modules a b c a, b & c

17 Scripts { } Wrapping delayed execution Minification whitespace removal Conditions debug, skin or language

18 Styles Embedding data uri sweetness Remapping relative urls still work Flipping free rtl support

19 Styles Bundling one request Minification whitespace removal Conditions skin specific styles

20 Messages Bundling one request Conditions language

21 Startup Module d e b c a Sanity check if ( IE5 ) { giveup(); } Dependencies module manifest Configuration site-wide settings

22 Client-side Loader b c a a + c a Resolution calculate dependencies Batching give it to me all at once Execution run in correct order

23 Caching?v=time Versioning per-module Startup Module 5 minutes Resources 30 days

24 So, it turns out...

25 Order matters!doctype html html head script src= all.js?version=123 /script /head body /body /html p Page content /p

26 !DOCTYPE html html head /html script src= startup var registry = { /* manifest of all modules */ }; document.write( <script src= all.js?v= + version + ></script> ); /script /head body p Page content /p /body

27 !DOCTYPE html html head /head body /html p Page content /p script src= startup var registry = { /* manifest of all modules */ }; document.write( <script src= all.js?v= + version + ></script> ); /script /body

28 !DOCTYPE html html head /html script src= startup var registry = { /* manifest of all modules */ }; document.write( <script src= base.js?v= + version + ></script> ); /script /head body p Page content /p script /body mw.loader.load([ extras ]); // uses document.write /script

29 !DOCTYPE html html head /html script src= startup var registry = { /* manifest of all modules */ }; document.write( <script src= base.js?v= + version + ></script> ); /script script /head body p Page content /p /body mw.loader.load([ top ]); // adds to head using document.write /script script mw.loader.load([ bottom ]); // adds to head using DOM methods /script

30 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:

31 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:

32 is Awesome Ported from python $humans--; seriously, go robots! CSSJanus:

33 Balance is important a & b b, c & d a b c & d Batching duplicate data may be sent Groups controlled fragmentation

34 It Works! HTML JavaScript CSS Images KB 100KB 200KB 300KB 400KB 500KB 600KB

35 It s Efficient! Servers ~400 servers For resources: 4 app, 9 cache Requests 90k req/s peak load of which 40k are for resources and 73 are cache misses cache hit rate: 98.2%

36 ResourceLoader Easy Gains no micro-optimization Client Focus it s where the magic is Ease of Use developers use this stuff

37 ResourceLoader Easy to Make happy developers Lightweight happy servers Snappy Pages happy people

38 Thanks! Trevor Parscal - Roan

39 Wikimedia

40 Questions? Trevor Parscal - Roan