This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.
Let’s start with a question: What exactly is Web performance optimization optimized for? You could argue that optimizing the user experience is inherently immeasurable. So we need to turn unmeasurable indicators into measurable indicators.
What indicators should we care about?
To identify key performance indicators, two things must be met:
- Measurable, which means you can measure it in code;
- Focus on user-centric key results and real-world experiences.
The first point is easy to understand, you can’t optimize if you can’t measure it, but what do you mean by “key results and real experiences” in the second point?
The key outcome is what users really care about. For example, when the user enters the product details page, he is concerned about how the product is and what the price is. Specifically, the key information on the page is the product description, product head picture, product price and purchase button. We want to make sure that this information is available to users no matter what the circumstances.
Real experience is how users feel about using the product. For example, when a user goes to a list page, while swiping, the page suddenly pops up into a popover. Does that annoy him? This is a real experience.
Set key indicators for performance optimization
Before we set our targets, let’s look at some concepts.
loading
Loading is the process of loading the content of a page when it enters the page. For example, when you open some websites, you will find that the text and pictures on the front page of some websites appear very slowly, while others appear very quickly. This content appears in the process of loading. Slow loading is a huge drain on users’ patience and can drive them off the page.
interaction
The so-called interaction is the response given by the page when the user clicks on a certain function of the website or App. For example, if we click a “like” button and immediately give a “like” plus one display, it is a good interactive experience, whereas if there is no response for a long time, it is a bad interactive experience.
Visual stability index
Visual stability indicator CLS (Cumulative Layout Shift), also known as the Layout offset, refers to the deviation of unstable elements in the line of sight when the page changes from one frame to another frame.
Measurable indicators
The time from when the user presses Enter to the following items:
- When something comes up
- DOM Ready event occurs (DOMContentLoaded)
- When the page is interactive
- The onload event occurred. Procedure
- Dynamic resource loading is complete
Bad time
What is white screen time? It refers to the time from the input content enter (including refresh, jump, etc.) to the page began to appear the first character. This process involves a DNS query, establishing a TCP connection, sending the first HTTP request, and returning an HTML document whose Head has been parsed. Its standard time is 300ms.
If the screen is blank for too long, users will think our page is not available, or usability is poor. After a certain amount of time (say, 1s), the user’s attention will move to another page.
What factors can cause a long white screen? The reasons are as follows: DNS query takes a long time, TCP request connection takes too long, the server processes requests too slowly, the client downloads, resolves, and renders a long time, does not do Gzip compression, lacks local offline processing, and so on.
The first screen time
First screen time = white screen time + render time. This is the time from the time the browser enters the address and hits press enter to the time the first screen has been rendered. There is no need to scroll or pull down the page during this period, otherwise it will not work.
In terms of load performance metrics, first screen time is more important than white screen time.
- In terms of importance, the first thing you see when you open a page is usually critical, such as an e-commerce header, a product price, a buy button, etc. We want to make sure that this content is available even in the worst of online environments.
- From the perspective of experience integrity, after entering the page, there is a blank screen. After the first character is loaded and the content on the first screen is displayed, we will consider that the loading is complete and the user can use it.
When the white screen loads, it simply means that the page is loading, but we still can’t do things like place an order or purchase until the first screen time is over.
The first screen time can be divided into white screen time, data interface response time, and image loading resources. The white screen time has been mentioned before. The data interface response time can be directly obtained from the back-end service, without repeated calculation by the front-end, we just need to take the value. The last picture resources need to be collected separately.
One last word
If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.