layout shift kills web vitals

[KolyaKorruptis]

The transpiling of all CSS causes a re-rendering of the page and (with enough styles) a heavy layout shift that kills web vitals, an important SEO signal. This is true even for pages that do not contain any CQs.

I'm therefore thinking about transpiling the styles server side, but then I will lose native browser support for CQs. Also I am unsure if the polyfill would work in SSR.

Is there any way to fence the polyfill to specific CSS classes (ie to those that have a container-type property)? Because right now it transpiles everything.

Any other ways to mitigate that layout shift?

[rjgotten]

Any other ways to mitigate that layout shift?

You can use CQFill instead. Rather than transpile CSS on the fly, it uses PostCSS to transpile support in at build-time.

[yevgeniy-belov]

Any other ways to mitigate that layout shift?

You can use CQFill instead. Rather than transpile CSS on the fly, it uses PostCSS to transpile support in at build-time.

Unfortunately, CQFill has its own unresolved issues...

[rjgotten]

Makes me wonder if it would be possible to fork the chromelabs polyfill and add an optional operating mode where it relies on pre-processed CSS, rather than on-the-fly stylesheet modification.

I mean; a 'drop in' is nice and all, but typically if you care enough about bleeding-edge CSS to start using polyfills for advanced features like container queries - you're also the type of developer with projects that already are dealing with build systems that could automate this...

[devknoll]

One concern with offline transpilation is that it doesn't really solve the issue: your query conditions still need to be (re)evaluated on the browser, and if the conditions are different from your offline/server-side setup, you'll still get layout shift. That said, I don't think we would oppose a PR that tries to make this possible.

My current recommendation is:

1. Use the polyfill carefully to avoid layout shift, e.g.
   • Use @supports together with a tiny, pure CSS loading indicator to hide any affected content (to prevent it from counting as layout shift) until the polyfill loads (i.e. trade off CLS for LCP) on older browsers
   • Consider initially only using it for content that is below-the-fold, until more visitors have browsers with native support
2. Wait until more visitors have browsers with native support
   • As more browsers add native support for container queries, and as your visitors upgrade, the smaller the percentage of visitors impacted should be. This should be combined with the first recommendation.

I'm going to close this issue for now, but I'm happy to reopen it if needed.

Thank you!