8 ms·

Conditional JavaScript: Only download when it is appropriate

75 points by umaar 6y ago

jy14898 6y ago
I feel like this is something you'll almost never worry about in 99% of websites. In fact, it doesn't even happen for native applications (deactivating features based on battery life/free space/processing power). It'd be a bit jarring to have certain features suddenly disappear on the next page load, just because your resources dropped below certain thresholds decided by the developer?
- ghayes 6y ago
  Certain features might make sense. For instance, maybe you don’t preload off-screen images on a slow network connection?
- hombre_fatal 6y ago
  Well, it's not all that illuminating to imagine the arbitrarily bad UX you can build with something. Why not attempt the exercise of pondering good UX you could build with it? Native applications lack this kind of polish because all software lacks polish, not because it's a bad idea. "Can the application be improved in any way if it were to query battery life, connection strength, metered vs unmetered bandwidth, remaining disk space?" are thoughtful questions for any developer to ask, even if the answer is ultimately "No."
  - learnstats2 6y ago
    > "Can the application be improved in any way if it were to query battery life, connection strength, metered vs unmetered bandwidth, remaining disk space?" are thoughtful questions for any developer to ask... I suspect the answer is typically "Yes, but putting this level of thought into any other area of development would have been more worthwhile".
    - hombre_fatal 6y ago
      Aside, I am amused that you cut off the end of my quote only to restate the part you cut off, so maybe I was unclear. Doing the deliberation, even if the answer ends up being "No" or "Not worth it", is a crucial part of UX design. Most people don't turn over those stones at all. e.g. Anyone with spotty or slow internet has had the realization that most desktop software has never been tested on a connection slower or less reliable than localhost, and quality software where it rears its head immediately stands out. It might seem like frivolous polish to be adaptive to the user's current connection speed, or it might give you a spot to put a smart variable knob that lets you build good software. But I'd also point out that we're not used to writing software that cares much about the user's resources like remaining battery life. We just write our iOS app and then depend on iOS' battery-saving mode (global throttle). It's just not something we're used to thinking about, so it's easy to be dismissive.
      - learnstats2 6y ago
        Not really a restatement. My answer included the deliberation as a poor use of time. > cares much about the user's resources like remaining battery life. If you are in a position where you care about user resources then you would generally minimise how you use it, globally, in every case. [I'd say that developers/product managers often do care about this, except that advertising is intentionally resource-greedy and will wreck any care given to this] If a user runs out of battery before the end of the day, that is as much (if not more) about what happened at the start of the day as it is at the end.
      - SGML_ROCKSTAR 6y ago
        Have you ever designed or developed (or both) for slower connections? "Slower" meaning something like 56k, 1G, or 2G? Do you happen to know of any people or groups that practice in such a way? I consider website design and development to _still_ be a craft that centers the end user, which suffers degradation of quality because of -- for lack of knowledge of a better name or phrase -- The Market.
- chrismorgan 6y ago
  It used to be extremely common to allow users to select features at install time, mostly in order to save disk space. It’s not particularly common any more, and I don’t think any app stores support the concept. Deactivating features based on battery life? That’s absolutely still a thing on native apps. If you throw Windows into battery saver mode, for example, the acrylic material becomes opaque; if you put Android into power saver mode, native controls will shut off their gratuitous animations, things like that. Nothing major, but a bunch of small things.
  - paulryanrogers 6y ago
    It may be coming back. Latest Call of Duty has a lighter install option. And Fortnite is getting a lighter version as well.
  - theamk 6y ago
    Note that’s a mode which needs to be explicitly activated by user, and the user is aware of. This is fine. The post offers something else: vague heuristics, different on each website, and no feedback or ways to override. See the difference?
    - chrismorgan 6y ago
      I agree that it’s an important distinction, and disk space saving things are seldom automatic (but not never); but power saving mode is routinely activated without user input, e.g. Windows defaults to switching into it at 20%.
  - madeofpalk 6y ago
    > I don’t think any app stores support the concept At least the iOS App Store I believe supports splitting up assets and loading them after initial install (optionally?)
  - tored 6y ago
    I have a crazy idea, lets code as if we were always on battery saving mode. ¯\_(ツ)_/¯
