pagespeed: supporters section causes forced reflow

[benmccann]

This line is being flagged as expensive by Chrome devtools because it causes the page layout to be recalculated:

svelte.dev/apps/svelte.dev/src/app.html

Line 53 in 03e3066

div.remove();

That class is used to do something on Macs. Not exactly sure what this is or why it's needed:

svelte.dev/packages/site-kit/src/lib/docs/DocsContents.svelte

Line 128 in 03e3066

:global(.scrollbars-invisible) [aria-current='page']::after {

The .scrollbars-visible class is unused and can be removed

[Rich-Harris]

Both are needed to render the arrow indicating the active section of the docs:

It shouldn't be causing a layout, it has position: absolute

[benmccann]

Chrome says there's a "forced reflow" caused by the div.remove(); line:

Maybe it's a red herring though. If I remove that code I get basically the same thing, but without any line number reference. I'm not quite sure how to tell where it's coming from...

[Rich-Harris]

What if you remove the line that sets the classname?

[benmccann]

The latter was from removing the whole script block

[benmccann]

I figured out by deleting one section at a time from the homepage that it's coming from the CSS in the supporters section:

svelte.dev/apps/svelte.dev/src/routes/_home/Supporters/index.svelte

Line 105 in 0be535c

&:nth-child(n + 1):nth-child(-n + 12) {

[benmccann]

Here's another clue that something is going on with the supporters section. If you look at the LCP, it happens in the middle of hydration, which is surprising. It should happen earlier on from the SSR'd content. If you follow the dotted line down to the very bottom and click on the last anonymous script block, it takes you to the supporters code.

[benmccann]

I tried removing the Supporters section and deploying to a preview branch. It seemed to add a few points to the PageSpeed Insights score