Outstanding performance is the end goal of any activity - both in real life and in the virtual. It is also a critical aspect of any website. All website users of this impatient era expect the websites to have the least load time, smooth operations and high responsiveness. So for a better user experience, it is important to ensure your website is always performing at its best, no matter what.
However, website performance depends on many factors, and hence it is mandatory to track certain crucial website performance metrics. These metrics will give you a comprehensive view of things that are happening in the background so that corrective actions can be initiated to improve your website’s performance if required. While measuring performance we should focus on load time as well as run-time performance.
Load Time Performance
40% of users switch over from a site that requires over 3 seconds to load. Basically, page load time is the typical measure of time it takes for a page to appear on your screen. It is important to reduce your site’s page load time as slower pages dampen the user experience. We can gauge page load performance in many ways, one of them being Google Lighthouse.
Lighthouse is a chrome-specific dev tool that provides a cogent picture of load time performance and insights. Lighthouse measures:
- Performance
- Accessibility
- Best Practices
- SEO
- Progressive Web App
Let talk a bit about how you can analyze lighthouse report for your website. There are some important parameters that we need to understand to analyze the lighthouse report. These metrics concentrate on various factors of the loading process. Ideally, to improve the user experience, one must focus on maximizing all these scores.
First Contentful Paint (FCP)
It is a metric that measures the time taken for any content of the page to be rendered on screen. This content may not be useful for users as the page just started loading its content.
This we can only measure after the browser has completed downloading and parsing the page’s HTML, render-blocking CSS, and Javascript, so the first contentful paint depends on internet speed and file size.
To improve this time, you can use caching mechanism or load only important and critical files in the beginning and offload the rest for later when required. You can also download scripts and files asynchronously or defer them.
To provide a better user experience, sites should aim to have a First Contentful Paint of 1.8 seconds or less.
First Meaningful Paint (FMP)
It measures when the immediate content of a page is visible to the user. This is an extremely important parameter in load performance as it is directly useful to the user. So you should focus on minimizing this time also.
The impacting factors here are same as FCP, so you should focus on improving download time.
Speed Index
It measures how fast complete DOM content is visually displayed during page load. It should be minimum. This is not the same as load time as by this time the webpage will be interactive but it may not necessarily download everything. Some images and deferred scripts can be pending according to their size.
For achieving the prompter speed index again you have to focus on speeding up content rending and there should not be too many elements in your DOM.
First CPU Idle (first interactive)
It measures how long it takes a page to become minimally interactive. This happens after FMP.
This generally happens shortly after the first meaningful paint — the point where some inputs actually become available and enough of the site is visible to interact with. Although basic functionality such as scrolling and hyperlink navigation are likely to become available at this point, more complex behaviors such as custom JavaScript event listeners might still be unavailable.
Time To Interactive (TTI)
Used measures how long it takes for a page to become fully interactive. A page is considered fully interactive when the page displays useful content, which is measured by the FCP. Event handlers are registered for the most visible page elements. The page responds to user interactions within 50 milliseconds.
Max Potential First Input Delay
It is used for measuring the worst-case FID that your users might experience. First Input Delay measures the time from when a user first interacts with your site, such as clicking a button, to the time when the browser is actually able to respond to that interaction.
Run Time Performance
The Run Time Performance will impact the responsiveness of the page. We can measure page run time performance by calculating the time that each task takes to run while the user is interacting with the site.
Let's assume your website is running smoothly and the user clicks somewhere on the screen and your website suddenly starts slowing down. In this case, it is important to measure your site performance at that time. By using the Chrome performance tab you can perform complete run-time profiling of your website.
How to capture run time performance metrics?
While capturing run time performance it is important to traverse through all the flows of your website. The performance tool will only be able to capture metrics for the flow that the user is performing after the performance recording is started.
How to analyze run time performance metrics?
It is a very easy-to-use performance tools to analyze runtime performance of your website. Once you stop recording, performance metrics for the user-flow will be generated.
- Understanding Color code
1. HTML: Blue
2. CSS: Purple
3. JS: Yellow
4. Images: Green
- Long vs short tasks
By using the chrome performance tool you can easily analyze which task is taking time and slowing down the website performance. Long tasks are the tasks that cause delays in main thread execution. Usually, a task which is taking more than 50ms is considered a long task. You can easily identify the long task. The long task color is grey with a red flag in the upper right corner.
After identifying a long task, it is important to analyze what is the cause behind it? To analyze it, you can take a look at call Tree or bottom-up for that particular task and get the complete stack trace. By traversing stack trace you can reach your code location and identify the performance issue. This task can be a javascript task where you are performing some heavy calculation that is taking time.
Overcome long tasks
To deal with long tasks the best solution is to break your task into smaller tasks that can be completed under 50ms timeline.
- Frame Rates
For measuring the performance of animations we have to keep an eye on frames per second (FPS). Idle FPS should be 60 FPS. In performance, the report goes to FPS section. If you see a red line just above FPS that means the user experience is not up to the mark for that time. Usually, a higher green bar will result in higher FPS.
Conclusion
Performance matters: No matter how jazzy your site is, if the user experience is not smooth, it is not serving any purpose to the end-user. Good visuals and animations can attract users to use your site but in the end, it is the site performance that makes sure that they do not abandon your site mid way. Ensure your website performance is great, and keep your users engaged and interested.
.webp)
.svg){kind=small}