Optimizing Core Web Vitals – Google’s Recommendations

Website speed and mobile functionality have become more and more important over the years. Users on Google and other platforms expect that sites load and function as fast as possible to navigate their journey. 

Google’s main function is to provide the best user experience for their users, and site speed is a factor when getting sites to rank on Google. Google breaks down site speed into three main categories for providing the best user experience:

• The Largest Contentful Paint (LCP) - Measures the time in which the primary content loads for the user
• Cumulative Layout Shift (CLS) - Measurement of how much a webpage unexpectedly shifts during its life. 
• First Input Delay (FID) - web performance and user experience metric that tracks the time from when a visitor first interacts with a web page to the time when the browser starts processing the interaction. This is sometimes called Input Latency.

The Google Chrome Team in the past would provide guidelines or suggestions on how to improve your site to meet the standards Google expects. Recently Google updated those requirements to help businesses stay on top of their site's core web vitals and rank as high as possible.

Below I will break down the recommendations per the three core web vitals mentioned above. 

Largest Contentful Paint -  Recommendations

As mentioned early, Largest Contentful Paint is measured by the time in which the primary content (or initial splash) loads for the user. About 50% of sites on the internet meet the requirements Google has set out. 

Many sites don't pass this because their video or image content is large and takes a while to load. Google has suggested doing the following to help pass this test more consistently. 

Source

Optimize your HTML to make it easy to find

When websites go through a list of priorities for loading, it is normal for sites to have their scripts in their header to load first. Most sites have an image as their main content, usually in the header section of the site. Websites need to make that image a priority when having their site load. 

The best option is to add the image as an image tag in the header before the scripts in the header. Also, it is important to avoid lazy loaders or image optimizer plugins to get the job done, which is just a shortcut. 

Improve Your Hosting Provider & Use a CDN

One of the most underrated ways to speed up your site and content delivery is to improve your hosting and use a Content Delivery Network. A Content Delivery Network (Also known as a CDN) is a geographically distributed group of servers which work together to provide fast delivery of Internet content. 

CDNs allow for faster delivery of scripts, images and content from sites using these servers. Many hosting providers offer CDNs, and they should be used by every business on their site. 

Cumulative Layout Shift - Recommendations

As mentioned earlier, CLS measures the amount of unexpected shifting a website will do while loading. 

It was normal in the past for websites to have websites load from left to right, forcing aspects to load and shift as other slower aspects loaded in. 

Set Parameters to Image Size 

One easy way to control shifting is to set parameters through CSS and HTML for the size of content to avoid resizing the content. Before responsive websites, it was a bit easier to set these standards as sites were separated by mobile desktop and tablet, and you could set images based on set pixels sizes. 

Now you can set the parameters by aspect ratio in the code of the site so that oversized images do not need to be resized.

Avoid Animation & Popups

This is caused frequently by popups of notifications on sites, cookie opt-in popups and animations of design features. This can greatly affect the CLS because the website has to adjust for these asks during and after the loading of the website. Although it is flashy and nice for design, try to avoid it as it is unnecessary for websites

First Input Delay - Recommendations

As stated above, First Input Delay measures how quickly a website responds to user input. In simpler terms, it is a gauge of, when you click on a link or button, how quickly it loads or accepts the interaction. Most websites pass this test, but it is important to ensure all aspects are optimized to not cause input delay. 

Source

Avoid Unnecessary Javascripts

Many sites implement Javascript to track users on their site or just get their website to function. You want to make sure that you are condensing or removing scripts that you are not using. Javascript is commonly placed in the header of the site, so it functions on all pages, but it also means that it needs to load every time a user navigates. For the businesses that I manage, I try to condense them as much as possible or remove ones that I am not currently using

Avoid Long String of Tasks

Similar to the recommendation above, it is more ideal to make sure you break up tasks to prevent delay. For example, if a page has to load 20 scripts or inputs before the page finally load, it is better to break it up into two loads of 10 to break up the string. 

Overall these recommendations can be technical, but some are easily implemented by someone who has a basic understanding of coding and websites. In order for you to understand what your current score is for the three mentioned measurements, you can run a test at gtmetrix.com or by using the internal Lighthouse tool in Chrome. 

Both provide an overall score of the site and for each category that Google measures. These tools also let you know how you can improve your site for each section. 

Final Thoughts 

While all of this might seem a bit confusing, I cannot overstate the importance of website loading speed. Today's users expect their websites to load almost instantly, and more than 50% of websites are abandoned if they take more than three seconds to load. In an age of instant gratification, users have no time to waste on websites that lag or don't meet their expectations. 

Want to get some recommendations on how to optimize your website loading speed? TechWyse can help. Get in touch with a TechWyse expert today, and we can help you not only ensure your website is working fast and efficiently, but also improve overall user experience with responsive web design.