User Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0

Steps to reproduce:

Visit this website: https://www.editorx.com/prowebsites/web-design-trends

Actual results:

It is noticeable right from the start that Firefox is struggling rendering this website. CPU usage goes up, it takes a long time to complete loading page, and even after load scrolling up and down leaves some sections empty. Competing browsers are handling this website better.
Tested on Fedora 33 and macOS with similar results.

Expected results:

While website is complicated, it would be great if Firefox managed to handle it a bit better. Probably whole lot of different issues are happening here at the same time and that results in overall slow-ish performance.

Confirmed on Ubuntu 20.10 with Nightly 86

Hi,

I was able to reproduce the issue on macOS 10.15 on 84 and 86 as well.

I've also captured a performance profile while rendering the page:
https://share.firefox.dev/2M6ceZU

I'm going to set a component, if this doesn't seem the most appropriate one, please feel free to set a more suitable one.

Thanks for reporting!

It looks like the profile result doesn't include native function calls. Peter_M, can you please take a profile again with enabling "Native Stacks" option?

Thanks!

Since "Native Stacks" is not available on Firefox Release I've ran the profiler on Firefox Nightly this time:
https://share.firefox.dev/2LWKgjz

Thanks! Moving to Layout:Grid.

The profile shows that we're having long reflows (> 4 seconds), spending lots of time reflowing nested CSS Grids.

--> likely a version of bug 1591366.