Table of Contents
- Overview of the Core Web Vitals
- What is LCP
- How to Leverage Blue Triangle
Overview of the Core Web Vitals
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
The Core Web Vitals, as of Winter 2022, are:
- Largest Contentful Paint (LCP): Measures the time from navigation to the time when the browser renders the largest bit of content from the DOM.
- Cumulative Layout Shift (CLS): Measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
What is LCP
Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful. (Source: Google, https://web.dev/lcp/) LCP measures the time from navigation to the time when the browser renders the largest bit of content from the DOM.
LCP is primarily affected by four factors:
- Slow server response times
- Resource load times
- Client-side rendering
Check out this article for more information such as what elements are captured in LCP, how LCP is calculated, and what will cause LCP to not be collected!
How to Leverage Blue Triangle
LCP can be collected for synthetics and RUM data. For more information on which performance metrics can be collect in each datatype, check out this article. In RUM, you are able to pull up individual sessions through pages like RUM Performance Detail.
View this data by selecting a triangle point in one of the bottom scatterplots. Filter for these points by clicking in the legend below the plot.
This will open the Object Level Detail waterfall below. Click the metric names in the legend to alter what lines are displayed.
Using this waterfall, you are able to pinpoint what is delaying your LCP resource from loading. There are four areas of interest when improving your LCP:
- Time to First Byte
- Resource Load Delay
- Resource Load Time
- Element Load Delay
Time To First Byte
In the example above, you can see the while the HTML document is loading, no other resources are loading until that is completed. An option for optimizing this is to implement a content delivery network (CDN) which allows you to shorten the distance between your servers and the end user, and ensures the data is distributed more evenly across the network. This allows your customer to reach a node that is closer to them thus reducing the amount of time between your server and the end user. Another option is server processing, which requires optimization of the backend processes including implementing things such as load balancers and verifying your servers are utilizing up-to-date software. You can also shorten Time to First Byte by optimizing your database queries (i.e removing any unnecessary data that is being queried in the load). Another option is to utilize cached responses as much as possible. Lastly, you can reduce the overall size of the request.
Resource Load Delay
Resource Load Time
To reduce Resource Load Time you will want to reduce friction between the user's device and the resource. To do so we will want to reduce the size and distance of the resource and ensure you are caching properly. This can be ensuring you are using the proper image format. For example, .PNG can be slower than other formats because it is unable to compress. When you are using .PNG files, it is best to use them as small images. Utilizing a CDN and optimizing your use of caching (as referenced in Time to First Byte) can help reduce the distance between your server and the end user and thus reducing Resource Load Time.
Element Load Delay