Introducing Adaptive JS: Stop Choosing Between A Faster Site And Better UX

One of the trickier parts of speeding up a WordPress site is that, beyond a point, the optimizations themselves start getting in the way.

JavaScript delay is a good example.

Delaying scripts can make a big difference to how quickly a page loads. But some of those scripts also run your menus, forms, popups and other things people actually use on the page.

So when an interaction starts having problems, you’re forced to stop delaying the scripts, and give up that performance boost. This is so common that almost every speed plugin gives you a choice:

• exclude scripts for a better user experience
• OR keep them delayed for better performance

But…I don’t think you should have to choose between the two.

To be honest, this is a complicated problem to solve. It took us the better part of a year to figure out how to make this work, but now…I’m happy to share that we’ve made a big breakthrough. We’re calling it Adaptive JS.

Airlift can now give you the performance benefits from delaying JS, without worsening the user experience. It’s actually really cool, but to understand how it works, let me quickly explain what’s actually happening here.

Why is this such a difficult problem?

When you delay JavaScript, you’re basically splitting the page load into two parts.

• First, get the page in front of the visitor quickly.
• Then, bring back the JavaScript that makes everything on that page work.

Most of the performance gain comes from delaying that second part.

But this messes up the user experience. Imagine someone lands on a page and quickly opens the menu. With delayed JavaScript, the code behind that menu might still be waking up. The click can arrive before the menu is ready, leaving you clicking again and again.

To make things harder, once the visitor starts interacting, you can’t just bring every delayed script back at once either. Most of the time there are dependencies. One script may need another one to finish first. Some inline code might depend on both. Styles and other resources can be part of the same chain.

All this can give the browser a lot of work at exactly the moment someone is trying to use the page, delaying your site’s interactivity.

So what does Adaptive JS do differently?

Instead of treating JavaScript delay as an all-or-nothing setting, Airlift adapts as the visitor uses the page.

While the page is loading, it keeps JavaScript delayed so you get the speed benefit.

As soon as someone starts using the page, Airlift brings back the JavaScript they need first, so menus, forms and buttons respond smoothly instead of feeling delayed or broken. Scripts are also brought back in smaller batches, so the browser gets room to keep responding while the page becomes fully interactive.

That’s the breakthrough. A faster site no longer has to come at the cost of a better experience.

And this is the kind of work we want to keep doing with Airlift. As websites get more complex, performance shouldn’t become something you have to constantly tweak and babysit.

There’s still plenty we want to improve, and we’ll keep chipping away at it to make your sites faster and your job a little easier.