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. Ability to remove 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 garbage code. The space-space character is the most common garbage code in a Web page.

But not the label, but there is a code editing environment to hit the space generated by the symbol, each space is quite a character, so to say. A page. The space is 15% of the page's volume. 100K page, 15K is a space character. Space characters most often appear at the beginning and end of the code. There is also the empty line. These are easy to generate garbage code places. 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. Suppose a page appears with hundreds of bold tags.

Will generate a lot of redundant code.

The workaround is to create an HTML page. The label used to optimize the selection.

B: Head Label

<title> site title </title> title settings

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

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

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

When the browser compiler encounters a label, it starts to look for its end tag until it matches, and the ability to display its contents, so that when the table, Ur and other container forms of the label nested very long, the opening of the page will be particularly slow, which reduces the user experience.

WORKAROUND: When writing HTML: Try to make one container independent. If you want to nest, be sure to make it clear, simple introduction.

D: Picture Ait label

alt Be sure to write

E: Reasonable target= "_blank"

Reasonable and infrequent use of the target= "_blank" is a certain level of the upper site to bring the traffic and click. At the same time. Use target= "_blank" in detail to enhance your site's overall user experience.

Third, CSS optimization

There are 3 ways of A:CSS calls

1. Write CSS styles directly between

2. Define CSS styles directly above the HTML tag. The amount of code to add the page.

3, referring to external CSS files, in these three ways. The most conducive to SEO optimization is 3 refers to the CSS file

B: Use reset but not global reset

The default properties for different browser elements differ, and reset resets some of the default properties of the browser element. To achieve browser compatibility.

It is important to 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 semantically named code. Whoever sees it will freak out.

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 naming like, #navigation {...} ...} postwrap{...} So, no matter how you change the style that defines these class or ID. Does not affect the connection between it and the HTML element.

Another situation. Some fixed style, after the definition will not be changed. You don't have to worry about what you just said when you name it, 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;}

Suppose you need to change this paragraph from the original left-aligned to right-aligned, then just need to change its classname for AlignRight to be able.

D: Code abbreviation CSS code abbreviations can improve the speed at which you write code. Streamline the amount of your code.

There are many attributes that can be abbreviated in CSS. Contains margin,padding. Border. Font,background and color values, and so on, let's say you learned the code abbreviation. Can be written in code:

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

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

E: Using CSS inheritance to assume that multiple child elements of a parent element in a page use the same style。 It's better to put them in the same The style definition is on its parent element。 Let them inherit these CSS styles.

This way you can maintain your code very well. And it 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 merge multiple CSS selectors into one. Let's say 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: Proper code Gaze

The code gaze makes the structure clearer by making it easier for others to read your code and to properly organize your code gaze.
H: Using an external style sheet

This principle has always been a very good design practice. Not only is it easier to maintain changes, 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 downloaded again in each request with the HTML document.

I: Avoid using CSS expressions

The problem with expressions is that they are calculated more frequently than we think. No, but when the page is displayed and scaled, it is calculated once again when the page scrolls, or even when the mouse is moved.

Adding a counter to a CSS expression keeps track of how often the expression is calculated. Easily move your mouse around the page to achieve more than 10,000 calculations.

J: Code Compression

When you decide to deploy the site project to the network, you need to consider compressing the CSS, going out to stare and spaces. To make the page load faster. Compress your code and be able to use some tools. such as Yui Compressor, use it to streamline the CSS code to reduce file size to achieve 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 add the volume of the page, and 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: Reference js file. JS that references an external address affects the speed at which the Web page is opened.

Five, URL rewrite

Put the dynamic page. aspx. jsp. PHP again into. html. Make search engines easier to identify;

This article is for individuals to work experience and collection of summary and collation. Please give valuable advice if you can't write it. Thank you.

I Sina Weibo: http://weibo.com/i/1741159542

Web Development performance Optimization---SEO optimization chapter