Google page experience update: How to optimize your eCommerce site

How well your website ranks in Google depends on all sorts of things, and as the vibrant world of SEO evolves, these factors are subject to change. Enter: the May 2021 page experience update. 

At Hedgehog, our approach to digital marketing is fueled by SEO. We know better than anyone that, when it comes to the power of organic search, seeing results takes time. This is why we've been proactive in our efforts to prepare for the update since it was announced last year.

Why does the page experience update matter to my business? 

If your business operates primarily online—like any eCommerce website—visibility is a priority. And the page experience update will affect that visibility. Plus, the user experience (UX) factors it includes, like the time it takes for your page to load and how smooth it is to navigate, play a crucial role in the customer journey. If the buying experience is seamless, people are more likely to complete their purchase, and even come back for more.

The idea is that websites that comply with Google's new guidelines will benefit from the update, ranking higher and likely seeing an increased conversion rate. eCommerce website owners that leave it until too late might suffer a decline in rankings if they aren't up to speed by May 2021 when the update rolls out. 

Here's the catch 

Optimizing your website ahead of the update will help bump up your ranking position in Google, but you can't rely on this alone. While variables like UX and keywords significantly impact your position in the search engine—and will even more so after the update—these ranking signals must work in harmony with strong content. 

It would be futile to optimize and develop the back end of your website for Google if the content the visitor sees when they click is irrelevant or low quality. Yes, these signals will help guide people to your website, but whether or not they stick around depends on the value of your content. Here's how our founder, Alan Spurgeon, put it:

An excellent page experience score won't necessarily be the golden ticket that gets you the top spot in Google. However, encouraging eCommerce site owners to prioritize the UX, speed, and usability of their website is qualitative. Visitors will have a better and more tailored experience overall, Google has another way to measure the value of content, and the site owner will benefit from increased organic traffic and conversions.

So as you prepare for the update, don't lose sight of your content.

Understanding Core Web Vitals

When we talk about Core Web Vitals (CWV), we're talking about three specific indicators that quantify the quality of a website and, therefore, the experience the user has. These are loading time (LCP), interactivity (FID), and visual stability (CLS). 

• The Largest Contentful Paint (LCP) takes into account the time taken for the main element of a page to load, which should be below 2.5 seconds. 

• You've heard of style over substance. Well, First Input Delay (FID) is the time taken for the site to respond after a user does something within the site. Sometimes, when there are too many visual elements, it can slow down the performance of the page. Ideally the FID should be below 100ms. 

• The Cumulative Layout Shift (CLS) score refers to how frequently users experience unexpected changes or errors when interacting with the page, and should be less than 0.1.

As a rule, you're going for the 75th percentile on all of these. So if a page has 100 views and 75 of them have a visual stability (CLS) result below 0.1, the overall metric would be considered "good."

How important is a good website hosting service?

In conjunction with Core Web Vitals, a good website hosting service contributes to the overall user experience of your website. It generally helps to render and deliver the page to the user as quickly as possible (think: themes and plugins that don't bog things down). Specifically, it will help improve the LCP of your website, as it involves receiving information from the server (other Core Web Vitals are measured within the browser). 

That being said, a good website host isn't a quick fix. 

Having an overloaded website with poor code (for example) and scripts and assets that aren't properly optimized won't do the job, even with a high resource server. That's where Core Web Vitals come in. 

How can I improve my Core Web Vitals? 

You can crawl your website using an automated script to assess the current performance of your website. This is going to determine if your website is mobile-friendly, has a secure connection, and if there are any safe-browsing issues. There are a number of tools you can use to do this. 

Once you've done an audit, it's time to optimize.

We created our own script using Lighthouse, a Google web developer tool. We used it with our client RSM 2000. 

The mobile version of our client's website had an initial LCP result of 5.6s. Remember, the LCP should be below 2.5 seconds, so in order to rectify, we began to make amendments to the CSS (structural layout of the web page) and JavaScript (which makes the web page interactive), ensuring that only absolutely necessary layouts and assets were used. That meant we were removing any potential friction when loading the page.  

Here are some actionable tips to consider for optimizing the Core Web Vitals: 

Optimizing for First Input Delay (FID) 

• Reduce the impact of any third-party code. 

• Reduce JavaScript execution time.

• Minimize main thread work. This can be done by analyzing and removing unneeded external scripts (tracking codes, widgets, social media assets) and analyzing and removing unnecessary stylesheet code.

• Keep request counts low and transfer sizes small.

Optimizing for Largest Contentful Paint (LCP) 

• Make sure you only include relevant content.

• Keep the Document Object Model (DOM) as small as possible. The DOM is central to how fast the browser is receiving the website code. The clearer the DOM is, the quicker the page will be rendered for visitors. 

• Use a fast website hosting service. 

• Don't rely on themes that come with unnecessary assets. 

Optimizing for Cumulative Layout Shift (CLS) 

• Always include size attributes on your images and video elements, or otherwise reserve the required space for something like CSS aspect ratio boxes.

• Never insert content above existing content (except in response to a user interaction). Imagine going to click a button, but instead, half a second before, an ad starts loading just below and you accidentally click on the ad instead of the button. This step will ensure that any layout shifts that do occur will only be ones that are expected. 

• Opt for transform animations over animations of properties that trigger layout changes. You don't want full-screen pop-ups just as the user is about to click on a link or a button, for example. 

Thank yourself later 

While you might not be able to see results immediately (as is often the case with SEO), implementing these changes now will give the rest of your content a leg up and put you in front of competitors in the long run.