My name is Denis and I work for Domklik. As you may have guessed from the title, this article will focus on such an important element of any web service as performance. I want to make a reservation right away, I will not talk about why this is important, there are already a lot of studies and materials on this issue on the Internet. I would like to touch on the practical side of this question and give answers to questions like this:
What are the performance metrics?
How do you evaluate the quality of your application?
How to raise metrics?
What tools allow you to evaluate performance indicators, etc.
Before you start optimizing your application, you need to decide what is a good website? Today, Google identifies three main criteria for a site’s quality: loading speed, responsiveness, and visual stability.
Key quality criteria
First of all, content should load quickly, regardless of the quality of the user’s network. The longer the user waits for the download, the more likely they are to simply leave our site! Responsiveness is also very important: you press a button and nothing happens! It is necessary that the content is not only displayed, but also available for interaction. Finally, we want the page to be stable and predictable. This is where it comes to the rescue Core web vitals.
Core web vitals Is a Google initiative that is a set of metrics and intervals that measure the very same KPIs that we just talked about.
Of course, there are many other metrics to help make your website better, faster and more secure. But Core Web Vitals primarily covers these three KPIs.
Metrics LCP reflects the download speed. More precisely, it shows a dot during page load, when the main ones were loaded. or the largest content elements in the view port. This is an important addition to the metric FCP (First Contentful Paint), which captures only the very beginning of the download. In other words, LCP allows you to measure how quickly the user can see the main content of the page.
To ensure a positive user experience on page load, the site should strive to ensure that the metric LCP worked out during the first 2.5 seconds from the start of loading the page.
What affects LCP?
The figure below summarizes the four main factors that can affect page load rates:
You can see all page load events in the Timings tab in Google Chrome DevTools, including the LCP metric.
The next metric is FID (First Input Delay). It reflects the interactivity of the application. FID measures time from the moment when the user started to interact somehow with a page (click on buttons, fill out forms, etc.) beforemoment when the browser was actually ready to answer to this interaction.
To guarantee a good user experience interactivity, the site must have an FCP of less than 100 ms…
What affects FID?
Large bundle sizes can have a big impact on interactivity as the browser will take longer to execute them, which will affect the time it takes for the browser to respond to user interactions. The figure below shows all the factors that affect browser response latency.
However, FID can only be measured in the field with real users. In order to investigate interactivity during local development, there is a metric TBT.
TBT shows the total amount of time that the main thread has been blocked long enough to respond to user interactions. In other words, TBT reflects the time from FCPbefore Time to Interact …
To ensure a positive user experience, you need to strive to ensure that each task takes no longer to complete. 50 ms …
You can see the TBT metric in Chrome Dev Tools.
Finally, the third metric CLS (Cumulative Layout Shift) allows you to evaluate the visual stability of the page. CLS shows how much content in the viewport was moving during page load. With its help, you can make sure that the user’s interaction with the site is smooth and natural.
What affects CLS?
The figure below shows the main factors affecting this indicator.
To avoid CLS, you need to reserve space for dynamically added content.
You can use Chrome DevTools to debug UI elements that have shifted during page load.
In the tab Experience the CLS metric is marked with red rectangles. When you click on them in the tab Summary you will be able to get more complete information about what kind of element called CLS, where and from where the shift occurred, etc.
We’ve discussed the basic metrics of a good website, but how do you measure them? Core Web Vitals are available in virtually all developer tools. But first, it’s worth mentioning that there are two main types of research that we can do on our application.
Laboratory measurementsare critical for finding problems and bugs because they are reproducible and instantaneous, and they allow you to see what changes need to be made before users visit our site.
Field measurements people get started to understand what kind of experience real users are getting. Including conditions that cannot be replicated in a lab: cache states, network states, etc.
The figure below shows the main tools that allow you to assess the quality of the site.
Please note that the FID metric can only be measured in the field. To measure interactivity, you need real users to click on a page. But that doesn’t mean you can’t use laboratory tools to improve this metric. As I said above, TBT is a proxy metric that allows you to locally debug and improve the interactivity of your site.
All of the tools we will look at can be incorporated into your workflow. You can start with Page Speed Inside as it allows you to compare your field performance with laboratory performance. Google Search Console allows you to identify groups of pages that require optimization. Then using Lighthouse and Chrome DevTools you can start locally diagnosing and optimizing your site. Next, you can prevent the performance metrics from regressing by using Lighthouse CI.Finally, CrUX allows you to create custom dashboards for monitoring. For tips and instructions, you can use web.dev…
As I already said, Page Speed Insideallows you to get both field data from CrUX (to see if pass 75% site impressions threshold values of metrics; if yes, then the site is classified as optimized, and this applies to all three metrics LCP, CLS, FID), and laboratory data from Lighthouse …
Lighthouse has recently added new metrics including Core Web Vitals as well as new checks and reports.
Metrics Lighthouse can be grouped according to three main criteria for site quality
FCP, SI, LCP present loadingsite;
TBT reflects interactivity;
CLS reflects visual stability.
New metrics help ensure performance downloads , interactivityand stability layout. Actually, these metrics and their weights form Performance score !
LightHouse is a very interesting tool in which there are a huge number of different reports and checks, but within Core Web Vitalswe are primarily interested in the following.
By loading pages: reports on server response speed; rendering blocking resources; resource loading optimization reports.
By interactivity : reports on loading the main threadand optimization quality of downloaded resources(duplicate modules, unused code, etc.).
Well, reports to prevent layout shifts!
As I said, Lighthouse is updated quite regularly, and I want to show you a couple of new features that we may see in the near future.
We will be able to analyze prod bundles, see which modules are duplicated, what percentage of the code in each specific bundle was not used at the stage of page loading.
The Chrome DevTools itself is a topic for another discussion. We will talk about him today in a context. Core Web Vitals … And we are most interested in the tab Performance … Also in this tool you can see tasks that degrade interactivity (last more than 50 ms), they are marked red trianglein the upper right corner. By clicking on such a task, you can get more detailed information about it (stack trace and subtasks).
Another useful tab in DevTools is Coverage. Whenever Lighthouse writes “Remove unused code”
you can take a closer look at what percentage of each bundle was used during the download phase.
web.dev/measure Is a very convenient way to get reports likeLighthous, with the only difference that Measure will sort the reports by priority and for each of them will give a link to instructions with more detailed information on each problem.
CrUXallows you to get a huge amount of data on real user experience.
The Web-vitals Chrome Extension can also help with development, the web-vitals NPM package makes it easy to log these and other performance metrics.