8 ms·

Is it possible to restrict this as a user? Like to force webpages to use under a certain amount of render/paint time/resources or else just break so that one du

by verall 1y ago

Is it possible to restrict this as a user? Like to force webpages to use under a certain amount of render/paint time/resources or else just break so that one dumb tab doesn't use up all my battery? Then I can opt-in to greater resources usage if it's a webpage I actually care about. I've seen the "This webpage is using alot of resources" popup before but I don't think it would happen in this case. Because honestly I think this is horrifying. I would rather it switch from grey to red "recording" dot than use even the 6% the author decided was "fixed". In 99% of cases I do not care at all about the "artistic vision" of the UI designer and in the other 1% of cases (say an in-browser game or some useful data-viz) I could choose to allow the tab to go crazy with my resources.

mrob 1y ago
Your browser should allow you to override all CSS on the web. Here's how I disable CSS animations in Firefox: https://news.ycombinator.com/item?id=33223080 https://news.ycombinator.com/item?id=33223080
- nothrabannosir 1y ago
  This is a level too deep. I don’t want to dictate what a website can and can’t do to limit resource usage; I just want to limit resource usage. Sure, noodling with content blockers has its own advantages, but for this particular case they cut at the wrong abstraction matter.
dleeftink 1y ago
A bookmarklet that injects custom CSS and selects all/certain items and applies the `contain: content` and `content-visibility: auto;` rules could do to trick. Additionally, the pseudo `:empty { display: none; }` selector may get you additional mileage.
crazygringo 1y ago
Seriously. It seems pretty reasonable to allow a web page a total amount of processing that is something like 100% CPU or GPU for 5 seconds. (E.g. can be 25% for 20 seconds.) And beyond that it gets throttled to 3% CPU cumulative max for however long it's been open so far. And make that the default for popular browsers, so sites are forced to be efficient or else be super super janky and stuttering. And allow a permission for unrestricted processing that things like WebGPU demos or games can ask for.
- HWR_14 1y ago
  100% of the CPU for 5 seconds seems unreasonably long for a random webpage.
  - crazygringo 1y ago
    For a news article, absolutely. But I think it needs to be able to handle JavaScript-heavy webapps too. My suggestion wasn't really about promoting maximum best practices, but just avoiding total runaway excess.
    - ajsnigrutin 1y ago
      MS word on a 133mhz pentium and 16mb of ram needed less than 5s to start. Websites don't need that much resources and should be optimized.... if somehow web developers could read, maybe they'd start doing that.
      - gf000 1y ago
        There are full on CAD apps nowadays on the web. Also, this "looking down" on such a huge group of people is pretty questionable behavior.
        deno 1y ago
        This isn’t unsolvable. A CAD app or similar could ask for permission to use extra resources. There’s already one for storage, extending this to CPU and MEMory is not far fetched.
        wizzwizz4 1y ago
        There were full-on CAD packages for 133MHz Pentiums.
        vanviegen 1y ago
        Yes, and they had perhaps 1% of the features you'd expect these days. Though of course, they were the important 1%..
londons_explore 1y ago
ChromeOS has logic that restricts background tabs to 1% CPU use I think.
rayiner 1y ago
They should put in something that allows users to electroshock web designers for wasting their battery.
- thway15269037 1y ago
  I don't think combined energy output of every power station on Earth would be enough after we have Electron apps for so long. (edit: typo)
  - rayiner 1y ago
    They should call the feature “Electron.”
    - nasmorn 1y ago
      Electronshock
  - dotancohen 1y ago
    Well, now you know where the name came from.
orhmeh09 1y ago
Yes, with StopTheMadness https://underpassapp.com/StopTheMadness/ https://underpassapp.com/StopTheMadness/ It works on Safari, Chrome, and Firefox, but you must buy it.
- barrkel 1y ago
  It only works on Apple though it looks like.
socalgal2 1y ago
How about just not using that site?
- edoceo 1y ago
  I wish. But some sites we are stuck with. EG: bank, HR App, etc.
  - _9ptr 1y ago
    How about not living in society and instead going into the wild?
    - adwn 1y ago
      Yes, because we should never ever try to improve the society we live in. Our only options should be to a) run away, and b) shut up and take it.
      - _9ptr 1y ago
        That's not what I was trying to say. But the fault lies with me for being sarcastic and silly.
    - csomar 1y ago
      Consuming 100% of my cpu for a stupid animation is the opposite of living in a society.
