Page experience for 1-second rendering

Research shows that any delay of more than 1 seconds will disrupt the user's thinking flow, resulting in a bad experience, thus losing customers, I want to do is in any device and network environment to maintain the smoothness of the web, to provide a better experience.

To meet, a second budget is not so easy, but fortunately, we can complete the rendering of visible areas in a second, so that users can interact with the page as soon as possible.  You can continue to load the remaining pages in the background when the user interacts with the page. DNS Lookup (MS) TCP Connection (MS) HTTP request and Response ($ ms) DNS query (MS) TCP connection (up to 200 ms) HTTP requests and responses MS) on the mobile page to achieve the "first screen seconds Open" guidelines, you will encounter different network environment challenges, may be users are in a 2G/3G/4G environment to access your site, mobile network latency is significantly higher than the limited link, and will consume us a second in the first screen seconds to open the budget of different network environment, Access speed differs from the following 3g/4g network transfer rate 200-300 Ms roundtrip times for 3G networks50-100 Ms roundtrip times for 4G network you have to understand that your mainstream users are still 3g and we must not Do not put 3g per network access consumption time, assuming 200ms understand this point, we come back to push the time. If we analyze a typical communication between the browser and the server, we will find that the time of the network is consumed by the net itself: a DNS query is used to resolve the host name (such as Google.com) to an IP address, a network round trip is used to initiate a TCP handshake, And the last full network round trip for sending HTTP requests. We're going to have only a few more! Build request 1 seconds consumed 600msDNS Lookup (ms) TCP Connection (MS) HTTP request and Response (MS) DNS query (MS) TCP connection (MS) HT TP Request and Response (MS) 600MS is the inevitable 3g network consumption, there is nothing to do. ———————————— Split Line
The server must render the response within 200ms. After removing the network delay, there is still 400ms time for us to optimize, the service side must render the corresponding content, the client application code must be executed, and the browser to complete the layout and rendering of the content. The server response time is the time it takes for a server to first return HTML after the network transfer time is removed. Because we have too little time left, this time should be controlled at a minimum, ideally should be controlled below 200ms, the less the better. ————————————— Split Line minimizes the number of redirects in development the maximum possible reduction in HTTP redirects, because each redirect adds an additional network round trip of 1 or 2 times (two times if you query DNS again) on a 3g network will cause a hundreds of mm delay, if necessary, Try to avoid redirecting to level two domain names. ————————————— Split line The first render network returned should be minimized due to the TCP evaluation of link State in a special mechanism (see TCP slow boot) a new TCP link cannot be used at a time with full bandwidth between the client and the server, in this case, The server sends up to 10 TCP packets in the first network round-trip through a new link (about 14KB), and must wait for the client to answer the data before it can increase its congestion window and continue sending the data, because it is important to optimize your content, considering the behavior of TCP. The number of network round trips required for the first rendering of the page should be minimized, and the first screen should be less than 14kb, so that the browser can draw the page after a network round trip, and remember that the server software is going to be upgraded to the latest version, otherwise your packet cap may be only four or three.

Page experience for 1-second rendering