Page Experience: Generate More Revenue From Your Current Clients

Austin Walker Austin Walker
December 10, 2020   |   8 min read time
Topics: UX/UI



Marketers right now are prepping for the new Google Algorithm set in early 2021. It's the first of its kind in the fact that Google has already told us what they're going to be making adjustments for.

That's right, they gave us a heads up for the first time ever.

Sure, they have sent out messages before letting us know of really vague changes by giving us tweets stating that they've "recently adjusted their algorithm", but that isn't as valuable as actually indicating to us what they're adjusting for.

But it's nothing new. And is probably something you've already been focusing on. It's the Page Experience update.

However, with the new changes, come both difficulties and opportunities for marketers like you.

pikwizard-07818b4455a70819b5fcf0393c6fed19

Page Experience

What is page experience, even?

As you know, these are the metrics that help users have a better experience as they cruise your client's website. But it mostly has to do with how the users perceives their experience while using tools and accessing the information that is vital to their success.

And this is where you have both an opportunity, and a problem.

When we review a lot of content and websites that are already published, there are high bounce rates, high exit %s, and the load time for some sites can be pretty steep.

And come next year, these are going to be crucial in making sure that your clients are ready to make a transition and be competitive against their rivals.

Throughout this post we'll identify some of the largest issues you can fix through HubSpot, as well as tools that can help make the process a lot easier.

The best part? Your current clients are going to need this done.

You can always use PageSpeed Insights as a way to monitor results, or use the HubSpot website grader.

Oversized Images

This is one of the more tedious tasks.

There are photos in JPG and PNG that can suck up a lot of data when they load, and can also create a poor experience for users, as they're waiting for photos to load on their mobile or desktop.

These forms are more important for pixel-dense printing and high quality photos for print, but aren't really needed for lower resolution desktop screens.

Tip #1: Try to keep files under 150KB, but you can utilize compression software or free conversion software to minimize the size of these files. Tinypng works really well for file compression, and Online-convert doesn't do a horrible job converting files into WebP files.

Tip #2:  Reduce the size of the photo to the size it's going to be formatted within the webpage. For instance, don't upload a 4000 x 4000 pixel photo, when you're only planning to reduce it into a smaller thumbnail photo.

Resource Caching

Every time a new user comes to a website, they have to completely load all files in order to see it on their screen. However, after they first experience, there may be some files that cache. Files like HTML, CSS, and JavaScript. 

And just like a user, your own server can have cached versions of your page, so that data can be retrieved more quickly.

Unless a website already has a ton of traffic, this may not be as effective as a site with lower traffic.

Tip #3: Vervy produced an amazing article on how to start resource caching if you have a client's website with high traffic.

Code Compression

This is not necessarily something you think about when developing a beautiful site. Being so focused on the user interface can sometimes have consequences against how your files load.

There's something called minifying, which is basically exactly what it sounds like: it minimizes the amount of time a website delays loading by removing unnecessary text and space within files.

Tip #4: HubSpot does this automatically, but to check and make sure that it has been minified, go ahead and use resources like CSS Compressor or JS Compress.

Render Blocking Elements

These are file-blocking elements that prevent a website from rendering visually until it's completely downloaded.

Unfortunately, this might create a white page while the rest of the web page's content loads.

Not a very fun place to be if you're one of the users of the website.

Here are two ways to turn stylesheets into non-render blocking elements:

1) Asynchronous loading

Just as the title might suggest, this is when multiple parts of the page are read at the same time, rather than one at a time. Making the switch can have a little bit of impact to how

2) Deferred loading

 Deferring the Javascript and CSS loads can reduce page load time by quite a bit. And this can be a little easier fix, by just placing scripts and stylesheets references along the bottom of the HTML document. 

An easy way to understand what this is, it's almost like the different between regular and Google AMP pages. Google is taking pieces of a site that generally take a long time to load and strip them when showing to a mobile audience.

Server Response Time

The server is the home base for your client's entire website. When a user comes onto their site, their desktop or mobile device speak to a server and must hear a response before it loads.

