Best practices for WEB front-end optimization

There are currently 10 content-oriented optimization rules.

1. Minimize the HTTPRequest (Make FewerhttpRequests)

As the first article, perhaps the most important one. According to the Yahoo! Research team's data analysis, a significant portion of user access will benefit most from this article. There are several common ways to effectively reduce HTTP requests:

• 1) merging files , such as multiple CSS files to synthesize one;

• 2) csssprites use Cssbackground related elements for the absolute positioning of the background map; see: CSS sprites:image slicing ' s Kiss of Death

• 3) image map

• 4) Inline Images embed image data in the actual page using Data:url scheme.

2. Reduce DNSFind (ReducednsLookups)

It must be clear that the cost of DNS lookups is significant. In addition, I think this is Yahoo! All the site of a common problem, Yahoo! The main site may not be obvious enough, some sub-sites, there are obvious similar problems. For domestic sites, if too much use of the outside of the Widget, it is also easy to cause excessive DNS lookup problems.

3. Avoid redirection (Avoid redirects)

Not absolute avoidance, minimizing. In addition, you should be aware of some unnecessary redirects. For example, to add a/(Slash) to the Web site's pip directory, you can effectively avoid a redirect. There is a difference between Http://www.dbanotes.net/arch and Http://www.dbanotes.net/arch. If it is an Apache server, this problem can be eliminated by configuring Alias or Mod_rewrite or Directoryslash.

4. Making Ajax cacheable (make Ajax cacheable)

Response time is critical to Ajax, otherwise the user experience is definitely not a better place to go. The effective means of improving response time is the Cache. Some of the other optimization rules are also valid for this article.

5. Delay Loading component (Post-load components) 6. Pre-loaded components (preload component)

The above two strictly speaking, all belong to the asynchronous idea of the flexible use of the thing.

7. Reduce DOMElement Quantity (Reduce the number ofdomElements) 8. Cut a packet to multiple domains (Split components Across Domains)

The main purpose is to improve the parallel download capability of the page component. But do not cross too many domain names, otherwise there is some conflict with the second article.

9. Minimizing the number of IFRAME (Minimize of IFRAMEs)

Familiar with SEO friends know that IFrame is the big bogey SEO. For the front-end optimization of the IFRAME has its advantages, but also has its drawbacks, in a split look at the problem.

10. Eliminate HTTP 404 error (No 404s)

Full testing of page links plus constant tracking of WEB server error logs can reduce the 404 error and improve the user experience. It is worth mentioning that the 404 errors caused by CSS and Java Script are often easily overlooked because they are slightly "difficult" to locate.

Best practices for WEB front-end optimization The second part is for Server. There are currently 6 rules of practice in total. Note that this is up to the technical note, viewing the most original content, also visit: exceptional performance:best practices for speeding up Your Web Site "

1. Using CDN(Use a Content Delivery Network)

The popularization of domestic CDN is not enough. However, we have a unique telecommunications, netcom between the problem , if the optimization for this, basically also can receive a CDN or similar effect (pretend so). "Tin said the domestic CDN with a lot of, look at the market of CDN manufacturers know, have not come into the ordinary people's home"

2. Add Expires or Cache-control information header (add an Expires or a Cache-control header)

Each browser has a plan for the Apache example "NOTE: The following illustrative examples are not fine enough, the specific environment also need to add some adjustments":

Expiresactive on Expiresbytype image/gif "modification plus 1 weeks"

LIGHTTPD after enabling the Mod_expire module:

$HTTP ["url"] =~ "". (jpg|gif|png) $ "{Expire.url = (" "+ =" Access 1 Years ")}

Nginx Example Reference:

Location ~* ". (jpg|gif|png) $ {if (-F $request _filename) {expires max; break;}}

3. Compressed content (Gzip)

For the vast majority of sites, this is a necessary step, can effectively reduce network traffic pressure. Perhaps some people worry about CPU compression for the CPU, rest assured that the whole bar, no matter. Nginx Example:

