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.
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:
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.
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.
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.
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.
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.
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.
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.
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 java script task where you are performing some heavy calculation that is taking time.
To deal with long tasks the best solution is to break your task into smaller tasks that can be completed under 50ms timeline.
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.
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.
Feel free to comment or write to us in case you have any further questions at firstname.lastname@example.org. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
It is no less than a nightmare when a feature request from the product team is not getting fit with the current system. So this feature request required some heavy aggregated functions which did not give satisfactory results with a row-based database.
As a developer myself, the most complicated part of the job is not writing the code but reproducing an issue the customer reported, debugging, and fixing the issue. With such little information at your disposal, it becomes a nightmare to start debugging the issue, let alone fixing it. Can we do something better here?
Continuous Integration and Continuous Delivery (CICD) are terms used to describe a process where multiple changes are made to a codebase simultaneously. In very simple words, CI is a modern tool for development practice in which code changes are made frequently.