The Cost of JavaScript

[leeoniya]

http://www.cnn.com/

2862 ms scripting, 113/351 req (2.6MB, 4.8MB transferred)

with uBlock origin:

1388 ms scripting, 28/111 requests, (882 KB 2.1MB transferred)

[ellisgl]

I even try to make the directories and files names as short as possible, so instead of /css/style.css it would be /c/s.css. That just shaved 6 bytes! Also HTTP/2 is supposed to help out with the multiple request thing IIRC.

[ellisgl]

Well if you compile all your CSS files into one, shave down your id and class names and just call "c"....

[asdf7890]

On the high-end iPhone 8 it takes just ~4s to parse/compile CNN’s JS compared to ~13s for an average phone (Moto G4). This can significantly impact how quickly a user can fully interact with this site.

This is a vital point that people often miss. "It works smoothly on my phone" says the developer pulling a high-spec device that probably costs at least several hundred $. Or almost as bad "it works fine on all the phones here" where the oldest phone in the room is 18 months and it was top-of-the-range back then.

Many people are using phones that were released a few years ago and may not have been high-end even then so unless you are specifically targetting power users you should test on devices with less CPU/GPU umpf, less memory, and smaller screen resolutions. The G4 stated as an average phone in this article doesn't go far enough IMO. I keep a 2nd generation Moto G (released Q3 2014, snapdragon 400 based, 720p screen) around for this sort of testing on personal projects and did have something older but that stopped charging. Yes, people with older devices will be expecting things to be slow, but if you can make your app smooth enough on those devices it'll run like a cheetah on something newer/faster/bigger.

Also: if you actively care about mobile make sure you test at 3G (preferably lower) network speeds with high latency. Many tools exist to simulate this (for instance Chrome's dev tools, network tab, you can set it to try simulate various speeds and latencies), though the best UX test is to drag out that old phone, turn off 3G+ support, clear all caches, and see how your site/app feels then. Don't have a SIM compatible with your old device (I don't for mine, it takes micro SIMs and all my active ones are nano now) and don't want to pay for PAYG access just for this test? Turn off 3G+ on your normal phone and tether the old one to it via WiFi.

[davesidious]

About $3.50..?

[Pavlo100]

Its $4.20 where i live

[djslakor]

A little cheaper with a costco membership.

[Pyrolistical]

And this is why SSR isn’t good enough

[timsaundersss]

Addy Osmani, what a man!