gronglo 1y ago
> In 99% of cases I do not care at all about the "artistic vision" of the UI designer and in the other 1% of cases (say an in-browser game or some useful data-viz) I could choose to allow the tab to go crazy with my resources. I'm with you 100%. Although I'd go one step further and say CSS just isn't needed at all, and should be removed from all browsers. Same goes for WebGL (if you want to play a game, download Steam). This would fix all of your issues and save an unbelievable amount of energy across the planet. Unfortunately people like us are a dying breed!
- groundcontr01 1y ago
  No css at all is pretty extreme, but I'd be on board with disabling css animations
  - valenterry 1y ago
    That's very very sad. Animations can make UX much better when used correctly.
    - adastra22 1y ago
      …how? How do they improve the user experience, at all?
      - whstl 1y ago
        Answering because I know the answer, even though I disagree: There are some situations where having some animation can "attract attention" to parts of the UI, for guidance ("there's some info text here"), feedback ("operation complete"), state changes, timing. All this of course doesn't apply to decorative animations. With that said: a lot of the situations I mention above are manufactured. They are often because of changes happening away from the mouse, or because the interface is brittle or too slow, and the user doesn't have confidence that something really happened, or because the organization of elements is not functional and things are too far apart that the user might miss something in a totally different part of the screen. IMO, with enough thinking you can come up with alternative interfaces that don't require animations at all.
vanschelven 1y ago
To take matters in my own hand I wrote "tabdouse", a tiny kill-at-high-cpu script: https://www.bugsink.com/blog/tabdouse/ https://www.bugsink.com/blog/tabdouse/ Quite unreliable and more a joke than anything, of course...
schiffern 1y ago
Probably too late, but uBlock Origin can disable animations (technically fast-forwards to the end, less likely to break the page) for all websites. In the Settings > My Filters tab, add: !Disable CSS animations globally *,com##*, ::before, ::after :style(animation-timing-function: step-start !important;transition-timing-function: step-start !important) Text shadows and filters are also pretty heavy CSS properties: !Disable text shadow globally *,com##*, ::before, ::after :style(text-shadow: none !important) !Disable image filters globally *,com##*, ::before, ::after :style(filter: none !important) Even disabling rounded corners can improve perf (and I think it looks better): !Disable rounded corners globally *,com##*, ::before, ::after :style(border-radius: 0px !important)

by verall 1y ago

mrob 1y ago

Your browser should allow you to override all CSS on the web. Here's how I disable CSS animations in Firefox: https://news.ycombinator.com/item?id=33223080 https://news.ycombinator.com/item?id=33223080

nothrabannosir 1y ago
This is a level too deep. I don’t want to dictate what a website can and can’t do to limit resource usage; I just want to limit resource usage. Sure, noodling with content blockers has its own advantages, but for this particular case they cut at the wrong abstraction matter.

dleeftink 1y ago

A bookmarklet that injects custom CSS and selects all/certain items and applies the `contain: content` and `content-visibility: auto;` rules could do to trick. Additionally, the pseudo `:empty { display: none; }` selector may get you additional mileage.

crazygringo 1y ago

Seriously. It seems pretty reasonable to allow a web page a total amount of processing that is something like 100% CPU or GPU for 5 seconds. (E.g. can be 25% for 20 seconds.) And beyond that it gets throttled to 3% CPU cumulative max for however long it's been open so far. And make that the default for popular browsers, so sites are forced to be efficient or else be super super janky and stuttering. And allow a permission for unrestricted processing that things like WebGPU demos or games can ask for.

