Front-end Performance Optimization Guide [2]- What is Web Performance?

A large website architecture model is shown in the figure below. The performance optimization of a website can be divided into three layers: Web front-end performance optimization, application server performance optimization, and storage server performance optimization. The overall performance of the site, all developers need to maintain together.

Large site architecture model

As a Web front-end developer, you should also know something about application server and storage server side performance optimization. For example, you should know more than HTTP caching. Of course, we focus on Web performance optimization.

Caching strategies for web sites

We talk about optimizing Web performance, but what is Web performance? Web performance is really about page performance, and when we say how well a page performs, we’re talking about whether it loads quickly, whether it allows users to start interacting with it quickly, whether it scrolls and animates smoothly, those are all performance issues that we care about. Web performance includes both objectively measurable performance from the developer’s perspective and subjective and perceived performance from the user’s perspective.

🎯 Objective performance

For developers, we focus more on load times, interactive times, frames per second (more on these metrics later), which can be measured objectively, and there are ways to optimize Web performance to meet the standards set by developers. Such as:

Reduce load time: How long it takes for files required for a page to load properly to be downloaded to a user’s computer is often affected by network, file size, number of files, and other factors. The general strategy is to keep the file as small as possible to minimize the number of HTTP requests, or use a preload strategy to load the file early to make it available faster.
Make the site available as soon as possible: We can load the site’s resources in a reasonable order so that users can really get started quickly. Any other resources can be loaded in the background while the user performs the primary task, or they can be loaded only when they are actually needed, known as lazy loading. For example, when accessing a page, resources required by the first screen can be loaded preferentially, while other resources can be loaded lazily.
Smoothness and interactivity: There are many best practices for making your application feel smooth, such as using CSS animations instead of JavaScript for animation, and minimizing the amount of UI repainting required due to DOM changes.

Objective performance is a measure of time from the start of the request, through the downloading, parsing, and execution of all resources, and finally drawing.

🍭 Perception performance

But for the user, the perception performance of the user is the most important. Perceptual performance is a subjective measure of how fast a website appears to users, based on load time and responsiveness of pages, when the site loads enough to convince users that it is loaded and interactive. Perceived performance is the user’s perspective, not the yardstick. There are front-end optimization techniques that can improve perceived performance and render document content faster. Such as:

Add the defer or Async properties to the script, or place the script at the end of the document;
Putting CSS at the head of the document and loading font files ahead of time prevents page flickering;
Load only the resources required by the first screen, and lazily load the resources not required by the first screen.

Even if a page load or an action response takes a long time, there are ways to make it feel less slow. Such as:

Display the base map in the page loading process, from the base map to content rendering is a relatively coherent process, users will not be anxious because of waiting;
Display loading information or loading animation during page loading or data request;
Display the progress bar in interactive scenarios such as uploading files and parsing data.

Displaying content, or at least a portion of the page, and indicating that the content is loading as quickly as possible is critical to improving perceived performance. When objective page performance is difficult to optimize, these methods allow users to perceive better performance than the actual performance of the page, which is also a way to optimize Web performance. In layman’s terms, you may not be able to make your page faster, but you can make it feel faster.

📝 summary

This is an introduction to What Web performance is, and I divide it into measurable objective performance from the developer’s perspective and perceived subjective performance from the user’s perspective.