Web performance optimization: What? Why? How?

Why do you want to improve Web performance?

Web performance Golden rule: Only 10%~20% end-user response time is spent on downloading HTML documents, while the rest of the 80%~90% time is spent on the download page component.

Web performance has an important impact on the user experience, according to the well-known ' 2-5-8 ' principle:

• When the user responds within 2 seconds, they feel the system responds very quickly
• When the user gets a response within 2-5 seconds, the system can feel the response speed
• When the user responds within 5-8 seconds, the system responds very slowly, but it can accept
• When the user doesn't get a response after 8 seconds, the system sucks and even the system hangs up, either open the competitor's website or re-launch the second request

Everything needs to be studied, we can find the law of the development of things through scientific research. Thanks to the 14 front-end optimization rules that Yahoo engineers have summed up, we can stand on the shoulders of giants. The 14 principles of optimization in the book "High-performance website building" are summed up in the following areas:

1. Reduce HTTP Requests
2. Page internal optimization
3. Enable caching
4. Reduce Download Volume
5. Optimization on the network connection

　　

Why reduce HTTP requests to improve Web performance?

To answer this question, we need to understand what the process is going through when the browser sends an HTTP request to the server to know what to get the data from:

　　Open a link (three handshake process for TCP/IP)-" Send request-" wait (network delay and server processing time)- download Data

Let's take a look at the time spent in each phase of the HTTP request in the homepage of Baidu, the different colors on the above represent the different stages in the

You can see that in addition to the pictures, most of the other HTTP request events are spent establishing the connection and waiting phase.

The HTTP protocol is based on the TIC/IP protocol, in which the TCP protocol provides a reliable connection service with a three-time handshake to establish a connection. In a nutshell, a three-time handshake is a process of identity confirmation:

　　( first handshake: Host A sends a bit code for Syn=1, randomly generates a SEQ number=1234567 packet to the server, Host B is known by Syn=1, a requires to be established online;)

Ching son: Are you brother Xiao, I am sunny son

