Page performance is a key metric when it comes to measuring how fast your site is. But what exactly is performance, what benchmarks can you use to measure it, and why is it important?
Luckily, we have Google to tell us. With one of its earlier Lighthouse updates, Google released Core Web Vitals, a system developers could use to measure website speed and performance. These scores measured a variety of benchmarks, but three carry the most weight when it comes to how fast your site actually is: Largest Contentful Paint, Time to Interactive, and Cumulative Layout Shift.
Why bother measuring these benchmarks? For a few reasons. First of all, these metrics can give you a pretty good idea of what kind of an experience a user is having on your site. And starting in June of 2021, Google will begin factoring these scores into your search ranking. Your keyword game could be on point, but if your site doesn’t perform, you can kiss your dreams of page one goodbye.
Now that we know the importance of these metrics, let’s look deeper and see what each one means, how the score is determined, and how you can improve your site performance.
Core Web Vitals – Determiners of PageSpeed Insights
When you first go to the Google PageSpeed Insights page and input your desired URL, you’ll see a number of different bars and charts, including speed index, total blocking time, and time to interactive. But Google has indicated that there are in fact three factors that most heavily influence user experience: loading time, interactivity, and layout stability. These are indicated by Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
Largest Contentful Paint
Largest Contentful Paint (LCP) represents the amount of time it takes before a page’s main content has loaded. While some metrics like Speed Index and First Meaningful Paint illustrate the bigger picture when it comes to a site becoming usable, they do not take a “user-centric” approach to page performance. Largest Contentful Paint helps analysts understand (roughly) when a user can see the biggest part of the content during the loading of a page.
How Is LCP Score Determined?
PageSpeed Insights determines a page’s LCP score by looking at when in a page’s load cycle certain elements are loaded, including:
- <img> tags
- <image> tags inside <svg> tags
- <video> tags
- Background images loaded using the function url() instead of CSS gradient
- Text nodes or inline text elements inside block-level elements
- And much more
What Should Your LCP Score Be?
LCP is rated on a scale of how many seconds it takes a page to load. If a page’s LCP occurs within 2.5 seconds, the page is rated “Good.” If a page’s LCP occurs between 2.5 and 4.0 seconds, it “Needs Improvement.” And if a page’s LCP occurs after 4.0 seconds, it’s scored as “Poor.”
First Input Delay
How Is FID Score Determined?
In order to fully understand FID, we first have to cover a few other important page performance indicators: Time to Interactive (TTI) and First Contentful Paint (FCP).
- FCP is a calculation of when the first instance of some content is loaded on the page.
- TTI, on the other hand, measures how long it takes for the DOM to completely load and when a user can completely interact with the page.
- Speed Index is another metric that blends between the rest, attempting to find a middle ground across all metrics to describe how fast your site feels to users.
TTI is a measure of absolute performance, but we care more about perceived performance. If we use FCP as an indicator of when a page begins to load, we can use Speed Index to give us a snapshot of the “speed” to display content. This doesn’t tell us anything about how interacting with scrolling, toggles, menus and other interface features feels, and TTI, while useful, shows us when a page has become fully interactive.
FID is one of the missing links between these metrics, allowing us to understand what a user would experience when actually on the site.
Both TBT and FID measure a page’s unresponsiveness: TBT looks for all script loading, where FID focuses on interactivity. We can simulate a click on a page to generate lab FID, but it’s incomplete as a metric of performance. This is because device type, CPU speed, RAM memory allotment, and browser version all slightly impact the TBT and FID score. While we test for these things, it will not perfectly line up to real users.
As a result, it is advisable to use more than just the lab data (e.g. testable in a single session) to inform your performance strategy. What this usually means is considering the field data (e.g. what your real users see) from either the PageSpeed Insights report, or, for more granular details, the Chrome User Experience Report (CrUX) which records actual users’ experience and surfaces this to the site admin.
What Should Your FID Score Be?
FID scores are measured in milliseconds. If a page’s FID occurs before 100ms, then the page is rated “Good.” If a page’s FID occurs between 100 and 300ms, it “Needs Improvement.” And if an FID occurs after 300ms, then the score is “Poor.”
Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures the visual stability of a page as it loads. Has this ever happened to you? You’re on a page getting ready to click a button, when suddenly the page loads an image or other script that causes the button to move a couple dozen pixels above or below where it was before. It’s one thing if a page is still loading and it’s obvious that things are still in progress, but when something dramatically changes, it confuses (and irritates) users, often preventing them from clicking on the “cancel” button or reading the headline they came to see.
This is called layout shift, and it’s a serious problem when it comes to website development and user-centric design. CLS is a measurement of all unexpected layout shift on a page. While it’s usually preventable, it’s not usually noted unless it’s a problem. CLS is a major part of the friction that users experience on the web, which drives away users from the site they were just on and to a competitor.
How Is CLS Score Determined?
CLS score is determined by using the Layout Instability API. This API searches for visible elements that change start position within the viewport. The DOM elements which account for the largest repainted areas are then reported back to the API as “layout shift.” Sometimes the cause of these movements can be a small element which gets added later above them, so don’t point your finger straight away.
The API then looks at the viewport and determines how much the element has shifted within its frame. This value, known as the distance fraction, is a percentage and can range from 0 to 1. The impact fraction, the second part of the layout shift equation, is determined by looking at two separate frames within the viewport. The API gauges how much an element has moved between the two frames within itself. Again, this number can range between 0 and 1.
To determine a page’s full CLS score, multiply the impact fraction by the distance fraction.
What Should Your CLS Score Be?
If a page has a CLS score of .1 or below, the page is rated “Good.” If a page has a CLS score of .1 to .25, the page “Needs Improvement.” If a page scores .25 or above, the page is rated “Poor.” Remember that CLS is a cumulative score of all layout shift on a page, so while there may only be three elements on a page that shift, if their individual scores add up to more than .25, the page will score poorly.
The User-Centric Model
While Google and other search engines have changed a lot over the years, this addition of ranking pages based on their user-friendliness and experience is here to stay. Search engines are competitive and are focused on delivering the best results for a given search query. They are measuring, indirectly, the quality of content based on a users’ need to click on other interactions.
As Core Web Vitals are directly measurable statistics you can gather to understand what’s impacting the visitor metrics, it’s something you want to get as close to perfect as possible. Ensure you’ve addressed as many technical variables as you can. If your organization’s mission, content, or product is truly the best (or the best value), by having a solid technical foundation, caring about these Core Web Vitals—as well as the rest of your technical infrastructure—will ensure you’ve got no surprise variables negatively impacting your success.
Page speed is one of the biggest factors affecting page ranking, and as the technology for measuring user experience continues to grow, pages designed with users in mind will continue to rank higher than those that don’t.
How Do You Improve Your Web Vitals Scores?
The great thing about PageSpeed Insights is that users are given tons of information on how to improve LCP, FID, and CLS. But simply knowing about Core web Vitals and making necessary optimizations are two very different things. Instead, find an agency partner like XWP that has the expert talent to ensure your sites are performing at their peak.
Since 2018, our team has been working to build a more performant web, one site at a time. Through years of experience, we’ve developed a unique approach to pinpointing performance improvements that can have a meaningful impact on Core Web Vitals scores. If you’re ready to start putting the user first and turn your website into a performance powerhouse, contact XWP today for a performance review to see how we can help.