How to Improve Your Page Experience

22 March 2021

Is your business prepared for Google’s next core update? In 2021, Google is set to update its algorithm to add page experience to its list of ranking criteria. This means Google will factor in UX as well as the traditional and more objective signals like PageRank and on-page targeting. To maintain your position or preferably to give it a boost, you will need an understanding of the different facets of page experience and how to optimise your website for each of them.

Thankfully, Google has announced the various elements it will use to gauge the overall experience of a page. These are as follows:

Core Web Vitals: This measures the visual loading, visual stability and interactivity of a page as it loads for users. It uses three key performance metrics:

  1. Largest Contentful Paint
  2. First Input Delay
  3. Cumulative Layout Shift

Mobile Friendliness: This examines how easy websites are to navigate on mobile devices, including the readability of contents and whether links, as well as on-page elements, are clickable and accessible.

Safe Browsing: This assesses whether a website has issues such as malware, hacked content and phishing to ensure that users can browse safely.

HTTPS: This determines whether the connection of a website is secure and if the site is being served via HTTPS as recommended.

Non-Intrusive Interstitials: This detects extraneous content that appears over the majority of the page, obstructing the user’s view.

How does your website fare with the above metrics? Are you in a strong position for the next update or have you got work to do? If so, not to worry; we’ve put together a list of tips and guidelines so you can optimise your website for each of these areas. Let’s jump right in.

Tip #1: Speed up visual loading time by pre-loading key resources

For a user, the first indicator that a page is loading is the appearance of the above the fold content. This is where the Largest Contentful Paint (LCP) and the Core Web Vitals come in. They measure how quickly the main on-page element loads. But how will you identify what a page's LCP element is? First, inspect the page in Chrome DevTools. This will be shown in the waterfall chart in the Performance Tab. Once the LCP element is identified, proceed on visual progress of how quickly it loads. The easiest way of seeing this is to use the Performance Tab. To speed up the loading of LCP elements and above the fold content, use methods like preloading to tell the browser to fetch these resources first as a priority.

Tip #2: Minimise long tasks by optimising main thread

There are many potential issues that could leave a user waiting for the browser to respond. This is measured by Core Web Vitals and FID (First Input Delay). Naturally, this is frustrating for users. One of the main culprits is long tasks. Long tasks are pieces of JavaScript code that block the main thread for a long period of time and become unresponsive. But luckily there are measures we can take to reduce the time it takes for a browser to react. The right fix depends on the activities contributing to these main thread blockages. Usually, the solution for resolving long tasks is code splitting and serving scripts in smaller chunks.

Tip #3: Embeds to load into and reserve space for images

CLS (Cumulative Layout Shift), the third Core Web Vitals metric, examines to what degree the visual layout of a page moves around as the page loads. In other words, it measures the frustrating area of UX that we have probably experienced. For instance, a user goes to click a particular link but the page shifts around and they end up accidentally clicking into a different area of a page. A frequent cause of a high CLS score is not reserving spaces for images and embedded resources to load into.

Tip #4: Ensure that the key page templates are mobile friendly

The layout and usability of websites across mobile devices can make or break a user experience. Content should automatically adjust to fit smartphone screens in a clear and attractive way – no awkward zooming required. Want to assess your website? There are two options. The first is to monitor the ‘Mobile Usability’ report in Google Search Console. Alternatively, run key page templates through Google's ‘Mobile-Friendly Test’.

The first option will flag issues such as content not fitting the screen or text being too small, and show you a list of URLs for each issue. The second tests how easily a visitor can use your page on a mobile device. To see your page scores, just enter your page URL. Why do we need this? Mobile users now account for approximately half of web traffic worldwide, and these numbers are on the rise. Therefore, it’s crucial that websites cater to the masses with fully responsive content.

Tip #5: Audit your website for security issue detection

Web security plays a key background role in overall page experience. Google is now prioritising safety more than ever in a bid to protect users from risks such as malware, phishing, unwanted software and deceptive content. To screen your website for these potentially serious threats, refer to the ‘Security Issues’ report in Google Search Console.

Tip #6: Make sure that forms and embedded resources are served over HTTPS

Another one of Google’s safety measures is their move towards incorporating HTTPS as a page experience signal. Content that requires user interaction and input makes the user's data more vulnerable if it was served over a non-secure HTTP connection. This applies for forms where users are inputting any personal information such as checkouts where payment details are being shared.

Tip: Use ‘Security Report’ in Screaming Frog to check for this issue. You can see the number of forms being served on HTTPS URLs as well as mixed content issues where a mixture of page resources are being served over HTTP and HTTPS in this report. Make sure your website has an up-to-date SSL certificate and migrate any of your URLs and on-page resources to HTTPS to allow your users to browse safely.

Tip #7: Ensure that interstitials don’t obstruct crucial content

Intrusive interstitials take up a lot of space on the webpage and make it difficult for users to access important on-page content. This can trigger frustration in the user, negatively impacting the browsing experience. Visualise how interstitials could be impacting your users by manually reviewing your pages on different devices or using Chrome DevTools’ screenshot feature again.

Tip: Consider redesigning interstitials and pop-ups so that they don't obstruct important on-page content.

Conclusion

Follow these tips and prioritise page experience optimisation improve your SEO in 2021. Enhancing page experience help to future-proof your website’s performance by putting it in the best position possible to capitalise on the upcoming algorithm update and it will also ensure positive experiences for users on your website now.

Does your website need a makeover? The team of experts at Elephant in the Boardroom are content and design specialists who can transform your website and skyrocket your visibility online. Visit us today at www.elephantintheboardroom.com.au.