CSS for Web Vitals
The marketing for Core Web Vitals (CWV) has been a massive success. I guess that’s what happens when the world’s dominant search engine tells people that something’s going to be an SEO factor. Ya know what language can play a huge role in those CWV scores? I’ll wait five minutes for you to think of it. Just kidding, it’s CSS.
Katie Hempenius and Una Kravets:
The way you write your styles and build layouts can have a major impact on Core Web Vitals. This is particularly true for Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP).
For example…
- Absolutely positioning things takes them out of flow and prevents layout shifting (but please don’t read that as we should absolute position everything).
- Don’t load images you don’t have to (e.g. use a CSS gradient instead), which lends a bit of credibility to this.
- Perfect font fallbacks definitely help layout shifting.
There are a bunch more practical ideas in the article and they’re all good ideas (because good performance is good for lots of reasons), even if the SEO angle isn’t compelling to you.
Direct Link to Article — Permalink
The post CSS for Web Vitals appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
