Google Page Experience

So here we are, Google’s June core update (Google Page Experience Update) has been implemented and started showing its presence across the web. But, what exactly this update has done and how can we make sure that our site is compliant with this update?

What is Google Page Experience Update?

Let us imagine a scenario, you are in front of two exact physical shops with the same prices and same brand. However, one of the stores has its products all lined up in an orderly fashion, you know exactly where the products are and where the register is.

The other store? The products are in a random order, in different heights and the registers? They are in the back and the exit is in the front.

Which store do you think will get more visitors and more importantly will see more buyers? That is right, the store that is easy to navigate, buy and pay.

Now, let us take this example and apply it to our digital world, one website is fast, secure and easy to navigate. The other one is slow, has security issues and the user experience (UX) has seen better days.

The result will be that the site which is not complying with Google’s update will most likely experience a drastic decrease in positions, traffic and clients.

What are the ranking factors in the Page Experience Update?

There are five major factors that comprise this update and they are:

• Core web vitals – a set of three rules that contains Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS)
• Mobile Friendly – is your site mobile friendly? Is the text readable on mobile devices? Does the site load properly without horizontal scrolling? Does it follow these rules regarding mobile friendly design? Then you are good to go
• Safe Browsing – the definition of safe browsing is quite self-explanatory, if a website contains malicious content in a form of malware or uses social engineering content, it will disappear from the SERP (Search Engine Results Page). Always make sure your website is secure and free of malware and the effects of negative SEO.
• HTTPS – today, most of the websites have already made sure to implement an HTTPS certificate to make sure the site is secure. Does your site still use the old HTTP method? Make sure that you install an HTTPS certificate as soon as possible!
• No intrusive Interstitials – simply put, make sure your website content is easily accessible by the visitors.

Now that we know what this update is made of, let us dive deep into each of the factors.

Core Web Vitals

As we mentioned, the core web vitals consist of three factors, now let us take a deep dive into each one of them.

Largest Contentful Paint (LCP)

The LCP measures the Perceived load speed of the page, how quickly can a page load and render its visual elements, the elements that are considered are:

