Details on Google’s Page Experience Update for 2021

Since inception over 20 years ago, Google has been making constant updates to its search algorithm in order to better understand, index, and provide information to users. Today, Google is wanting the sites that contain this information to be easier for users to access and navigate. Beginning with mobile-first indexing, and evaluating sites with their mobile user agent, Google is pushing for a better experience for mobile users once they surpassed desktop users. The next step is for sites to provide a great page experience for users.

Google has introduced a new blend of site speed and user metrics called Core Web Vitals to accompany existing organic guidelines, as shown below.

Source: https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

JUMP TO A SECTION:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• Mobile Friendly
• Safe Browsing
• HTTPS
• No Intrusive Interstitials

NEW PAGE EXPERIENCE FACTORS – CORE WEB VITALS

The following target scores should be hit with the 75th percentile of page loads. These can be measured using the following tools:

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)

LARGEST CONTENTFUL PAINT (LCP)

This is a measure of loading performance. Ideal for the best user experience is the LCP occurring within the first 2.5 seconds of the page starting to load.

Largest Contentful Paint is not new to developers and website designers. LCP, along with First paint (FP) and First Contentful Paint (FCP), have been page speed timing metrics for several years now but Google will be officially using LCP as part as a ranking factor. Differences below:

• First Paint (FP) – Screen is no longer white and any color is added
• First Contentful Paint (FCP) – Color, text, logo shown that is defined in the backend
• Largest Contentful Paint – Same as above but the largest item on the page

The key for a fast LCP is to prioritize loading of the largest elements and ensure no layout shifts push content that was already loaded outside of the viewport.

FIRST INPUT DELAY (FID)

This is a measurement of interactivity. A good experience for users should have webpages with an FID of less than 100 milliseconds. First input delay is the time delay in a user input to the site responding. Typical types of input here are clicking a link or button, or waiting for JavaScript to finish.

In the sample chart below, the grey bars and yellow bars help to illustrate the First Input Delay. The grey bars are requests to download items, like images, CSS, and JavaScript files.

The yellow bars show when the browser is opening and evaluating the contents of some of these files. Large or complicated CSS and JavaScript files can cause the browser to use its resources on these instead of user input. This causes the delay that is being measured.

Source: https://web.dev/fid/

Finding a solution for decreasing First Input Delay involves field testing with actual users and understanding the measurements using the tools shared above. However, reducing the size and complexity of JavaScript files or splitting them into several smaller files should help improve scores.

CUMULATIVE LAYOUT SHIFT (CLS)

This is a measurement of visual stability. A calculated CLS score of less than 0.1 is ideal for webpages.

This score is calculated when new items load on the page and move previously loaded items around.

In this over-exaggerated example, the user tries to hit the “go back” option but when a high CLS item loads, the install app element pushes the “place order” button down to where the “go back” button was, accidentally placing the order and frustrating the user.

Source: https://web.dev/cls/

It’s important to ensure elements on the page do not drastically shift during the page load. This will keep your CLS score low and help your webpage be easier to navigate and use for visitors.

PREVIOUS PAGE EXPERIENCE FACTORS WITH INCREASED IMPORTANCE

YOUR WEBSITE IS MOBILE-FRIENDLY

Ensure the pages on your site are mobile-friendly. You can check if your page is mobile-friendly with Google’s Mobile-friendly testing tool.

Source: https://search.google.com/test/mobile-friendly

A webpage that is easy to use on mobile devices and tablets are considered mobile-friendly. Having a mobile-friendly site has become more important due to a higher percentage of users visiting websites on devices other than desktops and laptops. A mobile-friendly site provides a better experience for users and can help with engagement. This is also why Google rolled out mobile-first indexing.

A responsive website that scales down to provide the same experience on a mobile device as a desktop or laptop will help ensure your site is mobile-friendly.

YOUR SITE PROVIDES A SAFE BROWSING EXPERIENCE

This means making sure that your website doesn’t have any malware or is “hacked”. You can view status of your site using Search Console.

We recommend keeping your website CMS up to date along with any plugins to help reduce any vulnerabilities for hackers or exploits.

MAKE SURE YOUR SITE IS SECURE WITH HTTPS

The page is being served with a HTTPS connection. This is a secure connection that encrypts the data going to and from the server.

You may have seen an i with a circle around it in the address bar or that symbol along with “Not secure”, as demonstrated below.

Source: https://www.blog.google/products/chrome/milestone-chrome-security-marking-http-not-secure/

This was a nudge from Google so that site owners would secure their site with HTTPS. If it was not secure, users would see these warnings and may leave the site or be less likely to enter personal information or fill out a contact form.

Another benefit of switching to HTTPS is being able to use the faster HTTP/2 protocol.

Switching your site over to HTTPS has become easier than ever with free resources ranging from free SSL certifications to complete walk-throughs of making the transition.

NO INTRUSIVE INTERSTITIALS

Content on the page should be easily accessible by users and not hidden or behind large ads (interstitials). Intrusive ads are ones that take up a substantial amount of space on the screen and cover most of the content on the page.

Google doesn’t mention a specific percentage but says that it shouldn’t be larger than a “reasonable amount”. Below are examples of pop-ups that may be considered “intrusive” by Google.

Source: https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html

In addition, there is not a clear way to know if Google considers your pop-ups to be intrusive, which is why it’s a good idea to reduce the overall size of them if you continue to use them.

Other types of pop-ups are acceptable and won’t be affected. These include:

• Cookie notifications
• Age verification pop-ups
• Small banners at the top or the bottom of the screen

In this example of a website emulated using a mobile device, the pop-up takes up 63% of the viewport.

This example could be considered “intrusive” by Google but currently no notifications are provided to webmasters.

We calculated this based on total pop-up pixels divided by total viewport pixels.

If you want to continue using pop-ups on your website, we recommend keeping them less than 50% of the total size of the screen (viewport).

GET A HEAD START ON THESE CHANGES TODAY

We wanted to provide an overview of the latest items Google will be updating. You can learn more about Core Web Vitals on the web.dev site.

These changes will not take effect until sometime in 2021, and Google says they will provide a notice of at least six months before the changes will go live. Even though 2021 is when these factors will begin to be weighted more heavily when it comes to ranking webpages, the metrics outlined here should be considered in your current site or upcoming site builds to help user experience. If you would like assistance with updating your website or want to learn more about SEO best practices, please contact us today.