Optimize website Design Series Articles Summary and guide

Source: Internet
Author: User

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.

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.