Improving site speed continues to increase in importance because of ranking benefits as well as conversion improvements. Load times vary dramatically from user to user, depending on their device and network conditions. Therefore, it is important to look at different data in lab tests as well as real user metrics in order to perform a better analysis of web performance.
Presenting load times as a single number ignores the users who experienced much longer loads. In reality, your website’s load time is the collection of all load times from every individual user, and the only way to fully represent that is with a distribution like in the histogram below:
Load time should be measured as an experience of the user with the site. There are multiple moments during a website load that can affect a user’s experience and perceive the site as “fast”. Below we’ve provided information about these measurable moments:
Visual Metrics
The metrics below measure the load speed of the visual elements of a page:
First Paint:
Includes basically any paint including background images. As you can see below on the test we did with ebay.com the first paint shows the search bar as well as other items on the header:
Loaded in 465ms
Defined by the Paint Timing API and available in Chrome M60+:
“First Paint reports the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint. This is the first key moment developers care about in page load – when the browser has started to render the page.”
First contentful paint is when any content on the page is visible on the screen. As you can see on the image below, the first contentful paint shows the logo and menu of the home page:
Loaded in 465ms
Defined by the Paint Timing API and available in Chrome M60+:
“First Contentful Paint reports the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This includes text with pending webfonts. This is the first time users could start consuming page content.”
First Meaningful Paint:
Primary content of the website is visible on the screen. As you can see on the image below, the first meaningful paint shows the main content on Ebay’s home page:
Loaded in 1.2s
Visually Complete:
The last metric is when the page is done loading. As you can see on the image below the home page is fully loaded:
Loaded in 5.3s
In this case the first meaningful content of paint is very similar to the fully loaded page, but this is not always the case.
Is the average time at which visible parts of the page are displayed. In other words, this metric measures how quickly a page takes to get to visually complete.
Is a combination of when the largest IMG, H1, and background image in the viewport are rendered.
Now that we’ve gone through the different metrics we want to show you how you can obtain them through different sources: Lab data which are tests that you can run with different tools such as Google Speed Insights and lighthouse chrome extension. And real user metrics (RUM), which is data that you can collect from Google Analytics and Chrome UX Report.
Lab Data
Lab data can be helpful for debugging performance issues and is a reproducible testing & debugging environment. However, it might not capture real-world bottlenecks and cannot correlate against real-world page KPIs:
Tools:
Real User Monitoring Metrics
RUM Metrics captures true real-world user experience and allows correlation to business key performance indicators. However, there are some downsides to RUM data such as restricted set of metrics and limited debugging capabilities.
Tools
Resources:
- Web Performance Metrics & Measurement in 2018
- Google Confirms Chrome Usage Data Used to Measure Site Speed
- Chrome User Experience Report
- Big Query Chrome UX Report
- User Centric Performance Metrics
- Chrome user experience report explained
Are you in need of SEO services? LOCOMOTIVE Agency’s expert team of SEOs can help improve your site’s ranking and help generate leads. Contact us today.
