Throbber animation slowing page loads by up to 50%

[m-thomson]

Short description

I noticed that certain pages load about ~50% faster with the TST sidebar hidden. I was able to trace it back to the page loading throbber.

Steps to reproduce

1. Start Firefox with clean profile.
2. Install TST.
3. Compare load time of CNN.com (or a similarly bloated site) with and without TST sidebar visible.
4. You should notice a significant difference (for me it was roughly 50%!)
5. Hide the throbber with the CSS below and re-try the experiment.

.throbber { display:none!important; }

Expected result

Page load time should not be affected by TST.

Actual result

Pages loaded considerably slower

Environment

• Platform (OS): MacOS 10.14.5
• Version of Firefox: 67.0.4 (64 bit)

Other notes

• I have a feeling that the same animation is causing the initial rendering of the TST sidebar (for example when launching FF) to be much slower than necessary.

[m-thomson]

Related #1384

[piroor]

Sadly I have no more good idea to optimize CSS animations... It is beyond my technical skill.

[Lej77]

You could try to use the animation with 30 fps instead of 60 fps by applying the following css:

:root:not(.throbber-synchronizing) .tab:not(.collapsed).loading:not(.throbber-unsynchronized) .throbber::before,
:root:not(.throbber-synchronizing).have-loading-tab #master-throbber,
:root.have-loading-tab #sync-throbber,
:root.blocking-throbber #blocking-screen .throbber::before {
  animation: throbber 1.05s steps(30) infinite;
}

Its the css from line 52 in webextensions/sidebar/styles/throbber.css and I simply changed the steps(60) to steps(30).

From some quick testing I didn't notice any slowdown when comparing loading CNN.com with and without Tree Style Tab's sidebar being open.

Also Firefox's tab animation seems to be defined here and seems similar to Tree Style Tab's animation.

If the performance is still bad when the animation has a really low fps (such as 1) then the issue might be with some Tree Style Tab code that handles the animation and not with the CSS animation itself.

Environment

• Platform (OS): Windows 10
• Version of Firefox: 67.0.4
• Version (or revision) of Tree Style Tab: 3.1.2

[m-thomson]

Oops, I didn't mean to close this. I do have saved performance profiles from the sidebar both open and closed if that helps.

After I posted this issue, I lowered the steps way down to <10 and noticed a big improvement.

I've no idea why it would only affect my (MacOS) system. Maybe something about my setup. I'll do some more investigating.

I'm curious though, would an APNG image be better? (It's like Gif but with alpha transparency) I've never worked with with them before but like it could save some cycles.

[piroor]

I'm curious though, would an APNG image be better?

Because SVG throbber is required to apply the theme color to the throbber itself. Firefox itself also uses this method maybe due to same reason.

Anyway, I've inspired from the idea of @Lej77's comment and I've introduced a new custom property to define the animation steps of the throbber with the commit 72db584. After that you can override the animation steps simply like following:

:root {
  --throbber-animation-steps: steps(10);
}

[Lej77]

After some thought the performance issue might be because of tricks we do to make the loading animations synchronized. The following CSS should disable the synchronization:

/* Apply animation to unsyncronized throbbers */
:root:not(.throbber-synchronizing) .tab:not(.collapsed).loading .throbber::before {
  animation: throbber 1.05s steps(60) infinite !important;
}

/* Override the rules that use -moz-element to copy the appearance of the hidden global throbber */
:root:not(.simulate-svg-context-fill) #tabbar .tab:not(.collapsed).loading .throbber::before {
  -moz-context-properties: fill;
  background: url("/sidebar/styles/throbber.svg") no-repeat !important;
}
:root.simulate-svg-context-fill #tabbar .tab:not(.collapsed).loading .throbber::before {
  mask: url("/sidebar/styles/throbber.svg") no-repeat left center / 100% !important;
}

/* Disable hidden global throbbers since they aren't used anymore */
#sync-throbber,
#master-throbber {
  animation: none !important;
}

[irvinm]

@m-thomson have you tried any of the workarounds? Do they improve your performance?

[BobVul]

Perhaps relevant is this Firefox bug report from the original 57 release where they switched to 60 FPS SVG animations: https://bugzilla.mozilla.org/show_bug.cgi?id=1406414

Looks like it only affected some specific machines, for an unknown reason. Their solution was to fall back to APNG "when the browser is under schedule pressure". This might not be doable from an extension - at the very least, it seems rather complex.

I am unsure if Firefox has changed their solution in the two years since that bug.

[ariasuni]

Note that Firefox switched to 30 FPS several months ago:
https://bugzilla.mozilla.org/show_bug.cgi?id=1511095#c10

Relevant line in Firefox’s code:
https://hg.mozilla.org/mozilla-central/file/c5e6477c3a245a97d4c3cdd5d3e406f8abaf94ad/browser/themes/shared/tabs.inc.css#l198

So maybe Tree Style Tab should switch to 30 FPS by default too.

[piroor]

@ariasuni Thanks! I've applied same changes with the commit e256e29.

[irvinm]

@m-thomson can you try the latest version and see if you can close this item or not?

[irvinm]

@piroor, no updates from the original poster since July 5th. Maybe consider closing this out?