( second handshake: Host B to confirm the online information after receiving the request, send an ACK to a number= (host A's seq+1), syn=1,ack=1, randomly generate seq=7654321 packets )

Xiao Jian: This goods is who, a flute a sword walk the lake, the next sentence is what?

(Third handshake: Host a after receiving check ACK number is correct, that is, the first sent Seq Number+1, and the bit code ACK is 1, if correct, host A will send an ACK number= (Host B seq+1), ack= 1, Host B is received after confirming the SEQ value and ack=1 The connection was established successfully. ）

Ching son: this poem ... You really are brother Xiao, a sword walk the river, the eternal feeling sorrow wine a back ...

Xiao Jian: Sunny son, you really are sunny son ....

(Pop and pop, pop, pop, pop, pop, ......) ）

To get to the point, this process also needs to consume time, in Baidu homepage to find an extreme example:

And the waiting time is usually greater than the time of the content download, and here is an extreme example:

From this we can conclude that the vast majority of the time spent in an HTTP request is spent on establishing the connection and waiting time, and the optimization method is to reduce the HTTP request.

How do I improve Web performance?

1. Reduce HTTP Requests

In general, reducing HTTP requests usually starts with two things: reduce requests for pictures, reduce requests for script files and style sheets

There are usually two ways to reduce the picture: CSS sprites, inline picture, Iconfont.

CSS Sprites: Merge multiple images into a single picture, using CSS's Background-position property to place the background image of the HTML element in the desired position in the Sprites image. The additional advantage of using this technique is that he lowers the amount of downloads, the merged picture is smaller than the detached picture, because it lowers the cost of the image itself (color tables, formatting information, etc.). The actual project CSS sprites is a physical activity, because the development process needs to maintain this large map (add, reduce the picture), Zhang Xin Xu classmate of the article has introduced how to manage sprites pictures can be used as a reference (here). CSS Sprites is definitely a great solution (clean labels, fewer pictures, shorter response times) if you need to provide a large number of images in the page for backgrounds, links, and navigation bars.

Inline picture: By using the Data:url mode, you can then include the picture in the page without any additional requests. The downside is that IE8 browsers do not support this approach, and IE8 has limited data size and can only support data within 23KB. For smaller images you can inline the Web page directly, but for large images inline to the page will cause the page to become larger, it is wise to use CSS, use the inline image as the background, and put in the external style sheet, which means that the data can be slow to exist inside the stylesheet. Using an external style sheet adds an HTTP request, but the style can be cached by the browser for extra gain. Another point to note: Base64 is lossy compression.

Iconfont: icon Font, this is a new popular in recent years to replace the image of a font technology. It can adapt to any resolution without the picture blur problem, compared with the picture it has a smaller capacity, more flexibility (like font can set icon size, color, transparency, hover status, inversion, etc.), IE8 above the browser support the technology. Before using Iconfont, you should first determine whether the font library you choose is charged. For more information, refer to this article: on the font of icons

The main principle of reducing the request for scripts and stylesheets is merging . In the actual development we follow the principle of modularity to spread the code into many small files, according to the principle of software development This is completely correct, but for the on-line page, each file will produce an HTTP request, severely affect performance. As with CSS sprites, merging these small files into a single file reduces the number of HTTP requests and shortens the end-user response time. In the process of merging we also need to use tool refinement (removing unnecessary characters to reduce file size reduction download time) and confusion (in addition to removing unnecessary characters, it also overwrites the source code, such as functions and variable names using shorter scalar names) JavaScript code. For those of you who are using AMD or CMD for modular development, you will typically package other dependent modules into a file during the merge process, and the template HTML is typically inline with a string in a JavaScript file. The most commonly used front-end build tool is Glup, which has a preliminary application: Front End | Gulp Packaging Require.js Module dependencies

　　

2, the internal optimization of the page

About the main direction of the internal optimization of the page: The style sheet is placed at the top, the script file is placed at the bottom, avoid CSS expressions, put the script's stylesheet outside, remove the duplicate script

Concerned about the performance of the engineers want the page can be displayed as soon as possible in front of the user, for a lot of page content of the page we hope content can be loaded gradually, to provide users with visual feedback. Placing the style sheet at the bottom causes the browser to block content from being rendered progressively. To avoid redrawing the page elements when the page changes, the browser blocks page rendering until the stylesheet resolves (see my blog for more details). So if putting a style sheet on top does not reduce the load time of the resource, it reduces the rendering time of the page. Xiaomi homepage has ever made such a mistake:

Placing the style sheet at the bottom blocks the page's progressive rendering, and placing the script file at the top of the page also blocks the page's gradual rendering. The script element blocks the parsing of subsequent content because the script can be document.write to change the page. The workaround is to place the script tag at the bottom of the page. This allows the content to be rendered progressively, and also improves the degree of parallelism of the download. If we're sure we don't need document.write, you can add the Asyn attribute to the script tag (plus defer in IE) to increase the parallel download level.

CSS expressions are a way IE supports the ability to dynamically change CSS properties, and we don't need to know too much about how she writes as follows, and once the expression keyword is found in the product, it will be wiped out.

　　

Using external scripts and styles this one, I think any engineer with a bit of experience would do that.

Remove duplicate script: This is basically to avoid adding the same JavaScript code multiple times on the page, which is basically not the case if we have a management-dependent approach like AMD and CMD in our development.

3. Enable caching

About the use of caching here are two sets of scenarios: Expires/if-modified-since, Cache-control/etag The former is a caching scheme in HTTP1.0, which is the HTTP1.1 cache scheme, which has higher precedence if both are present in the HTTP header.

The if-modified-since approach is often called conditional get. A copy of a file is saved in the browser cache, but you need to ask the server if the copy is available. If-modified-since is the browser will send the last modification time to the server, the server corresponding header last-modified to compare, if If-modified-since <= last-modified the browser read local copy. At this point the response status is 304 not Modified and the response body is not sent.

Expries: Although using conditional get and 304 responses can save time, the browser and the server still have to send a request for confirmation. Conditional get can be avoided by explicitly setting a copy's expiration time. When the browser discovers the expires in the response header, the expiration time is saved with the file in the cache. is read from the cache until it expires. The Expires header uses a specific time to specify the expiration date of the cache, and he requires the browser to be exactly the same as the server time. And once it expires, the server-side configuration needs to be reset to the top of an expiration time.

ETAG (Entity label): a mechanism that the server uses to check the validity of the browser cache. The ETag is introduced in HTTP1.1, which is a string that uniquely identifies a specific version of a component. The only format constraint is that the string must use double quotation marks. If the browser verifies that a component is valid, he will use If-none-match to pass the ETag string to the server. If the etag is matched, the server side returns 304. (The ETag provides greater flexibility if the entity data needs to be changed according to User-agent or Accept-language). For a Web site that uses a server cluster, the etag is usually not matched from one server to another. This is the problem with the ETag. And even using if-modified-since and If-none-match at the same time will not achieve the desired results. There's always a workaround: custom ETag format

　　

　　Cache-control:HTTP1.1 introduced to replace the expires, which uses the max-age instruction to specify how long the copy is cached, the instruction defines an update window in seconds, and the component has been using the copy since the number of seconds from the requested start to the present is less than the set value. An HTTP request was avoided. Provides finer-grained control over the Expries,cache-control directive. For more information, please see the articles of the large students: viewing HTTP cache through the browser

4. Reduce Download Volume

The most effective way to reduce the amount of downloads is to turn on gzip compression, whichis a free form of GNU development. The compression component speeds up the response by reducing the size of the HTTP response. HTTP1.1 uses accept-encoding to identify supported compression, and if the server sees this identity, it uses one of the methods in the request header to compress the response. and notify the Web client via content-encoding. Many websites compress HTML files, and virtually any text, including XML and JSON, can be compressed, but pictures and PDFs should not be compressed. It is generally possible to compress files larger than 1KB or 2KB based on experience. Compression typically reduces the amount of data that is being responded to by 70%. The cost of compression is that the server needs to be compressed by an extra CPU and the client needs to decompress. So there is a tradeoff between CPU consumption and the size of the data block.

5. Optimize Network connection

There are three main rules for network connectivity optimization: Using CDN acceleration, reducing DNS lookups, avoiding redirects

CDN: ACDN is a collection of geographically distributed Web servers that you use to publish content more efficiently. Web server is typically selected for specific user services based on the proximity of the network . this shortens the transmission response time of the resource and effectively improves the Web performance.

dns for mapping hostnames and Span lang= "en-US" >ip address, general one-time parsing requires 20~120 milliseconds. The browser will first based on the host name of the page to resolve the domain name, before the ISP returns the results of the page will not load any content, so reducing DNS lookups can effectively reduce the waiting time. To achieve higher performance, dns parsing is often cached in multiple levels, such as lang= >isp "en-US" caching or LAN, Caching of Local machine operating systems (such as windows on dns Client Service), browser. ie default dns Cache time 30 minutes, firefox The default buffer time is Span lang= "en-us" > 1 minutes.   What we can do is to minimize the hostname of a page, but make a tradeoff between the maximum number of concurrent downloads in the browser and the DNS lookup. According to Yahoo's research, it is best to control the hostname within 2-4.

< Span lang= "en-US" > redirect: Reroute one URL to another URL. The redirection function is accomplished through 301 and 302 the two http status codes, such as  
http/1.1 301 Moved permanently 
location:http:// example.com/newuri 
content-type:text/html 

Browser automatically redirects requests to location the specified url, the main problem of redirection is to reduce the user experience.   is the most resource-intensive, often occurring and easily overlooked redirect is url the last missing /, resulting in the automatic end slash is the reason , the browser must specify some path when making a GET request, and it will simply use the document root if there is no path. (the host missing end Slash is not redirected: http://www.baidu.com) The lack of a trailing slash occurs when redirection is the default behavior for many Web servers. Need to be set on the server side to eliminate. With slices is a URL request for a watercress:

Yahoo's 14 optimization rules have played an important role for a long time, and with the development of technology, these 14 principles alone have not been able to meet the optimization of front-end performance. In some large companies have emerged the concept of front-end engineering, detailed information can refer to this article: front-end performance optimization Engineering advanced

Resources:

Web Front end performance meaning, focus, test scenarios,

Web site performance optimization practices (load speed increased by 2s)

HTTP protocol three-time handshake process

High-performance Web development-why reduce the number of requests, how to reduce the number of requests!

How I structure the Web site CSS

On the font of icons

Optimizing Requests with ETag caching

Viewing HTTP caching through the browser

Web performance optimization: What? Why? How?