Web performance is a complex topic. When we discuss web performance we can talk through so many different topics and dive into the details of each one of them. This can be very confusing. The purpose of this article is to stay at a high level of help. You get the big picture of what matters without going into too much detail to understand what drives the user experience for web applications and sites. We voluntarily restrict this article to 5 key drivers that really matter for web performance.
Let’s try to make things quite easy to understand: there are 5 key areas where you should focus when trying to optimize your user performance:
- User Profile
- Contents
- Resource performance
- Critical path and combined performance
- User vs platform hosting
Driver #1 : user profile
Your user profile is a key driver of your the performance you are delivering with your web app.
Your app may be well hosted for users located in a given region, and not for others. It may be well designed for laptop users and not for mobile devices or require too much RAM for others. It may be optimized for Chrome and not for Firefox.
The first thing you need to know is:
- Location: where are my users connected
- Connectivity: how are they connected? Through which kind of connection (adsl, wifi, gsm network) and which operators?
- Which device are they using? With which user agent (browser)?
- How sensitive are they to response times? Culture and their customs may also affect their sensitivity to response times.
Driver #2 : contents provided by your web application
You need to understand WHAT your application is providing to users. It may be a site, it may be a single page app. All the contents are important, part of the initial page load or a response to a subsequent call.
Among other things you need to track the weight of the data transfer required for each of these: HTML file, CSS, scripts. You also need to understand how properly compressed they are.
It is also important to know which ones are critical to a successful user experience.
Driver #3 : resource performance
Each resource has its own performance attribute; depending on where they are hosted and how they are referenced in your HTML code (see the section on critical path hereunder), they will require a new DNS resolution, TCP and TLS connections or not. In all cases, if they are not cached, they will require a server processing, data transfer to process them. Finally, the browser has to render them.
If they result from a user action or a script execution, the same will happen through an API call.
If they result from a user action or a script execution, the same will happen through an API call.
Driver #4 : combined performance = critical path rendering
All resources will not behave in the same way if they are positioned differently in the rendering path (if you are not familiar with the concept, we recommend this article from Ilya Grigorik). In some cases, they will be queued for a while, in other cases they will require the set up of a new network session, in other scenarios, it won’t be the case.
You need to look at the page and subsequent calls performance as a whole and not as the sum of all the resources’ response times.
- Combined contents
- Overall size
- Overall number of elements
- Number of CSS files
- Critical path
- Management of scripts (head, body, defer, async)
- Items blocking the main thread or not
- Time of appearance of user critical elements
- Network sessions
- Number of DNS resolutions required
- Number of TCP sessions required
- TLS sessions setup
- Choice of network protocol
- Parallel handling vs queueing (see our article on HTTP/2 vs HTTP/1.1)
Driver #5 : User location vs platform hosting
Obviously network latency will affect how your application is rendered (see this article for more on this), but that latency depends on:
- Connectivity used by your customers
- The relative “network distance” between your users and the different elements of your platform (to understand the drivers of latency, you should read this article)
This is all driven by how fit the hosting of your resources is for your users: for your app, for your CDN (Cloud Delivery Network), as well as for your 3rd party resources.
When you consider this, think of:
- DNS resolution times
- Network connection times
- Regional specifics (like for Russia, China, Brazil, Africa, etc.).
These 5 drivers are what Kadiska brings instant visibility on. Next week we will follow up with the main optimization factors you can use at these 5 levels.
