1687731 - Very low performance on complicated website

Status: RESOLVED DUPLICATE of bug 1591366

(Core :: Layout: Grid, defect)

Description

[joshas]

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.

Comment 1

[Pascal Chevrel:pascalc]

Confirmed on Ubuntu 20.10 with Nightly 86

Comment 2

[Peter Magyari (Desktop QA)]

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!

Comment 3

[Hiroyuki Ikezoe (:hiro)]

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!

Comment 4

[Peter Magyari (Desktop QA)]

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

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Thanks! Moving to Layout:Grid.

Comment 6

[Daniel Holbert [:dholbert]]

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.