Basic Internet Metrics (LCP, FID, CLS)

Google Core Web Vitals consist of 3 components that relate to page responsiveness, speed, stability, and how they affect the user experience. A website should ideally score ‘Good’ for all 3 components to pass the Core Web Vitals assessment.

The 3 Core Web Vitals are:

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

LCP, FID and CLS are user-centric metrics and accompany mobile-friendliness, safe browsing and basic experience signals to calculate page rank scores.

Core Web Vital scoring

Each Core Web Vital will be scored as either ‘Good’, ‘Needs Improvement’, or ‘Poor’. Interestingly, Google has recently started using its Core Web Vitals scores as a way to rank websites. So website owners now know that a good user experience is no longer a “would be nice to have”, but an absolute “must-have”, as it’s crucial for good SEO. 

• LCP, Largest Contentful Paint: This measures how long it takes for the largest piece of content to appear on the screen. This could be an image or a block of text. A good grade gives users the feeling that the site loads fast. A slow site can lead to frustration.
• FID, or First Input Delay: This measures how long it takes for the site to react to the first interaction. This could be a tap on a button, for instance. A good grade here gives the user a sense that a site is quick to react to input and, therefore, responsive. Slow, again, leads to frustration.
• CLS, or Cumulative Layout Shift: This measures the visual stability of your site. In other words, does stuff move around on the screen while it is loading — and how often does that happen? Nothing more frustrating than trying to click a button when a slow-loading ad appears in that spot.

Largest Contentful Paint

LCP = how long it takes to render the largest content element visible in the viewpoint, from after the URL was accessed.

Main low Performance Problems

If you’re seeing an LCP issue on desktop or mobile error, it means that content is taking longer than 4 seconds to render the largest visible element in the viewpoint. Common causes of poor LCP are:

• Slow Server Response Times
• Render-blocking JavaScript and CSS
• Slow Resource Load Times

How To Improve LCP

For optimal website performance, start by cleaning up your website. You don’t need a multitude of plugins and accessories to build a website. In most cases, a lot of plugins cause a lot of bugs and you’re more likely to experience troubleshooting delays.

1. Upgrade your web host. Check your hosting provider, you should be using the latest PHP version and not an older one.
2. Optimize Images.  Images can be compressed, converted, made smaller in size, etc. Setting image dimensions and using formats that are quick to load (videos instead of GIFs) are small steps you can take to improve your LCP score. Next-gen image formats offer improved loading times, compression and quality image characteristics. WebP, for example, serves as an excellent replacement for JPEG and PNG, sometimes even for GIF images. It also supports animated images, without decreasing the image quality.
3. Check Your JavaScript. It’s used on client-side and server-side to make your website interactive. The problem is that you could run into some troubleshooting if your JavaScript is old. It can slow down your page loading speed if the JavaScript hasn’t been updated in a while. The easiest way to clean this up is by removing unused code, updating code and making sure it’s compatible with modern browsers.
4. Minify Cascading Style Sheets (CSS). CCS is a type of style sheet language, written in a markup language like HTML. It’s used to describe document layout and web page structures. If CSS files are not optimized properly, they can block rendering. Meaning that they keep the server busy before it can render the total page. Now, Critical CSS is used to extract the CSS for above-the-fold content in order to render content as fast as possible. This allows above-the-fold content to charge first, before loading the rest. There is no need for all the content to load at the same time, the rest of the CSS can be loaded in an asynchronous manner.

First Input Delay

FID = how long it takes the browser to respond to the first action a user performs.

Main Low Performance Problems

Most likely, when you experience an input delay, the browser is too busy trying to load something else. This means it can’t respond to the user just yet. Commonly this is due to the browser trying to process large JavaScripts or reading large quantities of code, all trying to load together. Common causes of poor LCP are:

Disordered Coding

• JavaScripts
• Third-Party Scripts

How To Improve FID

Plain and simple, you don’t want a bulk amount of code that the server is trying to process. Using a cache and optimization plugin will help your website to access code quicker and speed up FID.

