Web Front End performance optimization "Go"

Web front-end performance optimization is a big topic, is worth the maintenance of the continuous tracking of the topic, is a lot of websites relentlessly ignored technology.

Content of best practices for WEB front-end optimization
Web Front End optimization Best Practices Server Chapter
Cookie of best practices for WEB front-end optimization
CSS for best practices in WEB front-end optimization
JavaScript for best practices in WEB front-end optimization
Image of best practice for WEB front-end optimization
Web Front-end optimization Best practices Mobile (IPhone) article

Yahoo! 's exceptional Performance team made a remarkable contribution to the Web front end. Well-known optimization rules from 13 to 14, and then to 20, and now 34--is really with the Times ah. The latest 34 articles are also categorized according to different angles.

There are currently 10 content-oriented optimization rules.

1. Minimize HTTP requests (make fewer HTTP requests)
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) Merge files, such as multiple CSS files to synthesize one;
2) CSS Sprites uses CSS background 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 actual pages using Data:url scheme.
2. Reduce DNS lookups (reduce DNS lookups)
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)
The above two strictly speaking, all belong to the asynchronous idea of the flexible use of the thing.

7. Reduce DOM element count (reduce the number of Dom Elements)
8. Cut the 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.

This is 10 articles in the Content section. It should be said that the content of specific guidance is not detailed enough. Gradually will be based on their own understanding to add up.

Web page Production Poluoluo article introduction: The Web Front end performance optimization is a big topic, is worth the maintenance personnel continuous tracking topic, is the technology which many websites relentlessly ignores.

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) ___fckpd___1quot; {
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. Using the Get method for Ajax requests (use Get for AJAX requests)
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.

Web page Production Poluoluo article introduction: The Web Front end performance optimization is a big topic, is worth the maintenance personnel continuous tracking topic, is the technology which many websites relentlessly ignores.

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 page Production Poluoluo article introduction: The Web Front end performance optimization is a big topic, is worth the maintenance personnel continuous tracking topic, is the technology which many websites relentlessly ignores.

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. Place CSS at the Top of the code page (put stylesheets at the upper)
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 CSS expressions (Avoid CSS Expressions)
What the individual thinks can be done through CSS expressions can be done by other means as well as less risky.

3. Peel JavaScript and CSS from the page (make JavaScript and CSS External)
After stripping, it can be targeted to a separate processing strategy, such as compression or caching strategy.

4. Streamline JavaScript and CSS (minify JavaScript and CSS)
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)

Web page Production Poluoluo article introduction: The Web Front end performance optimization is a big topic, is worth the maintenance personnel continuous tracking topic, is the technology which many websites relentlessly ignores.

JavaScript for best practices in WEB front-end optimization

There are 6 rules in this section, and there are several repetitions of the CSS article. 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. The script is placed at the bottom of the HTML 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 and CSS External
See the description of CSS articles

3. Streamline JavaScript and CSS (minify JavaScript and CSS)
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. Reduced DOM Access (Minimize DOM access)
There are three guiding suggestions:

? cache elements that have been accessed (cache references to accessed elements)
?" Offline "update nodes and add them to the tree (update nodes" offline "and then add them
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.

Also recommended is how to optimize the performance of JavaScript scripts, and for AJAX optimization guidelines, see improving AJAX application performance to avoid WEB service vulnerabilities.

PostScript 1): After finishing almost, found on the network already has a "Yahoo! Website performance Best experience of the 34 gold Code", is a translation of the manuscript. It seems that I have done a part of repetitive work.

PostScript 2): Css/javascript all have optimization rules. But there seems to be a lack of optimization practices for Flash.

Web page Production Poluoluo article introduction: The Web Front end performance optimization is a big topic, is worth the maintenance personnel continuous tracking topic, is the technology which many websites relentlessly ignores.

Web Front-end optimization Best practices Part VI for picture (image)

There are currently 4 rules in this section. 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
See also: Five Tips for the effective use of PNG Images

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 CSS Sprites tips for image optimization (Optimize css Sprites)
As mentioned before, the simple is "using CSS background related elements for the absolute positioning of the background map", the number of 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.

Update: One potential side effect of using CSS Sprites is that clients will consume more memory (refer to).

3. Do not use scaled images in HTML (Don ' t scales Images in HTML)
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.

--eof--

Add: Visual designers should try to control the size of the picture, recommended under 200K. This is not nonsense, refer to the page.

Web page Production Poluoluo article introduction: The Web Front end performance optimization is a big topic, is worth the maintenance personnel continuous tracking topic, is the technology which many websites relentlessly ignores.

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. For this part of the vague, wait for the next update.