In this article, a veteran web development expert Sandeepa Nayak of Kha Creation discusses the significance of Core Web Vitals. Important links mentioned in this episode: 

​

Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

​

Google: Core Web Vitals Becoming Ranking Signals in May 2021: https://www.searchenginejournal.com/google-core-web-vitals-ranking-signals/387142/

​

1. Largest Contentful Paint

The largest contentful paint (LCP) is the largest element, an image or a video, that the visitor sees after the site loads. It is simply the time it takes for the user to see any content on their browser. The time it takes for the largest element to appear is estimated. Websites don't load all at once, you will see that the elements appear in an order that seems almost random if you open any website. LCP, along with FCP, on average, tells you how long it takes for the elements of each page to load. You should increase the speed of sites around the board by reducing them. For a WP site that is on a managed WP hosting service. There are tools or plugins that will allow you to get low LCP and make your site load faster.  

 

The following are some tips on how to reduce your LCP (and FCP)

 

• Compress the graphics of your website. Usually, media files are among the largest components on any website. You are going to need a way to lower those image loading times. Compressing images before or when you upload them to WordPress is the easiest way to do this. An online application like TinyPNG can be used. It helps you to upload and compress photos without a big loss of quality. If you want to take a more automated approach, you may use some plugins, such as the ShortPixel Image Optimizer and Smush, instead. Even if you upload vast amounts of photos to your web, both are simple to configure and function well.
  It is important to make sure that image details, like the width and height, were filled in when adding an image to your site, not just making the image as optimized as possible. That way the server won’t have to take time to calculate it because there is already a space allocated for it. It can avoid delay in rendering the whole page. 

 

• Consider introducing lazy loading. Browsers usually don't make the images of your pages load in order. As they finish loading, pictures and graphics appear. Depending on the file’s' size, the link, and other variables, the time it takes for them to do so can vary.
  Lazy loading defers certain images from rendering before they come into view by users scrolling down. It is an old-school technique to get images loaded slower by kind of fooling Google that there is an image. Once it is loaded, it suddenly becomes clear. This will help, in principle, your FCP times. This only works, however, if you enforce lazy loading for the correct elements. You can not use this technique for above-the-fold photos to get the best results. Meaning those that are used in the first part of the page that you can see.
   

• Allow caching for sites. Caching is a mechanism that takes some of the elements of your web and stores them either in the browsers of your users or on a remote server. The simplest implementation with some of the best performance is provided by web caching. There are lots of plugins for WordPress that will get the job done for you.
   

• Optimize JavaScript and CSS Script on your web. Photos are not the only components in need of compression. For elements of their functionality and design, most modern websites rely heavily on JavaScript and CSS. Usually, those scripts don't weigh a whole lot. However the more you use it, the more they add up. In addition, browsers need to separately execute each script, which can have a major performance effect.

 

2. First Input Delay

First input delay is the delay in time the site responds to any action that a visitor takes on the site, including a button click, link click, etc. A first impression can make the difference between someone leaving and never returning, to a loyal customer. When building experiences on the web, first impressions are important. It can take plenty of different forms on the website, like speed and responsiveness. FID makes it easier to measure a site’s speed and reactivity. It calculates the delay from the moment that a user first interacts with a page to the time that the browser is able to begin to process event managers.

Sites must aim to achieve an initial input delay of fewer than 100 milliseconds in order to provide a good user experience. To ensure that the 75th percentage of page loads, segmented between mobile and desktop devices, meets this goal for most of your users. FID should be as low as possible. It is only possible when your site is on a good managed server. That is why it is recommended that your website, WordPress, or other sites, be on a managed server. 

Heavy JavaScript execution is the big cause of poor FID. FID can be directly reduced by optimizing how JavaScript parses, compiles, and executes on your web page. 

​

Here are some of the methods you can use to improve FID:

​

• Break up long tasks. It can be helpful to break down long-running code into smaller, asynchronous tasks if you have already tried to reduce the amount of JavaScript that loads on a single page. Long tasks are execution cycles of JavaScript in which users can find your UI unresponsive. Any code piece that blocks 50 ms or more of the main thread can be described as a long task. Long tasks are a warning of the future bloat of JavaScript, loading and executing more than a user may need right now. Splitting up long tasks on your site will decrease the input delay. As you follow best practices such as code-splitting and breaking up your long projects, FID can increase significantly.
   

• Optimize your page for interaction readiness. In web apps that heavily rely on JavaScript, there is a range of common causes of low FID and TBT scores. Some of those are first-party script execution, Data-fetching, and Third-party script execution. 
   

• Use a web worker.  One of the key causes of the input delay is a blocked main thread. On a background thread, site workers make it possible to run JavaScript. Moving non-UI operations to a separate worker thread will minimize blocking time for main threads and thus increase FID.
   

• Reduce JavaScript Execution time.  Limiting the amount of JavaScript on your page decreases the time taken by the browser to run the JavaScript code. This speeds up how fast any user interactions can begin to be responded to by the browser. You can reduce unused JavaScript and minimize unused polyfills to decrease the amount of JavaScript executed on your website.

 

3. Cumulative Layout shifts

The cumulative layout shifts are a score that is calculated based on the elements shifting in positions when the page actually loads. The best example is the news sites with too many adverts. When the page loads, the content keeps on shifting due to the ads loading in between the content. The lower the score the better. Minimizing CLS is vital since a bad user experience can be triggered by pages that switch around. A poor CLS score is reflective of problems that can be solved with coding.

​

Factors to avoid to improve CLS

​

• Images without dimensions. The height and width of photographs and videos must be declared in the HTML. Make sure that the different image sizes for the various viewports use the same aspect ratio with regard to sensitive images.
   

• Ads, embeds, and iframes without dimensions. This is a bit difficult to manage. But, one way to manage CLS ads is by styling the element where the ad will be shown. If an ad element does not display an ad you can set it to fill the room with an alternate banner ad or placeholder image.
   

• Dynamically injected content. This is the material of the web page. For instance, in WordPress, you can connect the video to a YouTube video or a Tweet, and the video or the tweet will appear as an embedded item.
   

• Web Fonts causing FOIT/FOUT. Web fonts downloaded can trigger the so-called Invisible Text Flash (IX) and Unstyled Text Flash (FOUT). A way of preventing this is to use rel="preload" in the Web font download link. Lighthouse will help you diagnose the CLS.
   

About Sandeepa Nayak, guest of Local SEO in 10

Sandeepa Nayak, the founder of Kha Creation, has been directing website development projects for over 22 years. She has grown her company from a few associates into a premier company: Kha Creation, based in Pleasant Hill, California, with a team of 19 strong in Mumbai, India to back her up and bring thousands of projects to fruition.