14 guidelines to effectively improve web page efficiency

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Content again rich site, if slow to inaccessible is meaningless; SEO do a good site, if the search spider can not catch is also in vain; UE design of the humanized site, if the user can not even see is empty talk.

So the efficiency of Web pages is definitely the most noteworthy aspect. How can you improve the efficiency of a Web page? Steve Souders (Steve Souders's data provides 14 guidelines for improving the efficiency of Web pages, and these guidelines will also be the rationale for the YSlow tools we'll be introducing in the next chapter:

First: Make fewer HTTP Requests as much as possible to reduce the number of request requests for HTTP.

80% of user response time is wasted on the front end. These times are mainly caused by downloading pictures, style sheets, JavaScript scripts, flash files, and so on. Reducing request requests for these resource files will be a key to improving the efficiency of Web page display.

There seems to be a contradiction, is that if I reduced a lot of pictures, styles, scripts or flash, then the Web page is not bare, how ugly? In fact, this is a misunderstanding. We're just saying that as much as possible, it's not completely impossible to use. The number of request requests for these files is reduced, and there are some tips and suggestions:

1: Replace multiple small pictures with a large picture.

This is a bit of a reversal of traditional thinking. We used to think that the download speed of multiple small pictures would be less than the download speed of a large picture. But now the results from the analysis of multiple pages using the HttpWatch tool show that this is not the case.

The first picture is an analysis of a large picture of the size of a 40528bytes 337*191px.

The second picture is an analysis of a small picture of the size of a 13883bytes 280*90px.

Analysis results of a large picture of a size 40528bytes 337*191px (click on the picture to see the full picture)

Analysis of a small picture of a size 13883bytes 280*90px (click on the picture to see the full picture)

The first large picture takes time for:

blocked:13.034s

send:0.001s

wait:0.163s

receive:4.596s

ttfb:0.164s

network:4.760s

Power consumption: 17.795s

The actual time spent transferring large files is reveive time, or 4.596s, most of the time is used to retrieve the cache and determine the validity of the link blocked time, for 13.034s, accounting for 73.2% of the total time.

The second small picture takes time:

blocked:16.274s

Send: Less than 0.001s

wait:0.117s

receive:0.397s

Ttfb:0.118s

Network:0.516s

Power consumption: 16.790s

The real time to transfer files is reveive time, that is, 0.397s, which is really much smaller than the 4.596s of the big file. But his blocked time was 16.274s, which accounted for 97% of the total time.

If that's not enough to convince you, let's take a look at this picture below. Here is a list of the time spent on all the pictures in a Web page. Of course, there are a lot of pictures of small, different specifications.

More than 80% of the time is used to retrieve the cache and determine whether the link is valid blocked time. The reveive time spent in the blue for transferring files, and the front white blocked time for retrieving the cache and confirming that the link is valid. Iron the same fact tells us:

The time required for large and small file downloads is indeed different, and the difference is not absolute. And the amount of time spent downloading is very small.

More than 80% of the time is used to retrieve the cache and determine whether the link is valid blocked time. The cost of this time is roughly the same regardless of file size. And the proportion of the total time spent is enormous.

A 100k large picture total time consuming absolutely more than 4 25k of small picture total time consuming. And the main difference is that 4 small pictures of the blocked time is definitely greater than 1 large pictures of blocked time.

So if you can still use large pictures to replace too many trivial small pictures. This is why the efficiency of the flip door is higher than the sliding door of the picture replacement.

However, note that you cannot use too large a single picture, because that will affect the user experience. For example, the use of a few megabytes of background images is definitely not a good idea.

2: Merge your CSS files.

Figure: Merging and merging I made a mistake before, and you will see it in my series of articles on the organization and planning of the style sheet. At the time, I separated the stylesheet files for different purposes and formed different CSS files to facilitate the organization and planning of style sheets. Then refer to multiple CSS files as needed on the page.

Based on the "Minimize HTTP request requests as possible" guideline, we know that that would be unreasonable because it would produce more HTTP request requests. Thus reducing the efficiency of the Web page. So, from the point of view of improving the efficiency of Web pages, we should still write all the CSS in the same CSS file. But the problem comes again. So how do you organize and plan your stylesheets well? This is a contradiction indeed. My current approach is to use two sets of versions. Edition and release. The edit version still uses multiple CSS files for easy planning and organization. And wait until the release, and then merge multiple CSS files into a file, so as to reduce the number of HttpRequest requests.

3: Merge your JavaScript files.

The reason and the treatment method ditto, no longer elaboration.

Article II: Use a Content ibuyspy receptacle using CDN

This looks like a very esoteric look, but as long as the combination of Chinese Internet characteristics, this is not difficult to understand. "North Server", "South Server", "Telecom Server", "Netcom server" ... These words sound so familiar and depressing. If a Beijing telecom user tries to open a Web page similar to the "wallpaper collection" post from a Guangdong Netcom server, you will have a deep understanding.

Given that this is not a guideline for our developers, there is little to say here.

Article III: Add an Expires header added cycle head

This is not a developer to control, but the responsibility of the Web server administrator. So it doesn't matter if you don't understand and understand as a developer. Or tell the company's Web server administrator.

Fourth: gzip RS Enable gzip compression

This should be more familiar to everyone. The idea of gzip is to compress files on the server side first and then transfer them. This has special effects for large, text-only files. Given that this is not a developer, but a site server administrator's job, this is not explained in detail. If you are interested in this, you can information about your company's Web server management staff.

Fifth: Put CSS in the top to put the CSS style above the page.

Both HTML and XHTML and CSS are interpreted languages, not compiled. So the CSS to the top of the words, then the browser parsing structure, you can already render the page. This will not appear, the page structure bare first out, and then CSS rendering, the page suddenly gorgeous up, so too have a "dramatic" page browsing experience.

Sixth: Move Scripts to the NRC place the script at the bottom

The same reason as article fifth. Just scripts are typically used for user interaction. So if the page has not come out, users do not even know what the appearance of the page, then talk about interaction is simply talk. So the script and CSS are just the opposite, and the script should be at the bottom of the page.

Seventh: Avoid CSS Expressions avoid using Expressions in CSS

Image: Expressions in CSS is actually an if judge first of all need to explain what CSS expressions is a thing. In fact, it is like the if......else in other languages ... Statement。 This allows for a simple logical judgment in CSS. As a simple example

This way the CSS can be rooted in some cases using different styles. If you are interested in this, you can go to my blog to read the relevant article--"CSS Expression series articles." But the cost of expressions in CSS is very high. When your page needs to be judged to render the elements of the effect a lot of time, then your browser will be a long time in suspended animation, so that users bring a very poor user experience.

Eighth: Make JavaScript and CSS External to separate JavaScript and CSS into external files

This one seems to contradict the first one. Indeed, if you are speaking from HTTP request requests, this does reduce efficiency. But this is because of another important consideration-caching. Because the external reference files are cached by the browser, we separate them into external files if JavaScript and CSS are larger in size. In this way, when users browse once, these larger JS and CSS files can be cached, so that the high ground to improve the efficiency of user access.

Nineth: Reduce DNS lookups decrease DNS queries

DNS domain name resolution system. We all know that we can remember so many URLs, because we remember are words, not http://202.153.125.45 such things, and help us to those words and 202.153.125.45 such IP address is DNS. So what does this one really mean to us? There are actually two articles:

1: If it is not necessary, please do not put the site on two servers.

2: Web page pictures, CSS files, JS files, flash files, and so on, not too much scattered in different cyberspace. That's why the posts that only send a picture of the wallpaper in a Web site are much faster than the ones that come from different websites.

Tenth: Minify JavaScript and CSS Reduce the volume of JavaScript and CSS files

This is well understood. Remove unnecessary blank lines, spaces, and annotations in your final release. It is obvious that manual handling is too inefficient, and that the Internet is full of tools for compressing these things. The tools for compressing the size of JavaScript code are everywhere, and I'm not going to list them.

It provides a variety of compression methods, can adapt to a variety of requirements.

11th: Avoid redirects avoid jump

I only read this article from the perspective of the web Developer. So what can we read? 2 O'Clock--

1: "This domain name has expired, 5 seconds later, the page will jump to the http://www.xxxxxx.com/index.html page", this sentence looks really familiar. But, I wonder why not directly linked to that page?

2: Some link address please write out more clearly. For example: Write http://justinyoung.cnblogs.com/as http://justinyoung.cnblogs.com (Note the last "/" symbol). Sure, these two URLs are accessible to my blog, but, in fact, they are different. The result of the http://justinyoung.cnblogs.com is a 301 response, which is then pointed back to http://justinyoung.cnblogs.com/. But obviously, there is a lot of wasted time in the middle.

12th Remove Duplicate Scripts Remove Duplicate script

Figure: Repeat, "No!" The principle of this rule is very simple, but really in the work, many people because of "project time is Tight", "Too Tired", "early planning is not good" ... That's a reason to stall. You can really find a lot of reasons not to deal with these extra repetitive scripting code if your site doesn't require higher efficiency and later maintenance.

This is the point, I remind you, some JavaScript framework, JavaScript package must be used with caution. At least ask: Use this JS kit in the end to give us how much convenience, improve the amount of work efficiency. Then, compare it to the negative effects it brings to the redundant, repetitive code.

13th: Configure ETags Configure your Entity label

First, let's talk about ETag. Etag (Entity tags) entity label. This tag is a little different from the tag you see on the Internet. This etag is not for the user, but for the browser cache. ETag is a mechanism by which the server tells the browser to cache whether the contents of the cache have changed. By ETag, the browser will know that the current cache content is not up to date and needs to be downloaded again from the server. This is a bit like the concept of "last-modified". It's a shame that there's nothing you can do about it as a web developer. He is still the work of Web server personnel. If you are interested in this, you can consult your company's Web server administrator.

14th: Make Ajax cacheable The above guidelines also apply to Ajax

Image: Ajax use to be appropriate now Ajax seems to be a bit of a myth, as if the Web page as long as Ajax, then there is no efficiency problems. In fact, this is a misunderstanding. Poor use of Ajax will not make your Web page more efficient, but can reduce your web page efficiency. Ajax is really a good thing, but please don't overdo it. You should also consider the above guidelines when using AJAX.

PostScript：

Of course, these are just the theoretical guidelines for your reference. Specific situation or to be specific to treat. Theories and guidelines are only used to guide the work of reality, but they are not rote hard sets.