- XCSme 6y ago
  I agree, this is like trying to optimize a very tiny edge-case instead of improving the general usage case.
deleted 6y ago
[deleted]
cboatie 6y ago
The browser support for these APIs isn’t very good
- faitswulff 6y ago
  The interesting ones are only supported by chromium browsers.
  - 14u2c 6y ago
    Alternatively: the invasive ones are only supported by chromium browsers.
    - faitswulff 6y ago
      Also true.
- umaar 6y ago
  A more optimistic viewpoint: because of the popularity of Chromium based browsers (for better or worse), caniuse.com suggests some of these features have ~70% global browser support - not terrible in my opinion. Also because of the nature of these features (depending on use case), you can use them in a progressively enhanced manner.
Etheryte 6y ago
Rather than looking at this as an enhancement, this raises both of my eyebrows very hard: why would my browser possibly need to tell a webpage all of this information about my system? Of course, it's great for fingerprinting and other shenanigans, but I can't help but feel this is getting absurd. I want my browser to be a webpage reader, not a tool to leak as much data about me as technically possible.
- Santosh83 6y ago
  The world is shifting to mobile devices where battery life trumps all other considerations, and will do so, until we can come up with some technique to siphon metabolic energy of the body to recharge the battery...
  - tored 6y ago
    I have another crazy idea, how about rendering web pages on the server, that way web pages will not eat up the battery for mobile devices. And it is probably better if power consumption increases on the server side rather on the client side, because you can locate your server facilities in connection to good clean energy, compared to all client users in the world.
- lifthrasiir 6y ago
  For me `navigator.deviceMemory` was the most surprising bit. (Slightly) fortunately though it only returns 0.25, 0.5, 1, 2, 4 or 8 (GiB), so it is not a big information gain compared to other sources (it would be highly correlated to the screen size for example).
