Skip to content

Commit a883d61

Browse files
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

2 files changed

+1
-2
lines changed
41.3 KB
Loading

src/client/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656

5757
.bg-image {
5858
content: "";
59-
background-image: url("/images/EuropeBackground.webp");
59+
background-image: url("/images/EuropeBackgroundBlurred.webp");
6060
background-position: center;
6161
background-attachment: fixed;
6262
background-size: cover;
@@ -73,7 +73,6 @@
7373
position: absolute;
7474
width: 100%;
7575
height: 100vh;
76-
backdrop-filter: blur(5px);
7776
}
7877

7978
.dark .bg-image {

0 commit comments

Comments
 (0)