Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

How to solve the problem of slow loading on the first screen? We should make it clear first when we come across this problem

  1. What is the first screen load time?
  2. How to calculate the first screen load time?
  3. Why and why does the first screen load slowly?
  4. How to solve the slow speed problem?

What is the first screen load time

The first screen loading time refers to the time between the browser user’s input of the URL and the completion of the rendering of the first screen content. From the user’s perspective, it is “the speed of webpage rendering after the url is entered in the address bar”. The entire site does not need to be fully loaded, but it does need to show the content in the current visual window.

How to calculate the first screen load time

It’s actually very simple, and we don’t have to do it manually. Open the F12 console and refresh the page, where Load is the first screen Load time

The speed of loading the first screen seriously affects user experience and affects users’ recognition of the website. So let’s figure out what’s slowing down our first screen load. Only by finding the cause can we “apply the right medicine” to the right solution.

The first screen loading speed is slow

Here are a few very common reasons:

  1. Network latency
  2. File size too large
  3. Interface repeat request

How to solve

I have found several common solutions to these problems

  1. Network latency is an objective reason that we can’t solve with code, just switch to a faster network.
  2. File size too large

Sometimes we will inevitably need to import many other files, such as images or other static resources, which cannot be deleted. What about that? Don’t panic, there are ways to compress, compress, cache, and so on.

  • Route lazy loading

The route is loaded as a function, so that each route file is packaged separately and the corresponding route component is loaded only when a given route is parsed.

  • Static resource local cache

The front-end reasonably uses localStorage, sessionStorage and other cache methods. The interface adopts HTTP cache and properly sets the request headers such as cache-control.

  • According to the need to load

When we introduce UI components such as elementUI or AntDesign, we don’t need to introduce them all at once, just the ones we need.

  • Image compression

Like some icon ICONS, we don’t need to store images locally, we can use online font ICONS instead, or merge multiple ICONS into one image to reduce the request stress.

  • Reduce repeated requests

For example, for form submissions or long lists, use throttling wisely to reduce unnecessary requests and reduce server stress.