14 guidelines for optimizing website performance

Websites with rich content are meaningless if they are too slow to be accessible. Seo is a good website, and it is useless if the search spider cannot catch it. ue is designed to be a user-friendly website, it is also empty talk if the user cannot even see it.

Therefore, the efficiency of web pages is definitely the most noteworthy aspect. How can we improve the efficiency of a webpage? Steve Souders (Steve Souders's profile http://www.oreillynet.com/pub/au/2951) proposed 14 guidelines for improving web page efficiency:

• Make fewer HTTP requests
• Use a content delivery network
• Add an Expires header
• Gzip Components
• Put CSS at the top
• Move scripts to the bottom
• Avoid CSS expressions
• Make JavaScript and CSS external
• Reduce DNS lookups
• Minify Javascript
• Avoid redirects
• Remove duplicate scripts
• Configure etags
• Make Ajax cacheable

Next, we will analyze the specific content and functions of the 14 principles.

Article 1: make fewer HTTP requests to minimize the number of HTTP request requests

80% of user response time is wasted on the frontend. These times are mainly caused by downloading images, style sheets, JavaScript scripts, flash and other files. Reducing the number of request requests for these resource files will be the key to improving the webpage display efficiency.

There seems to be a conflict here, that is, if I have reduced a lot of images, styles, scripts, or flash, then the web page will not be bald, so ugly? This is a misunderstanding. We just want to reduce the number as much as possible, but we do not mean it is completely unusable. There are also some tips and suggestions for reducing the number of request requests for these files:

1: Use a large image to replace multiple small images.

Each image on the page will trigger an HTTP request. Although the Downloading speed of small images is faster than that of large images, when the number of requests is large, it is obvious that the loading efficiency of large images is much higher than that of many small images. Therefore, if you want to use large images instead of too many trivial pictures. This is why the efficiency of turning the door is higher than that of the sliding door implemented by image replacement.

However, please note that too many images cannot be used, because this will affect the user experience. For example, it is definitely not a good idea to use a few megabytes of background images.

2: Merge your CSS files.

This is easy to understand. Every time an external CSS <link> tag is called on a page, a request is sent like a server, reducing the webpage's efficiency. Therefore, from the perspective of improving the webpage efficiency, we should write all CSS in the same CSS file.

3: Merge your JavaScript files.

The Cause and handling are the same as above.

Article 2: Use a content delivery network to use CDN

This looks very esoteric, but it is not hard to understand as long as it integrates the network characteristics of China. I believe everyone has heard about the slogan, I bet he will have the impulse to hit the machine.

Article 3: add an Expires header to add a periodic Header

This is not controlled by developers, but the responsibility of the website server administrator. Therefore, it does not matter if you do not understand it as a developer. Tell the website server administrator about this rule.

Article 4: gzip components enabling gzip Compression

You should be familiar with this. The idea of Gzip is to first compress the file on the server and then transmit it. This has special effects on large text files. As this is not a developer, but the work scope of the website server administrator, I will not explain it in detail here. If you are interested in this, you can contact the website server administrator or Baidu.

Article 5: Put CSS at the top place the CSS style above the page.

Both HTML, XHTML, and CSS are interpreted languages, rather than compiled languages. So when CSS is above, the browser can parse the structure and render the page. In this way, the page structure will not appear, the page structure will be bald first, then CSS rendering, the page will suddenly become gorgeous, so it is too "dramatic" Page browsing experience.

Article 6: Move scripts to the bottom to put the script at the bottom

The reason is the same as that in article 5. Scripts are generally used for user interaction. Therefore, if the page is not displayed and the user does not even know what the page looks like, talking about interaction is nothing more than a conversation. Therefore, the script and CSS are the opposite. The script should be placed at the bottom of the page.

Article 7: Avoid CSS expressions avoid using expressions in CSS

What is CSS expressions. To put it bluntly, it is a way of writing logic operations in CSS.

　　input{background-color:expression((this.readOnly && this.readOnly==true)?”#0000ff”:”#ff0000″)}

Similar to the preceding CSS example, CSS expressions is used. As you can imagine, CSS only serves to render Web pages, and you want it to complete a series of logical operations. How can this problem be handled properly?

Article 8: Make JavaScript and CSS external separate JavaScript and CSS into external files

This seems to be in conflict with the first request to reduce HTTP requests. To reduce HTTP requests, it is necessary to reduce external file calls. Otherwise, the reason for doing so is another important factor-caching. Because external reference files will be cached by the browser, when JavaScript and CSS are large, we will separate them into external files. In this way, as long as the user browses the file once, these large JS and CSS files can be cached, thus greatly improving the efficiency of the user's re-access.

Article 9: Reduce DNS lookups reduces DNS queries

DNS domain name resolution system. We all know that we can remember so many URLs because we remember words instead of http: // 202.153.125.45, DNS is used to connect the words with IP addresses such as 202.153.125.45. So what is the true guiding significance of this Article for us? There are actually two:

1: If not required, do not put the website on two servers.

2: images, CSS files, JS files, Flash files, and so on the webpage should not be too scattered in different network spaces. This is why the post that sends only one wallpaper image on a website is much faster than the post display of wallpaper images from different websites.

Article 10: Minify JavaScript and CSS reduces the size of JavaScript and CSS files

This does not need to be explained. The smaller the file, the faster the load. JavaScript and CSS compression tools are also available everywhere on the Internet. I will not talk about it here.

Article 3: Avoid redirects avoids redirection

This article is interpreted from the perspective of Web developers. So what can we interpret?

1: "This domain name has expired. After five seconds, the page will jump to the http://www.52ladybug.com/page, which is quite familiar. However, it's strange, why not directly link to that page?

2: write some link addresses more clearly. For example: Write http://www.52ladybug.com/as a http://www.52ladybug.com
(Pay attention to the last "/" symbol ). Indeed, both websites can access my blog, but in fact they are different. The result of the http://www.52ladybug.com is a 301 response and it will be directed again to the http://www.52ladybug.com/
. However, it is obvious that it is a waste of time.

12th remove duplicate scripts

This is as easy to understand as the previous tenth point, but it is worth noting that some JavaScript frameworks that are externally referenced often carry a lot of redundancy, it is best to clean it before use, and CSS is the same.

Article 3: Configure etags configure your object tag

First, let's talk about etag. Etag (entity tags) entity tag. This tag is a little different from the tag cloud that you often see on the Internet. This etag is not used for users, but for browser cache. Etag is a mechanism used by the server to tell the browser whether the cached content has changed. Through etag, the browser can know whether the content in the current cache is up-to-date and does not need to be re-downloaded from the server. This is similar to the concept of "last-modified. Unfortunately, Web developers cannot do anything about this. He is still a website server employee. If you are interested in this, you can consult the website server administrator or Baidu.

Article 3: Make Ajax cacheable rules apply to Ajax

The current Ajax seems a bit mythical, as if the webpage only needs Ajax, then there will be no efficiency problems. In fact, this is a misunderstanding. Poor use of Ajax will not make your webpage more efficient, but will reduce your webpage efficiency. Ajax is indeed a good thing, but never overdo it. When using Ajax, consider the above principles. My personal suggestion is to try not to use Ajax whenever possible.

Of course, in the process of website optimization, most of the time it is not actually able to fully implement according to the above 14 Guidelines. In fact, in most cases, it is necessary for the website optimizer to make more choices and there is no need to develop these theories. In short, it is a good way to effectively improve website performance.