content-visibility: hidden;

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!

0 comments

    Leave a comment

    Reply on your own site