Media Street have been offering a diverse range of digital services to local and international businesses for over 10 years. With a credible client portfolio and a wide knowledge of all-things-digital, we have helped businesses grow through creative website and graphic design, successful marketing campaigns and competitive hosting packages, plus much more. Take a further look into our latest news articles, learn more about our staff and how we can help your business excel with our FAQs and testimonials
Back in May 2020, Google introduced us to their Core Web Vitals, a set of metrics that relate to the speed, responsiveness and visual ability of a website. Fast forward to 2021 and Google has provided an update with regards to their Core Web Vitals, informing us that they are to become search ranking factors in May.
Following the latest development on this Google update, we take a closer look at what the Core Web Vitals actually are, how they can affect your SEO performance and ask, how can we prepare websites for when they become ranking factors in May? Read on to find out more and to determine how our web design team and SEO specialists can help adjust your website in line with Google’s latest and upcoming ranking algorithm.
What Are The Core Web Vitals?
Before we look at the Core Web Vitals themselves, let’s take a quick look at the reasoning behind the decision to include these as ranking factors. Firstly, Google introduced Core Web Vitals to ensure website owners create sites that are easy, simple and satisfying for every individual to use. Another reason is to allow site owners to accurately measure user experience (UX) on their website. Making sure clickable elements are well spaced out – to encourage a lower page bounce rate and better overall navigation of the website – thereby negating the risk of accidental clicks, is a prime example of providing a good user experience. Now, let’s delve into the three things that have been defined as the Core Web Vitals:
Largest Contentful Paint
Largest contentful paint refers to the time it takes for the main contents of a page to load. Google looks at elements such as the render time, largest image, video and text, within the viewport. It is the largest element of the viewport that Google is most interested in when determining how fast your page is to load. So, what’s considered as a good largest contentful paint measurement?
For any given page, you should be aiming for a largest contentful paint measurement of 2.5 seconds or faster.
It is always beneficial to test your homepage first, as this is likely the page with the most elements and therefore could be the slowest to load. For testing purposes, you can use platforms such as Pingdom Tools, which shows you the load time of the URL entered. Google’s PageSpeed Insights is another useful platform and this tool shows you a speed score on both desktop and mobile.
First Input Delay
A good first input delay measurement is under 100ms.
Cumulative Layout Shift
The third of Google’s relatively new Core Web Vitals is cumulative layout shift. This ranking factor involves the time it takes a web page to be stable, in terms of elements moving about on the page. For example, if you go onto a website and attempt to click a button but the screen shifts and you end up missing the button or clicking elsewhere, the cumulative layout shift is still rendering. So it’s the time it takes for all page elements to be stable and easily clickable or viewable. What is an acceptable cumulative layout shift measurement?
You should be aiming for a measurement of less than 0.1 seconds.
Other User Experience (UX) Factors To Consider
The three Core Web Vitals are new ranking factors and, as mentioned, are due to become active ranking factors in May 2021. However, there are also some existing ranking factors relating to user experience, which will work in conjunction with the Core Web Vitals, to determine how well your website ranks in organic search listings. These are the existing factors to be mindful of:
Mobile Friendly – Is your website optimised for mobile? In March 2018, Google rolled out mobile-first indexing, meaning it crawls the mobile version of your site before going onto the desktop version.
Safe Browsing – Google reports safety issues to site owners and managers through Search Console, flagging up issues such as harmful content, deceptive sites and unwanted software. It is important to show search engines that your site is safe, in order for it to rank well.
HTTPS – This relates to encrypting data on your website and ensuring a user’s data is protected. Installing a Secure Sockets Layer (SSL) certificate on your website will ensure you have https in your domain. This is one factor that our hosting team can take care, through the application of our hosting add ons.
Intrusive Interstitial Guidelines – This factor relates to the accessibility of content. Users and search engines alike want your content to be accessible immediately after the click from search results. Elements such as pop-ups, overlapping features and notices that a user has to dismiss before accessing the content can affect the way your page and site ranks.
How Can I Prepare For Google’s Core Web Vitals Update?
If you are a website owner, now is the time to ask yourself, how can I prepare for Google’s user experience update? Just like with any major Google update, if you aren’t proactive in adapting to match the algorithm, you run the risk of being left behind in the rankings. Therefore, Media Street advises that you consult your marketing and web design teams about the impending ranking factors and ensure that these things will be taken care of.
There are a number of things that should be looked at in correspondence with the Core Web Vitals, such as those listed in our other user experience factors to consider. If you have a Google Search Console account for your website, you can go to the new Core Web Vitals Report section to discover any issues that have been flagged up by the search engine. Equally, you could also run a test in Google’s PageSpeed Insights for a more detailed breakdown of the issues. We will now take a look at some examples of reported issues in PageSpeed Insights.
Actively Actioning Issues With Core Web Vitals – Examples
As well as showing you the speed scores of your website on both desktop and mobile, Google’s PageSpeed Insights also indicates how you can improve your site speed and hit all the right notes when it comes to the Core Web Vitals. The image above shows a site that has a poor performance in terms of speed, as well as statistics on how the site is doing in relation to the new Core Web Vitals. Here, we provide examples of ‘need for improvement’ signals shown through the platform and some information on how to action the warnings.
Lazy Loading – Images
The above is an example of warnings being shown, as a result of a website not having lazy load applied to images. Cited under the ‘improvements’ section of the PageSpeed Insights results, Google is notifying us of the images in question, their resource size and the potential savings. These savings can be achieved by implementing lazy loading on the images, which can be applied through image compression plugins such as Smush Pro.
Effectively, when applied, only the images the user sees on the page, i.e. at the very top, are loaded first. As the user scrolls down the page, the other images are loaded and displayed. As we can see from the image above, there is a lot of potential savings per image and deferring these off screen images could save 11.7 seconds. So, to make your page load faster and use less bandwidth, fix the “defer offscreen images” recommendation, shown in the results of a Google PageSpeed test.
Lazy Loading – Scripts
Just as you can speed up a website by lazy loading the images, you can improve the fastness of a website by lazy loading and deferring scripts. This site speed improvement opportunity is cited under ‘eliminate render-blocking resources’ in PageSpeed Insights results. It involves minimising the amount of scripts that load on a page and the fix is delaying their load, so that they don’t load instantly.
Remove Unused CSS (Style)
In PageSpeed test results for your website, you may also see ‘remove unused CSS’, which is also under the ‘opportunity’ section. This message relates to the loading of styles that are not actually being used on a page. For the above, the website is loading styles that aren’t actually being used on this page. Therefore, the fix would be removing the stated CSS style code from the page inputted for the test.
Serve Images In A Next-Gen Image Format – WebP
This warning is letting you know that your website could operate much quicker if the images were in a next-gen format. As the image shows, the resource size of both images is large and there are huge potential savings to benefit from. This can be achieved by making the switch to a next-gen format.
The next-gen image formats available include JPEG 2000, JPEG XR, and WebP. These are formats that have far superior compression and quality characteristics, when compared to older formats such as JPEG and PNG. Plugins such as SmushPro, as well as other similar services, are able to convert images from JPEG to WebP, for example.
Having Properly Sized Images
Another thing to consider in relation to images and the Core Web Vitals is having correctly sized images. In the case of this website in the image, they have some images that are bigger in size than how they appear on the actual site. Uploading an image that is 800×800 and showing the same image on your site as 400×400 can cause speed issues, as the uploaded image is twice the size it needs to be in it’s display. Therefore, checking for this message in PageSpeed Insights and actioning the image changes can shave valuable seconds off of the page load time.
Minify CSS Scripts
Something else to look out for when assessing your site’s performance against the Core Web Vitals is minifying CSS scripts. This relates to the amount of lines and space your code takes up. For example, having big spaces between lines of code and just a few characters per line takes up a lot of space. The fix is to eradicate those spaces and ensure your code is laid out just as it would be if you were writing a paragraph, where possible. Getting rid of unnecessary gaps and blank lines in the code is how you can minify CSS scripts and contribute to the fast running of your website.
How Can Our Web Designers In Exeter & SEO Team Help?
As a full service digital agency in Exeter, we have a dedicated team of highly skilled web developers. Our web developers are already looking at our existing clients’ websites and ensuring that the new Core Web Vitals are present. If you are a current client of Media Street and would like to discuss what we are doing to adhere to the new ranking factors that will impact your website, please contact us today.
Equally, if you own a website and would like to discuss how we can ensure the new ranking factors have a positive impact on your site, get in touch on 01392 914033. Our web design team, together with our Exeter SEO specialists, are here to assess your site against the Core Web Vitals to make sure your website is fast, responsive and safe to use on both desktop and mobile.