Picture this scenario.
You’re in the market for a new blender. You’ve found a model that suits your needs and falls within your budget. You’re in the research phase, looking for the pros and cons of the blender.
The problem is that the blender model isn’t very popular, and you can’t find any websites talking about it.
After tons of searching, you finally find a relevant website on the fourth page of Google search. You quickly click on it.
You’re on the website. The only exception is that the page is slow. In fact, it’s too slow.
You wait for a while. The page finally loads up. Before you start scrolling, you’re greeted with a large ad that almost covers the screen.
You decide to give up on the blender and look for something else.
Does the page loading part sound familiar?
There’s a reason why Google pushed the webpage to the fourth page of the results.
Why am I talking about all this?
Well, that’s because the scenario is related to Google’s Page Experience.
What is Page Experience?
Page Experience is Google’s way of regulating the quality of search results.
And by regulating, I mean that Google wants to push lower-quality sites away from visitors.
This means that Google will reward websites that have elements that it perceives as promoting a better user experience.
How does Google plan to do this?
Google only ranks websites based on what’s already available. You have to do the work.
Google has put out a questionnaire that webmasters can use to determine how their websites perform. If your answer is yes to all the questions, congratulations! You’re well on your way to offering a good page experience for your visitors.
The seven questions webmasters need to ask themselves are as follows:
1. Do pages have good Core Web Vitals?
2. Are the pages secure?
3. Does the content display correctly when viewed on mobile devices?
4. Does the content lack ads that are either distractive or overlap the main content?
5. Does the website lack intrusive interstitials?
6. Is the website easy to navigate?
7. Is the page designed to highlight the main content from the rest?
I’ll discuss each of these seven questions in the following section.
Do pages have good Core Web Vitals?
To answer this question, you need to understand what Core Web Vitals mean.
As a set of metrics, Core Web Vitals calculates the real-world user experience for loading performance, interactivity, and visual stability of the page. Getting Core Web Vitals right not only contributes to better performance in search results but also a better overall user experience.
Core Web Vitals are calculated using the following 3 metrics:
1. Largest Contentful Paint (LCP): LCP is the time taken to render the largest element (image, text, or video) in the viewport, compared to the time when the page first started loading. An LCP of 2.5 seconds or less is recommended. Anything above 4 is poor.
2. First Input Delay (FID): FID is the time between the first click from a visitor and the time taken by the browser to start processing the response for that click. An FID of 100 milliseconds is recommended. Anything above 300 milliseconds is considered poor.
3. Cumulative Layout Shift (CLS): CLS is the measure of the unexpected shift of elements in a webpage. Layout shift is calculated using the formula layout shift score = impact fraction * distance fraction. Here, the impact fraction is the impact of unstable elements in the viewport between 2 frames, and the distance fraction is the distance the unstable elements have shifted.
How to Optimize Core Web Vitals
Optimizing Core Web Vitals involves taking steps to improve the three factors related to it, LCP, FID, and CIS.
Better LCP
· Removing LCP resource load delay
· Removing element render delay
· Minimize resource load time
Better FID
The following measures result in a better FID score:
· Breaking up Long Tasks into smaller chunks
· Modifying the page with user interaction in mind
· Taking the services of a web worker to run JavaScript on a background thread
· Lower JavaScript execution time
FYI, due to limitations in FID, Google has announced that they will be replacing it with Interaction to Next Paint (INP) by March 2024. Unlike FID, which calculates the time taken between the first click and the response, INP considers the latencies of all user interactions throughout the time they stay on the page. Though it isn’t time to panic yet, it’s wise to start making changes to your website to avoid being blindsided by it.
Better CLS
CLS doesn’t just affect Core Web Vitals but also affects the user experience. People often click on webpage elements
that they didn’t mean to due to poor CLS. The following tips might come in handy to improve a website’s CLS score:
· Don’t include images without dimensions
· Reserve space for images using CSS aspect ratio or other similar properties
· Allocate space for late-loading content like ads, embeds, iframes, and similar dynamically injected content
· Don’t place dynamically injected content at the top of the viewport
· Limit animations that cause changes to the layout
· Maintain best practices when using fonts, like usage of the appropriate fall back font, using properties to load critical web fonts earlier, and taking advantage of a Font Loading API.
Are the pages secure?
The security of a website is an important factor to consider when determining its Core Web Vitals. Websites used to
use HTTP (Hyper Text Transfer Protocol) to transfer data across the network.
Notice the “used to” part? That’s because the data sent from the browser using HTTP isn’t encrypted.
This is not the case with HTTPS (Hyper Text Transfer Protocol Secure).
The data sent from the browser to the website is encrypted, meaning that the data can only be accessed by the ones
it was addressed to.
This is why it is recommended to use HTTPS for your websites. Look out for the following information in your address
bar to identify the secure status of a page:
Secure connection - Encrypted data transfer.
Insecure connection - An attacker can intercept data you send or receive from the website.
Not secure/Dangerous connection - A website with a not secure connection has serious privacy issues. Websites
with this symbol have increased chances of your data being stolen. In the case of a dangerous website, Google will
give you a full-page red warning screen before you can view the website. Accessing websites marked as dangerous
poses a serious threat to your private information.
Does the content display correctly when viewed on mobile devices?
This is a big one. Just about everyone and their neighbor owns a smart device these days. Ignoring mobile users when
building a website is a no-go.
Optimizing your website for mobile devices gives your visitors a better user experience. They can access your website
on the go, giving you a reliable medium to interact with them. Consider the following configurations when designing a
· Responsive Design: Irrespective of the device on which the website is accessed, the same HTML code is used on the same URL, but the display area and orientation change according to screen size.
· Dynamic Serving: A configuration that relies on user-agent sniffing and Vary: user-agent HTTP response header. The URL used is the same, but the version of HTML varies based on the device.
· Separate URLs: A configuration that relies on user-agent and Vary HTTP headers. It sends different versions of HTML to each device and on separate URLs. This configuration redirects users to the versions of the site that are compatible with their devices.
Does the content lack ads that are either distractive or overlap the main content?
Ads are what you would call a necessary evil. They help promote products, improve sales (at least the creative ones do!), and are a vital tool when it comes to brand awareness. For some websites, ads are a source of revenue. But an overdose of ads can be annoying and affect the viewing experience.
The trick here, in terms of your website, is to make sure that your ads don’t cover or steal attention from the important parts of your website.
Here are a few things to avoid if you’re thinking about including ads on your website:
· Don’t place too many ads above the fold. Doing this forces the user to scroll down to view the content. Remember, they’re here for the content, not for your ads.
· Don’t include unavoidable pop-up ads.
· Avoid autoplay. Be it audio or video, auto-playing content when a user visits your page is annoying and forces them to either leave or turn on their ad blocker.
· Don’t rely on clickbait content to generate clicks.
· Avoid pagination. Making users click through multiple slides and squeezing ads between them is a horrible practice.
Does the website lack intrusive interstitials?
We’ve all come across this. The moment you visit a website, you’re greeted with a dialog box asking you to subscribe to their newsletter or, even worse, their ads. You’re forced to interact with this dialog box before you access the content.
Don’t get me wrong; interstitial web pages and dialog boxes with a CTA (call-to-action) are essential for a website. The problem arises when they take precedence over the website’s content.
Users will find it annoying to click through multiple dialog boxes to access the content. Not just users, but even Google will find it hard to understand your website if it’s full of interstitial pages.
Another major disadvantage is blacklisting. If a visitor backs out of your website due to intrusive interstitials, chances are that they will not visit your site again. Even if they find your website among the top Google search results, they will ignore it since they’ve already had a bad experience.
Is the website easy to navigate?
You could have the fanciest website on the planet, filled with cool images and animations. But all that could be useless if your website has poor navigation.
This is what the 3-click rule signifies as well. If a visitor cannot find what they’re looking for in 3 clicks, they’re bound to leave the website.
In order to provide a seamless user experience for your visitors, your website should have proper, well-planned navigation. Not only does this contribute to a better user experience, but it also helps search engines index important information efficiently.
Is the page designed to highlight the main content from the rest?
Categorize the content on your website based on its importance or freshness. Older content goes back or lower, while new content appears at the top. This makes sure visitors have access to content that is more important and will be beneficial to them.
Also, another thing to keep in mind is to limit the use of attention-grabbing elements. Yes, they’re nice and great at diverting attention, but if everything on your website has the same style, visitors will get used to it pretty soon. This just screams, “I’m trying hard.”
A good rectify this is to use one of the numerous free SEO tools to analyze the activity patterns of your website, and plan accordingly.
Now, these questions don’t cover all the aspects of page experience. But put yourself in the shoes of a visitor and see how you feel when you visit your own website. How easy is it to navigate? How many intrusive elements does your website have? Questions like this will help you optimize your website for a better user experience, which is what this article is about.