enough with the javascript already!
DESCRIPTION
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?TRANSCRIPT
![Page 1: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/1.jpg)
Enough with the JavaScript Already!
Nicholas C. Zakas@slicknet
![Page 2: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/2.jpg)
![Page 3: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/3.jpg)
@slicknet
![Page 4: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/4.jpg)
![Page 5: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/5.jpg)
2004
![Page 6: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/6.jpg)
![Page 7: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/7.jpg)
2005
![Page 8: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/8.jpg)
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
![Page 9: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/9.jpg)
![Page 10: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/10.jpg)
2006
![Page 11: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/11.jpg)
![Page 12: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/12.jpg)
2007
![Page 13: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/13.jpg)
Atwood’s LawAny application that can be written in JavaScript, will eventually be written in JavaScript.
http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
![Page 14: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/14.jpg)
2013
![Page 15: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/15.jpg)
![Page 16: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/16.jpg)
“Help, Nicholas! Our JavaScript is killing our site performance!”
- Everyone who contacted me while consulting
![Page 17: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/17.jpg)
> 1 MB*JavaScript loaded during page load
* Un-gzipped
![Page 18: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/18.jpg)
Server HTML CSS JavaScript
Rendering HTML
Constructing URLs
Calculating dependencies
Redirecting
Document structure
Native functionality
Accessibility
Layout
Colors
Visibility
Animation
Handling Events
Ajax
Changing UI
![Page 19: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/19.jpg)
Server HTML CSS JavaScript
Rendering HTML
Constructing URLs
Calculating dependencies
Redirecting
Document structure
Native functionality
Accessibility
Layout
Colors
Visibility
Animation
Handling Events
Ajax
Changing UI
![Page 20: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/20.jpg)
Source: HTTP Archive
![Page 21: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/21.jpg)
256 KB
260 KB 993.96 KB
793.5 KB
1570.4 KB503 KB
196 KB 568.7 KB
Gzipped Un-gzipped
![Page 22: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/22.jpg)
![Page 23: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/23.jpg)
![Page 24: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/24.jpg)
Time Spent During a Project
0%10%20%30%40%50%60%70%80%90%
100%
HTMLCSSJavaScript
![Page 25: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/25.jpg)
Client-Side Rendering
![Page 26: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/26.jpg)
Hogan.js{dust.js}EJS
![Page 27: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/27.jpg)
MVW
![Page 28: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/28.jpg)
ModelViewWhatever™
![Page 29: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/29.jpg)
“It's no longer good enough to build web apps around full page loads and then progressively enhance them to behave more dynamically.”
- throneofjs.com
![Page 30: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/30.jpg)
![Page 32: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/32.jpg)
“To improve the twitter.com experience for everyone, we've been working to take back control of our front-end performance by moving the rendering to the server.
This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce
differences in performance across browsers.”
https://blog.twitter.com/2012/improving-performance-twittercom
![Page 33: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/33.jpg)
“Our thesis [was] if we have a JavaScript runtime on the server, we should be able to pull most of this application logic back down to the server in a way that can be
shared with the client. Your great new product can run on both sides of the wire, serving up real HTML on first pageload, but then kicking off a client-side JavaScript app.”
http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
![Page 34: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/34.jpg)
“…we re-launched our Mobile Web site using this new stack, replacing the Backbone.js + Rails stack that it used previously...It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker because we serve up real HTML
instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines.”
http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
![Page 35: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/35.jpg)
The server & browser are better at this than us
![Page 36: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/36.jpg)
Progressive enhancement still works
![Page 37: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/37.jpg)
Unused JavaScript
![Page 38: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/38.jpg)
60-65%JavaScript that was not executed by page load*
* My consulting clients
![Page 39: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/39.jpg)
The 4 JavaScript Load Times
In <head>
Before </body>
After page load
On demand
![Page 40: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/40.jpg)
Prerequisite:
What are the top 2-3 things users do on this page?
![Page 41: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/41.jpg)
aka Prerequisite:
Analytics!
In <head>
![Page 42: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/42.jpg)
https://support.google.com/analytics/answer/1008080?hl=en
“Once you find the code snippet, copy and paste it into your web page, just before the closing </head> tag*. If your website uses templates to generate pages, enter it just
before the closing </head> tag in the file that contains the<head> section.”
![Page 43: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/43.jpg)
Scripts needed by page load
Before </body>
![Page 44: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/44.jpg)
Before </body>
![Page 45: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/45.jpg)
Scripts needed soon after page load
After page load
![Page 46: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/46.jpg)
After page load
![Page 47: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/47.jpg)
In reaction to user
On demand
![Page 48: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/48.jpg)
On demand
![Page 49: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/49.jpg)
http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
![Page 50: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/50.jpg)
http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
![Page 51: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/51.jpg)
JavaScript Libraries(they are big)
![Page 52: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/52.jpg)
42.3 KB 115.0 KB
27.7 KB 90.9 KB
29.0 KB 81.5 KB
85.3 KB25.7 KB
Gzipped Un-gzipped
2.x
1.x
![Page 53: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/53.jpg)
Library Code Component Code
![Page 54: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/54.jpg)
Library Code Component Code
![Page 55: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/55.jpg)
Library Code Component Code
![Page 56: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/56.jpg)
Library Code Component Code
![Page 57: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/57.jpg)
As JS Libraries Develop
0
10
20
30
40
50
60
70
80
90
100
0
2
4
6
8
10
12
14
16
Library CodeComponent CodeNumber of Components
![Page 58: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/58.jpg)
JS Libraries and Economies of Scale
Cost perJavaScriptcomponent
Number of components
![Page 59: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/59.jpg)
Library Code Component Code
![Page 60: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/60.jpg)
Tabs
![Page 61: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/61.jpg)
Tabs?
63.1 KB 120.8 KB
95.3 KB30.2 KB
Gzipped Un-gzipped1.x
1.9 KB 5.0 KB
How?
![Page 62: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/62.jpg)
![Page 63: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/63.jpg)
Step 1Include HTML on the page
![Page 64: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/64.jpg)
<div data-nui-type="tabview" class="nui-tabview"> <ol class="nui-tabs clearfix"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div><p>Content 1</p></div> <div><p>Content 2</p></div> <div><p>Content 3</p></div> </div></div>
No JS yet!
![Page 65: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/65.jpg)
Step 2Store UI state on the DOM
![Page 66: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/66.jpg)
<div data-nui-type="tabview" class="nui-tabview"> <ol class="nui-tabs clearfix"> <li class="nui-selected"><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div class="nui-selected"><p>Content 1</p></div> <div><p>Content 2</p></div> <div><p>Content 3</p></div> </div></div>
Selected tab
Selected panel
No JS yet!
![Page 67: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/67.jpg)
Step 3Sprinkle in some JS
![Page 68: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/68.jpg)
<script>nui.init();</script>
One call to initialize all instances
![Page 69: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/69.jpg)
// none of thisvar tabview = new MyLibrary.TabView("#tabs", { selected: 1 });
// none of this$(“#tabs”).tabs();
Just add more
HTML!
![Page 70: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/70.jpg)
<div data-nui-type="tabview" class="nui-tabview" data-nui-selected-index="0"> <ol class="nui-tabs clearfix" role="tablist"> <li class=" nui-selected" data-nui-index="0"><a id="nui0">Tab 1</a></li> <li data-nui-index="1"><a id="nui1">Tab 2</a></li> <li data-nui-index="2"><a id="nui2">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div class=" nui-selected"><p>Content 1</p></div> <div><p>Content 2</p></div> <div><p>Content 3</p></div> </div></div>
![Page 71: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/71.jpg)
Sure, but I bet there’s no accessibility
![Page 72: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/72.jpg)
Wrong
![Page 73: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/73.jpg)
<div data-nui-type="tabview" class="nui-tabview" data-nui-selected-index="0"> <ol class="nui-tabs clearfix" role="tablist"> <li class=" nui-selected" data-nui-index="0" role="presentation"><a id="nui0" role="tab" tabindex="0">Tab 1</a></li> <li data-nui-index="1" role="presentation"><a id="nui1" role="tab" tabindex="-1">Tab 2</a></li> <li data-nui-index="2" role="presentation"><a id="nui2" role="tab" tabindex="-1">Tab 3</a></li> </ol> <div class="nui-tabpanels"> <div class=" nui-selected" role="tabpanel" aria-labelledby="nui0" tabindex="0"><p>Content 1</p></div> <div role="tabpanel" aria-labelledby="nui1" tabindex="-1" aria-hidden="true"><p>Content 2</p></div> <div role="tabpanel" aria-labelledby="nui2" tabindex="-1" aria-hidden="true"><p>Content 3</p></div> </div></div>
![Page 74: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/74.jpg)
What the JavaScript does1. Look for tabviews via data-nui-type2. Read UI state based on classes3. Annotate DOM with additional information4. Use event delegation to watch for user
interaction5. Swap classes to react to events
![Page 76: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/76.jpg)
Conclusion
![Page 77: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/77.jpg)
Awesome!
OK
OK
Bad!
Bytes
Value
![Page 78: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/78.jpg)
Server HTML CSS JavaScript
Rendering HTML
Constructing URLs
Calculating dependencies
Redirecting
Document structure
Native functionality
Accessibility
Layout
Colors
Visibility
Animation
Handling Events
Ajax
Changing UI
![Page 79: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/79.jpg)
The 4 JavaScript Load Times•Primarily analytics•Small seed filesIn <head>•Anything needed by page load•Minimal as possibleBefore </body>
•Anything needed soon afterAfter page load
•Anything needed as a result of user actionOn demand
![Page 80: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/80.jpg)
JS Libraries and Economies of Scale
Cost perJavaScriptcomponent
Number of components
![Page 81: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/81.jpg)
42.3 KB 115.0 KB
27.7 KB 90.9 KB
29.0 KB 81.5 KB
85.3 KB25.7 KB
Gzipped Un-gzipped
2.x
1.x
![Page 82: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/82.jpg)
![Page 83: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/83.jpg)
Thank you
![Page 84: Enough with the JavaScript already!](https://reader033.vdocuments.net/reader033/viewer/2022061105/540df9bb8d7f72747e8b4c1d/html5/thumbnails/84.jpg)
Etcetera• My blog: nczonline.net• Twitter: @slicknet• These Slides: slideshare.net/nzakas