How ShortPixel can improve the Core Web Vitals – LCP, FID, CLS

Quoting Google,

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome

In plain English, the Core Web Vitals are 3 metrics that Google uses to measure how good the user experience is on your website. These 3 metrics are:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Starting May 2021, these 3 metrics will be used by Google to rank your site on the search engine (although you should remember that content is still the king).

You may be wondering: Can ShortPixel help me with the LCP, FID or CLS? Is ShortPixel affecting my Core Web Vitals?

Largest Contentful Paint (LCP)

The LCP measures how much time your website takes to display the largest image or text block visible within the viewport. It is important to know that “large” is not the same as “heavy”; the LCP measures the size the element takes within the viewport, not the kilobytes or megabytes.

Knowing that, ShortPixel will be able to help you reduce the LCP if your largest element is an image. If that’s the case, simply reduce its size using our image optimization tools and then it will load faster, which in turn will lower your LCP.

You can check what’s your largest element using the developer tools included in your browser. Webenso have a pretty short and useful guide about how to detect the LCP.

Please notice that the LCP may also be affected by your hosting provider, your CDN and/or how your website is built. For example, if you have a slow server response time and your theme is bloated (using a page builder doesn’t help!), you will get a poor LCP even if you reduce your images sizes by a lot.

First Input Delay (FID)

The FID measures again time. Specifically, the time from the moment when your visitors interact with a page, to the moment when the browser is able to respond to that interaction. We are sure you’ve experienced that frustrating situation where the website looks like it loaded but you cannot scroll or click on anything yet; that’s the delay the FID tracks.

This time when everything appears to be unresponsive is caused by the browser itself, when its main thread is busy parsing and executing (mainly) all the JavaScript code that your website contains. The bigger and the more numerous your JavaScript resources are, the more they will affect your FID.

There are numerous ways to improve your FID, although, in this occasion, ShortPixel will not be the answer to this. The explanation is simple:

• If you are using ShortPixel Image Optimizer (SPIO) or any of our tools dedicated to physically optimize your image files, they have no effect in your browser, because they don’t function on page load.
• If you use ShortPixel Adaptive Images (SPAI), while it is true that it runs JavaScript code (from its file ai.min.js) on every page load, it is highly optimized and light-weight, so it will not affect your site in a noticeable way.

What you’ll need to do in this case is optimize your website so it uses less resources.

Cumulative Layout Shift (CLS)

This one is very easy to demonstrate, “thanks” to the awful experience many sites provide. Have you ever started reading an article and then the whole page moves down and an ad shows up? That’s called Layout Shifting. It’s even worse if you are about to click on a button or similar, and because of a Layout Shift you end up clicking on something you did not want to.

The CLS ranks the visual stability. Quoting Google, “it measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page”. The actual number Google provides results from a formula involving a few parameters.

Now, as with the FID, ShortPixel cannot provide a direct solution because ShortPixel does not affect the CLS score.

• On one hand, if you use ShortPixel Image Optimizer (SPIO) or any of our tools dedicated to physically optimize your image files, remember that they only replace your physical files. They can’t and do not affect your frontend.
• On the other hand, if you are using ShortPixel Adaptive Images (SPAI), when your images are being loaded, blank placeholders are added in their place. These placeholders have the exact size as the actual images, meaning that SPAI is not affecting the CLS either.

In conclusion, none of our solutions will affect your CLS. In this case, you should consult the issue with your theme or plugin(s) provider.