Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Critical JavaScript Path

Critical JavaScript Path

When building websites we often think about the critical rendering path, the sequence of steps the browser goes through to render the initial view of the site. The problem comes that with so much interaction of our sites relying on JavaScript, there is often a limbo where the browser has started to render the initial content but as the JavaScript has not yet downloaded our interactions do not work.

In some cases progressive enhancement allows us to fall back to the server handling the user interaction for things like forms but in many cases this isn’t appropriate. In order to give the user the perception that our site is fully interactive we need to give them the perception that these interactive elements are ready fast, we need to be considering the ‘Critical JavaScript Path’. The steps we can take to allow the users browser to be no only rendered but ready to capture user interactions. In this talk we will explore what is the Critical JavaScript Path and how we can optimise it to offer a better perceived performance.

Jonathan Fielding

November 13, 2015

More Decks by Jonathan Fielding

Other Decks in Programming


  1. A bit about me… • Technical Architect at Beamly •

    Author of Beginning Responsive Design • Regular contributor to open source, including SimpleStateManager, Echo.js, CriticalJS, FT’s Polyfill Service, Doccy among many projects • Lover and user of ‘the Twitter’
  2. So today we are going to look at how we

    can optimise how we build and load our JavaScript to maximise performance
  3. In relation to a website, performance is the measure of

    how long it takes to deliver the content to the user
  4. A responsive site is expected to work on a wide

    variety of internet connections
  5. Google found an extra 500ms delay in loading of search

    results decreased traffic by 20%
  6. Average page weight has been increasing year on year Average

    Page Size (kB) 0 550 1100 1650 2200 September 2012 September 2013 September 2014 September 2015 Data from http://httparchive.org/interesting.php
  7. Scripts Fonts Video Images Stylesheets HTML Other 0 350 700

    1050 1400 4 56 69 1,350 209 107 354 Average KB per Page by Content Type
  8. To determine the maximum amount of JavaScript, we need to

    understand the bigger picture of our site’s assets
  9. Tim Kadlec “The purpose of a performance budget is to

    make sure you focus on performance throughout a project. The reason you go through the trouble in the first place though is because you want to build a site that feels fast for your visitors.” http://www.timkadlec.com/2014/11/performance-budget-metrics/
  10. At the start of your project you need to understand

    the metrics you want to achieve
  11. As we are building a responsive site, today’s example will

    aim to start rendering in 5 seconds on a slow 3G connection
  12. If we then decide we want to add web fonts

    to our website we then adjust our budget
  13. These figures seem very ambitious when we compare them against

    the industry averages but it is achievable
  14. Critical JavaScript Path Network Critical JavaScript Adjust Layout Handle simple

    user interactions Network Defer more complex user interactions
  15. Critical JavaScript Path Main JavaScript Network Critical JavaScript Adjust Layout

    Handle simple user interactions Network Defer more complex user interactions
  16. Critical JavaScript Path Main JavaScript Handle deferred user interactions Network

    Critical JavaScript Adjust Layout Handle simple user interactions Network Defer more complex user interactions Includes any models, frameworks, services etc
  17. For interactions which are not ‘critical’, capture user input and

    defer handling it using a library called CriticalJS
  18. var button = document.querySelector('button') var clicked = criticaljs.deferred(button, 'click'); var

    ev = function(){ alert('clicked'); } if (clicked) { ev.bind(button)(); } button.addEventListener(ev); Check if the event has been triggered Handle deferred user interaction Attach the real interaction
  19. If we build our JavaScript bundle using Browserify we can

    easily identify bloat in our project
  20. As we saw from our analysis map, it is very

    easy to include large libraries in our projects
  21. When optimising for perfomance we have to be ruthless, if

    a library will increase the size of the JavaScript unnecessarily it has to go
  22. If we are not taking full advantage of a library

    we should explore alternatives
  23. This enables us to create the perception that our site

    is both responsive and performant
  24. A special thanks goes out to to Charlie Fielding, Kate

    Montgomery and everyone at Beamly who helped me with putting these slides together.