alveusgg-website-3ihrctq0r-alveus.vercel.app - Background-image base64 SVG blur rendering lag

[MattIPv4]

URL: https://alveusgg-website-3ihrctq0r-alveus.vercel.app/

Browser / Version: Firefox 119.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Chrome

Problem type: Something else Description: background-image base64 SVG blur rendering lag Steps to Reproduce: https://alveusgg-website-3ihrctq0r-alveus.vercel.app/ makes use of Next.js placeholder="blur" for the background images in the hero slideshow. This attribute in Next.js results in a background-image being set on the images in the HTML that contains a base64 SVG that blurs a base64 JPG/PNG.

These placeholders work great in Chrome and provide a blurred low-res placeholder under the full-res images load, but in Firefox these placeholders seem to cause the entire page to lock up and stop rendering for upwards of 30s sometimes until the full-res images have loaded.

For comparison, https://alveusgg-website-cq282edqo-alveus.vercel.app/ removed the placeholder="blur" and the rendering lag is no more, the page loads instantly.

You can see the difference in these two profiler runs (using the developer tools profiler set to graphics) -- with the placeholder background-image in place on the hero slides, the browser spends well over 30s sitting at nearly 100% CPU usage computing graphics, but without those placeholders the page loads normally: https://share.firefox.dev/48T9Lro vs. https://share.firefox.dev/407QEpx

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. Unfortunately having insufficient details about the issue you submitted, we cannot help you with it. Please leave a comment with more details regarding the issue you are facing and steps to reproduce it, or file a new report with specific details and we will gladly investigate this further. A screen rec of the issue reproducing would help the investigating process.

[qa_43/2023]

[MattIPv4]

👋 I've already attached profiler reports that show the increased CPU usage, and the links for the pages used to generate those reports, as well as detail on what I suspect to be the cause (the background-image on the hero slideshow images). What more information would you like from me?

[softvision-raul-bucata]

I was not able to reproduce the issue following the steps to reproduce.

Tested with:

Browser / Version: Firefox Release 118.0.2 (64-bit)/ Firefox Beta 119.0b9(64-bit)/ Operating System: Mac Ventura 13.1

Suggestion: Try clearing cache/data/cookies, disabling add-ons and Ad-blocker (if available) and extensions or use a clean profile, and check again? If there are any changes made to the default settings of the browser (e.g. in about:config) please revert to the default settings and try again. Also, have the required cookies been accepted for this page?

[inv_43/2023]

[MattIPv4]

This is reproducible for me on a completely fresh installation of Firefox with no extensions etc., and no need to interact with the page beyond opening it. Firefox 119.0 (64-bit) on macOS Ventura 13.6 (22G120) w/ an Apple M1 Pro.

Here are some recordings showing this:

1. The site with the blur placeholders, taking a long while to load/render fully in both normal and private mode in Firefox:

https://github.com/webcompat/web-bugs/assets/12371363/60ab434d-3cf4-4a7d-91a0-637c00a4ddd3

2. A profiler run of the site with the blur placeholders, showing the long period of CPU usage allocated to graphics:

https://github.com/webcompat/web-bugs/assets/12371363/0fff4388-eea3-4c66-8073-dfed75e4c85a

3. The site without the placeholders, loading essentially instantly with no perceived rendering lag:

https://github.com/webcompat/web-bugs/assets/12371363/cbe20623-499c-4e64-9e00-d7bad0ad9db0

4. A profiler run of the site with no placeholders, showing no excessive CPU usage for graphics:

https://github.com/webcompat/web-bugs/assets/12371363/af706a8a-2656-4ee0-9a5e-4e3e93be3693

For reference, the associated code difference between these two links is https://github.com/alveusgg/alveusgg/commit/47effed8e65677d2f869fd946610b2da3d0121d4, which removed the auto-generated background-image on the hero slideshow images (if you disable JavaScript on the problematic link, you'll be able to see thse in the source -- they get removed once the full-res images load).

[softvision-raul-bucata]

@MattIPv4 Thanks for the screen rec. I was indeed, able to reproduce the issue. There is a considerate loading time for the default hero background image, and there are performance issues as well.

Moving the issue.

We appreciate your report. I was able to reproduce the issue by following the steps to reproduce

Tested with:

Browser / Version: Firefox Release 119.0 (64-bit)/ Firefox Nightly 121.0a1 (2023-10-23) (64-bit) /Chrome Version 118.0.5993.89 (Official Build) (64-bit) Operating System: Windows 10 PRO x64 Operating System: Mac Ventura 13.1

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome.

Moving this to NeedsDiagnosis for further investigations.

[inv_43/2023]