No one likes to wait. Let alone on the internet. But every once in a while you land on a website so slow that it makes your head scratch. In tech, we say such websites have poor web performance.
But what is Web performance and why does it matter? In this weekly series of blogs, we’ll dive deep into the factors that make a website slow and learn ways to deliver a faster, better experience to users.
What is web performance?
- Measuring relevant metrics to pinpoint the cause of a slowdown
- Improving load times
- Improving perceived performance
How does it help you?
- Improves first load time to accommodate users
- Provides smooth, non-janky experience to take care of users
- Lowers bounce rate improves conversions
- Better Search Engine Optimization (SEO)
- Improves perceived performance
If a website is slow, but it appears fast for the users — for all matters, it’s a fast website
Measuring web performance
To improve website performance, it is important to first set up a mechanism to measure relevant bottlenecks causing the slowdown.
Journey of a web page
User hits a URL ➡️ HTTP request ➡️
DNS lookup (for IP address resolution using name servers of the domain) ➡️
TCP handshake (for transfer of data over the network) ➡️
TLS handshake (to ensure data is encrypted during transfer) ➡️
The server responds back with a 200 response (HTML file)
Critical Rendering Path
DOM ➡️ CSSOM ➡️ Render Tree ➡️ Layout ➡️ Paint
- DOM — HTML returned in the response is parsed by the browser’s HTML parser and converted to DOM. During this process, if an external resource (JS/CSS) is referred without a deferring attribute then the parsing process pauses for the download otherwise it continues till all HTML is parsed. After which the browser fires the DOMContentLoaded event.
- CSSOM — The CSS object model contains all page styles. It is considered render blocking because of its cascading nature. Until every selector is loaded, the render is blocked.
- Render Tree — Representation of styled content on the screen (DOM + CSSOM)
- Layout — Calculating where elements are positioned relative to each other. The time of this process is dependent on the size of the DOM elements. Anytime a change in DOM takes place, the layout is evaluated again for the child elements & siblings. Therefore, large layout shifts should be avoided.
- Paint — Render Tree + Layout, painting everything on the screen.
Interactivity — Once the page has finished rendering and all external resources have been loaded, the page now becomes interactive for the user.
Loading performance Vs. Rendering performance
- Loading performance: File sizes, asset load order, no unused assets/code, no blocking scripts
- Rendering performance: CSS style calculations, unnecessary reflows, bad event listeners
Factors that impact page load
- User’s location
- Network traffic
- Network speed
- Device power
Loading performance metrics
- quantity-based metrics: Used for long-term monitoring, revealing trends, and highlighting problems with 3rd party scripts. For example:
a. Number of HTTP requests
b. Number of image loaded
2. Milestone metrics*: Measures loading performance. For example:
a. First Contentful Paint (FCP)
b. Largest Contentful Paint (LCP)
c. Cumulative Layout Shift (CLS)
*We will explore these metrics in more detail, in the upcoming blogs.
Performance budgets
Performance optimization is a continual process. Your performance budget metrics should be whatever your ratings are now. In the future, new metrics should be better than these and they would become the new baseline.
Performance goals
What does ‘instant’ look like as an objective load time metric?
- ~100ms of load time
- But load time isn’t the best metric for perceived user performance, it can be better measured by speed index, FCP, time to interactive
- On a 3G network, websites should usually paint the first element in or under 2s and should become interactive at around 5s
In this blog, we understood what web performance is, why it matters & a broad breakdown of web performance. In the upcoming blog, we’ll set up tools to measure web performance. Stay tuned!
If you found this blog valuable, like, share & follow for more. Let’s continue the discussion in the comments :)
You can also follow me on Twitter, and LinkedIn, if you feel like it 🤙🏼
