DrupalCon Seattle 2019: Optimize your JavaScript

JavaScript is currently in full bloom, but using it too much can actually be a bad thing and hurt your site’s performance.

Back in the days, JavaScript was being used to add rainbows and sparkles to your web pages. In the post-Gmail era, we’re building entirely complex applications, sending more and more JavaScript down to our users. The impact of using too much of it can be very bad for the end user's experience. In that case, the CPU can take a long time to process all of the code and therefore cause very slow loading speeds, especially on mobile devices. If you are on a slower network, that can also mean it will take a while for that JavaScript to be downloaded.

The way we should think about measuring if JavaScript is a problem for your site is using a well-defined workflow. That is measure, optimize, and monitor your code.

In this talk, we will take a look at various solutions for measuring the site’s performance and figuring if JavaScript is an issue and what can actually cause bad performance. Next, we will focus on how to address various scenarios and what are the general rules that every JavaScript developer should be familiar with in order to boost your site’s performance. Last, but not least, we all know, that regressions happen and maintaining the code sustainable is very hard. That’s why constant monitoring and regression analysis is important and we strongly suggest that we, as an industry, need to shift towards adopting performance budgets.

All in all, I believe that with all the decoupled Drupal hype around, we should all be generally more conscious about the performance of our code and web sites.

We will cover the following topics:

The past and the current state of JavaScript

Common JavaScript pitfails

Measuring site performance with various tools, like Lighthouse

Site optimization with general rules, like code splitting and tree shaking

State of third-party libraries

How to maintain sustainable code

Helpful tips & tricks

Drupal is a registered trademark of Dries Buytaert.