Web front-end performance optimization full Raiders

Web Front-End performance optimization is a big topic, is worth the maintenance of the continuous tracking of the topic, is a lot of web sites mercilessly ignored technology.

Web front-end optimization Best Practices content Chapter
Web Front-End optimization Best Practices Server Chapter
Web front-end optimization cookies for best practices
Web Front-End optimization CSS for best practices
Web Front-End optimization JavaScript for best practices
Web front-end optimization of best practices in image articles
Web Front-End optimization Best Practices Mobile (IPhone) article

Yahoo! 's exceptional Performance Team has made an outstanding contribution to the Web front-end. Well-known optimization rules from 13 to 14, to 20, and now 34 --really keep up with the times. The latest 34 articles are also categorized for different perspectives.

Content-oriented optimization rules currently have 10.

1. Minimize HTTP requests (make fewer http Requests)

As the first article, it may also be the most important one. According to the Yahoo! research team's data analysis, a large percentage of user access will benefit most from this article. There are several common ways to actually reduce HTTP requests:

• 1 merge Files , such as a combination of multiple CSS files;
• 2 CSS sprites use CSS background related elements for background map Absolute positioning; see also:css sprites:image slicing ' s Kiss of Death
• 3) image map
• 4 inline images use data:url scheme to embed image data in the actual page.

2. Reducing 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 common problems of the site, Yahoo! The main site may not be obvious enough, some sites, there are obvious similar problems. For domestic sites, if too much use of the Widget outside the station, it is also easy to cause too many DNS lookup problems.

3. Avoid redirection (avoid redirects)

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

4. Making Ajax cacheable (make Ajax cacheable)

Response time is critical to Ajax, otherwise the user experience is absolutely no better. The effective means to improve response time is Cache. Some of the other optimization rules are also valid for this article.

5. Deferred loading component (Post-load components)

6. Pre-loading component (preload components)

The above two strictly speaking, are the asynchronous thinking of the flexible use of things.

7. Reduce dom element count (reduce the number of Dom Elements)

8. Cut grouped pieces to multiple domains (Split components across Domains)

The main goal is to improve the ability of page components to download in parallel. But do not cross too many domain names, otherwise there is a conflict with the second article.

9. Minimize the amount of IFRAME (Minimize the number of iframes)

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

10. Eliminate HTTP 404 error (No 404s)

Full testing of page links plus continuous tracking of WEB server error logs can effectively reduce the 404 errors 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 the 10 article of the content. It should be said that the specific introductory content is not detailed enough. Gradually will be based on their own understanding to add up.