Web Development performance Optimization---SEO optimization chapter

First, clean up the garbage code

Cleaning up the junk code means removing redundant code from the page and removing 80% of redundant code.

Junk code refers to non-essential code that removes and does not have any effect on the page. The most common junk code, the space space character, is the most common garbage code in a Web page. But does not refer to the label, but there is a code editing environment to hit the space produced by the symbol, each space is quite a character, then that is, a page, the space is the page volume of 15%,100k page, there is a space character 15K. The space character most often appears at the beginning and end of the code, and there is a blank line. These are places where you can easily generate spam codes. the way to eliminate this junk code is to select the code and then press Shift+tab to align left.

Second, HTML tags

a:html Tag Conversion

the conversion of HTML tags mainly refers to the use of short tags to replace the same effect on the page long labels, such as <b> and <strony> both are bold font but <strong> is more than <b> 5 characters. If a page appears with hundreds of bold labels. Will generate a lot of redundant code. The workaround is to make an optimized selection of tags to use when making HTML pages.

B: Head Label

<title> site title </title> title settings

<meta name= "keywords" content= "site keywords, multiple keywords separated by separators, such as |"/> Key sub-settings, consider density

<meta name= "description" content= "description of the site"/> Site description settings, consider density

C: Table, ur and other containers in the form of labels

When the browser compiler encounters a label, it begins to look for its end tag until it matches, so that when the table, Ur, and other container forms are nested, the page is very slow to open, which reduces the user experience. WORKAROUND: When writing HTML: Try to make a container independent, if you want to nest, you must make it clear, introduction.

D: Picture Ait label

alt Be sure to write

E: Reasonable target= "_blank"

Reasonable and infrequent use of the target= "_blank" is able to bring the traffic and clicks to a certain level of the upper website. At the same time, the use of target= "_blank" in detail can enhance the overall user experience of the site.

Third, CSS optimization

There are 3 ways of A:CSS calls

1, directly in the page between the

2, directly on the HTML tag above the definition of CSS style, increase the amount of code on the page.

3, referring to external CSS files, the three ways, the most conducive to SEO optimization is 3 that is, reference CSS files

B: Use reset but not global reset

The default properties for different browser elements vary, using reset to reset some of the default properties of the browser element to achieve browser compatibility. Note, however, that you should not use global reset, *{margin:0;padding:0;} This is not only because it is a slow and inefficient method, but also causes some unnecessary elements to reset margins and padding.

/** clear inner margin **/body, H1, H2, H3, H4, H5, H6, HR, p,  blockquote,/* Structural elements structural elements */  DL, DT, DD, UL, OL, Li, Pre,form, fieldset, Legend, button, input, textarea, TH, TD, Img{  Border:medium none;  margin:0;  padding:0;  } /** Set Default font **/  Body,button, input, select, textarea {  font:12px ' Arial ';} H1, H2, H3, H4, H5, h6 {font-size:100%;}  Em{font-style:normal;}  /** Reset list element **/  ul, ol {List-style:none;}  /** Reset Hyperlink Element **/  a {text-decoration:none; color: #333;}  a:hover {text-decoration:underline; color: #F40;}  /** Reset Picture element **/  img{border:0px;}  /** Reset Table element **/  Table {border-collapse:collapse; border-spacing:0;}

C: A good naming habit

No doubt a messy or no semantic naming code, who will be crazy to see. such as

Therefore, please do not use the element's attributes, color, position, size, etc., to name a class or ID. You can choose the meaning of the name, such as, #navigation {...} So, no matter how you modify the style that defines these classes or IDs, it does not affect the relationship between it and the HTML elements.

In addition, there is a situation, some fixed style, the definition will not be modified, then you do not have to worry about the name of the situation just said, such as:

1. .alignleft{float : left ; margin-right : 20px ;}
2. .alignright{float : right ; text-align : right ; margin-left : 20px ;}
3. .clear{clear : both ; text-indent : -9999px ;}

. alignleft{float:left;margin-right:20px;}. alignright{float:right;text-align:right;margin-left:20px;}. clear{ clear:both;text-indent:-9999px;}

If you need to change this paragraph from the original left-aligned to right-aligned, then you just need to modify its classname to alignright.

D: Code abbreviation CSS code abbreviations can improve the speed at which you write code, and streamline your code volume.

In CSS there are many attributes that can be abbreviated, including Margin,padding,border, font,background, and color values, if you learn the code abbreviations, you can write the code:

1. li{ font:1.2em/1.4emArial,Helvetica, sans-serif; padding:5px0 10px 5px; }

li{Font:1.2em/1.4em Arial, Helvetica, sans-serif padding:5px 0 10px 5px;}

E: Using CSS Inheritance if multiple child elements of a parent element in a page use the same style , it is best to define their same style on their parent element to inherit these CSS styles. This way you can maintain your code well, and you can also reduce the amount of code. So the original code,

1. #container li{font-family: Georgia, serif;}
2. #container p{ font-family: Georgia, serif;}
3. #container h1{font-family: Georgia, serif;}

#container li{font-family:georgia, serif;} #container p{Font-family:georgia, serif;} #container H1{font-family:georgi A, serif; }

can be written as:

1. #container{font-family: Georgia,serif;}

#container {Font-family:georgia,serif;}

F: Using multiple selectors

You can combine multiple CSS selectors for one if they have a common style. This is not only simple code but also saves you time and space.

such as, H1, H2, h3{font-family:arial, Helvetica, Sans-serif; font-weight:normal;}

G: Appropriate code comment

Code comments can make the structure clearer by making it easier for others to read your code and to organize code comments appropriately.
H: Using an external style sheet

This principle is always a good design practice. Not only is it easier to maintain modifications, but it is more important to use external files to improve page speed because CSS files can generate caches in the browser. The CSS built into the HTML document is re-downloaded with the HTML document in each request.

I: Avoid using CSS expressions

The problem with expressions is that they are calculated more frequently than we think. Not only when the page is displayed and scaled, it is recalculated when the page scrolls, or even when the mouse is moved. Add a counter to the CSS expression to track how often the expression is calculated. Easily move the mouse in the page can be more than 10,000 times the amount of calculation.

J: Code Compression

When you decide to deploy a Web site project to the Web, you'll want to consider compressing the CSS, commenting out comments and spaces to make the page load faster. Compression of your code, you can use some tools, such as Yui Compressor, using it to streamline the CSS code to reduce the file size for higher loading speed.

Four, JS call

2 Ways to Call JS

A: Write directly on the page, the huge amount of JS code to the page not only increase the volume of the page, but also occupy the home such a heavyweight position. So that the relative importance of the position in the page can not be prioritized to search engine display

B: Referring to JS file, referring to the external address of JS will affect the speed of opening the Web page.

Five, URL rewrite

With the JS file, referring to the external address of JS will affect the speed of opening the Web page;

Web Development performance Optimization---SEO optimization chapter