Web performance in the http/2 Era

Web performance in the http/2 Era
Web performance in the http/2 Era

In recent years, the topic of Web performance has gradually heated up, and everyone has begun to realize its importance in the design process. Today, with the adoption of the new HTTP/2 protocol, Web has entered the HTTP/2 era.

The Web performance optimization technologies we have been familiar with for a long time may become history. This sharing will review the current best practices, which technologies will change in the HTTP/2 era, and how to make the transition from 1 to 2 right.

0 waiting and delay

In our life, we are often in various waiting states.

When we open the browser. The situation still cannot be improved.

Loading...

No one is willing to wait. Generally, waiting takes a long time.

You should have heard from your friends. Please wait for me and wait for 10 minutes.
You should have heard from your girlfriend. Soon, the results waited for nearly an hour.

No one likes to wait.

What is waiting:

It takes some action until a certain time point or event occurs.Delayed Behavior.

Waiting is latency 1 web page performance

Definition: Wikipedia

Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser.

This can be seen. Web performance is divided into two parts: the loading speed of web pages and the rendering speed of web pages.

The speed of webpage loading is often measured by time. That is, the webpage loading time. We usually say that webpage performance.

In general, we talk about the web page performance, which is actually about the webpage loading time: page loading time. As the name suggests, the shorter the time, the better.

With the rapid development of Internet and web technologies, we want to present more and more things to users. From the beginning of plain text, to a small number of images, to more images, and even videos.

To improve the user experience, the presented content is presented to users in a more friendly form. We started to add a lot of css to improve the effect, adding js and css 3 animations to increase the dynamics.

User-Defined speed: we expect a webpage to be loaded in 2-3 seconds.

50% of users will turn off the tab of the browser if a webpage is loaded for more than 4 s.

The dynamic increase and presentation optimization greatly improve the user experience. However, the price is that the webpage loading time is getting longer and longer.

Research shows that webpage latency of 1 s will lead:

Reduce page views by 11%, reduce user satisfaction by 16%, and reduce profit conversion by 7%

Let's look at a user experience table.

From: Chapter 10. Primer on Web Performance

Unofficial recognition of the web performance community: Within ms, page loading is completed or as many visual feedback as possible can be provided to retain users!

Conclusion: The sooner the better! 2 cases of web performance impact

Amazon: webpage loading speed increased by 100 ms, sales reduced by 1%

Walmart: increases the profit conversion by 2% every 1 s of optimization.

Akamai research found:

47% of users expect that the web page is loaded within 2 seconds. 40% of users will close the web page, if the webpage loading time exceeds 3 seconds, 52% of online shoppers prefer to go to the shopping website with faster webpage loading speed. 3. Global bandwidth: two data items

Average global bandwidth (download): 21.3 Mbps (21.3/8 MB/s)

Average download speed of global mobile phones: 10.9 Mbps (10.9/8 MB/s)

From: netindex

Images

Global download bandwidth:

Europe:

North America:

South America:

Africa:

Bandwidth and Round-Trip Time

RTT (Round-Trip Time): Round-Trip delay. In a computer network, it is an important performance indicator, indicating that data is sent from the sending end, to the sending end receiving confirmation from the receiving end (the receiving end immediately sends confirmation after receiving the data ), total latency.

Higher bandwidth does not mean faster webpage loading! More Bandwidth doesn' t Matter (much)

Compared with bandwidth, RTT has a greater impact on web page performance.

Conclusion:
Increasing bandwidth does not significantly affect the speed of webpage loading. Instead, reduce the number of RTT or RTT.

4. How does HTTP work to improve web performance 4.0?

HyperText Transfer Protocol (HTTP) is the most widely used network Protocol on the Internet. All WWW files must comply with this standard. HTTP was designed to provide a method for publishing and receiving HTML pages.

In 1960, American Ted Nelson conceived a method for processing text information through a computer, called hypertext, which became the foundation of the development of the standard architecture of HTTP hypertext Transfer protocol.