Essentially, it's the very first thing cued, so it affects all aspects of your complete website and its content loading. This is called TTFB or Time-to-First-Byte.

You can make leaps and bounds in your total load time by making sure that the server is responding quickly.

This shouldn't exceed .5 seconds. PageSpeed Insights is still one of the best tools to do measure the TTFB, as well as show how a slow speed affects the rest of your website's performance.

The first thing to figure out: who is your client's hosting provider? If the performance is particularly slow, consider contacting them to see what adjustments they can help you make.

If the host of your server is poor, and they're unsure of how to make adjustments, find a new one. Use Hosting Checker if you're looking to find out who is hosting the website

Where to Get Started

This new algorithm update is going to be one of the largest things to come in 2021. According to Google, we can expect that around the middle of Q1, we can expect to see the algorithm to start penalizing for a poor experience.

If you don't already have tools to understand how the user experience is being affected on your website, here's a few:

Hotjar

Hotjar has a freemium plan that works for up to a certain amount of users [I'd be more specific but it's different depending on what you're trying to do].

You can build heat maps which indicate what parts of your page are being utilitzed the most, and what empty spaces are available for you to make changes to. Help your users navigate through your website easily.

It also shows how many clicks you have on certain links, as well as where people may be clicking and expecting some sort of outcome, but you don't have a hyperlink. Insert one there to bring them to a place on the website that may help further their experience.

Google PageSpeed Insights

Obviously this tool has been placed throughout the post. But it should be brought to your attention at least one more time.

This was built to specifically indicate how well on-page metrics are working on your site.

More particularly, Google recognizes that users now expect pages to load immediately. So when they're looking for the first content paint (FCP) to load within just half a second or less, you know they're trying to help users either through mobile or desktop load their content very quickly.

The tool even indicates which part is wrong, specific things that are failing to upload quickly - like photos, and will even tell you how you can create a better upload experience for your user.

Generate More Revenue From Your Clients

Okay, so what? The new algorithm is coming and we know that. How can you take on new clients with these upcoming updates?

Email

For the clients that you've been working with for some time, it's going to be important you let them know that this is coming.

Especially if you're helping them with their SEO.

Reach out to those particular clients and inform them of the updates to come and how it may affect their website.

Within the context of the email, lay out a plan you'd utilize in order to create a better experience for incoming traffic.

This is an opportunity for them to overcome competitors they may have been struggling to top in the rankings over the last year. Point out that once the new algorithm rolls out, since they've already prepared for these new penalties, their competition may have lagged or not been paying attention, and it may help you finally jump over them in the upcoming months.

What a great way to be ahead of the game and be the clear expert for your current clients.

Use the Tools

Utilize tools that you already have: SEMRush, Ahrefs, Hotjar, there are hundreds.

Send screenshots or even short videos to your clients and show them what is currently being affected, and let them know exactly how it's going to affect them in the rollout of the new changes.

Focus less on the very intimate details, and instead the expected outcome if these issues are fixed now, instead of in the future.

Propose a New Structure

A new structure may help a user navigate through a website even better. Keeping traffic on the website is an indicator to Google that the website is providing the information that specific traffic is looking for, and making navigation easy for that traffic is important in keeping them on the site.

For your clients, proposing a new structure for their content as well as their site can help them better inform the traffic they're drawing, and eventually capture more leads.

Propose a New Design

For clients that haven't really had an opportunity to put together a design that has influences in both UX and UI design, the time couldn't be better.

Rather than having to rework content, create a new structure, and find a way to piece together several things that are broken, they can just start fresh with a new design.

Considering there are several months between now and the rollout of the algorithm, you'll even have a chance to test the new design and structure before the changes to the algorithm is made.

If you need help fixing these issues in HubSpot, we can help.


Website Content Planner Guide

Download our Website Content Planner Guide to help kick off your HubSpot website redesign project!

Download Now ›

HubSpot Website Content Planner

Want more? Subscribe Now!

Free Design Assessment