Web Performance — What, Why & How?
Developing a website is easy, making the one that sells is difficult.
People will forget what you said, People will forget what you did, But people will never forget How you made them feel. — Maya Angelou
Web performance is all about making the user “feel good”.
What is Web Performance
Web performance is all about making sites fast, including making the slow ones seem fast. It includes both objective measurements (e.g., time to load, frames per second, and time to become interactive) and subjective experiences of how long it felt like it took the content to load.
When a user navigates to a page, they are looking out for a particular type of feedback and experience. Below are the most critical questions that the user might have when visiting a site.
- Is it happening?: Did the navigation happen successfully? Has the server responded?
- Is it useful?: Did sufficient content render?
- Is it usable?: Can I interact with the page, or is it still loading?
- Is it Delightful?: Are the interactions smooth and natural, free of lag & jitter?
Ultimately, user-perceived performance is the only performance that matters. — MDN
When we talk about Web Performance, below are the significant factors that are considered most important.
Startup Performance (Load Time)
A lot of people talk in terms of “a site took x.yz second to load,” but it is not a single moment in time; instead, it has multiple moments that can change the perception of a site being “fast” or “slow.”
Is it happening?
- First Paint is the point at which sufficient application resources has loaded to paint an initial frame.
- First Contentful Paint is the point at which the browser paints the first text or image.
Is it Useful?
- First Meaningful Paint is the point at which the browser paints the primary content of the page. (Deprecated in favor of LCP)
- The Largest Contentful Paint is the point at which the browser paints the largest text or image.
Is it Usable?
- Time to Interactive is the time it takes to become fully interactive.
Run-time Performance
The run-time performance focuses on the Responsiveness and smoothness once the initial load is complete, and the user is interacting with your application.
Is it Delightful?
- Responsiveness refers to the time taken by a page to respond to user interaction. Generally, it should be between 50ms to 100ms to make sure the user doesn’t feel any lag.
- Frame rate: Human eye can detect any lag below 60fps, and hence when we are adding animations or transition or scrolling to our application, we need to make sure that it happens at >=60fps, which will make a better user experience in terms of smoothness.
Memory and Power Usage
Modern users use your websites on a variety of systems which has different constraints on memory, CPU, and power. Improving memory and power usage is as essential as enhancing startup time for a better user experience throughout the users’ session.
Modern CPUs can enter a low-power mode when idle. An application that fires unnecessary timers, or keeps unnecessary animations, prevents CPUs from entering low power mode. In a world where most of the users use battery-powered devices such as mobiles, tab, and laptops, power saving is an essential factor.
When applications move to the background, applications should be able to drop as many loaded resources in memory as possible to use less memory when running in the background. You can listen to an event (e.g. visibiltyChange) and drop the resources from in-memory and, if required later, store in browser storage like indexedDB or just cache in the browser. Application getting pushed to the background is now much more common since the usage over phone and tabs has increased.
Why is Web Performance Important?
Reducing the download and render time of a site improves user experience and user satisfaction, consequently enhancing conversion rates and user retention.
A Google study over millions of page impressions found that when a site meets the recommended thresholds for the Core Web Vitals metrics, users are at least 24% less likely to abandon a page before it finishes loading. — Chomium Blog (The science behind web vitals)
Visit WPO Stats for Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
Here are some real-world examples of performance improvements:
Rossignol.com improved their load time by 1.9 seconds and cut their Speed Index by a factor of 10, contributing to a 94% improvement in conversion rate when compared to the year prior. — Blog (Fasterize helps Rossignol divide its web page load time by 10)
ALDO found that on their single-page app, mobile users who experienced fast rendering times brought 75% more revenue than average, and 327% more revenue that those experiencing slow rending times. on desktop, users with fast-rendering times brought in 212% more revenue than average and 572% more than slow. — The impact of Web Performance
So It’s important, But How long is too long?
There are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7ms) and responding to user input (50 to 200ms). — MDN
As per google’s guidelines on web vitals, below are the three significant metrics and their indicative values of Good & Poor.
How to measure Web Performance?
Real-world performance is highly variable due to differences in users’ devices, network connections, and other factors. Lab data and Field data are the two approaches to measure web performance.
Lab data is performance data collected within a controlled environment with a predefined device and network settings. Field data (also called Real User Monitoring or RUM) is performance data collected from real-world page loads experienced by your users in the wild.
Lighthouse is the most popular tool to measure Lab data. You can use the below steps measure.
- Open a website you want to measure.
- Open Chrome Dev Tool and navigate to Lighthouse Tab.
- Select Categories you want to measure (Performance) and Device (Mobile or Desktop)
- Click the Generate Report button.
Once the report generates, you will see something similar to the below image, which measures essential predefined user-centric metrics.
- First Contentful Paint (FCP)
- Speed Index
- Largest Contentful Paint (LCP)
- Time to Interactive (TTI)
- Total Blocking time (TBT)
- Cumulative Layout Shift (CLS)
You can also define custom metrics using the Performance APIs.
The most common approach to measure Field data is to track metrics via telemetry or analytics services/library that reports based on the configured rules and uses Performance API and other events. Chrome User Experience Report (CrUX) provides metrics showing how real-world Chrome users experience popular destinations on the web.
How can we improve Web Performance?
Measure first and then optimize. Pre-mature optimization generally leads to low ROI on the efforts. A lot of optimizations techniques are enabled by default in the modern application bundlers like webpack.
Reduce overall load time
- Loading only the critical resources on page load and lazy loading all the other resources improve initial load time drastically.
- Using content delivery networks (CDNs) also helps in reducing network latency. CDNs are a network of servers spread across the globe, and geographically nearest server handles it, and hence the latency of HTTP calls is reduced.
- Caching resources whenever possible
Making the site usable as soon as possible
Load web assets in an order that enables the user to start using the site as soon as possible. The two most common approaches to address this are:
- Load Above the fold content first.
- Server-side rendering: It is a technique to generate the entire page on the server to improve FCP and LCP.
Smoothness and Interactivity
- Smooth experience occurs when the frame rate is >=60fps. CSS animations are better than JS animations to ensure consistent animations.
- Response time between 50–200ms makes the site more responsive.
Perceived Performance
When an operation is going to take a longer time, it is essential to keep the user engaged by showing some visual tips and messages.
A lot many times, the user interactions requires making network call which inherently is slow. For such use cases, the progress bar can give some visual feedback to a user and hence improving the perceived performance instead of not showing anything at all.
Quick Tips to improve the performance of your web application:
- Use CDN to cache and reduce latency.
- Choose the right image format.
- Choose the correct level of compression.
- Replace Animated GIFs with video for faster page loads
- Serve responsive images
- Use WebP images
- Reduce JS Payload with code splitting and lazy loading
- Remove unused code with tree shaking.
- Minify and compress — CSS & JS files
- Extract critical CSS
- Use differential loading strategy and load modern code for a modern browser.
- Adaptive serving based on network quality
- Enable prefetching
References
- https://developer.mozilla.org/en-US/docs/Learn/Performance/What_is_web_performance
- https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals
- https://developer.mozilla.org/en-US/docs/Web/Performance/How_long_is_too_long
- https://web.dev/what-is-speed/
- https://web.dev/why-speed-matters/
- https://developer.mozilla.org/en-US/docs/Learn/Performance/why_web_performance