gzip on; Gzip_types text/plain text/html text/css ext/javascript;

See also:

How does IIS enable Gzip compression?

4. Set Etags (Configure etags)

For the Etag, this is probably where most site maintainers will ignore it. Before this series of optimization rules came into being, most of the sites on the Internet might have been overlooked by the problem. Of course, the Etag does not have much impact on the performance of most sites. Unless it's an RSS-oriented site. "See a friend criticized that wrote the brief, and said IE does not support ETAG." To be clear: IE supports ETag, but use IIS to pay attention to the relevant ETag Bug. 】

Add: I mean "a lot of websites do not pay attention to the situation is open Etag, and no website cares how to use, consume resources and do not know." It is not that the etag is not good, the use of the etag can definitely make a good profit.

5. Flush the buffer (flush the buffer Early) as soon as possible

On this one, pondering the half-day, seemingly or asynchronous thinking. To better enhance the user experience?

6. For AjaxRequest using the Get method (use Get ForajaxRequests)

The XMLHttpRequest POST takes two steps, and GET requires only one step. Note, however, that the maximum URL length to be processed on IE is 2K.

Best practices for WEB front-end optimization The third part is for cookies. There are currently only 2 rules of practice.

1. Reduce cookies (reduce cookie Size)

Cookies are a very interesting topic. According to RFC 2109, each client maintains a maximum of 300 cookies for each domain name up to 20 cookies (in fact most browsers are now more than this, such as Firefox is 50), with a maximum of 4 K per Cookie, note that the 4K Depending on the browser may not be strict 4096. Don't be ridiculous. The most important thing for a cookie is to try to control the size of the cookie and not plug in some useless information.

2. Use of domain-agnostic cookies for Web components (using Cookie-free Domains for component)

This topic was mentioned earlier in the discussion of Web image servers. Here is the Web component (Component), multi-fingered static file, than slice CSS, etc., Yahoo! 's static files are on the yimg.com, when the client requests the static file, reduces the repeated transmission of the Cookie to the primary domain name (yahoo.com) effect.

From this when the cookie crumbles can be seen, MySpace and eBay cookies are not small, presumably is more concerned about user behavior. Personalization Platform, which was built shortly before EBay, is jumping from the limits of cookies.

Web Front-end optimization Best Practices Part IV is for CSS. There are currently 6 rules of practice in total. See also the Mozilla Developer Center article: Writing Efficient CSS

1. Put the CSSPut stylesheets at the Top of the code page (put)

The official explanation I feel is somewhat vague. This article is actually related to the user's access expectations . CSS to the top of the browser can be targeted to the HTML page from top to bottom to parse and render. No one likes to wait, and the browser has taken this into account.

2. Avoid CSSAn expression (avoidcssExpressions)

What the individual thinks can be done through CSS expressions can be done by other means as well as less risky.

3. Stripping JavaScript and CSS from the page(Make JavaScript AndcssExternal)

After stripping, it can be targeted to a separate processing strategy, such as compression or caching strategy.

4. Streamline JavaScript and CSS(Minify JavaScript Andcss)

It might be better if you don't have JavaScript and CSS. But, this is impossible, so, try to be smaller. Shorthand for grammar.

5. Use <link> instead of @importchoose <link> over @import

In IE @import instructions are equivalent to writing the link tag at the bottom of the HTML. And this is contrary to the first one.

6. Avoid using filter (Avoid Filters)

JavaScript, the best practice for WEB front-end optimization, has 6 rules and several repetitions of CSS. Front-end optimization best practices, the most important or "practice", to understand this thing is easy, the key is to "practice", to "execute", to "feedback" to obtain benefits.

1. Put the script in HTMLAt the bottom of the code page (Put Scripts at the Bottom)

