Seamless Digital Experience.
Happy Customers.

Digital Experience and Error Monitoring Platform - Zipy

Boost your website performance with profiling

Nidhi Jindal
~ 5 min read | Published on Dec 16, 2023





TABLE OF CONTENT

Fix bugs faster with Zipy!

  • Session replay
  • Network calls
  • Console Logs
  • Stack traces
  • User identification
Get Started for Free

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:

  1. Performance
  2. Accessibility
  3. Best Practices
  4. SEO
  5. Progressive Web App
Lighthouse - a load time performance tool

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.

FCP Metric Color FCP score
0s-2s Green (fast) 75-100
Over 4s Red (slow) 0-49
2s-4s Orange (moderate) 50-74

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.

FMP Metric Color FMP score
0s-2s Green (fast) 75-100
Over 4s Red (slow) 0-49
2s-4s Orange (moderate) 50-74

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.

Speed Index Color SI score
0s-4.3s Green (fast) 75-100
Over 5.8s Red (slow) 0-49
4.4s-5.8s Orange (moderate) 50-74

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.

First CPU Idle Color FCI score
0s-4.7s Green (fast) 75-100
Over 6.5s Red (slow) 0-49
4.8s-6.5s Orange (moderate) 50-74

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.

First CPU Idle Color TTI score
0s-5.2s Green (fast) 75-100
Over 7.3s Red (slow) 0-49
5.3s-7.3s Orange (moderate) 50-74

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.

First CPU Idle Color
0s-2s Green (fast)
Over 4s Red (slow)
2s-4s Orange (moderate)

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
Website performance tool to check the analytics
  • 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.

Using profiling tools to identify long and short tasks

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.

performance insights

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.

measuring performance

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.

Call to Action

Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore for your app, you can sign up or book a demo.











Fix bugs faster with Zipy!

Get Started for Free
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Want to solve customer bugs even before they're reported?

The unified digital experience platform to drive growth with Product Analytics, Error Tracking, and Session Replay in one.

SOC 2 Type 2
Zipy is GDPR and SOC2 Type II Compliant
© 2023 Zipy Inc. | All rights reserved
with
by folks just like you