HWR_14 1y ago
100% of the CPU for 5 seconds seems unreasonably long for a random webpage.
- crazygringo 1y ago
  For a news article, absolutely. But I think it needs to be able to handle JavaScript-heavy webapps too. My suggestion wasn't really about promoting maximum best practices, but just avoiding total runaway excess.
  - ajsnigrutin 1y ago
    MS word on a 133mhz pentium and 16mb of ram needed less than 5s to start. Websites don't need that much resources and should be optimized.... if somehow web developers could read, maybe they'd start doing that.
    - gf000 1y ago
      There are full on CAD apps nowadays on the web. Also, this "looking down" on such a huge group of people is pretty questionable behavior.
      - deno 1y ago
        This isn’t unsolvable. A CAD app or similar could ask for permission to use extra resources. There’s already one for storage, extending this to CPU and MEMory is not far fetched.
      - wizzwizz4 1y ago
        There were full-on CAD packages for 133MHz Pentiums.
        vanviegen 1y ago
        Yes, and they had perhaps 1% of the features you'd expect these days. Though of course, they were the important 1%..

londons_explore 1y ago

ChromeOS has logic that restricts background tabs to 1% CPU use I think.

rayiner 1y ago

They should put in something that allows users to electroshock web designers for wasting their battery.

thway15269037 1y ago
I don't think combined energy output of every power station on Earth would be enough after we have Electron apps for so long. (edit: typo)
- rayiner 1y ago
  They should call the feature “Electron.”
  - nasmorn 1y ago
    Electronshock
- dotancohen 1y ago
  Well, now you know where the name came from.

orhmeh09 1y ago

Yes, with StopTheMadness https://underpassapp.com/StopTheMadness/ https://underpassapp.com/StopTheMadness/ It works on Safari, Chrome, and Firefox, but you must buy it.

barrkel 1y ago
It only works on Apple though it looks like.

socalgal2 1y ago

How about just not using that site?

edoceo 1y ago
I wish. But some sites we are stuck with. EG: bank, HR App, etc.
- _9ptr 1y ago
  How about not living in society and instead going into the wild?
  - adwn 1y ago
    Yes, because we should never ever try to improve the society we live in. Our only options should be to a) run away, and b) shut up and take it.
    - _9ptr 1y ago
      That's not what I was trying to say. But the fault lies with me for being sarcastic and silly.
  - csomar 1y ago
    Consuming 100% of my cpu for a stupid animation is the opposite of living in a society.

gronglo 1y ago

> In 99% of cases I do not care at all about the "artistic vision" of the UI designer and in the other 1% of cases (say an in-browser game or some useful data-viz) I could choose to allow the tab to go crazy with my resources. I'm with you 100%. Although I'd go one step further and say CSS just isn't needed at all, and should be removed from all browsers. Same goes for WebGL (if you want to play a game, download Steam). This would fix all of your issues and save an unbelievable amount of energy across the planet. Unfortunately people like us are a dying breed!

groundcontr01 1y ago
No css at all is pretty extreme, but I'd be on board with disabling css animations
- valenterry 1y ago
  That's very very sad. Animations can make UX much better when used correctly.
  - adastra22 1y ago
    …how? How do they improve the user experience, at all?
    - whstl 1y ago
      Answering because I know the answer, even though I disagree: There are some situations where having some animation can "attract attention" to parts of the UI, for guidance ("there's some info text here"), feedback ("operation complete"), state changes, timing. All this of course doesn't apply to decorative animations. With that said: a lot of the situations I mention above are manufactured. They are often because of changes happening away from the mouse, or because the interface is brittle or too slow, and the user doesn't have confidence that something really happened, or because the organization of elements is not functional and things are too far apart that the user might miss something in a totally different part of the screen. IMO, with enough thinking you can come up with alternative interfaces that don't require animations at all.

vanschelven 1y ago

To take matters in my own hand I wrote "tabdouse", a tiny kill-at-high-cpu script: https://www.bugsink.com/blog/tabdouse/ https://www.bugsink.com/blog/tabdouse/ Quite unreliable and more a joke than anything, of course...

schiffern 1y ago

Probably too late, but uBlock Origin can disable animations (technically fast-forwards to the end, less likely to break the page) for all websites. In the Settings > My Filters tab, add: !Disable CSS animations globally *,com##*, ::before, ::after :style(animation-timing-function: step-start !important;transition-timing-function: step-start !important) Text shadows and filters are also pretty heavy CSS properties: !Disable text shadow globally *,com##*, ::before, ::after :style(text-shadow: none !important) !Disable image filters globally *,com##*, ::before, ::after :style(filter: none !important) Even disabling rounded corners can improve perf (and I think it looks better): !Disable rounded corners globally *,com##*, ::before, ::after :style(border-radius: 0px !important)