Simon Hearne

How to Improve Core Web Vitals

https://simonhearne.com/2020/core-web-vitals/

Here's a great overview of both what will come soon in Google ranking algorithm, and how to detect and fix issues with these Core Web Vitals.

Google is putting an even greater emphasis on the speed of user experiences, offering two SEO benefits to site owners who deliver the fast experiences that customers expect.

An important point is related to Single Page Applications (SPA):

This means that soft navigations will potentially be penalised, with higher than expected CLS scores and missing or unfairly high LCP values. Unfortunately there is not yet a good solution to this problem. This makes it even more important to reduce unexpected layout shifts and optimise LCP as much as possible!

• older link:
  The (extremely) loud minority
• newer link:
  What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs

---

Related contents with similar topics

1. • Nicolas Hoizey
   • 6 June 2023
   • Core Web Vitals, image, LCP, WebPerf
   • 6 reactions
   • permalink

   Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭

   You can see this for my photography site in this WebPageTest result:

   https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp

   

2. 

   Paul Hebert

   Watch Out for Layout Shifts with ‘ch’ Units

   • Nicolas Hoizey
   • 31 May 2023
   • WebPerf, Core Web Vitals, CLS, CSS
   • 5 reactions

   In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…

3. • Nicolas Hoizey
   • 16 May 2023
   • Core Web Vitals, image, LCP, WebPerf
   • 3 reactions
   • permalink

   Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!

   

   I still wish it was much easier than dealing with <picture> and x descriptors for fluid images… 😞

   With a <img maxdensity="2.5" …> attribute for example!

   If you agree, comment:
   https://github.com/whatwg/html/issues/4421

4. • Nicolas Hoizey
   • 13 April 2023
   • Core Web Vitals, RUM, SpeedCurve, WebPerf
   • 11 reactions
   • permalink

   I love #SpeedCurve's simple and efficient Core Web Vitals Real User Monitoring, especially when everything is green! 🥳

   

   This is a real e-commerce site, with many real users everyday. After a few months of performance optimisation.

5. 

   Largest Contentul Paint change in Chrome 112 to ignore low-entropy images

   • Nicolas Hoizey
   • 7 April 2023
   • LCP, Core Web Vitals, image, WebPerf
   • 1 reaction

   This may result in LCP times increasing, if a low-content background was being painted very early, or if a low-content placeholder was being used…