bamboleo 6y ago
This is rather low-level and needs to be hardcoded by developers. It doesn’t scale. What we need is ways to mark content as optional or offering it in multiple levels, that the navigator can pick from. This would be similar to how videos are served. I also want to point out the Save-Data header which is a step in the right direction.
- umaar 6y ago
  OP here, yeah the amount of website variations this could lead to (and don't get me started with CSS media features!). I don't see this strategy being adopted by most websites, but I reckon it's a technique worth knowing about. I've worked on WebGL visualisations where the device RAM played a big role on performance for example.
- austincheney 6y ago
  What we need is competent developers who don’t require 10mb of JS when a couple of functions at less than 30kb (unminified) is all you need.
  - bamboleo 6y ago
    All you need is 30kb unminified; All I need might be a considerable amount of texture and code to run a 3D game. Just because you only visit Hacker News it doesn’t mean that every website can do its job with an equivalent amount of JS. The whole point of such APIs is to automatically provide the right content to people: Lightweight on slow connections, beautiful on the rest of them.
    - zinekeller 6y ago
      > All you need is 30kb unminified; All I need might be a considerable amount of texture and code to run a 3D game. While I understand your frustration, I would certainly understand a web game loading more JS than, I dunno, some major text-oriented web sites where a similar page can be written with minimal or even no JS.
    - austincheney 6y ago
kazinator 6y ago
What if the browser lies about those system properties in order to defeat fingerprinting? How about: if you don't need the JS, don't load it. I know you don't need most of it because I use NoScript, and most sites work fine with a good chunk of JS disabled. As a generally observed pattern, the more JS they load from more sites, the more you can disable and still use them.
guerrilla 6y ago
More complexity where the solution is rather probably simplicity.
sloshnmosh 6y ago
I block ALL JavaScript and only allow JavaScript to run if I absolutely have to but limit to only what is needed with uMatrix. I had to stop viewing my favorite website recently because it’s no longer viewable with JavaScript disabled.
- bluedevil2k 6y ago
  Maybe you’re going a little overboard if you can’t even visit your favorite website any more.
  - rimliu 6y ago
    Maybe that website (if it is a website and not the proper web app) went overboard it is unusable without JS.
FrontAid 6y ago
There are some nice examples in that post. One other example would be to respect the DoNotTrack setting of your browser. You don't need to load any tracking scripts if DNT is enabled. That saves bandwidth and has a small effect on your page's loading times. We recently blogged about that on the example of Matomo (Google Analytics alternative). The main part is the following code: if (navigator.doNotTrack !== '1') { /* load script */ } Here is the link if you are interested in the details: https://frontaid.io/blog/matomo-dnt-do-not-track/ https://frontaid.io/blog/matomo-dnt-do-not-track/
- madeofpalk 6y ago
  Isn't DNT deprecated and just not supported in browsers any more?
  - FrontAid 6y ago
    > Isn't DNT deprecated [...]? No https://www.w3.org/TR/tracking-dnt/ https://www.w3.org/TR/tracking-dnt/ The problem with DNT is not its specification but that the largest chunk of the industry does not adhere to it. Instead they nag their users with annoying cookie overlays. > Isn't DNT [...] just not supported in browsers any more? It is supported by all common browsers except Safari: https://caniuse.com/do-not-track https://caniuse.com/do-not-track
FriedrichN 6y ago
As a general rule of thumb you should use as little JavaScript as possible and serve it in one big file. Just yesterday a client was wondering why his website was slow and their webdesigners said it needed 'more varnish cache' and a bigger server. After inspecting I saw over 100 .js files were being requested by require.js, but because each module required yet another set of .js files and those files required another set, and so on. The server was serving them up plenty fast (<50ms) but because they were being loaded in waves the load time ended up being between 5 and 7 seconds. Many of these issues arise from being fancy and people tend to want to fix it with fancy stuff. But sometimes you need to stop being fancy and just fix the damn problem in an old fashioned way (concatenate, minify, allow local caching).
- madeofpalk 6y ago
  This isnt being fancy, this is just being.... not smart (to put it charitably).
  - ASalazarMX 6y ago
    I'd say being messy. People just want to get things done, and when they're done in a messy way, they don't want to start over. It depends on their deadlines and how much are they being compensated for doing it the right way(TM).
1f60c 6y ago
This is an interesting technique but it seems like premature premature optimization.
tored 6y ago
navigator.deviceMemory navigator.hardwareConcurrency Oh great, more ways to track users.

75 points by umaar 6y ago

I feel like this is something you'll almost never worry about in 99% of websites. In fact, it doesn't even happen for native applications (deactivating features based on battery life/free space/processing power). It'd be a bit jarring to have certain features suddenly disappear on the next page load, just because your resources dropped below certain thresholds decided by the developer?

ghayes 6y ago
Certain features might make sense. For instance, maybe you don’t preload off-screen images on a slow network connection?
hombre_fatal 6y ago
Well, it's not all that illuminating to imagine the arbitrarily bad UX you can build with something. Why not attempt the exercise of pondering good UX you could build with it? Native applications lack this kind of polish because all software lacks polish, not because it's a bad idea. "Can the application be improved in any way if it were to query battery life, connection strength, metered vs unmetered bandwidth, remaining disk space?" are thoughtful questions for any developer to ask, even if the answer is ultimately "No."
- learnstats2 6y ago
  > "Can the application be improved in any way if it were to query battery life, connection strength, metered vs unmetered bandwidth, remaining disk space?" are thoughtful questions for any developer to ask... I suspect the answer is typically "Yes, but putting this level of thought into any other area of development would have been more worthwhile".
  - hombre_fatal 6y ago
    Aside, I am amused that you cut off the end of my quote only to restate the part you cut off, so maybe I was unclear. Doing the deliberation, even if the answer ends up being "No" or "Not worth it", is a crucial part of UX design. Most people don't turn over those stones at all. e.g. Anyone with spotty or slow internet has had the realization that most desktop software has never been tested on a connection slower or less reliable than localhost, and quality software where it rears its head immediately stands out. It might seem like frivolous polish to be adaptive to the user's current connection speed, or it might give you a spot to put a smart variable knob that lets you build good software. But I'd also point out that we're not used to writing software that cares much about the user's resources like remaining battery life. We just write our iOS app and then depend on iOS' battery-saving mode (global throttle). It's just not something we're used to thinking about, so it's easy to be dismissive.
    - learnstats2 6y ago
      Not really a restatement. My answer included the deliberation as a poor use of time. > cares much about the user's resources like remaining battery life. If you are in a position where you care about user resources then you would generally minimise how you use it, globally, in every case. [I'd say that developers/product managers often do care about this, except that advertising is intentionally resource-greedy and will wreck any care given to this] If a user runs out of battery before the end of the day, that is as much (if not more) about what happened at the start of the day as it is at the end.
    - SGML_ROCKSTAR 6y ago
      Have you ever designed or developed (or both) for slower connections? "Slower" meaning something like 56k, 1G, or 2G? Do you happen to know of any people or groups that practice in such a way? I consider website design and development to _still_ be a craft that centers the end user, which suffers degradation of quality because of -- for lack of knowledge of a better name or phrase -- The Market.
