. Net Performance Tuning 3: tuning tools and methods for yslow-related rules

. Net Performance Tuning Series Article

Index of series articles

• . Net Performance Tuning: Use of ants performance profiler
• . NET performance optimization 2: Use Visual Studio for code measurement
• . Net Performance Tuning 3: tuning tools and methods for yslow-related rules

1. Introduction to yslow

In this article, we will talk about the optimization of the Web Front-end, which mainly follows the yslow rule. The specific rule meaning is clearly described in the 23 rule descriptions of yslow, so we will not repeat it here, here we will mainly discuss how to optimize some rules.

Yahoo's predictional performance team organized 34 rules for improving the performance of web pages, while yslow extracted 23 Rules from them to guide developers to optimize web pages, it is often referred to as 23 military rules and has a strong guiding significance. You know, Yahoo was the first web site that started to work as a portal website.

After running the related yslow plug-in to analyze the website, the plug-in will give the overall score of this website and detailed score of 23 Rules for developers to optimize one by one, score from A-F, the higher the score (the highest A and the lowest f), the more suitable the rule is.

2. Use of yslow

The following figure shows the plug-in provided by yslow. You can download and install the plug-in as needed.

Take chrome as an example to open the website for analysis. After installation, click the yslow icon in the plug-in toolbar to run the analysis and you will see the analysis result.

23 yslow rules are listed below.

For the time being, I will not discuss the content of the server deployment architecture, such as CDN.CodeThese rules are discussed from the perspective of optimization.

1. Minimize HTTP requests
2. Use a content delivery network
3. Avoid empty SRC or href
4. Add an expires or a cache-control header
5. Gzip Components
6. Put stylesheets at the top
7. Put scripts at the bottom
8. Avoid CSS expressions
9. Make JavaScript and CSS external
10. Reduce DNS lookups
11. Minify JavaScript and CSS
12. Avoid redirects
13. Remove duplicate scripts
14. Configure etags
15. Make Ajax cacheable
16. Use get for Ajax requests
17. Reduce the number of DOM elements
18. No 404 S
19. Reduce cookie size
20. Use cookie-free domains for components
21. Avoid Filters
22. Do not scale images in HTML
23. Make favicon. ICO small and cacheable

3. How to Reduce HTTP requests and CSS sprite tools

For the purpose of reducing HTTP requests, you can view the detailed explanation of the rules, or use the network function of the developer plug-in chrome to request a website and view the timeline of the resource request.Should be ableI will not go into details here.

To reduce HTTP requests, You can merge resources and files, including CSS and JavaScript, and merge images.

For details about CSS and JavaScript merging, refer to my previous article: [front-end optimization] Use combres to merge requests to JS and CSS files.

The most common method for image merging is the CSS sprite technology. For detailed principles, see here.

This is the picture after Netease Homepage uses CSS sprite technology.

If a website uses the CSS sprite technology to merge images in the early stage, it is quite convenient to develop them. If it is developed, it will be very troublesome to sort out scattered images, image pixels need to be aligned and CSS styles need to be adjusted.

Fortunately, a tool can help us do this. Here is a tool for generating CSS sprite online: CSS sprite generator.

Compress the image to be merged into a zip package and configure related options.

Click the generate button to generate the corresponding CSS and merged images. The red lines are the essence of CSS sprite technology: the image offset is used to display small images in different positions on the merged image.

Is that simple, right? Why not merge the scattered images of your website to reduce the HTTP requests of your website to the server?

4. gzip compression and resource file Compression

Gzip compression can sometimes reach a compression rate of about 80%. If you can enable it (some virtual hosts do not have the permission to enable it), try to enable it.

For details about gzip settings and compression comparison, see my previous article: Comparison and deployment of gzip compression efficiency enabled by IIS

For more information about CSS and JavaScript resource compression, see my previous article: [frontend optimization] use Microsoft Ajax minifier to compress and optimize resource files.

Of course, there are many methods and frameworks that can implement such functions. You can search for related articles after learning about the principles.

5. CSS and JavaScript resource files

• Do not use CSS expressions, such as background-color: expression (new date (). gethours () % 2? "# B8d4ff": "# f08a00"). This may cause many browser performance problems.
• Do not have repeated script content.
• Ajax uses cache and try to use get for requests.

6. Image-related

• Do not set the SRC and href attributes to null.
• Do not forcibly scale the image, such as the image in the label , do not use images larger than Px in width. Otherwise, problems such as slow loading and blurred images may occur.
• Do not use too large favicon. ico. We recommend that you set the cache to less than 1 kb.

7. Conclusion

The 23 Rules of yslow basically contain many details of Web Front-end optimization. During optimization, each rule breaks through. If the website runs at a grade C or higher, at least it is good in terms of front-end performance and SEO.

Understanding the 23 optimization rules can also guide you in the development process to handle and make decisions, so it is very helpful.

The article has some omissions and needs to be supplemented. Please leave a message to discuss them together, and pay attention to the subsequent articles.

If the article is helpful to you, please recommend it. Thank you.