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.
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 (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:
<image>elements inside an
<video>elements (the poster image is used)
url()function (as opposed to a CSS gradient)
Most of this is beyond the scope of this posting, but it is essential to understand how it works.
Quick Fact: 39% of people will stop engaging with a website if images won’t load or take too long to loadRead More Quick Facts
Google suggests that your LCP loads in 2.5 seconds or less for it to be considered good.
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.
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:
CLS is measured by the number of elements that change throughout the entire lifespan of the page.
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.
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.
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 DIY Web Designs, 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 46kb, which is 2.8x 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.
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.
Quick Fact: 47% of Users expect a maximum of 2 seconds loading time for an average websiteRead More Quick Facts
When you purchase any plan from DIY Web Designs, 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.
When we initially created DIY Web Designs, we had speed optimization in mind. Therefore, each page of your website selectively loads only the needed files, increasing your loading speeds drastically.
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 website templates 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.
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.
Lastly, please do not load more unexpected content after it appears that the website has already fully loaded!
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 but also how you can easily fix these issues to continue growing your search engine ranking.
We tested our Food Truck Website Template from our design library 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!