Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vanillaos.org causes massive CPU spike on Firefox #118

Open
kevinfiol opened this issue Aug 16, 2023 · 9 comments
Open

vanillaos.org causes massive CPU spike on Firefox #118

kevinfiol opened this issue Aug 16, 2023 · 9 comments

Comments

@kevinfiol
Copy link

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
Copy link
Member

GabsEdits commented Aug 17, 2023

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
Copy link
Author

kevinfiol commented Aug 17, 2023

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
Copy link
Author

kevinfiol commented Aug 17, 2023

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
Copy link
Contributor

vendillah commented Oct 10, 2023

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
Copy link
Author

kevinfiol commented Oct 10, 2023

@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
Copy link
Member

@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
Copy link
Author

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

@GabsEdits
Copy link
Member

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
Copy link

Juliandev02 commented Jul 31, 2024

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)
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants