Summary of performance optimization for Web front-end pages

PS: Combining the ideas of the elite and some of their own small summary ~

The most significant impact on user access is the front-end page. The Division of the website is generally two: front end and backstage. We can understand the background is used to achieve the function of the site, such as: the implementation of user registration, users can comment on the article and so on. And what about the front? In fact, it should be a function of performance.

And what is the purpose of building our website? Is it just to get the target people to visit? So we can understand that the front end is the real contact with the user.

In addition to the background needs to optimize performance, in fact, the front-end page needs to work on performance optimization, only in order to give our users a better user experience. Not only that, if the front-end optimization is good, he can not only save costs for the enterprise, he can also bring more users to users, because of the enhanced user experience. Having said so much, how do we optimize the performance of our front-end pages?

Front-end pages mainly include XHTML,CSS,JS. In fact, XHTML is the reality of the content, the content of the page: text, pictures, flash, video and so on.

And what can front-end developers control? That's the XHTML,CSS,JS code and the corresponding retouching (background) image. I'll follow my own experience to say:

First, to promote the front-end development engineers in writing XHTML to achieve structural semantics.

The structure mainly includes the head and body two parts, but we often say that the structure of semantics is mainly the body of the label, but I am here or simply say that head,head in fact includes some of our SEO useful things, such as title, Description,keywords, these things are helpful when spiders crawl, of course, there are other, I do not explain here, such as setting the cache and other information.

Then the body of the words, including a lot of tags, I think as a qualified front-end developers you should be familiar with them, such as div,span,h,ul,ol,dl,p and so on the use of such tags. Should be very reasonable, there is to pay attention to the H tag fault, and the use of H1 tags, these are very important.

Also in our structure, do not appear inline styles and events such as style and onclick. We hope that we can pay attention to the separation of structure and performance and behavior.

(PS: The Benefits of label semantics: 1. Beneficial to search engines; 2. Clearly structured HTML plays a role in teamwork, so you don't have to say it; 3. For the blind screen reader. As to how to make the label semantic, look at the individual understanding, this aspect I also feel vague, and personal habits estimate also have a certain relationship, anyhow Huibin teacher is think my label is not semantic. ）

Ii. optimization of the number and size of css,js files

So about the CSS, JS optimization, generally recommended CSS and JS to use an external type. But if your page content is more, the designer to make the whole effect of the comparison of flowers, I am afraid that CSS is very much, then this situation, you must put your CSS planning, as far as possible to use abbreviations, so that you can reduce the size of the CSS file, then the corresponding layout of CSS can also reduce the number of CSS, Reduce the number of HTTP requests, JS similarly.

(PS: Reduction of repetitive Code, code reuse, here is particularly important)

Iii. optimization of the number and size of background images

When we restore the design of the designer to a static page, unless the page all the decorations are all color blocks, the content is all text, no pictures, if not, then we need to optimize the image processing. Of course, the content of the picture we have no way, because he is part of the content, the general situation is due to the editing process, of course, I still have a small suggestion, if we need to have a content image of the site, I hope the editor can optimize their optimization later, in the upload, a moment to tell me the method, below I say, As a front-end development should be how to handle our retouching (background) pictures.

Because of the number of background pictures, so that will affect the server, increase the number of HTTP requests, do we have a good solution? The answer is yes, if you are a qualified front-end developer, you should be aware that when our CSS defines the background, the coordinates can be used to position the background, so we can combine these backgrounds to reduce the number of HTTP requests, while we are in the background integration , but also need to consider the picture quality, but also need to consider the size of the picture, I have written in the corresponding post.

(PS: It is recommended to use PNG8 format pictures with CSS Sprite, the same picture, the PNG8 format will be relatively smaller than GIF)

Iv. optimization of the size of the content picture

Actually just already said the content picture question, then I am here, tells everybody a relatively simple method, is uses the Yahoo to provide a tool. He's smushit:http://www.smushit.com/.

But he this tool I think for we need to publish the content of the picture is still more trouble, but he can optimize, optimize the purpose of the picture, the beginning has been said, the smaller the picture, our users download faster, of course, the bandwidth of the enterprise server can also play a role in saving.

Above is my view on the front page performance of some simple views, of course, the Web standards mentioned in the structure, performance, behavior, we work said Xhtml,css,js actually they have a lot of things, we need to learn, such as structural semantics he is an in-depth study of the subject, performance optimization is the case, But we can only make progress if we keep on digging. Here is a simple suggestion for the production of my front-end development:

1, we do the restoration of the page can be verified by http://validator.w3.org, of course, CSS Hope can also pass http://jigsaw.w3.org/css-validator/validator difficult to prove, However, sometimes due to the need for multi-browser compatibility, will be affected by hack, CSS does not make mandatory requirements.

2, as the front-end I think should know YSlow. If you do not know can look at my previous written article, you think your static page should be able to pass Yslow2.0 's classic (V1) level of detection, test results I think should get a.

3, your background picture guarantee not more than 3, your CSS file not more than 2, JS file not more than 3. And good compliance with the web standards of some provisions, CSS put into the head, JS file before </body> or after.

4, of course, I hope you can do a nude check on your page. It's really about verifying that your structure is semantically effective.

Nude check: Just remove your css and JS, and look at your HTML to see if you can read the content.

5. Check if your h tag is a fault.

(PS: Just follow the h1,h2,h3,h4 ...., do not miss out the middle H2)

6, the proposed body increases text-align:center.

7, of course, there are many, such as what Id,class name Ah, these things, I think should be your team should do things.

(PS: Here to take a good look at the weight and priority of the CLSAA selector)

8, as a large-scale web site, the home page using an inline style sheet, which can reduce the number of HTTP requests at the same time, can also prevent the bare-Ben. Of course, other pages need to use an external style sheet, so that they can be easily maintained. Because as a large-scale web site, his home visit is very large, so.

Put the style sheet on top
Place the script at the bottom of the page
Avoid using CSS expressions (expression)
Using external JavaScript and CSS
Cut JavaScript and CSS
Replace @import with <link>
Avoid using filters
Eliminate duplicate scripts
Reduce DOM Access
Developing intelligent event handlers

The best solution is to download your stylesheet in the document

For home pages with larger views, there is a technology that balances the benefits of reducing HTTP requests from built-in code with caching by using external files. One of them is the built-in JavaScript and CSS on the homepage, but when the page is downloaded, the external files are downloaded dynamically, and when they are used in the sub-pages, they are cached in the browser.

Coockie:

Reduce Cookie Volume
Use no Coockie domain name for page content

Image:

Optimize images
Optimize CSS Spirite
Do not scale images in HTML
Favicon.ico is small and cacheable

Mobile apps:

Keep single content less than 25K
Packaging components into compound text

Transfer from http://www.cnblogs.com/mofish/archive/2010/10/12/1849041.html

Summary of performance optimization for Web front-end pages