-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[gatsby-plugin-image] CLS using flexbox or grid re-ordering #30737
Comments
gatsby-plugin-image
using flexbox or grid re-ordering
I've asked the Lighthouse team for some clarifications. I'll let you know when I know more. |
@wardpeet any updates on this? |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Thanks again for being part of the Gatsby community! 💪💜 |
Description
There's a weird CLS issue reported by Lighthouse (tested on v7.0.0) when a page is rendering some content before
StaticImage
(orGatsbyImage
) (fromgatsby-plugin-image
), which gets reordered via a CSS grid or flexbox.After falling down a few rabbit holes I stumbled upon a stackoverflow question talking about bootstrap grid, but it seemed similiar to the issue I was having, because it was changing the order of HTML nodes via CSS. The answer to the question sheds some
light, and I think it's the same Chromium bug to blame where the browser's parser yields and triggers rendering after encountering a
<script>
tag after reading 50 tokens.I checked the source for
gatsby-plugin-image
looking for any script tags, and there's one in thelayout-wrapper
component (rendered server-side).This reproducible test case contains two pages: one where there's an image with few nodes before it, and another one where there's way more (50+) nodes before. The former gets a 0 CLS score while the latter gets a larger CLS score -- both in Chrome Lighthouse and PageSpeed Insights.
I understand it's not really a
gatsby-plugin-image
bug, but rather one in chromium, but maybe it would make sense to work around it? I'm not sure how exactly, but I figure that moving the<script>
(NativeScriptLoading
) to the bottom of the page (instead of right after the<img>
) would work.Steps to reproduce
Clone the reproduction repo, build the project, and serve it.
Open the page at root (
/
) in Google Chrome and do a mobile Lighthouse run.Edit: I'm not 100% sure, but I think it matters if the device emulation is turned on. Use "Moto G4" in the device toolbar of devtools.
Go to the
/cls
page and do a mobile Lighthouse run again.Expected result
Both Lighthouse runs should report a CLS of 0.
Actual result
The
/cls
page reports a CLS that's considerably larger than 0. If it doesn't happen, run lighthouse again. In my experience it took me 3 tries at most to get the larger-than-0 result. Usually I get it on the first run.Environment
Machine 1
Machine 2
The text was updated successfully, but these errors were encountered: