Table of Contents
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.
- First Input Delay (FID): Measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
- 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
- Render-blockingJavaScript and CSS
- 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!
Before LCP data can load, first the stylesheets (.CSS files) load in order for the images to start coming in, indicated by #2 Resource Delay in the image above. LCP is more than likely going to be triggered by one of the stylesheets as a .PNG, .SVG, or .JPEG file and is indicated by the green bar in the image above. We are looking for the largest image on your site. Once the image that is largest is identified, then the time it takes to load is recorded, indicated by the #4 Element Render Delay in the graphic above. The yellow bars in this graphic are representing the JavaScript that is running to get the LCP image rendered. Each column indicates an area of interest when it comes to improving your LCP.
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.
Example:
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
The goal is to have the stylesheet load as quickly as possible in order for the LCP resource to load in order to shorten Resource Load Delay. To do so, you will want to optimize the load order. You will want to use the Object Level Detail waterfall to pinpoint where your LCP resource is being triggered. Ideally you want to trigger this event as fast as possible. Lazy loading your LCP image can cause LCP to occur much later, depending on where the image is located on the page. To avoid this, utilize lazy loading for smaller images or other elements (i.e. fonts). You should also be aware of your fetch priority and make sure that the LCP image has the highest fetch priority. Verify that all images are not set to the same priority. Load everything asynchronously when possible. Loading synchronously will always slow down load times. Avoid having your LCP image load dynamically through JavaScript. If the attributes can be set up in the HTML that can improve LCP. The more static you can make the load for your LCP image, the better off you are for 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
This occurs after LCP resource has been loaded and is waiting to be rendered. You want to reduce the blocking time resources in the head of the file. Any third-party tags can slow the render. For example, you will want to ensure social media is not being loaded at the same time as your LCP. If you are running any A/B tests for your site you will want to be sure that the test is not interfering with loading key resources. Ideally, no JavaScript should be running while the LCP image renders. Verify that there aren't any unused .CSS files on your site as these can block LCP from loading.