• Image elements <img>
• Elements inside an SVG element <image>
• Video elements <video>
• Elements with a background image that are loaded via a url function – url(https://www.example.com/image.png)
• Block level elements – for example paragraphs <p>, <div>, etc.

Now that we know what the LCP contains, we need to optimize it. Luckily, this is something we have done for a long time. Make sure the images are compressed, that the video elements are light and in a proper web format (WebM) and make sure to mark the text with the proper tags.

In order to measure our LCP, we don’t need any special tools, just head over to Google’s PageSpeed Insights tool and measure your website. The LCP should occur within the first 2.5 seconds.

First Input Delay (FID)

The FID measures the time from when the visitor interacts with a page, for example clicking on a link or tapping on a button to the time when the browser can process the event and respond to the visitor interaction.

Have you ever clicked on an element in a website and did not get any feedback? The site did not respond, and you felt like the whole site was sluggish? This is an example of a bad FID. It is important to understand that FID measures only the input delay between the action and the response from the website and not how long it takes to process the request.

So, what is a good FID time? Less than 100 milliseconds. Yes, it is that short and therefore it is important for the FID score to be as fast as possible, and how do we do that?

Optimize your CSS and JavaScript files – there are many tools that we can use to optimize the CSS and JavaScript files. Do you have a WordPress site? Then a plugin such as WP-Rocket has the option to optimize the CSS and JavScript files in a click of a button. Be careful however, since sometimes an automatic solution will “break” the site and cause it to deform, so make sure you take it one step at a time and exclude certain files if necessary.

Cumulative Layout Shift (CLS)

Allow us to present you with an all too familiar scenario: you are visiting a website and trying to click on an article only for the layout of the site to change suddenly and you click on the wrong article or an annoying ad! This is a classic example of a bad CLS, but what causes it?

• Images without dimensions – always make sure that you include width and height dimensions to your images and videos, this will make sure that all the elements in the page are the same and are loading properly.
• External elements without dimensions – do you have ads in your site? How about iframe or embedded content? Make sure that they, just like the images, have their height and width properties.
• Use fonts that are loaded from your site – does your site use a font that is loaded from an external source such as google themselves or from any other source? Upload the font to your site and make sure it is loaded locally, a sudden change of font can cause the entire site layout to suddenly shift.

The optimal time for a CLS score is less than 0.1; we are not dealing with seconds, milliseconds or any other unit of time here. So once again the use of Google PageSpeed tool is highly recommended.

Mobile-Friendly

Is your site mobile friendly? Wait, why do we have that Deja vu feeling? it's ok, you don’t. there is a difference between the core web vitals we discussed before and the mobile friendly definition, slight difference but a difference still.

While the core web vitals make sure the user experience is a positive one, the mobile friendly test makes sure the site is compatible with modern requirements, if it isn’t then the following errors can show up when testing the site with Google’s Mobile-Friendly Test.

• Uses Incompatible Plugins - This error is rare and will show up in extremely old websites that are still using outdated plugins such as “flash”. In that case, 99% of the time the website is so outdated that there is no option but rebuilding it with modern technology.
• Viewport not set - The site didn’t define a “viewport” property, the viewport “tells'' browsers to change and adjust the site’s dimensions to the device size. every site should have a viewport set for multiple devices such as wide screens, small laptops, tablets, mobile phones, etc.
• Viewport not set to “device-width” - ever visited a mobile site saw elements show up on either of the sides? this is a classic example of the device width not set properly, always make sure the element in the site contains 100% of the screen and as for the menus? use the “hamburger” menu for best results.
• content wider than screen - have you ever visited a mobile site and had to scroll from side to side? This can happen either because of use of absolute values in the CSS file or images that do not scale to the device’s width. always make sure to use relative values in the CSS file and make sure the images in the site can scale properly to various sizes.
• text too small to read - if the website did not set the font size for mobile devices it not only can be annoying to zoom in and out to read the text, but it can also cause this error. always make sure that the font size is defined for each device width to avoid this error.
• clickable elements too close together - not all fingers are the same size, some of us have lean and narrow fingers and some of us have wider fingers, this is why we must make sure that each clickable element (a button or a link) will be properly spaced from the other elements on the website. clicking on the wrong link is not only annoying, it can cause visitors to give up and exit the website.

Safe Browsing

Ever tried to visit a website only to be greeted by the ominous red error message saying this website contains malware or there is a phishing attack ahead? These are the classic signs of a website that failed the safe browsing test. It either contains malware or Google has detected an attempt of social engineering.

There are several ways we can make sure these errors will not show up on our website:

1. Choose a secure username and password - when choosing usernames and passwords for your CMS, always make sure the username and passwords are unique and hard to guess. use a password generator to create random passwords that contain upper- and lower-case letters, special characters and numbers.
2. Secure your website - can you install security plugins in your CMS? then do it, any security plugin is better than none.
3. Backup, Backup, Backup - make sure your website is backed up daily and if your site is an online store then several times a day. if for some reason your website was hacked it is better to lose several hours of data rather than several days.

A malware warning as displayed by Google Chrome

HTTPS

Look in your address bar, can you see that little lock symbol? If you do then great, your website is secure and there is nothing else you need to do.

Can’t see the lock icon? Is there an “Not Secure” message on your website? then it is time to contact your webmaster or hosting provider and ask them to install an HTTPS certificate, it is usually a very quick process that takes two minutes or less.

The certificate installed? great, now make all the links and images in the site starts with https and not http, or better yet use relative address rather than an absolute one, for example:

This is an absolute link - https://www.example.com/about/our-company/
This is a relative link - /about/our-company/

A “not secure” warning as shown by the site http://httpforever.com

No Intrusive Interstitials

What are Intrusive Interstitials? We are talking about pop-ups. but wait, not all popups are created equal, some pop-ups are acceptable by this update and can be used on your website, but how can we know if the pop-ups in our site are acceptable?

Intrusive Ads

There are several types of intrusive ads according to Google:

• A pop-up that covers the main content right after a user has entered the site or while he is browsing the page.
• Making the user close an ad before the main content can be accessed.
• An ad that is not responsive and is difficult to close.

An example of intrusive ads as illustrated by Google.

Non-Intrusive Ads

There are several ads type that are acceptable and can be used on your website according to Google:

• A pop-up that appears due to a legal obligation, such as a pop-up for accepting cookies or an age verification.
• Login form for a content that is not displayed publicly, such as private content or an indexable content behind a paywall.
• A banner that uses an acceptable amount of screen space and can be easily dismissed.

An example of non-intrusive ads as illustrated by Google.

Conclusion

This update combines old guidelines with new ones to make sure the visitor's experience in the site is optimal, all you need do is think about the experience of the average visitor in your site.

Make sure your website is fast, secure, readable and mobile friendly. make sure the visitors are having a nice experience and your site will pass this update with flying colors.