Ted Nelson organized and coordinated a series of RFC, the famous RFC 2616 defines HTTP 1.1.

Short video: Basic concepts of web applications, how they work and the HTTP protocol

Different types of HTTP requestsGET: This request is Used to get the Response header and the response body HEAD: this request is used to get back The response header only (not the response body as returned by the GET request ..) POST: This request is used to submit data (eg: for to be used in HTML forms etc ..)... PUT: Used for uploading resource PATCH: Is used to modify the resource DELETE: Used for deleting resource TRACE: simply echoes back the request sent by the client... This can be used for testing the servers and Checking weather the server is alive or not .. use Telnet to display HTTP requests

Telnet www.baidu.com 80GET / HTTP/1.1TRACE / HTTP/1.1

4.1 HTTP/0.9 (1991)

HTTP 0.9 is the first version of HTTP. Is very weak. The Request has only one row, for example:

GET www.cnblogs.com

From such a simple request body, there is no POST method and no HTTP header, we can see that the HTTP client in that era can only receive one type: plain text. In addition, if you do not get the information you want, there will be no 404 or other errors.

Although HTTP 0.9 looks so weak, it can meet the needs of that era.

4.2 HTTP/1.0 (1996)

Due to the surge in demand for the World Wide Web, HTTP/0.9 is deeply unable to meet the demand. At this time, a lot of HTTP/1.0 features have been expanded.

HTTP/1.1 changes include:

The POST method introduces the HTTP header and status code. The HTTP transmission content is not limited to text. May be images, videos, documents, etc. 4.3 HTTP/1.1 (1999)

HTTP/1.1 does not change much compared with 1.0.

Mainly:
1. added the host header field.
2. added the Range field to allow the client to download only a portion of the content over HTTP, which makes multi-thread download possible.

HTTP/1.1 and earlier versions are not described in detail. If you are interested or have questions, please google it yourself.

From 1.1 Release to SPDY proposal, 11 years in the middle. HTTP has not made any updates within such a long period of time.

We know that HTTP/1.1 has many problems in web performance.

For example:

A relatively large HTTP Head occupies a large amount of network traffic. Plaintext transmission is not secure. Non-persistent connection: each request requires a TCP connection, which takes a lot of time. Persistent connection: A single TCP connection that can send multiple requests. However, multiple requests are ordered sequentially. Subsequent requests must wait for the previous request to return before sending a response. This can easily cause blocking of subsequent requests, which is also time-consuming.

These problems are enough to cause many security problems, and poor webpage performance, that is, a long webpage loading time.

To solve these problems. Communities or companies that focus on web performance have come up with a lot of solutions and some technologies designed to improve web performance.

For example:
The performance optimization principles of Yahoo's 14 web pages.

Reduce HTTP request times use CDN (Content Delivery Network, Content Delivery Network) to add Expires Header (web cache) compress the page element and put the style sheet on the header and put the script file at the bottom to avoid CSS expressions from putting JavaScript and CSS into external files. Reduce DNS query times to minimize JavaScript code and avoid redirection to delete repeated script file configuration ETags cache Ajax

Let's analyze what factors affect the webpage performance, that is, it will prolong the webpage loading time.

A webpage, from browser request, to server response, returns data or resources, to browser acceptance. In fact, it involves three objects at a macro level.

Browser: Number of requests affects PLT routing network: bandwidth and RTT affect PTL server: Server Response Time, database response time, and other impacts on PTL

We will not discuss the server response time for the moment, because it is human-controllable and generally a task of background engineers.

Let's take a look at the impact of browsers and routing networks on PTL.

On the browser side, the number of requests depends on the webpage structure and content. For images, small icons, and CSS files
Too many JS files, the number of requests is naturally high. In this way, PTL is greatly added.

Therefore, from the perspective of the browser object. We should minimize the number of requests, increase the number of concurrent connections, and avoid blocking loading.

In this way, the above 14 practices are generated: 1, 3, 5, 6, 8, 12, 13, and 14.

