In previous months, Google rolled out their Page Experience Update. Also known as the ‘Core Web Vitals’ update, the vitals focus on site loading speed, interactivity and page stability. These all influence the user experience gained from your website. Now, you might wonder how they impact SEO? In this article we will be talking about the page experience rank signals and explain what the Core Web Vitals are, plus why they’re important. As a leading PR agency, we know how important a SEO friendly website is for effective marketing and communications. That’s why we’ll be guiding you through all the need to knows, so that you can prep your website for optimal functionality. Our experts will also give advice to help you troubleshoot.
Page experience is a set of indicators that calculate how site users feel about the experience of interacting with a web page. It measures beyond the pure information value, focusing more on the user value gain.
Before we dive into the Core Web Vitals, let’s take a step back and look at the old page experience signals. Remember, the old signals don’t become ineffective with new updates. They still apply.
In simple terms, Google is a search engine, tasked with matching the Googler’s search with the best results. In the past, the ranking process was very literal and direct to the search intent.
The use of mobile phones is increasing daily and smartphones allow people to access the internet right from the palm of their hand. Due to the growth in popularity to search via mobile phone, Google included mobile-friendliness as a rank signal.
This impacts mobile search results in all languages, globally. In effect, Googlers will find it easier to get relevant, high quality search results that are optimized for mobile. In very basic terms, mobile friendliness means taking an existing desktop site and transitioning the content to fit mobile screens.
Responsive web design: The page uses the same URL and the same code whether the user is on desktop or mobile phone. Only the display adjusts or responds according to the screen size. One of the benefits hereof is that you only need to maintain one version of your site instead of two.
Sections and content formats will most likely have to change and be reorganised to create a small-screen friendly design pattern. The site will rank better if the mobile version is easy to navigate, if common tasks can be completed effectively and if the mobile version is responsive to screen size. Keep in mind that Google likes to find the same content on mobile as on desktop. This means that the desktop content should not dramatically change when formatted. Also, hidden content should be avoided when translating desktop to mobile. Try to keep your mobile content as near to the desktop version as possible, just optimize it for the small screen.
You’ll have to format your content for mobile compatibility, but this doesn’t mean changing the content completely. Responsive web design is a good route to follow, to ensure your content display adjusts or responds according to the screen size - without compromising the effectiveness of your site on desktop or mobile.
In 2007, Google introduced safe browsing. This was done with the means to protect Googlers against fraudulent activity. Safe Browsing is a service that checks URLs against Google's frequently updated lists of unsafe web resources. Examples of unsafe web resources are social engineering sites (phishing and deceptive sites) and sites that host malware or unwanted software. When Google picks up that your site was hacked or their evaluation finds potentially harmful contents to a visitor or their device, the Security Issues report will show Google's findings. Safe Browsing influences rank results, as user security and website trustworthiness is highly valued by Google. This is to keep the public safe against suspicious internet activities.
Safe Browsing was introduced to keep the public protected against fraudulent activity. It’s one way of ensuring trustworthiness in websites and security that your users are protected.
Hypertext Transfer Protocol Secure (HTTPS) is the secure version of HTTP. This is the primary protocol used to send data between a web browser and a website. With HTTPS, code is encrypted so that data can be transferred with an added layer of protection.
Security is greatly prioritised by Google. That’s why HTTPS websites have a higher advantage of ranking over HTTP links. Even when confidential information is not involved, HTTPS offers greater ease of mind that data will not easily be tampered with. Secure sites carry the little locked padlock in the URL bar.
If your site is not secure, Google indicates it as ‘not secure’ in the URL bar. They will also prioritise a secure site on the rank sheet and mark down an unsecure site. This is to encourage website owners to make use of HTPPS, as it is safer for visitors and protects their privacy.
HTTPS = Confidential information is kept safe, for example, banking details and email services. Secure sites are prioritised on the rank sheet and unsecure sites will be marked as ‘not secure’.
Essentially, intrusive pop-ups are large bodies of unimportant content that pops up over the majority of the page, obstructing the site visitor’s activity. When a user’s activity is highly disrupted, it leads to a bad user experience.
On mobile, pop-ups are even worse than on desktop because the screen size is smaller. In many cases with mobile, the interstitial is not responsive. This means that it’s difficult or unworkable to close the ad on a mobile, rendering the page useless for mobile users.
Intrusive pop-ups hinder the website visitor from browsing the site without interruptions. They cover the entire screen and the user cannot access other information before the pop-up is gone.
Google’s Core Web Vitals was launched as a new set of page ranking signals. The old ranking criteria still apply, however, Core Web Vitals are highly user experience-centric. Luckily, Google is very transparent with their list of ranking factors, so you can effectively optimise your strategy for a SEO friendly website.
Where, in previous years, Google focused largely on security and device compatibility, user-centrism has become an equally important factor of rank. After all, Google is a business with the objective of displaying the best search results to their users.
So it’s no surprise that a good user experience is incorporated in the service delivery. With a variety of metrics incorporated in the ranking algorithm, Google aims to show the user the best webpage experience. Hence the creation of Core Web Vitals.
If your webpage isn’t meeting Google’s criteria, then you’ll likely struggle to rank higher. In effect, your business may lose traffic and visibility within Google’s search engine.
Along with the old ranking signals, the Core Web Vitals are set on greatly improving the user experience. Security and device compatibility are still in play, but interactiveness and user-centrism are greatly considered too.
In essence, Google Core Web Vitals is a set of user-centric metrics designed to measure page health, in terms of an uninterrupted user experience. Since the new algorithm release it's one of the main on-page SEO factors. There’s three components that make up the metrics, namely: content loading speed, interactivity and visual stability.
Previously, Google reviewed and ranked pages according to the level of mobile-friendliness, safe browsing and basic experience signals. Now, they’re stepping it up even more! With Core Web Vitals, a website that fails to adhere to the best practices will be scored lower. Meaning that it’ll be ranked lower.
There are +200 ranking factors, but only 7 ranking signals. That’s why they are given a great deal of importance. Out of +200 factors, the more important ones to focus on are:
✔︎ Referring Domains
✔︎ Organic click-through-rate
✔︎ Domaine Authority
✔︎ Mobile Usability
✔︎ Dwell Time
✔︎ Total number of backlinks
✔︎ Content Quality
✔︎ On-page SEO
LCP, FID and CLS make up the set of Core Web Vitals. They are user-centric metrics and accompany mobile-friendliness, safe browsing and basic experience signals to calculate page rank scores.
The Page Experience Update is greatly important to optimize for, because current signals for user experience (UX) will be merged with Core Web Vitals to create a more encompassing “Page Experience” ranking signal. At the end of the day UX and SEO are partners in creating a worthwhile web browsing experience. A positive page experience will keep visitors interacting with your page for longer, also keep them from immediately bouncing to a different site. This, together with other UX factors will impact your page experience score and influence your rank. The quality of your page experience will either directly improve your ranking or cause your ranks to drop if your UX is of a poor quality. Remember, every element and action included on your website should be there to improve visibility, enhance discoverability and benefit interactivity.
Page experience will either directly improve your ranking or cause your ranks to drop if your UX is of a poor quality
You might be wondering what the Page Experience Update entails then? By now, we all know that user friendliness and customer satisfaction is highly important for any brand, business or even website to succeed. So it only makes sense that Google decided it’s time for the Page Experience Update.
The goal of this update is to improve the overall web-browsing experience, on desktop and mobile. Think about it almost like Google cleaning out and tidying up their desk. A neat and organized space makes you feel good, doesn’t it? It’s the same for web browsers, a clean and functioning website just makes the visitor feel better.
Google is a fully-automated search engine. They use software called "web crawlers" to explore the World Wide Web on a regular basis to find sites to add to their index. The purpose of this is to give users the best results that match their search terms. Effectively, the Page Experience Update comes to help Google provide users with only the best search results.
Since user friendly browsing is now highly thought about, the Page Experience Update will factor in user experience as a direct ranking factor. This means that pages that are user friendly and painless to use will be bumped up on Google’s search engine results page.
At the end of the day, Google is a service provider who wants to show their users the best possible results for their search terms. It’s part of the web-browsing experience and your website’s experience contributes to this as well.
Largest Contentful Paint (LCP) refers to the amount of time it takes to render the largest content element visible in the viewpoint, from after the user accessed the URL. This is typically an image, video or block-level text element.
LCP forms part of the new Google page experience metric and will play a role in calculating how your website ranks. Since download and access speed plays a part in how fast your users can start interacting with the main content page, it directly ties into the user experience score.
It was included in the metrics set, because LCP is an accurate measure of how fast a web page can be used, in addition, it can easily be measured and optimized.
You are not very likely to pass LCP the first time, it’s one of the hardest things to get right when optimizing a website and requires some time, trials and a lot of patience. However, if you follow the basic rules of LCP, you’ll start to gradually improve your score.
LCP = how long it takes to render the largest content element visible in the viewpoint, from after the URL was accessed. It accurately measures how fast a web page can be interacted with.
If you’re seeing an LCP issue on desktop or mobile error, it means that content is taking longer than 4 seconds to render the largest visible element in the viewpoint. Common causes of poor LCP are:
For optimal website performance, start by cleaning up your website. You don’t need a multitude of plugins and accessories to build a website. In most cases, a lot of plugins cause a lot of bugs and you’re more likely to experience troubleshooting delays.
Highly functional websites employ minimum plugins and only run code that is absolutely critical for website functionality. Always make sure that the server only has performant code to load and that code loads when it’s supposed to.
Check your hosting provider, you should be using the latest PHP version and not an older one. Keeping this updated to the latest version will improve response and loading time. Along with your web host version, you want to check that you’re using http/2 or later versions.
The important takeout here is that your web host should be updated to the latest version. This is a little technical, but your support team should be able to help.
Keep your web host up to date, it benefits response and loading times.
This is pretty easy to do. Images can be compressed, converted, made smaller in size, etc. Setting image dimensions and using formats that are quick to load (videos instead of GIFs) are small steps you can take to improve your LCP score.
Next-gen image formats offer improved loading times, compression and quality image characteristics. WebP, for example, serves as an excellent replacement for JPEG and PNG, sometimes even for GIF images. It also supports animated images, without decreasing the image quality.
You can also use lazy-loading images that are not ‘above-the-fold’ to decrease LCP. These are images that only load after the above-the-fold content is fully loaded or only when they are in the browser's viewpoint.
*Above-the-fold refers to all the content a viewer sees on page, in their screen-frame, before scrolling.
Use next-gen, lazy-loading images, iframes, etc. to optimize images for faster loading.
JavaScript is a text-based programming language. It’s used on client-side and server-side to make your website interactive. It takes the page from being static to interactive. The problem is that you could run into some troubleshooting if your JavaScript is old.
It can slow down your page loading speed if the JavaScript hasn’t been updated in a while. The easiest way to clean this up is by removing unused code, updating code and making sure it's compatible with modern browsers.
JavaScripts can be tricky. Keep them updated and clean out unused or unnecessary code.
CCS is a type of style sheet language, written in a markup language like HTML. It’s used to describe document layout and web page structures. If CSS files are not optimized properly, they can block rendering. Meaning that they keep the server busy before it can render the total page.
Now, Critical CSS is used to extract the CSS for above-the-fold content in order to render content as fast as possible. This allows above-the-fold content to charge first, before loading the rest. There is no need for all the content to load at the same time, the rest of the CSS can be loaded in an asynchronous manner.
The best way to optimize CSS files is by removing unnecessary code, not adding too many CSS files and not having CSS files that keep the server occupied for too long.
First Input Delay (FID) simply points to how long it takes the browser to respond to the first action a user performs. The question is, can users interact with your page? How long does it take for something to happen?
Examples of interactions:
FID covers how real-life users interact with your website, crucial when considering page experience. Since real-life users don’t want to wait ages for content to load, Google decided to add a page speed score to their calculations.
Google then went further to factor in how long the user has to wait to interact with content after it is loaded. For pages where the user just scrolls, for example blogs and other articles, FID doesn’t matter as much.
On the other hand, when the user has to perform an action like subscribing or loging in, FID is highly important. Keep in mind that FID doesn’t mean how long it takes for the content to load, but how fast the user can start typing.
FID = how long it takes the browser to respond to the first action a user performs. It focuses on how real-life users interact with your website.
Most likely, when you experience an input delay, the browser is too busy trying to load something else. This means it can’t respond to the user just yet. Commonly this is due to the browser trying to process large JavaScripts or reading large quantities of code, all trying to load together. Common causes of poor LCP are:
Plain and simple, you don’t want a bulk amount of code that the server is trying to process. Using a cache and optimization plugin will help your website to access code quicker and speed up FID.
The easiest way to optimize FIP is by ordering your code. Cleaning up your website will ensure that the server spends less time trying to retrieve data from multiple sources before it can focus on the current action the user is trying to perform.
Optimisation tools, like WP Rocket, will show you what code is slowing your website down and what is causing delays. Using an optimisation tool will speed up your cleanup process, as well as assist in improving your SEO rankings and conversions.
*WP Rocket is a solution for WordPress websites
You don’t want a bulk amount of code that hinders the loading time of actions that are more critical. You can use an optimisation tool to help you identify areas of improvement.
A third-party script is a JavaScript resource that’s loaded into a webpage. It’s main purpose is to provide an additional function to the main functionality of the webpage. If a third-party script is loading in the background or if the server is trying to fetch code, it can cause a single-point of failure (SPOF).
You never want unused or unnecessary code to load. It slows down your website and can cause it to crash when the server is processing a bulk amount of information from multiple parties at once.
First concentrate on the main functionality of the webpage and then decide if third-party code is really needed.
A browser cache, or web cache, is a system for optimizing the World Wide Web. When you use a browser like Google Chrome, caches store data from websites. Cleaning them up can improve loading times and formatting issues on websites.
The benefit of using a browser cache is that information is stored in a databank, meaning that it doesn’t have to be retrieved from far away. Instead of a browser having to redownload the entire website again, it can simply retrieve files from the cache.
Caches store data and help to retrieve information quicker, meaning shorter loading times.
Both for loading time and input delay, make sure the content on your page is balanced. Really consider what you’re showing on which page, especially when using third-party code and plugins. Make sure that code being loaded always serves a purpose.
For example, you probably don’t need to place a “subscribe now” pop-up on every page. That’s additional code that needs to load. Be smart about where you place content and think about what a specific page needs. This way you’re being smart about the code that’s being loaded with certain actions on certain pages.
Think about where your content goes and what you show on a specific page. If a page doesn’t need a certain action like a “subscribe now” button, move it to where it’s most relevant.
Cumulative Layout Shift (CLS) refers to layout stability. It monitors the likeliness of objects or text on the page to move suddenly upon interaction. Your layout shift score is calculated based on impact fraction and distance fraction. Both of these metrics look at how unstable elements shift on a page.
Sudden shifts or content that jumps can really disturbe the user experience. These disruptions are common on the web and are usually experienced across news sites or when trying to click on action buttons.
CLS = page stability. You don’t want elements to make sudden shifts or move around on your page.
Again, you don’t want a large sum of content on your page that can distort the layout. You have to give your website and its pages a specific set of criterias to follow. It needs to know dimensions, when to load what content, when to access what code, etc. Common causes of poor CLS are:
The easiest way to improve CLS is by always including size attributes on your image and video content. A good way to achieve a healthy CLS score is by using embeds to determine and to specify dimensions. Using a placeholder or fallback is also a good way to stop elements from shifting.
One of the easiest ways to solve this is by setting width and height dimensions on images and iFrames. Without specified dimensions, an image will cause the subsequent content to shift to crease space for it after it downloads. Pre-defining your image aspect ratios for banners, static contents and video material already makes it easier to control CLS.
Always allocate specific dimensions to images or any visuals on your page.
Appoint a block for advertisements, make sure they know exactly where to go. Otherwise, sudden ads can appear on the page without a designated space and push content around.
Dedicate areas to ads, so they know where to go and what frame to fit into.
You can set fixed widgets to embed portable web content in your page. For example, YouTube videos, Google Maps, social media posts, etc. To ensure that content doesn’t shift, you can preset enough space for embeds to load in, with a placeholder or fallback.
One possible way to do this is to get the height of your final embed by inspecting it with your browser developer tools. When the embed loads, the contained iFrame will resize to fit the content.
Frames work as placeholders for content, they ensure that elements stay secure without making unwanted shifts.
Try not to insert new content above existing content, unless it’s in response to a user interaction. You have to pre-plan this, so that unexpected layout shifts don’t happen when new content pops up. Again, be specific when coding. Make sure your site knows where to put a piece of content once the code is loaded.
Dynamic content also needs specific instructions about when to appear and what dimensions to fit in.
Now that you’re more familiar with the Core Web Vitals, we can look at how to evaluate them. Luckily, there are online free tools available to help you. We recommend using Google Search Console or Pagespeed Insights for this. Important to know is that there are different data sets that are included in your evaluation. Field data is used by Google to rank your website, whereas lab data is useful to test your website for optimization opportunities.
Field data is a historical report about how a particular URL has performed across a period of time. It’s a collection of anonymous performance data from a variety of real-world users, multiple devices and network conditions. Field data is influenced by the real world and cannot be controlled like lab data, but it can be filtered to focus on a specific user and their experience.
Field data is the page speed metrics of real users that Google collects. Data can only be collected from users who have opted-in to send anonymized performance information from their real life experience on a web page. The collected data is then used to calculate the page speed metrics.
In Pagespeed Insights (PSI), you can now access page performance reports, based on data collected from both mobile and desktop devices. To collect field data, PSI needs a URL to look up in the Chrome User Experience Report (CrUX) dataset.
If there’s data available on that specific URL, PSI will compile reports for LCP, FID, CSL and First Contentful Paint (FCP). The actual data that Google uses for ranking purposes comes from field data, because the results come from real life settings.
When starting to optimize your website for the Core Web Vitals, you can use Google Search Console to identify site pages that need attention. Once you’ve identified the problematic pages, you can consult PageSpeed Insights to diagnose lab and field issues on your pages.
Field data is based on real life results that’s collected from real-world users, multiple devices and network conditions. PageSpeed Tools and Google Search Console will help you to determine your website performance, in terms of the Core Web Vitals scores.
Lab data is based on a simulated load of a page on a single device and fixed set of network conditions. {Lab data is artificial, based on a single moment in time} that’s regulated by a predefined device, location and internet connection.
Google Lighthouse is a tool used to estimate what a page speed score may be. This is only a simulation, performed under a controlled environment. It only produces estimated values. You can also get lab data from PageSpeed Insights.
We know this all sounds very technical, but if you have a user-friendly mindset, you are already making a good start. From here you can prepare to improve your SEO.
If you want to know more about Core Web Vitals and how to optimize your web content to accommodate Google’s update, watch our webinar. We explain all the important need-to-knows about Core Web Vitals and how to optimize your website.
Bob Hardus and Marco Genaro Palma, both experts in SEO and web development, joined our webinar to share their industry knowledge and optimization tips. With the help from our experts, we talk you through a step-by-step process to optimize your website.
Hopefully this article helped you to better understand what Google’s Core Web Vitals update is all about, with a better understanding of the Page Experience Update.
Important to remember, when optimizing your website, is to keep a user-centric focus. Making user experience a priority is already one step in the right direction. Now you can start cleaning up your website and then run some tests to see where your problem areas still persist. Clean up your website to get rid of unnecessary code and plugins that compromise loading speed and that cause delays. It helps to frequently test your website speed, interactivity and stability to see if there’s any performance issues.
Also, don’t forget to run field data analysis to see how your website is performing in the real world. If you follow the basic guidelines, your ranking is sure to improve with time.
