Turn: Site front-end performance optimization

Follow the previous articles to talk about the commonplace topic, how to improve the front-end performance . Many of the text from the network and "high performance Web Sites", and according to their work in contact with the knowledge of the collation.

1. Reduce HTTP Requests

End-User response time 80% is consumed in the front-end, and most of the time is in the resources of the download page: Pictures, scripts, flash, etc., reduce the request resources simplify page design becomes the key to performance improvement. Try to combine CSS, JS, and image files to reduce HTTP requests.

2. Using the content distribution mechanism

Use content distribution such as CDN acceleration to enable users to download files from their nearest server. However, it is generally required to reduce the number of DNS queries, as the request resources of a page use a different host name as little as possible, reducing the amount of concurrent Web downloads. However, many websites deliberately use multiple host names to speed up the download of resources, so that resources can be downloaded in parallel. In the lower version of the browser ie6,7 the number of parallel connections is 4, the higher version of IE8 and above, and now the newer version of the Chrome,firefox and other browsers are 6. General Css,js and image resources are accelerated by CDN, and multiple hostnames are used for parallel downloads.

3. Set the expiration time of the header so that the content can be cached

This rule can be seen in two ways:

For static components, the implementation of the "never Expires" policy, by setting a longer time expires head, example slices, flash;

For dynamic components: Use the appropriate Cache-control header to handle different requests, such as Css,js.

For the first time users to visit the site, the picture resources are fixed, the expires header set to never expire can be cached on the client side, reducing the load on the server and the number of requests, while the JS,CSS resource can set an appropriate expiration time.

But in fact, we will encounter a challenge: If the version of the original CSS or JS changes, how to ensure that the end user is the most recent resource files downloaded?

One of the most commonly used methods is to generate a tag each time there is a change and then add in the file name, if there is a change in the filename will be inconsistent, the client will be forced to obtain the latest resource files, Amazon,google, etc. are handled so Of course, there is a way to tag on the resource file directory, but one drawback is that the file client that has not changed will also re-download the corresponding resources, if the publication of more frequent Web projects, users on the first access to the performance of the consumption.

4. Compress content with gzip

The server can compress the response of all text, not just HTML and js,css,xml, and reduce the size of the transmission.

5. Styles placed on the page header

When users open a page, the browser will gradually load the head, navigation bar and logo, etc., during the loading process users can see the page feedback, enhance the user experience. If the style is placed in the footer, the problem is that, including many browsers on IE to prevent the gradual rendering, they will prevent rendering, avoid page style changes caused by redrawing the page elements, the user can only see a blank page.

6. JavaScript placed in the footer

In contrast to CSS, JS advocates placed in the footer load to avoid blocking other resources parallel download, for the content of the nature of the site, the content of the HTML in the relative position, and for more interactive pages, it is particularly important to the core components of the JS Peel forward, and less important in the final load. For more details on JavaScript loading please check the previous article: "Loading of Web content from two bugs"

7. Avoid using CSS expressions

CSS expression calculations can be very frequent, not just in rendering and resize, scrolling the page or even moving the mouse will recalculate.

8. Externally referencing JavaScript and CSS

If you are referencing external JavaScript and CSS, because the browser caches these resources, the next time you access it, you can make the page load faster, and if you write them in HTML every time you access the page, it will load again.

9. Reduce DNS Queries

This is similar to the 2nd, and what needs to be done is to strike a balance between reducing the number of DNS queries and concurrent downloads.

10. Streamline JavaScript and CSS

Delete the JS and CSS blank line wrapping, comments, etc., use confusion to the long variables in JS to short variables, you can reduce their volume, reducing the network bandwidth of the request data.

11. Avoid redirects

In addition to the human redirection in the header, page redirection often happens inadvertently, and redirected content will not use the browser's cache. For example, when the user accesses www.xxx.com, the server will turn to www.xxx.com/via 301 and add a "/" to the back. If the server is poorly configured, this can also add an additional burden to the server. You can avoid unnecessary redirects by configuring Apache alias or using the Mod_rewrite module, and you can configure rewrite rules directly in NGINGX.

12. Delete duplicate scripts

Repeated scripts in the page add to the stress of performance, with duplicate scripts in 20% of the top web sites in the United States, with the number of team sizes and scripts increasing the chance of repeating scripts. In IE, the inclusion of duplicate JS scripts will cause the browser's cache to be unused, while adding unnecessary requests (no duplicate requests under IE,FF) and repetitive script executions (which will be repeated under IE and FF).

13. Configure Etags

The etag is a mechanism that servers and browsers use to identify whether the cached resource of the requested browser matches the server, and is more flexible than last-modified to know if the file has been modified, because if-modified-since can only check for second-level modifications. The ETag is a unique string and is not subject to the modification time limit.

By the way, the browser accesses the URL when the mechanism:

A. The first time the URL is accessed, the user obtains the page content from the server segment and puts the relevant file (Images,css,js ... ) is placed in the cache, also will be in the file header expired Time,last modified, etags and other related information is also preserved together.

B. When the user repeatedly accesses the URL, the browser first looks at whether there are files of the same name in the cache, and if so, checks the expiration time of the file, and if it has not expired, reads the file directly from the cache and no longer accesses the server.

C. If the expiration time of the file in the cache does not exist or is exceeded, the browser accesses the server to obtain the header information of the file, checks for information such as last modifed or etags, and if it finds that the files in the local cache have not been modified since the previous access, the files in the local cache are used; Then get the latest version from the server.

14. Make Ajax cacheable

Ajax If you use a POST request, the browser usually assumes that the user is committing the data to the server, so it is naturally not cached, because there is data submission that means the server is being processed, and the get form of the AJAX request can be cached. If there is no particularly high requirement for security, you can use the Get form for AJAX requests.

15. Reduce DOM nodes and accelerate page rendering

16. Avoid 404 errors

17. Reduce the size of cookies, static resources use a cookie-free domain, when clients request them, reduce the repeated transmission of cookies on the primary domain name. Yahoo! uses Yimg.com,youtube to use Ytimg.com.Amazon images-amazon.com

18. Avoid frequent operation of DOM nodes, too many operations may also cause the browser to panic, it is said that before the Twitter because of the Windows.scroll event in the operation of the binding of too many DOM operations, causing the browser to panic

19. Use link instead of @import to import styles

20. Add the correct width and height values to the image to reduce page redraw while preventing image scaling

21. Reduce Favicon.ico and cache, many times developers will ignore this file, but every time a user collects the site/page, the browser will automatically request this file, even if the icon file is not clearly stated in your page, the browser will also request, if not add will appear 404.

Using tools:

At present, there are some tools to do performance analysis, and according to the above rules to give recommendations for optimization, it is worth our use, the common tools are as follows:

Yslow: Yahoo proposed 23 guidelines for front-end site optimization, and developed a Web performance analysis browser plugin;

Pagespeed: A performance analysis tool that Google has launched

DynaTrace: is an IE-based analysis tool