Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what are the page optimizations in the front end of web", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the page optimizations on the front end of web?"

1) Page theme optimization

Write down the name of your website realistically. The name of the website should be reasonable, and it is best to include the main content of the website.

2) Page header optimization

Explain the keywords of your page to the search engine; tell the search engine the main content of your site

Description

1. The "description" section should write a paragraph introducing your website in almost descriptive language, in which you should repeat the distinctive content of your website in order to highlight it.

2. The "keywords" section should list the keywords that you think are appropriate to highlight the content of the website. Don't set too many keywords. You can set 8 keywords, and the search engine will only browse the first few keywords.

3) Hyperlink optimization

1, use plain text links, use less, it is best not to use Flash animation to set links, because search engines can not recognize the text on Flash.

2. Write hyperlinks according to the specification. This title attribute can not only prompt visitors, but also let search engines know where it is going.

3. It is best not to use the photo hotspot link for the same reason as the first point.

4) Image optimization

Picture optimization is not to modify the size and color of the picture, but you should add the alt attribute for each tag, the role of the alt attribute is to display the text as a substitute when the picture cannot be displayed, and for SEO, it can make the search engine have the opportunity to index the pictures on your site, for some really meaningless pictures, it is best not to omit alt, but should be left blank, that is, alt= ".

5) PageRank (PR value, links)

The PR value is an important parameter proposed by Google, which indicates the importance of a website, so how is the PR value determined? At present, the common explanation is: if there are three ABC websites that link with each other, then when a visitor comes to B through the friendship link on A, Google thinks that A has cast a "vote" for B. similarly, if someone visits B from C, B will get another vote. if there are B links on websites all over the world, B will be the most important website in the world!

Can be extended: resflow & redraw (repaint)

The rendering process of the page

What is a DOM tree?

What is a style structure?

What is a rendering tree?

Present the characteristics of a tree

Picture integration (spirit picture, css sprites, css spirit, sprite picture)

Put the small icons in the site together regularly, use background-position to change the location of the background map, and apply each icon.

Advantages:

(1) CSS Sprites can reduce the http requests of web pages, thus greatly improve the performance of pages, which is the greatest advantage of CSS Sprites, and also the main reason why it is widely spread and used.

(2) CSS Sprites can reduce the bytes of a picture.

(3) CSS Sprites solves the problem of picture naming for web designers, only needs to name a collection of pictures, and does not need to name every small picture, so as to improve the efficiency of web page production.

(4) CSS Sprites only needs to change the color or style of one or fewer pictures to change the style of the whole page.

Disadvantages:

(1) the trouble of picture merging: when a picture is merged, it is necessary to merge multiple pictures into a single picture in an orderly and reasonable manner, and leave enough space to prevent unnecessary backgrounds in the forum.

(2) the adaptability of the picture is poor: in the adaptive page under the high-resolution screen, the background will break if the picture is not wide enough.

(3) the image positioning is tedious: the development needs to measure and calculate the exact position of each background unit through the tool.

(4) poor maintainability: the background of the page needs to be changed a little, and some or the whole merged picture may have to be modified, thus changing the css. On the premise of avoiding changing the picture, you can only (preferably) append the picture down, but this increases the number of picture bytes.

At this point, I believe that everyone on the "web front-end what page optimization" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.