vanillaos.org causes massive CPU spike on Firefox

[kevinfiol]

Simply visiting the VanillaOS page causes a huge CPU spike on Firefox running on Linux Mint. The site also freezes up if you try clicking on anything. Eventually after waiting ~20 seconds, the site unfreezes, and the CPU usage drops. Reproducible when refreshing the page.

This was not an issue on the older VanillaOS homepage.

[GabsEdits]

Well the Vanilla OS Website is made on top of Vue.js, it can use a lot of power especially on Firefox,it's quite normal.

Edit: I was wrong, while Vue can take up sometimes a lot of power like any other Framework, it's not that common. It's something else that makes makes the performance like that.

[kevinfiol]

Well the Vanilla OS Website is made on top of Vue.js, it can use a lot of power especially on Firefox, it's quite normal.

This is a mischaracterization of Vue; most Vue sites do not freeze for 20 seconds while causing a massive CPU spike, and if they did, why would you then choose it to build a website?

I also noticed the site is completely rendered client-side, which is potentially related to the issue. It will render a blank page with JavaScript disabled. See this. You can skip a lot of performance issues by rendering static HTML pages where possible, or rendering server-side instead of putting the onus on the user. For a mostly information-driven site like vanillaos.org, I think this is highly appropriate. I'd recommend looking at Nuxt.js, or vite-plugin-ssr since you are already using Vue & Vite.

I am not able to reproduce the issue on the same system using Brave 1.56.20 (Chromium 115.0.5790.171). I also was not able to reproduce on Firefox 116 on Windows 10. I will attempt to reproduce on another Linux system.

EDIT: The old site was in fact far more performant because it was built with Jekyll; you were rendering the templates + markdown ahead-of-time which makes sense for a content heavy site. Here you are making every visitor of your site run copious excessive amounts of JavaScript in order to render Markdown on each page load.

[kevinfiol]

Was not able to reproduce the freezing on a fresh install of Firefox on a separate Linux Mint 21 system (Ubuntu 22.04 LTS based).

I did take a look at CPU usage via Firefox's Task Manager and compared it to both the Ubuntu and PopOS's homepages.

On average, I noticed vanillaos.org ate about ~4% of CPU usage and it never idles, while the other sites sat around 0.020%, or sometimes reporting completely idle.

[vendillah]

I'm not sure where or when I saw it - maybe in the release notes, maybe on a Firefox update tab in the browser, or maybe my RSS - but I've read recently that they improved the performance of Vue. I searched for one of such sources, but didn't find any. I did find hacks.mozilla.org, which is official enough I guess, describing that they've improved the performance.

Anyway, I had issues with loading the website as well, waiting over 10 seconds, and a lot was frozen. When I open the website now, I can scroll right away, while content is loading in dynamically. I estimate (from looking at it and scrolling) that it takes about 4 seconds to be fully loaded. So I was wondering if you could check if the issue is still present at your side.

---

Correction: it takes 3-4 seconds, and it appears like a UI freeze during the whole loading process, since pressing "PgDwn" does not scroll down, but swiping on mousepad does scroll down the page right away (i.e. during the loading).

[kevinfiol]

@vendillah The issue still persists. I get a spinner and my entire browser remains unresponsive. On my Windows PC, I get the 3-4 second lag that you describe. The tab process is at 100% CPU usage in that period. This is still quite egregious -- websites should not cause 100% CPU spikes.

Regardless, as I mentioned above, Vue itself is not the culprit -- the site is unoptimized. One reason may be the Markdown parsing that is done client-side instead of at compile time like I mentioned above. I haven't had time to clone the site and identify any other bottleneck. I do think migrating the site back to a SSG would be a great idea (maybe Nuxt, or VitePress).

[GabsEdits]

@vendillah The issue still persists. I get a spinner and my entire browser remains unresponsive. On my Windows PC, I get the 3-4 second lag that you describe. The tab process is at 100% CPU usage in that period. This is still quite egregious -- websites should not cause 100% CPU spikes.

Regardless, as I mentioned above, Vue itself is not the culprit -- the site is unoptimized. One reason may be the Markdown parsing that is done client-side instead of at compile time like I mentioned above. I haven't had time to clone the site and identify any other bottleneck. I do think migrating the site back to a SSG would be a great idea (maybe Nuxt, or VitePress).

Weird as I never saw such kind of lag to the site, it's smooth for me.

[kevinfiol]

I'll see if I have time this weekend to identify the bottleneck.

[GabsEdits]

Regardless, as I mentioned above, Vue itself is not the culprit -- the site is unoptimized. One reason may be the Markdown parsing that is done client-side instead of at compile time like I mentioned above. I haven't had time to clone the site and identify any other bottleneck. I do think migrating the site back to a SSG would be a great idea (maybe Nuxt, or VitePress).

I agree, moving to something like Nuxt or Vike would be nice, as this is an informal website. I will check what is possible to be done and come back.

[Juliandev02]

I can confirm that the VanillaOS website consumes a lot of cpu. Even having the website open consumes around 20 - 50% CPU (We'll ignore the Windows 7 window theme, that seems to be a Chrome Wayland bug)