We may talk a lot about mysterious algorithms, complex spiders that crawl the web, and the importance of trustworthy and authoritative hyperlinks, but when it comes down to it, human experience is one of the best ways to judge a website’s worth. After all, despite all the technical jargon and preening for search engines, the majority of websites are built for humans and aim to make humans happy.
Google created its newest ranking factor, page experience, with this idea in mind. The metrics that make up “page experience” measure how users perceive the experience of interacting with a webpage. Basically, beyond the information presented, is the webpage delightful or frustrating for the average user? By recognizing and rewarding a positive page experience, Google hopes to encourage all website owners to make their webpages more welcoming and user-friendly. We explored page experience in more detail in our last blog post, but today we’re taking it one step further and looking at measuring page experience. With the handy tools we discuss below, you’ll be able to evaluate your website, review recommendations for improvement, and make thoughtful changes.
Measuring Page Experience
To quickly review, page experience is composed of existing signals, including mobile-friendliness, safe browsing, HTTPS security, and no intrusive interstitials, as well as Core Web Vitals.
What are Core Web Vitals, you ask? Core Web Vitals are real-world, user-centered metrics that measure a few essential factors that influence page experience. The first, Largest Contentful Paint (LCP), measures loading performance, or how quickly the “main content” of your page loads. The second, First Input Delay (FID), measures interactivity, or how quickly the page reacts when a user interacts with it by clicking a button, pressing play on a video, etc. The last, Cumulative Layout Shift (CLS), measures visual stability, or whether the page elements (like images, content, buttons, banners, etc.) shift around or remain static while the page loads.
The Core Web Vitals are brand new signals, so webmasters weren’t familiar with them prior to the ranking factor update announcement in May 2020. If you’re like most of us, you’re still in the learning phase and trying to get a stronger grasp on how these on-page elements will influence your website once the page experience ranking factor goes into effect next year, in May 2021.
To better understand how all of the factors involved in the page experience ranking signal will impact your website, check out the list of tools below. With these handy tools at your disposal, measuring page experience will be a breeze.
GOOGLE LIGHTHOUSE
According to Google, Lighthouse is “an open-source, automated tool for improving the quality of web pages.” Using the Core Web Vitals, Lighthouse audits websites for a variety of factors, including performance, accessibility, progressive web apps (PWAs), SEO, and a long list of best practices, to provide the user with a thorough overview of their website’s quality and performance.
Simply input a URL and Lighthouse will produce a diagnostic report, where you can view the problems present on your webpage. You’ll receive a list of scores as well as actionable advice that will help you improve page experience, increase accessibility, comply with best practices, and more. As of Lighthouse 6.0 (the latest version of Lighthouse, released in May 2020), the program includes the Core Web Vitals.
Lighthouse is one of the best tools available for analyzing page speed and SEO performance. In addition to the Core Web Vitals, Lighthouse analyzes the following metrics to capture a full picture of your site’s page load speed:
- First Contentful Paint (FCP): FCP measures how long it takes the user’s browser to render the first piece of Document Object Model (DOM) content (such as images, non-white elements, and scalable vector graphics) after the user navigates to your page.
- Speed Index: The Speed Index measures how quickly your page’s content is visually displayed during the page load.
- Time to Interactive (TTI): TTI measures how long it takes a webpage to become fully interactive, which is when it (1) displays useful content, (2) has event handlers registered for most visible page elements, and (3) responds to user interactions within 50 milliseconds.
- Total Blocking Time (TBT): TBT measures the time between FCP and TTI, or the total length of time that a page is unable to respond to user input, such as a click or screen tap.
During these audits, Google Lighthouse simulates visiting a mobile version of your website on a flaky 3G connection using a device running on its battery’s last legs. Why? Site speed isn’t just about the website’s design; the user’s device also plays a role in how fast they perceive the site to be. A site that feels a little slow on a nimble 5G connection will be unbearably sluggish on a 3G connection. Not only does your site need to be fast, but it also needs to feel fast for all users.
How can you access Lighthouse? Google integrated it directly into Chrome DevTools, which we discuss in more detail below. You can also install it as a Chrome extension, which will add a button to your toolbar (however, using the extension you can’t validate sites on your local server and authenticated pages won’t work either). Or, you could run Lighthouse as a Node package.
CHROME DEVTOOLS
Do you enjoy when a sudden shift in a website’s layout makes you lose your place within the content or click the wrong thing? Of course not! To ensure that your website’s users don’t have to deal with this issue, check out the Chrome DevTools Performance panel. In the new Experience section, you can find and correct unexpected layout changes that result in a poor cumulative layout shift (CLS). Using Chrome DevTools, you can also measure Largest Contentful Paint (LCP) and Total Blocking Time (TBT).
CORE WEB VITALS IN GOOGLE SEARCH CONSOLE
Don’t forget about the Core Web Vitals report available through the (recently revamped) Google Search Console. This report relies on data from the Chrome UX Report (also known as CrUX), which is a public data set that reveals real-time user experiences on millions of websites. Explore this report to learn which groups of pages on your site require optimization and why. Your pages will be ranked as “Poor,” “Need Improvement,” or “Good.” While this tool can provide you with a solid overview of your website, other programs (like PageSpeed Insights) are useful if you’re looking for page-by-page recommendations to improve user experience.
PAGESPEED INSIGHTS
Using both lab and field performance data, PageSpeed Insights (which recently got an update) helps site owners understand how real-world users experience a page and how they can improve upon that experience. The data is powered by Chrome UX Report, and the recommendations rely on Google Lighthouse metrics.
As you might have guessed by its name, PageSpeed Insights is perhaps the most popular site speed analysis tool available. It provides a page speed score, a perceived loading speed, and a list of improvement opportunities. If you’re looking for concrete ideas that will boost your specific page’s speed, PageSpeed Insights is a great tool. However, keep in mind that a 100/100 score is a castle in the air for most websites. Implement as many of the ideas as you can, and accept that perfection may be nearly impossible. PageSpeed Insights also measures the Core Web Vitals: LCP, FID, and CLS.
REAL VS. SIMULATED DATA
You might have noticed that some of these tools are described as using real data (or “field” data), while others are said to use simulated data (or “lab” data). This is an important distinction in the analysis of a website. Real data is based on statistics from information collected by Google. Every time a person visits a website, data about the website’s performance is sent to Google if the person opted in to the program. Field data is more accurate than data produced in a lab using a controlled simulation. However, it’s also more limited and doesn’t offer the same debugging capabilities. Both types of data are valuable and some tools, like PageSpeed Insights, offer both for your convenience.
WHERE TO START
Clearly, you have a lot of tools at your disposal to help with measuring page experience on your website. If you aren’t sure where to start, try this plan of action:
- Lighthouse: Use Lighthouse to evaluate your website and optimize the page experience of less-than-stellar pages.
- PageSpeed Insights: Compare the field and lab data of your website in regard to the three Core Web Vitals.
- Chrome DevTools: View the Experience section in the Performance panel to explore specific Core Web Vitals in more detail and debug any issues.
- Google Search Console: Examine the Core Web Vitals report, which summarizes how your website is performing in the field.
If you’re hoping to build a beautiful, effective website that ranks highly on Google, contact 417 Marketing for help. Our team of knowledgeable, creative, and passionate professionals specializes in SEO, web design and maintenance, and Google Ads, and we have successfully completed over 700 websites since our inception in 2010. Click here to contact us and learn more about what we can do for your company.
