Your SlideShare is downloading. ×
Enough with the
JavaScript
Already!
Nicholas C. Zakas
@slicknet
@slicknet
2004
2005
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
2006
2007
Atwood’s Law
Any application that can be
written in JavaScript,
will eventually be written in
JavaScript.
http://www.codin...
2013
“Help, Nicholas! Our
JavaScript is killing our
site performance!”
- Everyone who contacted me while consulting
> 1 MB*
JavaScript loaded during page load
* Un-gzipped
Server HTML CSS JavaScript
Rendering
HTML
Constructing
URLs
Calculating
dependencies
Redirecting
Document
structure
Native...
Server HTML CSS JavaScript
Rendering
HTML
Constructing
URLs
Calculating
dependencies
Redirecting
Document
structure
Native...
Source: HTTP Archive
256 KB
260 KB 993.96 KB
793.5 KB
1570.4 KB503 KB
196 KB 568.7 KB
Gzipped Un-gzipped
Time Spent During a Project
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
HTML
CSS
JavaScript
Client-Side
Rendering
Hogan.js{dust.js}
EJS
MVW
Model
View
Whatever™
“It's no longer good
enough to build web
apps around full page
loads and then
progressively enhance
them to behave more
dy...
https://www.facebook.com/help/189391594506832/
“To improve the twitter.com experience for everyone,
we've been working to take back control of our front-end
performance ...
“Our thesis [was] if we have a JavaScript runtime on the server, we should be able to
pull most of this application logic ...
“…we re-launched our Mobile Web site using this new stack, replacing the Backbone.js
+ Rails stack that it used previously...
The server &
browser are better
at this than us
Progressive
enhancement still
works
Unused JavaScript
60-65%
JavaScript that was not executed by page load*
* My consulting clients
The 4 JavaScript Load Times
In <head>
Before </body>
After page load
On demand
Prerequisite:
What are the top
2-3 things users do
on this page?
aka Prerequisite:
Analytics!
In <head>
https://support.google.com/analytics/answer/1008080?hl=en
“Once you find the code snippet, copy and paste it into your web...
Scripts needed by
page load
Before </body>
Before </body>
Scripts needed soon
after page load
After page load
After page load
In reaction to user
On demand
On demand
http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
JavaScript Libraries
(they are big)
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
Library Code Component Code
Library Code Component Code
Library Code Component Code
Library Code Component Code
As JS Libraries Develop
0
2
4
6
8
10
12
14
16
0
10
20
30
40
50
60
70
80
90
100
Library Code
Component Code
Number of Compo...
JS Libraries and Economies of Scale
Cost per
JavaScript
component
Number of components
Library Code Component Code
Tabs
Tabs?
63.1 KB 120.8 KB
95.3 KB30.2 KB
Gzipped Un-gzipped
1.x
1.9 KB 5.0 KB
How?
Step 1
Include HTML on
the page
<div data-nui-type="tabview" class="nui-tabview">
<ol class="nui-tabs clearfix">
<li><a href="#">Tab 1</a></li>
<li><a hre...
Step 2
Store UI state on
the DOM
<div data-nui-type="tabview" class="nui-tabview">
<ol class="nui-tabs clearfix">
<li class="nui-selected"><a href="#">Tab ...
Step 3
Sprinkle in some JS
<script>
nui.init();
</script>
One call to
initialize all
instances
// none of this
var tabview = new MyLibrary.TabView("#tabs", { selected: 1 });
// none of this
$(“#tabs”).tabs();
Just add...
<div data-nui-type="tabview" class="nui-tabview" data-nui-selected-
index="0">
<ol class="nui-tabs clearfix" role="tablist...
Sure, but I bet
there’s no
accessibility
Wrong
<div data-nui-type="tabview" class="nui-tabview" data-nui-selected-
index="0">
<ol class="nui-tabs clearfix" role="tablist...
What the JavaScript does
1. Look for tabviews via data-nui-type
2. Read UI state based on classes
3. Annotate DOM with add...
https://github.com/nzakas/nui
Conclusion
Awesome!
OK
OK
Bad!
Bytes
Value
Server HTML CSS JavaScript
Rendering
HTML
Constructing
URLs
Calculating
dependencies
Redirecting
Document
structure
Native...
The 4 JavaScript Load Times
• Primarily analytics
• Small seed filesIn <head>
• Anything needed by page load
• Minimal as ...
JS Libraries and Economies of Scale
Cost per
JavaScript
component
Number of components
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
Thank you
Etcetera
• My blog: nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Enough with the JavaScript already!
Upcoming SlideShare
Loading in...5
×

Enough with the JavaScript already!

234,723

Published on

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?

Published in: Technology, Design
12 Comments
384 Likes
Statistics
Notes
No Downloads
Views
Total Views
234,723
On Slideshare
0
From Embeds
0
Number of Embeds
147
Actions
Shares
0
Downloads
1,069
Comments
12
Likes
384
Embeds 0
No embeds

No notes for slide

Transcript of "Enough with the JavaScript already!"

  1. 1. Enough with the JavaScript Already! Nicholas C. Zakas @slicknet
  2. 2. @slicknet
  3. 3. 2004
  4. 4. 2005
  5. 5. http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
  6. 6. 2006
  7. 7. 2007
  8. 8. Atwood’s Law Any 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
  9. 9. 2013
  10. 10. “Help, Nicholas! Our JavaScript is killing our site performance!” - Everyone who contacted me while consulting
  11. 11. > 1 MB* JavaScript loaded during page load * Un-gzipped
  12. 12. 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
  13. 13. 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
  14. 14. Source: HTTP Archive
  15. 15. 256 KB 260 KB 993.96 KB 793.5 KB 1570.4 KB503 KB 196 KB 568.7 KB Gzipped Un-gzipped
  16. 16. Time Spent During a Project 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% HTML CSS JavaScript
  17. 17. Client-Side Rendering
  18. 18. Hogan.js{dust.js} EJS
  19. 19. MVW
  20. 20. Model View Whatever™
  21. 21. “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
  22. 22. https://www.facebook.com/help/189391594506832/
  23. 23. “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
  24. 24. “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
  25. 25. “…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
  26. 26. The server & browser are better at this than us
  27. 27. Progressive enhancement still works
  28. 28. Unused JavaScript
  29. 29. 60-65% JavaScript that was not executed by page load* * My consulting clients
  30. 30. The 4 JavaScript Load Times In <head> Before </body> After page load On demand
  31. 31. Prerequisite: What are the top 2-3 things users do on this page?
  32. 32. aka Prerequisite: Analytics! In <head>
  33. 33. 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.”
  34. 34. Scripts needed by page load Before </body>
  35. 35. Before </body>
  36. 36. Scripts needed soon after page load After page load
  37. 37. After page load
  38. 38. In reaction to user On demand
  39. 39. On demand
  40. 40. http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
  41. 41. http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
  42. 42. JavaScript Libraries (they are big)
  43. 43. 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
  44. 44. Library Code Component Code
  45. 45. Library Code Component Code
  46. 46. Library Code Component Code
  47. 47. Library Code Component Code
  48. 48. As JS Libraries Develop 0 2 4 6 8 10 12 14 16 0 10 20 30 40 50 60 70 80 90 100 Library Code Component Code Number of Components
  49. 49. JS Libraries and Economies of Scale Cost per JavaScript component Number of components
  50. 50. Library Code Component Code
  51. 51. Tabs
  52. 52. Tabs? 63.1 KB 120.8 KB 95.3 KB30.2 KB Gzipped Un-gzipped 1.x 1.9 KB 5.0 KB How?
  53. 53. Step 1 Include HTML on the page
  54. 54. <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!
  55. 55. Step 2 Store UI state on the DOM
  56. 56. <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!
  57. 57. Step 3 Sprinkle in some JS
  58. 58. <script> nui.init(); </script> One call to initialize all instances
  59. 59. // none of this var tabview = new MyLibrary.TabView("#tabs", { selected: 1 }); // none of this $(“#tabs”).tabs(); Just add more HTML!
  60. 60. <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>
  61. 61. Sure, but I bet there’s no accessibility
  62. 62. Wrong
  63. 63. <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>
  64. 64. What the JavaScript does 1. Look for tabviews via data-nui-type 2. Read UI state based on classes 3. Annotate DOM with additional information 4. Use event delegation to watch for user interaction 5. Swap classes to react to events
  65. 65. https://github.com/nzakas/nui
  66. 66. Conclusion
  67. 67. Awesome! OK OK Bad! Bytes Value
  68. 68. 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
  69. 69. 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
  70. 70. JS Libraries and Economies of Scale Cost per JavaScript component Number of components
  71. 71. 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
  72. 72. Thank you
  73. 73. Etcetera • My blog: nczonline.net • Twitter: @slicknet • These Slides: slideshare.net/nzakas

×