The Ultimate Guide to Understanding Google's New Algorithm

How Do Core Web Vitials Effect My Business?

In June 2021, Google released a new update to their search engine algorithm that brings in new ranking factors to determine how websites are "graded & scored" and consequently ranked on their search engine. As a result, poorly optimized or built websites are now moving down on relevant SERPS (Search Engine Results Page). Lowering your position on search engines can be very concerning for small businesses that rely on their website to bring in new customers.

Understanding Google's Core Web Vitals

This new update's most prominent ranking signals are mobile responsiveness, Largest Contentful Paint, and Cumulative Layout Shift. Each one is independently important, and combined help Google determine what makes a good website. We will discuss each one in-depth and show you how you can fix each of them. By the end of this post, you will completely understand Google's Core Web Vitals, and we will show you how to improve each of the most significant problems quickly and efficiently.

Largest Contentful Paint (Loading Time)

Largest Contentful Paint (LCP) is defined by Google as The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport relative to when the page first started loading. Simply put, it means how long it takes to load the largest picture or element on your website. Elements that are included are:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements (the poster image is used)
• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children.

Most of this is beyond the scope of this posting, but it is essential to understand how it works.

Google suggests that your LCP loads in 2.5 seconds or less for it to be considered good.

First Input Delay (Time until Interactive)

First Input Delay (FID) measures the time it takes from when the website starts loading until a user can interact with it (click on a link or add something to the cart). First Input Delay is an important metric because it helps identify two key issues: how long a user waits until they can find what they need and how clean and optimized the code is.

We have all been there before; we visit a website - try to click on a link or scroll down, and the website freezes or is unresponsive. That is FID, the latency between the website and the user being able to interact with it. It is caused by the browser trying to run the website's code while the website looks like it is fully loaded.

Cumulative Layout Shift (Visual Stability)

Have you ever been reading an article on a website (Looking at you News Companies) and as you try to scroll down, a popup occurs, and BOOM - you accidentally click on the button and get redirected only for you to have to wait for the page to load then go back to the previous article and find your place? That's Cumulative Layout Shift. This video from Web.dev perfectly summarizes what CLS is

Many different reasons cause cumulative Layout Shift (CLS); a few of the main culprits are:

• Images with no height and width attributes
• Font fallbacks that are smaller or larger than the unloaded font
• A widget that dynamically resizes itself

CLS is measured by the number of elements that change throughout the entire lifespan of the page.

How To Fix These Issues?

When it comes to fixing these issues, many of them are intertwined with similar solutions for both. Once you understand Google's Core Web Vitals, implementing the required changes will be much simpler, and your score will drastically increase to help your Google Ranking.

Fixing Largest Contentful Paint

To fix the Largest Contentful Paint, you need to decrease your loading times; they are usually caused by large files (images and videos), 3rd party scripts or embeds, and slow servers.

Large Files

To fix your large file sizes, you need to upload smaller images. Gone are the days when you could upload a 5000 x 5000 image. The maximum sized image you should ever use on a website is 2048 x 2048. Anything bigger than this is a waste of bandwidth and loading times. You also need to optimize your images through an image optimizer - Squoosh is an excellent application for this. However, it is very cumbersome to do each image one at a time.

For Sigma+, we automatically resize all images you upload to your website (yes, you can still upload your 5000 x 5000 photos!). Next, we pass them through an Award Winning Image Optimizer, all without any effort from your end. After that, you upload them as expected, and we do everything behind the scenes. Additionally, we automatically convert all JPGs and non-transparent PNGs to WebP to reduce the file size by another 20% - 30%.

Then we dynamically size images based on the type of device your visitors are using and let the browser decide which size is the best by using the Srcset HTML Property.

As an additional speed boost, we lazy load all images and videos on the website so that they only load once the viewer scrolls to that position on the website.

Another severely underused Image format is Scalable Vector Graphics (SVG). It is not an image but rather a block of code that tells the browser to create this image. SVG's are significantly smaller in size and reduce loading times. They are great for logos or other small graphics. However, the file size will quickly become larger than a typical image if it is very complex.

As you can see in the comparison of our two logos above, the SVG clearly wins. The PNG version is 13.4kb, which is 4.6x larger than the SVG. Additionally, the SVG is a vector graphic, so the image will never become pixelated. Try it out! Zoom in on your computer or phone, and you will see that the PNG will become pixelated while the SVG remains pixel-perfect.

Slow Servers

While most website hosting plans you find at the big companies are cheap, they are also very slow and shared with dozens if not hundreds of other websites. This is called shared hosting, and avoid it as much as possible! Should you still want to host with a cheap server, then there are a few solutions. You should apply all the solutions listed to all websites regardless of the server.

When you purchase any plan from Sigma+, we put your website on its own server to ensure that no one else can slow it down!

When optimizing your website, you need to add/enable caching on both the browser and server to ensure that the end viewer receives an already loaded version of your website instead of their computer or phone having to download all of it.

Next, once you have added/enabled caching, you need to minify your CSS and Javascript to reduce the time it takes to load. Also, if you have the ability, selectively load which assets are loaded on each page of yours to ensure that unused code is not being processed for a page that is not using it.

When we initially created our business & Sigma+, we had speed optimization in mind. Therefore, each page of your website selectively loads only the needed files, increasing your loading speeds drastically.

Fixing First Input Delay

Reducing First Input Delay is a bit trickier than optimizing your images. To fix FIP, you will need to reduce your dependence on 3rd party code libraries (yes, we all love chat widgets and nice animations). In our case, we decided that we did want a chat widget on our website, so we reduced our dependency on other libraries to ensure that we would keep the chat widget.

One example of this that we see from many of our customer's previous websites is that they have a plugin for this and a plugin for that. One recent case study we evaluated was a new customer of ours who had a slow website, so we took a look. We found that he was using multiple WordPress Plugins to create his image sliders and carousels. In this case, he unknowingly loaded in two different image slider codebases when he only needed one.

Some of our customer's websites use sliders for the images and galleries. However, we use them sparingly and with great attention to detail to keep our Core Web Vitals in line.

Fixing Cumulative Layout Shift

One of the most essential Core Web Vital to improving a good UI/UX Experience for the customer is CLS. Fixing Cumulative Layout Shift is much easier than the other two ranking signals.

Adding image height & width attributes to all images throughout your website conveys to your website browser that it needs to keep that space free for when the picture will load. If you do not add these attributes when the image loads, the browser will have to retroactively make space for the image after the website's layout has loaded.

When creating animations with Javascript or CSS, use the transform property instead of paddings or margins to prevent the elements from shifting other elements.

Lastly, please do not load more unexpected content after it appears that the website has already fully loaded!

Wrapping Up

We hope that after reading this article you have a better understanding of Google's Core Web Vitals and how they can affect your business and how you can easily fix these issues to continue growing your search engine ranking.

How Well Our Website Design Software Performs

We tested our website to showcase how well we understand Google's Core Web Vitals and how we have implemented them for our software. You can see the results below (yep, that's 100%)!