According to the survey (?), When the page opens require more than six seconds, the vast majority of visitors will quit, the best experience is generally about 1 to 2 seconds, when the slower speed of opening web page, visitors to the page will the more mistrust.
Web performance optimization, in fact, by all means, the pages load faster upgrade to the fastest .
From what can be done Web Performance Optimization?
Due to the need to load webpages faster upgrade to the fastest, you can simulate the following scenarios: from visitors enter the address you want to visit in the Address bar, Qiaoxia Enter to load the page. In this one happened behind the browser process, which is listed, it should look like this:
- Lookup Cache
- DNS lookup
- Establish a TCP connection
- Send an HTTP request
- Background Processing Request
- Receiving a response back
- Receiving a response to complete -> HTML
- View Doctype html / html5 / xml
- Progressive parsing (reading the code)
- See the label
- Rendering the tag in the page (Firefox browser will do)
- After all CSS download is complete, and then render the tag (Chrome browser will do)
- See CSS -> download CSS -> next downloaded a CSS -> download simultaneously four (or eight, depending on the browser) the CSS, i.e. parallel download, parsing the serial
- See JS -> download JS -> a next downloaded JS -> download simultaneously four (or eight, depending on the browser) JS, i.e. parallel download, serial parsing, and will block the HTML JS loading
Above is the whole process finished loading from Qiaoxia Enter, to web pages.
Web Performance Optimization methods
Reduce DNS queries
The assumption of five pages in CSS files, from five different sites, the browser will be at least five times the DNS queries. If all the files are placed in the same site, it will greatly reduce the time DNS query loss.
TCP connection multiplexing connection
In the HTTP request in advance, write the keep-alive, after establishing a TCP connection, the browser and server connection will not disconnected, the next time the browser to initiate a request, there is no need to establish a TCP connection with the server again.
HTTP2.0 in the multiplex.
Reduce Cookie
Cookie HTTP request to reduce the number of years, with fewer data, HTTP request, of course faster.
Cache-Control
In response to the HTTP request with the local cache file, you do not need to spend unnecessary time HTTP request.
Example: 'Cache-Control', 'max-age=30'cache retention for 30 seconds, while requesting a URL, directly read the local cache file in 30 seconds, rather than waiting for the response content.
Simultaneously transmitting a plurality of requests
If there are four CSS on the page, the browser will send four simultaneous HTTP requests, a domain name can only send four or eight HTTP requests while at the same time if you want to send many HTTP requests (10), it is necessary to increase domain name number. When files are rarely, when a domain name is sufficient to adequately reduce DNS queries; the time when a lot of files, multiple domain names can be increased, so that the browser can initiate multiple requests at the same time, to reduce the time of the request.
Big Box Web performance optimization methods Tag "class =" headerlink "title =" Use ETag "> Use ETag
ETag main role is to add a unique parameter (such as MD5, Digest Algorithm) to the file, the file will change with ETag (MD5) is changed when the browser to re-request, found no change in the ETag when the file, it will not re-download the file, thereby speeding up the response time of HTTP.
Added in advance in a response 'ETag',fileMD5, the response is received, it will see the response Etag header, the next transmission request, the browser sends a simultaneous If-Node-Matchrequest header, the request header and before receiving a response will compare the file server ETag header are compared, If two same MD5 is, the documentation does not change, this response will not have to take the response headers, just return a status code 304, thereby reducing the time HTTP response.
GZip compressed files
By GZip compressed file, such that in response to the volume thereof becomes small, like the browser receives a response content, and then a local decompression, response time.
Doctype
Doctype can not write, can not be wrong.
If you do not write Doctype, the browser will pre-read or guess at one of several document types, in this process will be a waste of time.
JS, CSS and CDN
CDN
CDN (Content Delivery Network) content delivery network, refers to a group of servers located in various regions. Copy of the data stored in the server, the server can be the nearest server and a user according to which, to satisfy the request data. CDNs provide faster service, less affected by high traffic impact.
- CDN distribution by transmission related to the user static library resource file, you can request to reduce pressure on the local server.
- Most of the world has CDN server, so the server on CDNs may be geographically closer to your customers than your own server. Geographical distance will be delayed proportionally affected.
- CDNs have configured the proper cache settings. Use CDN save the configuration of static resource files in the server.
JS and CSS
CSS put the head tag, JS put the rearmost body.
Because it would render html tags (Chrome browser) after the CSS has been loaded, so it twice read the label, it is better to download CSS tags.
Because JS can block the rendering of html tags, so it should be after the page has finished rendering html tags, just download and load the JS file, so the label on the body of the final surface is the best choice.
Use an external JS and CSS: Do not put the JS and CSS html inside, because the files can be cached .
Lazy loading
Users see the page content temporarily invisible, such as the user wants to see the time to give users to see, so you can reduce unnecessary requests. (Example: Taobao)
Preloading
Users moment we can see, but it's possible to see the content, you can load the first screen, and then load the contents of the back, this way, the user experience will be an upgrade. (Examples: Fiction UC browser)
Optimize your images
Picture a large volume, it is best to do it while compressing the picture size of the volume, to ensure picture of readability.
Audits
Chrome browser console, there is a Audits the tab called, can tell you where the current page can optimize what exists.