16 website optimization experiences

After several websites have been created, I gradually realized that the website opening speed is significantly related to front-end optimization. Front-end optimization can even affect the writing of background logic code! Let's take a look at the www.fullmart.com.cn of the previous website. On this website, I have summarized 15 optimization rules, which are as follows:

1. Reduce HTTP requests: images, css, scripts, flash, and so on will increase the number of http requests. Reducing the number of these elements can reduce the response time. Writing multiple JS and CSS files into a file whenever possible. It is not good to write images directly into the page. It should be written into CSS, use CSS sprites to splice small images and use background to locate them.

2. Gzip compression technology:

1) IIS compression service:

Step 1: Open IIS, enable HTTP compression service-website --> properties, and select service. In the HTTP compression box, select the compressed program file and compressed static file, and set a temporary directory as needed.

Step 2: Enable WEB Services

Step 3: Modify MetaBase. xml to Start> Run, enter c: \ windows \ system32 \ inetsrv, find MeteBase. xml, back up, and modify. (Some servers can use this file without modifying it)

2) Apache Modification

First open the following two modules: LoadModule headers_module modules/mod_headers. so LoadModule deflate_module modules/mod_deflate. so

Set the compression ratio. The value range is 1-9. Setting it too high will occupy too many CPU resources. DeflateCompressionLevel 3

AddOutputFilter DEFLATE html xml php js css

3. Set the header file expiration or static Cache
The browser uses cache to reduce the number of http requests to speed up page loading. If a long expiration time is added to the page header, the browser will always cache the elements on the page. However, if something on the page changes, you need to change the name. Otherwise, the user will not take the initiative to refresh the page ~ This can be done by modifying the. htaccess file.

4. Place CSS on the top and JS on the bottom.

5. Avoid CSS expressions

6. Compress JS and CSS and use <link> as an external link.

7. Avoid redirection and configure the server

8. Delete duplicate scripts

9. perform the following steps to configure ETags:

1) The client requests A page;

2) The server returns page A and adds an ETag to page;

3) The client displays the page and caches the page together with ETag;

4) The client requests page A again and transmits the ETag returned by the server in the last request to the server together;

5) The server checks the ETag and determines that the page has not been modified since the last client request. The server returns a 304 response directly.

10. cache Ajax. For more information about ajax caching, see the next blog.

11. ajax requests are best suited to GET, because POST will have two interactions with the server.

12. When writing the DOM, make sure that the logic is clear and do not write useless dom nodes.

13. Reduce the Cookie. Because the cookie is exchanged between the server and the browser, it is necessary to set a reasonable expiration time and size.

14. Do not scale the image in HTML

15. The size of favicon. icon is cached and controlled below 1 kb.