In June, Google will implement Core Web Vitals, their new metrics for measuring how well a website performs. Websites that score well on Core Web Vitals will be favoured by Google and rank higher than other sites. Basically meaning any sites that score well on this new metric will have incredible SEO because they provide their visitors with a great overall experience. 

Avanty has been preparing for Core Web Vitals for months, working behind the scenes so that your websites are ready right as they come into play in June. We want to share with you some of the improvements we’ve made, and how they affect your websites, so you’re confident knowing that your websites are in tip top shape to perform well in this new metric system.

What are Core Web Vitals?

Back in May 2020, Core Web Vitals were announced to be Google’s latest experience and performance metrics system, to raise the bar of how websites should perform. These new metrics are based on live website activities, rather than Google bots. You can read more about them here.

What do the Core Web Vitals include?

The Core Web Vitals are divided into the following 3 metrics:

• Cumulative Layout Shift (CLS) is a metric that identifies how often users experience unexpected shifts in the site layout. We've all been on a website when it all of a sudden starts shifting and things move when you don't want them to. These shifts are annoying, right!? Well not only are they annoying but they can also harm the whole user experience, causing the drop off rate to increase.. For example, if a user goes to click on a button and the position of that button moves because the layout moves, visitors will end up clicking on nothing. The exact opposite of what you want.

• Largest Contentful Paint (LCP) is a metric for how long it takes for the largest image or text block  to display on the website, relative to when the page first started loading. In this case, the quicker the better.



• First Input Delay (FID) is a metric that helps measure a visitor’s first impression of a website's responsiveness and interactivity. This means it measures things such as the time from when a user first interacts with a page on the site (i.e., clicks on a link) to the time when the browser begins responding to that particular interaction.

Your sites are ready to perform because we have been preparing

To make sure that you're ready for Google’s new metrics, and to make sure your customers continue to have a great experience on your website, we at Avanty have worked really hard to improve the infrastructure that will improve your Core Web Value metrics. Below are a few problems we've resolved over the last few months, in order for your websites to score highly in the new Core Web Value metrics. We will break them down into the different metrics mentioned above, so you can see how these changes will work in your website's favour come June 2021:

CLS Improvements

• There is now a set min-height on all photo galleries - Avanty sets the min-height CSS property of the Photo Gallery, to reserve space on the page for loading the photo gallery. This prevents the content below the gallery from being pushed down or shifting as the images load.

• We've added height and width to images to avoid layout shift - image loading is the biggest cause of layout shifting on the internet, because browsers have no way of knowing the dimensions/size of an image before it's fully downloaded.With this in mind, Avanty automatically identifies the width and height of an image, and sets these attributes on the image HTML tag. This allows internet browsers to reserve the right amount of space for the images whilst they download. Don't worry, setting the height and width of an image does not make it non-responsive. Instead, internet browsers now use the image’s height and width attributes to calculate its aspect ratio so images automatically take up just the right amount of space.
  

• Embedding every font even if they are custom - fonts are often big and heavy, and browsers usually load fonts such Arial, Georgia, Sans, etc first before custom fonts - yet custom fonts are becoming more and more popular. Once the custom font is finished loading, the browser then adds the custom font, which tends to cause the custom font to jump on the website. You may have noticed this when visiting a website and as the page loads you see a standard font load then all of a sudden a new font loads up and causes the page to move around. This kind of jumping has a negative impact on the user's experience on the website. To solve this, Avanty now automatically detects which custom fonts are used in above-the-fold content on each page, downloads that font, and embeds it directly into the HTML of the page, all up to the size of 50kb. This means internet browsers no longer need to go and fetch the custom font, and can display it immediately, without any fuss.

LCP Improvements

• Optimising every background image slider loading - Avanty now prioritises loading the first image in the Image Slider applied to a website, and then loads the other images after, to improve how quickly the first image loads.

• Instructing which resources are priority (CSS loading priorities hints) - Avanty now gives all internet browsers hints about which content/ resources should be prioritised when downloading a page's content. This helps browsers focus on the required content to achieve faster page loading time. 

CLS and LCP Improvements

• Optimising the use of images in widgets - previously images within widgets were not sized to the correct screen size and did not automatically have width/height dimensions added to them. As of now, all image width and height improvements have been implemented to the builder.

Our customers are our priority

We've always placed a huge importance on website performance, and we continue to do so today. Why? Because we want your websites to meet every industry standard so you can provide the very best experience for every visitor. 

We plan to keep you updated on any further improvements as we make them, and want to make sure you know that we’ve got your back when it comes to your website's performance. This is our promise to you, that we're getting everything ready behind-the-scenes - to meet these new standards - so you can all continue to create bespoke and converting websites. 

From the new Google Core Web Vitals updates, it is clear that Google is not just focusing on the content that a website contains, but also the way in which it displays, and how a potential client interacts with a website. The most important thing to always remember, when building a website, is that technically we are serving the customers of Google when they search and find your website, and as we always say Googles' main focus is retaining a good experience to its users. This is clearly demonstrated with the new Core Web Vitals updates.

We're here to help you

On top of making sure that we provide all of our clients with a website platform that is optimised and in line with Google's New Core Web Vitals, as a company we want to go one step further. So with all of our accounts, no matter how big or small, we provide full support and training to ensure you get the best use from your new website. We will be providing this support and training via group training at our offices, where you will be able to choose a date that works best for you and your business and spend a day with us at no charge. We will give you the skills to build a better website, and we will also be providing you with full live chat support, and video support, all of which can be booked directly through your Avanty Dashboard.