Here’s a neat trick. I’ve got a web page with many HTML popovers, styled as modals to create a no-JS gallery/lightbox. But LCP suffers because the browser tries to reserve space for the images within (even though they’re within not-yet-shown popovers).
This CSS one-liner saved the day. It basically says “skip over not-yet open popovers on initial page render” –
[popover]:not(:popover-open) {
content-visibility: hidden;
}
I appreciate that Lighthouse isn’t the last word in performance metrics, of course. But this change alone bumped an affected page’s score from 76 to 100, so it’s not nothing either!