From the routing network perspective. What affects PTL is the two indicators we have analyzed above: bandwidth and RTT.

Therefore, in the intermediate part of resource transmission, we can reduce the PTL by increasing the bandwidth and bandwidth by reducing the data volume and RTT.

Therefore, 14 practices are generated: 2, 4, 9, 10, and 11.

To sum up the above content, the technologies involved include:

File stitching and compression sprite Inline Image Domain Sharding

In order to fundamentally solve the above problems, rather than requiring front-end backend engineers to do a lot of performance optimization work, a great attempt has emerged. That is SPDY.

4.4 SPDY (2010)

Let's take a look at what SPDY has done.

Multiplexing
Allow infinite concurrent streams in a TCP connection (when resources of both parties are acceptable ). Because requests are transmitted across a single channel, TCP can achieve high efficiency, thus less network connection needs, and can be transmitted at a high data density. Requests with priority
Although Infinite Parallel Data Streams solve the serialization problem, they introduce another problem: If the channel bandwidth is limited, the client may block the requests for blocking the channel. To overcome this problem, SPDY implements Request priority: the client can request as many projects as possible, and each request is assigned a priority. In this way, even if a high-priority request is still in the pending state, the channel will not transmit non-critical, low-priority requests, which effectively prevents transmission congestion. HTTP Header Compression
For HTTP requests and response headers, SPDY is compressed to make the package smaller. For RESTFUL web and OpenAPI services, the efficiency will be significantly improved. Server push
SPDY uses the X-Associated-Content Header to push data to the client and notify the client in the header. I want to push resources to you and prepare to receive the data. Recently popular Google +, if you use chrome, SPDY technology is used by default and server push technology is enabled. The server pushing technology comprehensively improves user experience, and G + products quickly take up many advantages. Recently, Facebook has developed its own browser, and has also been able to get rid of the current technical restrictions. Server suggestion
Unlike the PUSH technology mentioned above, the server will first tell the browser that you can download ABC resources. This ABC resource may be the JS, CSS, or content of the next page. The server does not actively push messages and still waits for client requests. This is a great Optimization for low-speed networks, a bit similar to our pre-loading technology. 4.5 HTTP/2 (2015)

HTTP/2 is based on SPDY and is better than SPDY.

Differences:

HTTP/2 supports plaintext HTTP transmission, while SPDY uses HPACK to forcibly compress https http/2 message headers, rather than DELEFT used by SPDY.

Advantages of HTTP2:

HTTP/2 transmits data in binary format instead of HTTP/1.x text format. The binary format brings more advantages and possibilities in Protocol parsing and optimization extension. HTTP/2 uses HPACK for compressed transmission of message headers, which can save the network traffic occupied by message headers. Each HTTP/1.x request carries a large amount of redundant header information, which wastes a lot of bandwidth resources. Header Compression can effectively solve this problem. Multiplexing: Simply put, all requests are completed through a TCP connection concurrently. Although HTTP/1.x can use a connection to complete multiple requests, multiple requests are ordered sequentially. Subsequent requests must wait for the return of the previous request to send a response. This can easily cause blocking of subsequent requests, while HTTP/2 achieves real concurrent requests. At the same time, the stream also supports priority and traffic control. Server Push: the Server can Push resources to the client more quickly. For example, the server can actively push JS and CSS files to the client, without the need for the client to parse HTML and then send these requests. When the client needs it, it is already on the client. 5. Use HTTP/2

Step 1: use SSL/TLS to encrypt your HTTP connection, that is, Use HTTPS

Step 2: configure the service thick ky "http://www.bkjia.com/kf/ware/vc/" target = "_ blank" class = "keylink"> vc8YnIgLz4NCjxpbWcgYWx0PQ = "" src = "http://www.bkjia.com/uploads/allimg/160417/0402042047-26.jpg" title = "\"/>

Step 3: Check the browser compatibility

Nodejs width HTTP/2

You can use Package: http2 to deploy the http2 service of nodejs.

Code: