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 …


The post CSS for Web Vitals appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

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 ArticlePermalink


The post CSS for Web Vitals appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-07-01T18:54:45+00:00) CSS for Web Vitals. Retrieved from https://www.scien.cx/2021/07/01/css-for-web-vitals-3/

MLA
" » CSS for Web Vitals." Chris Coyier | Sciencx - Thursday July 1, 2021, https://www.scien.cx/2021/07/01/css-for-web-vitals-3/
HARVARD
Chris Coyier | Sciencx Thursday July 1, 2021 » CSS for Web Vitals., viewed ,<https://www.scien.cx/2021/07/01/css-for-web-vitals-3/>
VANCOUVER
Chris Coyier | Sciencx - » CSS for Web Vitals. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/01/css-for-web-vitals-3/
CHICAGO
" » CSS for Web Vitals." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/07/01/css-for-web-vitals-3/
IEEE
" » CSS for Web Vitals." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/07/01/css-for-web-vitals-3/. [Accessed: ]
rf:citation
» CSS for Web Vitals | Chris Coyier | Sciencx | https://www.scien.cx/2021/07/01/css-for-web-vitals-3/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.