Commit a883d61
authored
Performance: Remove un-optimized blurring (#2466)
## Description:
I haven't been able to play openfront for a while now, so today I took
some time to fix the performance issue.
It turns out its `backdrop-filter: blur(5px);` being used on a
background element, causing the entire website to re-paint on nearly
every change.
This causes the game to run at 8 fps on my computer, with chrome
reporting 700ms of INP presentation delay.
The solution here was simply to pre-blur the background image.
<details>
<summary>Here's the instructions on how to pre-blur exactly like it
currently does</summary>
Install sharp
`npm install sharp`
Run blur
```ts
sharp(`./resources/images/EuropeBackground.webp`)
.blur(5)
.toFile(`./resources/images/EuropeBackgroundBlurred.webp`);
```
This could be automated if you plan to do more backgrounds.
</details>
The surprising part is that I'm running a A5000 with a Ryzen 9 5950X. So
I usually never lag from anything, which is what made this kinda
interesting. I assume the issue is caused by my 4K display or Kubuntu.
## Video:
This video showcases the 700+ms of delay on the main menu buttons. Video
is in real-time.
https://github.com/user-attachments/assets/ad5ff509-6bc7-48ff-8cba-85409be774f0
## Please complete the following:
- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
<details>
<summary>Discord Username</summary>
fx.morin
</details>1 parent e1db8dc commit a883d61
File tree
2 files changed
+1
-2
lines changed- resources/images
- src/client
2 files changed
+1
-2
lines changedLoading
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
56 | 56 | | |
57 | 57 | | |
58 | 58 | | |
59 | | - | |
| 59 | + | |
60 | 60 | | |
61 | 61 | | |
62 | 62 | | |
| |||
73 | 73 | | |
74 | 74 | | |
75 | 75 | | |
76 | | - | |
77 | 76 | | |
78 | 77 | | |
79 | 78 | | |
| |||
0 commit comments