🐛 layoutBackgroundBlur + showRecent leads to laggy homepage

[jamesbraza]

Describe the bug

When working on my portfolio website, I observed homepage settings layoutBackgroundBlur = true with showRecent = true and showRecentItems = 12 lead to a laggy homepage when scrolling down. I disabled layoutBackgroundBlur, and the issue went away.

Looking at this site (config), it seems to have the same issue (as of 8/12/2023).

To Reproduce

Steps to reproduce the behavior:

1. Set layoutBackgroundBlur = true and showRecent = true (with showRecentItems >= 10) in [homepage] section of params.toml
2. Go to homepage and scroll down

The lag happens for both a Namecheap shared hosting (what I use) and GitHub Pages (linked site).

Desktop (please complete the following information):

• OS: macOS Monterey version 12.6
• Browser: Google Chrome 115.0.5790.170
• Site: Hugo 0.116.1, Blowfish 2.38.3

Here's a Speedtest result, to show I have decent internet speeds:

[ragibson]

Popping in here as well from the other issue to note that I found a lot of documentation saying to avoid these blur filters entirely as they are extremely intensive and often do not perform well on mobile.

The pull request linked above improves the draw calls in Firefox by ~2x when using the blur features, but a remaining ~100x would come from a better CSS implementation that avoids backdrop-filter entirely.

[nunocoracao]

Should be fixed. Please re-open if the issue persists