How to optimize your site for performance

1. Minimize HTTP requests : Picture merge (CSS sprites), JS script file merge, css file merge

2. Reduce DNS queries

DNS Query service refers to the domain name lookup, refers to the domain name of the request to the corresponding IP address, such as the name and number of the relationship. If the input www.baidu.com DNS system will convert this domain name to 119.75.217.109, and then return the IP address to the browser, this process will take a certain amount of time to affect the loading of the page, so to minimize the DNS query.

There are ways to reduce DNS queries : Caching DNS lookups can improve page performance, most browsers have their own cache system, cache time is inconsistent, and the longer the cache time, the longer the DNS is saved.

When the DNS cache in the client is empty (both the browser and the operating system are empty), DNS lookups are the same as the number of host names in the page. This includes host names such as URLs, pictures, script files, style sheets, flash objects, and so on in the page. Reducing the number of host names can reduce DNS lookups.

Reducing the number of host names can also reduce the number of concurrent downloads in the page. Reducing the number of DNS lookups can save response time, but reducing parallel downloads increases response time. My guiding principle is to divide the contents of these pages into at least two parts but not more than four parts. This result is a tradeoff between reducing the number of DNS lookups and maintaining a high degree of parallel downloads.

3, put CSS on the top of the page, JS is placed at the bottom of the page

CSS on the top of the page can prevent the appearance of white screen, flash jumping phenomenon, that is, reduce the first screen appearance time. The download and execution of JS blocks the construction of the DOM tree (which is strictly interrupted by an update of the DOM tree), so the script tag will truncate the contents of the first screen in the HTML snippet in the first-screen range. And JS may be in the DOM node operation, and then the code is executed from the top down, which will cause JS to the corresponding elements can not be manipulated. So JS placed at the bottom of the page

4, Compression js and CSS

Reduce file volume, remove unnecessary whitespace characters, formatting characters, comments (that is, formatting the code)

5, the JS and CSS extracted out of the external file

This one should be used flexibly, the advantages of extracting JS and CSS in external files are: Reduce the HTML volume, improve the reusability of JS and CSS, and improve the maintainability later.

Cons: Added HTTP requests, but this can be resolved by caching

Under what circumstances will JS and CSS written in the page, can be divided into several situations: JS and CSS code is relatively small; This page is not how to access

6. Avoid redirection

Redirection is the user requested page is moved to another place, the browser to the service request a page, the server tells the browser requested page has been transferred to another page, and tell another page address, the browser will send the request to the redirected address. This increases the number of round trips between the server and the browser, affecting site performance.

REDIRECT Status codes are: 301 Permanent redirect 302 temporary redirection. 304 Not modified is not really a redirect, it is used to tell the browser get request files in the cache, avoid re-downloading.

7. Remove Duplicate Scripts

8. Configuring the Entity label ETag

9. Using AJAX caching

Ajax's Get and Post methods:

As long as the browser's get request, the browser will use the cache, for the same address request, the server will send a 304 status code to the browser, the browser will use the data in the cache

Post requests are executed every time, and the browser does not cache

10. Using gzip compression

11. Using CDN (Content distribution Network)

12. Avoid expression expressions in CSS

13. Add Expire/cache-control head