Your Site without JavaScript

This post was originally published on calibreapp.com and reposted here with the author’s permission. If you’re interested in taking Calibre for a spin, you can start a free 14-day trial today.

There are plenty of reasons why the presence of JavaScript (what it does, how it works, and how heavy it is) needs to be considered a little more thoughtfully.

Web traffic today is made up of more than 50% mobile devices, of these devices, many operate under extremely volatile network connections—loading scripts alone in less than 10 seconds is nigh on impossible in many situations.

If you’re working on a single page app, with no reasonable content-only fallbacks, this can be far more damaging than you may think—users will be watching a white screen, with partial content, for a long time.

According to Google’s DoubleClick, when comparing sites that load in 5 seconds to sites that load in 19 seconds, the faster sites had 70% longer average session lengths, 35% lower bounce rates and 25% higher ad viewability than their slower counterparts.

Performance is important, there’s no doubting that, but what common negative impacts does JavaScript have on our sites? How are we currently evaluating performance?

Let’s Have a Brief (but Constructive) Look at the Cost of JavaScript

When commonly auditing the performance impacts of JavaScript, we look at:

• The number of render-blocking scripts present on the page
• How long scripts take to download, and the amount of data transferred

But what we’re often missing is what happens thereafter…

Once the device has downloaded the scripts, they must be parsed, converted to bytecode, compiled and then executed.

Parse and compile time are two reasons why the same site that works great on your $3000 MacBook, feels kind of janky on a 2-year-old smartphone.

The above graphic compares Chrome parse/compile times on a regular desktop browser, verses a low power mobile device. This graphic is taken from Addy Osmani‘s excellent article titled “JavaScript Start-up Performance“.

Ouch.

---

Let’s say, as an experiment, that we removed all scripts to establish a performance baseline, to answer the question “Just how fast could this be?”.

Calibre exists to make it trivial for teams to have better visibility to more areas of performance and user-experience, so in the spirit of that, you can now run a direct comparison of your site with, or without JS—as a Test profile.

💥Now you’re testing with and without JavaScript

I enabled the ability to disable scripts, and run a few test runs against popular global news sites, both with, and without JavaScript.

The results were rather staggering—below, The Guardian.

Left: No JS, 3G Connection, iPhone 6 — All content fully visible in less than 5 seconds. Right: 3G Connection, iPhone 6 — All content fully visible around 10 seconds, onLoad called around the 20 second mark.

Time to Visual Completeness

Starting with the ‘non-js’ version (the left image) — all content is visible in under 5 seconds. On 3G. Impressive. 😤

However, the story is quite a bit different for the ‘with-js’ edition—the lead article image appears somewhere around the 9.5 second mark, with minor changes (weather, fonts, more fonts, and finally a ‘breaking news’ article) all the way up until around 20 seconds.

Data

With JavaScript, the Guardian delivered 3.41Mb over 115 requests, without, the data transferred is reduced by more than 50%—1.59MB, from 61 requests. A hefty tax for weather, fonts and a link to a breaking article.

It’s clear that the data transferred isn’t all JS, it’s additional content, icons and perhaps even some styles—but the case is clear: this content is non-essential and is damaging the performance of this page.

Use Calibre to Find Out How Fast Your Site Could Be

There we have it, a solid and repeatable performance baseline to answer the eternal question: “How fast could this be?”. What if we were able to apply these rules (within reason) until just the lightest, fastest possible experience was delivered to customers?

Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.

—Antoine de Saint-Exupery

---

If you’re a Calibre customer and you’re interested in monitoring both with and without scripts, all you need to do is check the Disable JavaScript Execution checkbox. (Your Site→Settings→Test Profiles).

I’d love to hear how you’re planning on using Test Profiles; if you have any queries, ideas or thoughts, please share them!

If you’re not using Calibre yet, then you can start a free 14-day Calibre trial today.

And if this article got your development team arguing about whether the web exists without JavaScript or not, I’m sorry. 😂

Frequently Asked Questions (FAQs) about Calibre and Websites without JavaScript