Resource loading optimization for Web pages

An important piece of mobile development is the loading optimization of resources. Mobile development because of low bandwidth, high latency, mobile device small memory, low processor performance reasons, so many times have to optimize the front-end page performance to meet user expectations of page loading.

Some time ago to do the relevant aspects of the optimization, found that the online Chinese course is relatively small, are based on the Chrome developer site Step by step look down, to find a problem to solve, so will be part of the useful Web page finishing translation.

First, check the page load Speed

Web page loading time is affected by the Internet speed, generally using a browser to simulate a specific speed test, so that before optimization and optimization results will have a more accurate comparison.

Method: Open the Debug panel-choose the speed, generally we move the test is regular 3g. Then refresh the page and start viewing the page load time.

The load order and time of the resource are displayed in turn, and the red line indicates when the DOM was loaded.

second, the order and description of resource loading

The life cycle of a resource request is as follows:

Redirect-application Cache-DNS-TCP-Request-response

For a resource, click the resource load progress bar to see the load time for each phase. Or it can be obtained through the timing API in the console panel.

performance.getEntriesByType(‘resource‘).filter(item => item.name.includes("style.css"))

The specific explanations are as follows:

• Queueing (Queued): The browser has a connection limit, when the Web page resource is a lot of queuing phenomenon, queued resources to wait until the last resource has been released after the release to start the request. Requests that are lower priority than key resources, such as JavaScript and CSS, are postponed by the browser, and generally the pictures are postponed. When many resources initiate a request at the same time, the browser loads the CSS first, then JavaScript, and finally the picture.

• stalled (blocking): the request is blocked at the time before it is sent. There are many reasons for blocking, which causes the queue or proxy negotiation to cause blocking.

• DNS Lookup (DNS query): DNS lookup time, the Web resource requests every new domain to do a full DNS query.

• Initial Connection (initial connection): The time it takes for the initial connection to be established.

• Request Sent (send time): The time the network request was sent.

• Waiting (TFFB) (Wait time): the time to wait for the server's initial response.

• Content Downloading (download time): The time when the resource was downloaded.

Iii. diagnostic Causes and solutions

Debugging through the chrome network panel often results in a different load time, which can cause a lot of slow loading. The front end needs to be optimized, but many times it is a background or network problem.

1. Queuing problems

The longest-standing problem is the problem of resource queuing. In a http1.0/1.1 connection, Chrome allows up to 6 connections to the same host at a time, and if there are 12 resources in the Web page, 6 of them will need to be queued until the previous download is complete in order to initiate the request. To solve this problem, we must first reduce the request of the webpage, such as CSS Sprite, Js/css compress, adopt cache, load on demand and so on.

There is also a way to put resources under different sub-domains, such as the separation of picture resources and static resources can greatly accelerate the page load time, but this method of HTTP2 connection does not apply.

2. TFFB time is slow

TFFB time is usually recommended below 200ms, and if the recommended value is exceeded, the download of other resources in the queue slows down. TFFB High mainly has two reasons: one is the client and the server before the network situation is poor, and the second is the server application response is relatively slow. First of all, to exclude the network factors, in the local environment to see if there is still tffb situation, if there is, need to optimize the application response time, such as the optimization of database queries, resource mitigation, modify the Web server configuration and so on.
If it is caused by the network, the server and the client each node can cause this problem, the simplest way is to migrate the application to other servers to see if there is a problem, then a node one node to identify the cause.

3. Download time is too long

If you spend a lot of time on downloads, it's useless to increase the server response, or you should compress the files

Resource loading optimization for Web pages