• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Enough with the JavaScript already!
 

Enough with the JavaScript already!

on

  • 239,176 views

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 ...

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?

Statistics

Views

Total Views
239,176
Views on SlideShare
222,257
Embed Views
16,919

Actions

Likes
368
Downloads
812
Comments
12

149 Embeds 16,919

http://adactio.com 2934
https://twitter.com 2724
http://www.redditmedia.com 2231
http://wsvdmeer.blogspot.com 2065
http://www.scoop.it 795
http://wsvdmeer.blogspot.nl 676
http://wsvdmeer.blogspot.in 493
http://wsvdmeer.blogspot.de 268
http://wsvdmeer.blogspot.fr 257
http://wsvdmeer.blogspot.co.uk 256
http://news.humancoders.com 248
http://wsvdmeer.blogspot.it 228
http://mtaalamu.org 203
http://wsvdmeer.blogspot.com.es 180
http://wsvdmeer.blogspot.com.br 169
http://tritonp2.wordpress.com 154
http://lanyrd.com 151
http://wsvdmeer.blogspot.ca 138
http://wsvdmeer.blogspot.be 137
http://wsvdmeer.blogspot.ru 127
http://natansantolo.com 120
http://localhost 110
http://shawwebsitedesign.jimdo.com 99
http://wsvdmeer.blogspot.kr 93
http://wsvdmeer.blogspot.jp 84
http://wsvdmeer.blogspot.com.au 81
http://cloud.feedly.com 81
http://dev.minimalart.org 78
http://wsvdmeer.blogspot.mx 72
http://wsvdmeer.blogspot.ro 71
http://wsvdmeer.blogspot.se 63
http://www37.jimdo.com 62
http://wsvdmeer.blogspot.tw 60
http://incsub.biz 59
http://codeandcreativity.com 55
http://www.michael-gorman.com 53
http://wsvdmeer.blogspot.pt 52
http://wsvdmeer.blogspot.co.il 47
http://wsvdmeer.blogspot.cz 46
http://wsvdmeer.blogspot.com.ar 42
http://wsvdmeer.blogspot.ch 41
https://www.rebelmouse.com 40
http://wsvdmeer.blogspot.dk 39
http://wsvdmeer.blogspot.co.at 37
http://wsvdmeer.blogspot.hu 37
http://wsvdmeer.blogspot.hk 35
http://wsvdmeer.blogspot.sg 35
http://wsvdmeer.blogspot.gr 34
http://www.brianpiercy.com 33
http://coblend.com 29
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 12 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 12 previous next

Post Comment
Edit your comment

    Enough with the JavaScript already! Enough with the JavaScript already! Document Transcript

    • 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.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
    • 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 functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
    • 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
    • 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 dynamically.” - throneofjs.com
    • 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 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
    • “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
    • “…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
    • 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 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.”
    • 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 Components
    • 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 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!
    • 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 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!
    • 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 more HTML!
    • <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>
    • 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"> <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>
    • 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
    • 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 functionality Accessibility Layout Colors Visibility Animation Handling Events Ajax Changing UI
    • 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
    • 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