When a script is downloaded, the browser cannot do anything else (serial). So, throw it at the end to deal with it. For some functional scripts, there may be some dilemma in implementing them. However, for the domestic website, there are many use of Google Analytics services for website data analysis. For this, it is absolutely feasible to put the recommendations at the bottom of the page.

2. Make JavaScript AndcssExternal

See the description of CSS articles

3. Streamline JavaScript and CSS(Minify JavaScript Andcss)

See the description of CSS articles

4. Remove duplicate script (remove Duplicate Scripts)

For some legacy sites or forums, this is quite common. After the maintenance of the change of people before and after too much, everyone has their own set. This can lead to some potential trouble.

5. Reduce DOMAccess (MinimizedomAccess)

There are three guiding suggestions:

• Cache elements that have been accessed (cache references to accessed elements)

• "Offline" To update the nodes, and add them to the tree (update nodes "offline" and then add them the tree)

• Avoid using JavaScript to output page layouts – it should be a CSS thing (Avoid fixing layout with JavaScript)

6. Develop Smart Event handlers

In addition to the English explanation, here is a reminder of the problem with the Java Script memory leak .

Best practices for WEB front-end optimization Part VI faces the picture, which currently has 4 rules. At the recent Velocity 2008 technology conference, Yahoo! 's Stoyan Stefanov did the Image optimization:how many of these 7 mistakes is you Making also very Test value. Together to say.

1. Picture optimization (Optimize Images)

Use a GIF, JPG, or PNG image? Use PNG format images as much as possible, with more features and smaller sizes (compared to GIF).

For PNG images, consider using Pngcrush or similar tools for optimization. Common tools such as the following table:

• Pngcrush http://pmt.sourceforge.net/pngcrush/

• pngrewrite http://www.pobox.com/~jason1/pngrewrite/

• OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/(refer: Tutorial)

• pngout http://advsys.net/ken/utils.htm

Optimization tool for JPEG images:

• Jpegtran (http://jpegclub.org/)

It must be emphasized that the picture design of the classmate Ah, please consider the design of Web-oriented pictures , do not always design beyond the acceptable size of the big guy, this should be a habit, not what superb skills, just remember it becomes.

2. Using CSSSprites Techniques for picture optimization (optimizecssSprites)

As mentioned before, it is simply "using Cssbackground related elements for absolute positioning of the background map", making multiple HTTP calls into one call, more reference: CSS Sprites:image Slicing's Kiss of death

To add: I have seen some abuse of this technique. It is a good idea to knead multiple background images into one and reduce the number of HTTP calls. But be sure to remember that the big picture can not be too "heavy", I have seen more than 100 K background map. A picture drags the whole site down very slowly. A good example can be found in this diagram of Yahoo relations.

3. Do not in HTMLUse the zoom picture (Don ' t scale Images inhtml)

More often, it may be because of laziness without making the right size of the picture, if it is batch processing pictures, may be a imagemagic command (convert) can be done. It must be mentioned that seeing too many pages stretched on the picture is hard to see, save these pages!

4. With smaller and cacheable Favicon.ico (make Favicon.ico Small and cacheable)

Smaller, cacheable, these two may not be a problem. The problem is that too many sites have no favicon.ico at all . Sometimes, the independent domain name to judge whether the Blog is professional, the basic look at whether there is Favicon.ico is almost.

Best practices for WEB front-end optimization The last part is for mobile apps, but only for the IPhone, currently there are only two rules.

1. Single Data object less than 25K (Keep components under 25K)

This seems to be just a study of the IPhone. It is recommended that you keep a single Web data object below K. Why is 25K? Apple's official information indicates that WEB objects that can be cached in memory are supported up to 10M, but have been tested and found to be around 25K.

The IPhone's superior performance in the market has allowed Web people to consider how to optimize for it. I believe this part of the content is also constantly changing.

2. Pack components into a Multipart Document

Package Web page components into a multi-part document. The purpose is to reduce the HTTP request.

Best practices for WEB front-end optimization