Study Notes on Seo code optimization

1. Clear junk code.

Spam refers to the deletion of redundant code on the page, which can delete 80% of the redundant code. Spam mainly refers to unnecessary code that is deleted without any impact on the page.
The most common spam code: Space
Space characters are the most common spam code on webpages. But it does not refer to labels, but to the symbols produced by hitting spaces in the code editing environment. Each space is equivalent to one character. That is to say, a page occupies 15% of the page size, k page, 15 K is a space character.
Space characters are most often seen at the beginning and end of the Code, and there is also a blank line.
These are all prone to spam code.
To eliminate such spam code, select the code and press SHIFT + TAB to align left.

 

2. html tag

A. html tag Conversion

HTML Tag conversion mainly refers to replacing long tags with short tags that have the same effect on the webpage, for example :, both <B> and <strony> are bold fonts, but <strong> is five characters more than <B>. If a page contains hundreds of bold labels, a lot of redundant code is generated.

The solution is to optimize the selected tag when creating an HTML page.

B. Head label

<Title> website title </title>

<Meta name = "keywords" content = "website keywords. Multiple keywords are separated by delimiters, for example, |,"/>

<Meta name = "Description" content = "website description"/>

C. labels in the form of containers such as tables and UR

When a browser compiler encounters a tag, it starts to look for its end tag until it matches to display its content ., therefore, when many labels are nested in tables, ur, and other containers, opening the page is very slow, which reduces the user experience.

Solution: when writing HTML, try to make one container independent. If you want to nest it, make it clear and brief.

D. Image ait tag

E, reasonable target = "_ blank"

Reasonable and infrequent use of target = "_ blank" is a way to bring maneuver traffic and clicks to websites to a certain extent. At the same time, the use of target = "_ blank" in details can enhance the overall user experience of the website.

 

 

 

3. CSS Optimization

A. CSS call

There are three methods:

A. Write the CSS style directly between the

B. Define the CSS style directly on the HTML Tag. Increase the Page code volume.

C. reference the CSS file;

Among the three methods, C is the most conducive to Seo optimization, that is, reference CSS files

 

 

B. Use reset, but not global reset.

The default attributes of different browser elements are different. You can use reset to reset some default attributes of browser elements to achieve browser compatibility. However, do not use global Reset:

* {Margin: 0; padding: 0 ;}

This is not only because it is a slow and inefficient method, but also causes unnecessary elements to reset the outer and inner margins. We recommend that you refer to Yui reset and Eric Meyer.

View code

/** Clear internal and external margins **/body, H1, H2, H3, H4, H5, H6, HR, P, BLOCKQUOTE,/* structural elements structure element */dl, DT, DD, UL, ol, Li,/* List elements list elements */PRE,/* Text Formatting elements text format elements */form, fieldset, legend, button, input, textarea,/* form elements form Element */Th, TD,/* Table Elements table element */img/* IMG elements Image Element */{border: Medium none; margin: 0; padding: 0;}/** set default font **/body, button, input, select, textarea {Font: 12px/1.5 'body', tahoma, srial, helvetica, sans-serif;} 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 image elements **/IMG {border: 0px ;} /** reset table element **/table {border-collapse: collapse; border-Spacing: 0 ;}

 

C. Good naming conventions

No doubt, the code is messy or the code for naming without definition. Anyone who looks at it will be crazy. For example, the following code:

. Aaabb {margin: 2px; color: red ;}

I don't think that even a beginner will name a class like this in a real project, but it is also very problematic to think about such code:

<H1> my name is <SPAN class = "Red blod"> wiky </span>

The problem is that if you need to change all the original red fonts to blue, the style will change:

Red {color: bule ;}

This naming will be confusing. It will be troublesome to change the sidebar named. leftbar to the right. Therefore, do not use the element features (color, location, size, and so on) to name a class or ID. You can select the name of the meaning, for example, # navigation {...},. Sidebar {...},. Postwrap {...}

In this way, no matter how you modify the styles that define these classes or IDs, the relationship between them and HTML elements is not affected.

There is also a situation where some fixed styles won't be modified after definition, so you don't have to worry about the situation you just mentioned when naming, such:

. 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 the section from the original left-aligned to the right-aligned section, you only need to change its classname to alignright.

D. Abbreviation of code

CSS code abbreviations can speed up code writing and streamline the amount of your code. There are many attributes that can be abbreviated in CSS, including margin, padding, border, Font, background, and color value. If you have learned the abbreviation of code, the original code is as follows:

Li {

Font: 1.2em/1.4em Arial, Helvetica, sans-serif;

Padding: 5px 0 10px 5px;

}

E. Use CSS to inherit

If multiple child elements of the parent element on the page use the same style, it is best to define the same style on the parent element and let them inherit these CSS styles. In this way, you can maintain your code and reduce the amount of code. The Code is as follows:

# Container Li {font-family: Georgia, Serif ;}

# Container P {font-family: Georgia, Serif ;}

# Container H1 {font-family: Georgia, Serif ;}

Can be written:

# Container {font-family: Georgia, Serif ;}

F. Use multiple Selector

You can merge multiple CSS selectors into one, if they have a common style. In this way, the code is concise and saves you time and space. For example:

H1, H2, H3 {font-family: Arial, Helvetica, sans-serif; font-weight: normal ;}

 

G. Proper code comments

Code comments make it easier for others to understand your code and organize code comments reasonably to make the structure clearer.

7. Keep CSS readable

Writing readable CSS makes it easier to search for and modify styles. In either of the following situations, which one is more readable.

H. Use an external style sheet

This principle is always a good design practice. It is not only easier to maintain and modify, but more importantly, it can improve the page speed by using external files, because CSS files can generate cache in the browser. CSS built in the HTML document will be re-downloaded with the HTML document in each request.

I. Avoid using CSS expressions (expressions)

The problem with expressions is that they are computed more frequently than we think. Not only when the page is displayed and scaled, but when the page is scrolling or even moving the mouse, it is re-computed. Add a counter to the CSS expression to track the computing frequency of the expression. You can easily move the mouse over 10000 times on the page.

J. Code Compression

When you decide to deploy the website project on the network, you need to compress the CSS, comment out the comments and spaces to make the webpage Load faster. To compress your code, you can use some tools, such as Yui compressor, to streamline the CSS code and reduce the file size to get a higher loading speed.

 

4. js call

Two call methods of JS:

A. Write the Code directly on the page. Placing a huge amount of JS Code on the page not only increases the page size, but also occupies the heavyweight position like the homepage... therefore, the relatively important locations on the page cannot be displayed to the search engine preferentially.

B. Reference JS files (JS files that reference external addresses will affect the speed of opening webpages );

Method 2