SVG backgrounds cause performance issues with Ultrawide monitors

[guilherssousa]

Hi Dalton, I've been looking to your project since the very early days you open sourced it.

Many were the times I opened up the project homepages, I felt like there was something on it that was draining my PC RAM, but I never thought of diagnosing this myself to write a Issue because I knew the project was recently released, so these kind of problems would be normal.

But here I am again, I felt the browser rally slow after opening the website, but today I took a time to fork and clone the repo to find where this performance issue is coming from, here's what I found:

Your <Background /> component from apps\web\src\components\Layout\Background\index.ts has a background-image rule that renders a really big vector (1878x1500) that contains a bunch of logo repetitions and some blurred colors to add more brand.

The problem is, really big and complex SVGs brings bad performance, thanks to their rendering nature, especially for big monitors that have to replicate these graphs all over their big screens.

Solution

I forked your project and made some alterations to solve this problem: guilherssousa/interprocess

Instead of using this single big vector, what I did was separating the two contents in different files: blur.jpg (17 kB) and pattern.svg (1 kB) (you can view the new Background styles file here)

Also in this repo I fixed some typos on documentation and removed a unused import, I haven't opened a PR yet because of community guidelines about contributing. Hope it helps your ultrawide monitor users.

[daltonmenezes]

Hi @guilherssousa , thanks for that, you can open the PR safely! 💜

[guilherssousa]

Here it is: #10