chrismorgan 6y ago
It used to be extremely common to allow users to select features at install time, mostly in order to save disk space. It’s not particularly common any more, and I don’t think any app stores support the concept. Deactivating features based on battery life? That’s absolutely still a thing on native apps. If you throw Windows into battery saver mode, for example, the acrylic material becomes opaque; if you put Android into power saver mode, native controls will shut off their gratuitous animations, things like that. Nothing major, but a bunch of small things.
- paulryanrogers 6y ago
  It may be coming back. Latest Call of Duty has a lighter install option. And Fortnite is getting a lighter version as well.
- theamk 6y ago
  Note that’s a mode which needs to be explicitly activated by user, and the user is aware of. This is fine. The post offers something else: vague heuristics, different on each website, and no feedback or ways to override. See the difference?
  - chrismorgan 6y ago
    I agree that it’s an important distinction, and disk space saving things are seldom automatic (but not never); but power saving mode is routinely activated without user input, e.g. Windows defaults to switching into it at 20%.
- madeofpalk 6y ago
  > I don’t think any app stores support the concept At least the iOS App Store I believe supports splitting up assets and loading them after initial install (optionally?)
- tored 6y ago
  I have a crazy idea, lets code as if we were always on battery saving mode. ¯\_(ツ)_/¯
XCSme 6y ago
I agree, this is like trying to optimize a very tiny edge-case instead of improving the general usage case.

deleted 6y ago

[deleted]

cboatie 6y ago

The browser support for these APIs isn’t very good

faitswulff 6y ago
The interesting ones are only supported by chromium browsers.
- 14u2c 6y ago
  Alternatively: the invasive ones are only supported by chromium browsers.
  - faitswulff 6y ago
    Also true.
umaar 6y ago
A more optimistic viewpoint: because of the popularity of Chromium based browsers (for better or worse), caniuse.com suggests some of these features have ~70% global browser support - not terrible in my opinion. Also because of the nature of these features (depending on use case), you can use them in a progressively enhanced manner.

Etheryte 6y ago

Rather than looking at this as an enhancement, this raises both of my eyebrows very hard: why would my browser possibly need to tell a webpage all of this information about my system? Of course, it's great for fingerprinting and other shenanigans, but I can't help but feel this is getting absurd. I want my browser to be a webpage reader, not a tool to leak as much data about me as technically possible.

Santosh83 6y ago
The world is shifting to mobile devices where battery life trumps all other considerations, and will do so, until we can come up with some technique to siphon metabolic energy of the body to recharge the battery...
- tored 6y ago
  I have another crazy idea, how about rendering web pages on the server, that way web pages will not eat up the battery for mobile devices. And it is probably better if power consumption increases on the server side rather on the client side, because you can locate your server facilities in connection to good clean energy, compared to all client users in the world.
lifthrasiir 6y ago
For me `navigator.deviceMemory` was the most surprising bit. (Slightly) fortunately though it only returns 0.25, 0.5, 1, 2, 4 or 8 (GiB), so it is not a big information gain compared to other sources (it would be highly correlated to the screen size for example).

bamboleo 6y ago

This is rather low-level and needs to be hardcoded by developers. It doesn’t scale. What we need is ways to mark content as optional or offering it in multiple levels, that the navigator can pick from. This would be similar to how videos are served. I also want to point out the Save-Data header which is a step in the right direction.

umaar 6y ago
OP here, yeah the amount of website variations this could lead to (and don't get me started with CSS media features!). I don't see this strategy being adopted by most websites, but I reckon it's a technique worth knowing about. I've worked on WebGL visualisations where the device RAM played a big role on performance for example.
austincheney 6y ago
What we need is competent developers who don’t require 10mb of JS when a couple of functions at less than 30kb (unminified) is all you need.
- bamboleo 6y ago
  All you need is 30kb unminified; All I need might be a considerable amount of texture and code to run a 3D game. Just because you only visit Hacker News it doesn’t mean that every website can do its job with an equivalent amount of JS. The whole point of such APIs is to automatically provide the right content to people: Lightweight on slow connections, beautiful on the rest of them.
  - zinekeller 6y ago
    > All you need is 30kb unminified; All I need might be a considerable amount of texture and code to run a 3D game. While I understand your frustration, I would certainly understand a web game loading more JS than, I dunno, some major text-oriented web sites where a similar page can be written with minimal or even no JS.
  - austincheney 6y ago

kazinator 6y ago

What if the browser lies about those system properties in order to defeat fingerprinting? How about: if you don't need the JS, don't load it. I know you don't need most of it because I use NoScript, and most sites work fine with a good chunk of JS disabled. As a generally observed pattern, the more JS they load from more sites, the more you can disable and still use them.

guerrilla 6y ago

More complexity where the solution is rather probably simplicity.

sloshnmosh 6y ago

I block ALL JavaScript and only allow JavaScript to run if I absolutely have to but limit to only what is needed with uMatrix. I had to stop viewing my favorite website recently because it’s no longer viewable with JavaScript disabled.

bluedevil2k 6y ago
Maybe you’re going a little overboard if you can’t even visit your favorite website any more.
- rimliu 6y ago
  Maybe that website (if it is a website and not the proper web app) went overboard it is unusable without JS.

FrontAid 6y ago

There are some nice examples in that post. One other example would be to respect the DoNotTrack setting of your browser. You don't need to load any tracking scripts if DNT is enabled. That saves bandwidth and has a small effect on your page's loading times. We recently blogged about that on the example of Matomo (Google Analytics alternative). The main part is the following code: if (navigator.doNotTrack !== '1') { /* load script */ } Here is the link if you are interested in the details: https://frontaid.io/blog/matomo-dnt-do-not-track/ https://frontaid.io/blog/matomo-dnt-do-not-track/

madeofpalk 6y ago
Isn't DNT deprecated and just not supported in browsers any more?
- FrontAid 6y ago
  > Isn't DNT deprecated [...]? No https://www.w3.org/TR/tracking-dnt/ https://www.w3.org/TR/tracking-dnt/ The problem with DNT is not its specification but that the largest chunk of the industry does not adhere to it. Instead they nag their users with annoying cookie overlays. > Isn't DNT [...] just not supported in browsers any more? It is supported by all common browsers except Safari: https://caniuse.com/do-not-track https://caniuse.com/do-not-track

FriedrichN 6y ago

As a general rule of thumb you should use as little JavaScript as possible and serve it in one big file. Just yesterday a client was wondering why his website was slow and their webdesigners said it needed 'more varnish cache' and a bigger server. After inspecting I saw over 100 .js files were being requested by require.js, but because each module required yet another set of .js files and those files required another set, and so on. The server was serving them up plenty fast (<50ms) but because they were being loaded in waves the load time ended up being between 5 and 7 seconds. Many of these issues arise from being fancy and people tend to want to fix it with fancy stuff. But sometimes you need to stop being fancy and just fix the damn problem in an old fashioned way (concatenate, minify, allow local caching).

madeofpalk 6y ago
This isnt being fancy, this is just being.... not smart (to put it charitably).
- ASalazarMX 6y ago
  I'd say being messy. People just want to get things done, and when they're done in a messy way, they don't want to start over. It depends on their deadlines and how much are they being compensated for doing it the right way(TM).

1f60c 6y ago

This is an interesting technique but it seems like premature premature optimization.

tored 6y ago

navigator.deviceMemory navigator.hardwareConcurrency Oh great, more ways to track users.