1. Cleanup Code. The easiest way to optimize FIP is by ordering your code. Cleaning up your website will ensure that the server spends less time trying to retrieve data from multiple sources before it can focus on the current action the user is trying to perform. Optimisation tools, like WP Rocket, will show you what code is slowing your website down and what is causing delays. Using an optimisation tool will speed up your cleanup process, as well as assist in improving your SEO rankings and conversions.
2. Remove any unnecessary third-party scripts. A third-party script is a JavaScript resource that’s loaded into a webpage. It’s main purpose is to provide an additional function to the main functionality of the webpage. If a third-party script is loading in the background or if the server is trying to fetch code, it can cause a single-point of failure (SPOF). You never want unused or unnecessary code to load. It slows down your website and can cause it to crash when the server is processing a bulk amount of information from multiple parties at once.
3. Use A Browser Cache. A browser cache, or web cache, is a system for optimizing the World Wide Web. When you use a browser like Google Chrome, caches store data from websites. Cleaning them up can improve loading times and formatting issues on websites.
4. Balance Content. Both for loading time and input delay, make sure the content on your page is balanced. Really consider what you’re showing on which page, especially when using third-party code and plugins. Make sure that code being loaded always serves a purpose. Think about where your content goes and what you show on a specific page. If a page doesn’t need a certain action like a “subscribe now” button, move it to where it’s most relevant.

Cumulative Layout Shift

CLS = page stability. You don’t want elements to make sudden shifts or move around on your page.

Main Low Performance Problems

Again, you don’t want a large sum of content on your page that can distort the layout. You have to give your website and its pages a specific set of criterias to follow. It needs to know dimensions, when to load what content, when to access what code, etc. Common causes of poor CLS are:

• Images without dimensions
• Ads, embeds and iframes without dimensions
• Content being injected into the page by late running JavaScript
• Actions waiting for a network response
• Dynamic content

How To Improve 

The easiest way to improve CLS is by always including size attributes on your image and video content. A good way to achieve a healthy CLS score is by using embeds to determine and to specify dimensions. Using a placeholder or fallback is also a good way to stop elements from shifting.

1. Set Dimensions. One of the easiest ways to solve this is by setting width and height dimensions on images and iFrames. Without specified dimensions, an image will cause the subsequent content to shift to crease space for it after it downloads. Pre-defining your image aspect ratios for banners, static contents and video material already makes it easier to control CLS.
2. Reserve space for ads elements. Appoint a block for advertisements, make sure they know exactly where to go. Otherwise, sudden ads can appear on the page without a designated space and push content around.
3. Embeds and iFrames. You can set fixed widgets to embed portable web content in your page. For example, YouTube videos, Google Maps, social media posts, etc. To ensure that content doesn’t shift, you can preset enough space for embeds to load in, with a placeholder or fallback. One possible way to do this is to get the height of your final embed by inspecting it with your browser developer tools. When the embed loads, the contained iFrame will resize to fit the content.
4. Dynamic Content. Try not to insert new content above existing content, unless it’s in response to a user interaction. You have to pre-plan this, so that unexpected layout shifts don’t happen when new content pops up. Again, be specific when coding. Make sure your site knows where to put a piece of content once the code is loaded.

How to evaluate your Core Web Vitals

There are online free tools available to help you. We recommend using Google Search Console or Pagespeed Insights for this. Important to know is that there are different data sets that are included in your evaluation. Field data is used by Google to rank your website, whereas lab data is useful to test your website for optimization opportunities.

Field Data

Field data is the page speed metrics of real users that Google collects. Data can only be collected from users who have opted-in to send anonymized performance information from their real life experience on a web page. The collected data is then used to calculate the page speed metrics.

In Pagespeed Insights (PSI), you can now access page performance reports, based on data collected from both mobile and desktop devices. To collect field data, PSI needs a URL to look up in the ​​Chrome User Experience Report (CrUX) dataset.

If there’s data available on that specific URL, PSI will compile reports for LCP, FID, CSL and First Contentful Paint (FCP). When starting to optimize your website for the Core Web Vitals, you can use Google Search Console to identify site pages that need attention. Once you’ve identified the problematic pages, you can consult PageSpeed Insights to diagnose lab and field issues on your pages.

Lab Data

Lab data is based on a simulated load of a page on a single device and fixed set of network conditions. {Lab data is artificial, based on a single moment in time} that’s regulated by a predefined device, location and internet connection.

Google Lighthouse is a tool used to estimate what a page speed score may be. This is only a simulation, performed under a controlled environment. It only produces estimated values. You can also get lab data from PageSpeed Insights.