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.
- 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.
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.
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.
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
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.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja