Optimize website Design Series Articles Summary and guide

Excerpt from: http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html

Overview

Actually want to write this article long-standing, the idea of this series is to refer to the Yahoo team to provide 35 performance optimization best practices (in fact, the earliest time is 14), combined with my own years of practical work experience, combined with specific development platform (ASP), to provide readers with both theoretical knowledge, There is also a practical guide to the reference, for optimization, itself is a long-term meticulous work (no so-called silver bullets), and weigh the pros and cons, choose the most suitable for their project situation solution. To achieve such a goal, you need to optimize the site design has a more systematic understanding, know it, but also know why, and then can skillfully use them.

I began writing this series from April 30, to this day (May 20) have all finished, the main use of holidays, weekends and night time, although relatively hard, but I think the quality of this series is my best so far, and no doubt, I have reason to take this opportunity to thank my family for their support.

In this process, I also know about the knowledge of the new, so that personal harvest is very large, if it can be helpful to the reader, it is no better.

Guide

The content organization of this series maintains the structure of the 35 principles proposed by the Yahoo team in the year, so that everyone can learn by comparison. It is worth saying that although these documents refer to the original text, but not to the original translation, more is to add some of my ideas and interpretation, some places may also have a different description of the original.

2. Optimize website Design (i): Reduce the number of requests
4. Optimize website Design (ii): Using CDN
6. Optimize website Design (iii): Add cache control to resources
8. Optimize Web site design (iv): Enable compression on resources
10. Optimizing Web Site Design (v): Placing style definitions at the top
12. Optimize website Design (vi): Place script definitions or references at the bottom of the document
14. Optimize Web site design (vii): Avoid using expressions in CSS
16. Optimizing Web Site Design (eight): Referencing script files and style sheets as external files
18. Optimize website Design (ix): Reduce the number of DNS lookups
20. Optimize website Design (10): Minimize JavaScript and CSS
22. Optimize website Design (11): Avoid redirects
24. Optimize Web site design (12): Delete duplicate scripts
26. Optimize website Design (13): Configure Etags
28. Optimize Web site design (14): Make Ajax calls as far as possible using caching features
30. Optimize Web site design (15): Send buffer content as early as possible
32. Optimize Web site design (16): Use the Get method for Ajax requests
34. Optimize Web site design (17): Load content with delay or on demand
36. Optimize website Design (18): Preload content
38. Optimize Web site design (19): Reduce the number of DOM elements
40. Optimize Web site design (20): Use multiple hosts to balance the load
42. Optimize website Design (21): Use less IFRAME as much as possible
44. Optimize website Design (22): Avoid 404 errors
46. Optimize website Design (23): Reduce the volume of cookies
48. Optimize website Design (24): Reduce the use of cookies by using different hosts
50. Optimize Web site design (25): Avoid excessive manipulation of DOM elements
52. Optimize Web site design (26): Design "intelligent" event handlers
54. Optimize website Design (27): Import style sheets using link instead of @import
56. Optimize website Design (28): Avoid using filters (filters)
58. Optimize website Design (29): Optimize picture
60. Optimize Web site design (30): Optimize CSS Sprites
62. Optimize website Design (31): Do not scale the picture in the page
64. Optimize Web site design (32): Make the Favicon.ico file as small as possible and can be cached
66. Optimize website Design (33): Try to make a single content size less than 25KB
68. Optimize Web site design (34): Package components directly to a page
70. Optimize Web site design (35): Avoid setting the SRC attribute of img to blank

Weigh

I have repeatedly mentioned the tradeoff, as an architect was asked, "What is the best architecture?" The most plausible answer to this question might really be "this depends" (although the answer may seem a bit like diplomatic), because there are a lot of techniques, there are many architectures, and no architecture is appropriate for all business scenarios.

In the same vein, we have mentioned a number of principles, each of which has its own focus. It is clear that they may also be in conflict with each other. So, what does this mean? Does this mean that these principles are unreasonable? Of course not, just on the contrary, it is reasonable.

To help you better understand the relationship between these principles, or whether they are mutually exclusive or complementary, I have compiled a form as follows for your reference.

The principle of red marking in the figure is that it is more or less mutually exclusive. In the face of these principles, you need to take into account other principles, the two evils of the right to light, make the most suitable for your actual situation of choice.

If no color is identified, the identification of these principles is complementary, or at least does not conflict.

Tools

When I write this series of articles, I use the following tools

1. Development tools: Visual Studio 2012. I use 2012, but if I want to do the exercises, there are 2010 of them.
   • Http://www.microsoft.com/visualstudio/chs/downloads
2. Debugging Tools:
   1. Fiddler:: Http://fiddler2.com/home This is a standalone network testing and debugging tool.
   2. IE comes with the development tool (through F12): I use IE 10, preferably you have at least IE 9. http://msdn.microsoft.com/en-us/library/ie/gg589507 (v=vs.85). aspx
   3. Chrome's own development tool (via F12): Use the latest version. https://developers.google.com/chrome-developer-tools/
   4. YSlow plugins installed in Chrome: Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
      • For more information about YSlow (including scoring rules, etc.), please refer to: http://yslow.org/ruleset-matrix/
      • Google itself has also developed a similar plugin (function very much like): Page Speed Insights Https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo /gplegfbjlmmehdoakndmohflojccocli

Finally, I hope this series of articles will help you a bit!