Performance Metrics for Modern Apps
Web has evolved significantly over the past decade. High RAMs, multi-core processors, high network speed have paved the way to web popularity.
There is a burst of frameworks trying to change the design, architecture and working of web applications. But, there is one thing common goal of these frameworks.
Can you guess?
User Experience
A user can be a developer or consumer of a web application. Everything ties back to having a good experience. Developers are happy. Modularity, highly structured, easy deployment are some of the factors for the rise of such frameworks
But, what about consumer experience? Are frameworks doing a good job?
Frameworks are designed to provide good user experience. Maintaining good user experience is a developer’s duty
Good User Experience
Wikipedia defines it as a process of enhancing user satisfaction by improving the usability, accessibility, and efficiency of user interaction with websites
Blah, blah, blah
If a user chooses to stay on your website and does not close it without getting nagged, it classifies as a good user experience
Measuring User Experience
Measuring user experience is synonymous to measuring the performance of your website. Higher the performance, higher the user experience, higher the user retention
Measuring Web Performance
There are infinite metrics and tools to measure performance of your website. We should focus only on critical performance metrics and reliable tools.
And, that’s where I come in.
I. Load Metrics
How much time your website takes to load?
Every web developer, once in their career, has to answer this question. Load metrics are necessary, but they are not the only ones which measure performance.
“My website loads in X secs or performance only matters at load time” is a myth
Don’t trust “onLoad” event
Browsers provide with an event onLoad, fired when all the images, scripts, links and sub-frames have finished loading.
Modern websites do not work in accordance with the onLoad definition
Let’s take Medium as an example
onLoad event is denoted by the thin red line in Waterfall column. We can see, there are still many images loading after the red line.
Medium was not even loaded properly at onLoad time.
You have been fooled, my friend
Who is fooling you? Browsers or Modern Apps?
Modern Apps!
Modern apps are designed in a way to improve user experience.
Techniques like lazy-loading, pre-loading, soft navigations etc. fool browsers into believing that the app loaded quickly.
Hence, a shorter onLoad time, than the actual load time
Actual Load Time — The real “load” metric
Time when all the resources on the page have been loaded and rendered.
Browsers do not provide actual load time out of the box. There are many ways to measure it.
- Poll Resource Timing API
- Poll resources using Performance Observer
- Hook a load handler to the last resource being loaded
II. Milestone Metrics
A webpage goes through multiple milestones while being loaded. Milestones like navigationStart, firstByte, domContentLoaded and many more.
Performance milestones determine the career of a web page
Navigation Timing API
Navigation Timing API provides all the information about milestones of a web page. Every step in the above image is a milestone and can be used as a performance metric for a page. Some important milestones are:
- Navigation Start: start time of a web page load
- Time To First Byte(TTFB): Time taken by server to sent the first byte
- Document Content Loaded(DCL): Time taken by browser to parse DOM
- OnLoad: Time at which the famous “onLoad” event is fired
Achieving these milestones quickly will accelerate the success of your page
You can now easily answer questions like
- How much time did my page spend over network?
- How much time did server took to send the response back to the browser?
- How much time did browser took to process and render the page?
Type “window.performance.timing” in browser console to see it in action
III. Visual Metrics
How does a user perceive your website visually?
Most of the metrics discussed till now are fundamentally flawed in that they measure a single point in time and do not convey the actual user experience.
SpeedIndex
SpeedIndex measures how quickly the page contents are visually populated (where lower numbers are better). It takes the visual progress of the visible page(viewport) loading and computes an overall score for how quickly the content painted
Lower the SpeedIndex, better the user experience
Visually Complete
Visually Complete is a point-in-time metric that measures when the visual area of a page has finished loading.
Visually Complete and SpeedIndex go hand in hand and are computed together
A took 2 seconds for being visually complete, whereas B took 4 seconds
Lower the Visually Complete, better the user experience
Visual Metrics can only be computed synthetically
WebPageTest is the most famous tool to measure visual metrics for any website. It can measure metrics from different geo locations, different network speeds and different browsers
You can read more about the visual metrics and computation algorithm here
IV. Interactive Metrics
When a user navigates to a web page, they’re typically looking for visual feedback to reassure them that everything is going to work as expected.
Several metrics to measure when a page delivers this feedback to users:
You can now answer following questions using these set of metrics
First Paint and First Contentful Paint
First Paint is the point in time when the browsers renders anything that is visually different from what was on the screen prior to navigation.
First Contentful Paint is the point in time when the browser renders the first bit of content from the DOM, which may be text, an image or SVG
You can use Paint Timing API to measure both metrics.
First Meaningful Paint
Point in time when the most “meaningful” content is rendered
Meaningful content varies with different websites
For example, on the YouTube watch page, the hero element is the primary video. On Twitter it’s probably the notification badges and the first tweet. On a weather app it’s the forecast for the specified location. And on a news site it’s likely the primary story and featured image.
How do you measure it then? 🤔
There is no generic way to measure it. You will have to write custom code to measure render times of your most “meaningful” content on the page
Time to Interactive
Point in time when your website is visually rendered and is capable of responding to user input
Google has come up with a method to measure TTI on modern browsers. You can find the code here
Last, but not the least
In a world of infinite performance metrics, you should focus on the metrics discussed in the blog. Trust me!
If you are really interested in web performance, I am jotting down a list of Web APIs and tools
Web Performance APIs
Web Performance Tools
That’s it folks 👋👋👋
