General optimization of Web front-end optimization (1)

　Page open speed (Fully Loaded)

1 First View of homepage (or List page): Open speed should be in 3 seconds + 0.5 seconds;

2 on the Repeat View of the indicators are not required temporarily;

　　First screen open time (Start Render)

1 First View of the homepage (or list page) of the website: the rendering speed should be in 1 seconds + 0.5 seconds;

　　Document Resolved time (Doc complete):

No requirement for this indicator is pending.

General Optimization Recommendations:

1 JavaScript External file references are placed at the bottom of the HTML document: How to put inline js/css and js/css, please refer to the second phase of optimization;

2 CSS external files are referenced in the header of the HTML document: located in the header;

3 http Static resources use as many subdomains as possible : Take advantage of the multi-threaded concurrent download capabilities of modern browsers. The multi-threaded download ability of the browser, refer to Appendix C;

Specific recommendations:

JS, CSS, CSS background images, csssprite pictures scattered under the s0~s2.haoyangshiimg.com;

Business class picture scattered under the p0~p3.haoyangshi.com;

4 When the server side provides HTML documents and HTTP static resources, as far as possible to turn on gzip compression;

Json/xml and other formats of text response, it is also recommended to open gzip;

Jepg/png and other pictures, you can choose not to open gzip, because the server-side picture lossless compression algorithm has been very strong, do not need to rely on gzip;

5 in the JS, CSS, image and other resources in response to the HTTP headers, set expires, last-modified;
Nginx settings are as follows:

6 Minimize the number of HTTP requests;

Through combo handler merge js and css download, refer to the third phase of optimization;

At this stage, try to reduce the number of js/css files and minimize the AJAX calls;

　　7 Js/css minify: Can be unified through the combo handler compression plus merger;

　　8 Reduce unnecessary 301/302 jumps: Don't let the page open time wasted on more than 302 jumps (dozens of milliseconds each);

9 Please use a lot of CSS Sprites: This can greatly reduce the number of HTTP requests for CSS background images;

10 The first screen does not need to show the larger size picture, please use lazyload;

　　11 Avoid 404 error: Request an external JS failure to obtain a 404 error , not only will block parallel download, and the browser will try to analyze the content of the 404 response, to identify whether it is a useful JavaScript code;

　　12 reduce the size of cookies: minimizing the volume of cookies is important to reduce the time users receive responses;

Removal of unnecessary cookies;

Minimizing the size of cookies;

Beware of setting cookies under the appropriate domain name to avoid affecting other websites;

Set the appropriate expiration time. An earlier expiration time or not setting an expiration time will delete the cookie more quickly, reducing the response time.

　13 Using cookies-free domains:

When browsing for a static picture and sending cookies together, the server does not need these cookies. This simply creates unnecessary network traffic without any benefit. You should ensure that static resources do not carry cookies when requested, so you need to put your static resources under another subdomain.

If your domain name is www.example.org, you can put your static resources in the static.example.org. If you set a cookie on top-level domain example.org instead of www.example.org, all requests sent to static.example.org will include those cookies. In this case, you can place your static resources in a brand new domain with no cookies.

　　14 Avoid using JavaScript to locate layouts

General optimization of Web front-end optimization (1)