search

Vanilla-OS / website

Official Vanilla OS Website.
https://vanillaos.org
GNU Affero General Public License v3.0
49 stars 34 forks source link

vanillaos.org causes massive CPU spike on Firefox #118

Open kevinfiol opened 11 months ago

kevinfiol commented 11 months ago

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.

image image image

GabsEdits commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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.

image

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 commented 9 months ago

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 commented 9 months ago

@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).

image

image

GabsEdits commented 9 months ago

@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).

image

image

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

kevinfiol commented 9 months ago

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

GabsEdits commented 8 months ago

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.