Summary of Web Front-end page Performance Optimization

PS: combined with the idea of elites and some small summaries of myself ~

The most influential part is the front-end page. Websites are generally divided into two categories: front-end and back-end. We can understand that the background is used to implement website functions, such as user registration and the ability of users to post comments for articles. What about the front-end? It should actually be a function.

 

What is the purpose of website construction? Isn't it to allow access by the target audience? Therefore, we can understand that the frontend is truly in contact with users.

In addition to performance optimization on the backend, the front-end pages must be optimized to provide better user experience for our users. In addition, if the front-end is well optimized, it can not only save costs for the enterprise, but also bring more users to users because of enhanced user experience. After talking about this, how should we optimize the performance of our front-end pages?

Front-end pages mainly include XHTML, CSS, and Js. In fact, XHTML is the content mentioned in reality. The page content includes text, images, Flash, and video.

What can front-end developers control? That is, the XHTML, CSS, and JS Code and the corresponding modifier (background) image. Based on my own experience:

I. Advocate front-end development engineers to make the structure semantic when writing XHTML.

The structure mainly includes two parts: head and body. However, we often say that structure semantics is mainly the label in the body, but here I will briefly talk about head, the head actually includes some things that are useful to our Seo, such as title, description, and keywords. These things are helpful when crawlers crawl them. Of course, I will not describe it here, for example, setting cache and other information.

There are a lot of labels in the body. I think you should be familiar with them as a qualified front-end developer, such as Div, span, H, UL, ol, DL, P and so on. It should be very reasonable. Pay attention to the fault of the H tag and the use of the H1 tag, which are all very important.

At the same time, do not display inline styles and events such as style and onclick in our structure. We hope that you will pay attention to the separation of structure, performance, and behavior.

(PS: benefits of tag semantics: 1. Benefits for search engines; 2. Role of well-structured HTML in team collaboration, no need to mention it; 3. Benefits for blind screen readers. As for how to implement tag semantics, it depends on my understanding. In this regard, I also think it is vague and related to my estimation of habits, in short, Mr. Yan huibin believes that my labels are non-semantic .)

Ii. Optimization of the number and size of CSS and JS files

For CSS and JS optimization, we recommend that CSS and JS adopt the external mode. However, if you have a lot of page content and the designer makes a little effort to make the overall effect, I am afraid there will be a lot of CSS. In this case, you must plan your CSS, use abbreviations as much as possible to reduce the size of CSS files. Planning CSS can also reduce the number of CSS files and the number of HTTP requests. The same applies to Js.

(PS: reduce repetitive code and reuse code, which is particularly important here)

3. The number and size of background images are optimized.

After we restore the designer's design draft to a static page, unless all the modifications on the page are color blocks, the content is all text, and there are no images. If not, then we need to optimize the image. Of course, there is no solution to the content image because it belongs to the content part. It is generally caused by editing. Of course, I still have a small suggestion, if we need content images on our website, we hope the editors can optimize them and upload them. I will tell you how to do this later. I will talk about it below, as a front-end developer, how should we deal with our modifier (background) images.

Because we have a large number of background images, this will affect the server and increase the number of HTTP requests. Is there a good solution? The answer is yes. If you are a qualified front-end developer, you should be clear that when we define the background in CSS, we can use coordinates to locate the background, in this case, we can combine these backgrounds to reduce the number of HTTP requests. At the same time, we also need to consider image quality during background integration, at the same time, we also need to consider the image size. I have written a blog post before.

(PS: We recommend that you use the png8 format in combination with CSS Sprite. For the same image, the png8 format is relatively smaller than the GIF format)

Iv. Optimization of content image size

In fact, I have already mentioned the problem of content and images. Here I will tell you a simple way to use a tool provided by Yahoo. He is smushit: http://www.smushit.com/

However, I think this tool is still troublesome for the content images we need to publish, but he can optimize and optimize the images. The smaller the images, the faster the download speed for our users, of course, it can also reduce the bandwidth of enterprise servers.

The above are some simple comments on front-end page performance. Of course, the structure, performance, and behavior mentioned in the Web standard, we work on XHTML, CSS, and JS, but they still have many things, we need to study it. For example, semantic structure is an in-depth research topic, and performance optimization is also the case. However, we can only continue to explore the problem and make progress. The following is a simple suggestion for front-end development:

1, we do restore the page can pass the verification of http://validator.w3.org, of course, CSS can also hope to pass.

2. I think yslow should be known as the frontend. If you don't know, you can read my previous article. You think your static page should be able to pass yslow2.0's classic (V1)-level detection. I think the detection result should be.

3. ensure that there are no more than three background images, no more than two CSS files, and no more than three JS files. In addition, it complies with some web standards. CSS is placed in the head, and JS files are placed before or after </body>.

4. Of course, you want to perform a nude check on your page. In fact, it is to test whether your structure semantics is effective.

Naked check: Remove your CSS and JS, view your HTML, and see if you can understand the content.

5. Check whether your h tag is faulty.

(PS: According to H1, H2, H3, h4..., do not miss H2 in the middle)

6. We recommend that you add text-align: center to the body.

7. Of course there are many other things, such as what IDs and class names, which I think should be something your team should do.

(PS: here you have to take a good look at the weight and priority of the clsaa selector)

8. As a large website, the Homepage uses an inline style table, which can reduce the number of HTTP requests and prevent streaking. Of course, external style sheets must be used on other pages to facilitate maintenance. As a large website, its homepage traffic is very large ..

Place the style sheet on the top
Place the script at the bottom of the page
Avoid using CSS expressions)
Use external JavaScript and CSS
Reduce JavaScript and CSS
Replace @ import with <link>
Avoid using Filters
Remove duplicate scripts
Reduce Dom access
Develop intelligent event processing programs

The best solution is to load your style sheet in the document

For a homepage with large page views, there is a technology that balances the benefits of reducing HTTP requests brought about by built-in code and caching by using external files. One of them is built-in JavaScript and CSS on the homepage, but external files are downloaded dynamically after the page is downloaded. When these files are used on the subpage, they are cached in the browser.

Coockie:

Reduce cookie volume
No coockie domain name is used for page content

Image:

Optimize images
Optimize CSS spirite
Do not scale the image in HTML
Favicon. ICO is small and can be cached

Mobile applications:

Keep a single content smaller than 25 KB
Package components into composite text

In this article, we talked about editing. In fact, many companies are not only editing, but even developing. They are not very familiar with XHTML planning, so there are often some such problems on the pages that have already been launched, such as comments, or tags that are not closed, so I suggest various companies have some discussion sessions, various positions can interact with each other. In fact, it can also be said to be training. Only in this way can we build a good product.

Well, let me talk about these things. These things are also some of my simple views. Of course, you may not agree with what I said, or you have better suggestions. You can contact me separately, you can also give me a comment after this post, or call a message.

Turn from blueidear: http://bbs.blueidea.com/thread-2936073-1-1.html