Front-end Optimization of high-performance website construction

Front-end Optimization of high-performance website construction

By PHP Huaibei, 560 visits, favorites, Edit

Preface:

This is a summary of the front-end optimization. We have summarized and learned from each other. This is a complete summary.

Test webpage Performance Tools (1) Page Speed:

Google's tools, website administrators and network developers can use Page Speed to evaluate the performance of their web pages and get suggestions on how to improve the performance.

(2) yslow:

YSlow can analyze website pages and tell you how to optimize websites based on certain rules to improve website performance.

Installation Method:

Install yslow directly on the firefox component. Install yslow.

Install Page Speed and use FirefoxHttp://code.google.com/speed/page-speed/download.html.

Usage:

1) Use of pagespeed

Here is how to explain the color code score:

· High priority. These suggestions represent the biggest potential to win performance. You should first solve these projects.

· Medium priority. These suggestions may represent smaller victories or more work. You should address the future of these projects.

· Work fines or low priority. If the suggestion is displayed, as with "+", it indicates that they are likely to represent minor victories. You should only pay attention to these items, and you have a higher priority.

· Only information messages are supported. Whether these items are not applicable to this page or there is a problem in running the test.

For more information about its use, see: Http://code.google.com/intl/zh-CN/speed/page-speed/docs/using_firefox.html

2) Use of yslow

The view displays the transcript of a webpage. The entire letter level is displayed on the top of the page with the full value. This page is based on 22 high-performance webpage rules that can be graded (see performance rules ). These rules are listed in the order of importance, from the heaviest to the least important. From level A to level F, Level A is the highest. For more detailed usage reference: http://www.yslow.net/show.php? Tid = 123

Best practices and rules for website performance

What is the principle of website optimization? Here we recommend 23 Yahoo's website optimization military rules

Yahoo's superior performance team has identified 23 military rules:

1. Reduce the number of HTTP requests
Merge images, CSS, and JS to improve the user wait time for the first visit.
2. Use CDN
Nearby cache ==> smart routing ==> Server Load balancer ==> dynamic acceleration of WSA
3. Avoid empty src and href
When the href attribute of the link tag is empty and the src attribute of the script tag is empty, the browser uses the URL of the current page as their attribute values during rendering, load the page content as their values. Test
4. Specify Expires for the file header
Cache the content. This avoids unnecessary HTTP requests for subsequent page access.
5. Use gzip to compress the content
Compressing responses of any text type, including XML and JSON, is worthwhile. Old article
6. Place CSS on the top.
7. Put JS at the bottom
Prevents js loading from blocking subsequent resources.
8. Avoid using CSS expressions
9. Place CSS and JS in an external file.
The purpose is to cache, but sometimes to reduce the request, it is also directly written to the page, according to the ratio of PV and IP.
10. Weigh DNS lookup times
Reduce the host name to save response time. At the same time, however, you must note that reducing the number of concurrent downloads on the page will reduce the number of hosts.
Internet Explorer can only download two files from the same domain name at the same time. When multiple images are displayed on a page
The user's image download speed will be affected. So Sina will have N second-level domain names to put images.
11. Streamline CSS and JS
12. Avoid redirection
Same domain: Avoid redirection with the Backslash;
Cross-Domain: Use Alias or mod_rewirte to establish a CNAME (to save the DNS record of the relationship between the domain name and the domain name)
13. Delete duplicate JS and CSS
Repeat the script, in addition to adding additional HTTP requests, multiple operations will also waste time. In IE and Firefox, whether or not the script can be cached, they all have the problem of repeated JavaScript operations.
14. Configure ETags
It is used to determine whether the elements in the browser cache are consistent with those on the original server. It is more flexible than last-modified date. For example, if a file is modified 10 times in one second, Etag can combine Inode (number of file index nodes (inode ), MTime (modification time) and Size can be used to accurately determine, avoiding the problem that the UNIX record MTime can only be accurate to seconds. The server cluster can use the last two parameters. Use ETags to reduce Web application bandwidth and Load
15. cacheable AJAX
"Asynchronous" does not mean "instant": Ajax does not guarantee that users will not spend time waiting for Asynchronous JavaScript and XML responses.
16. Use GET to complete AJAX requests
When XMLHttpRequest is used, the POST method in the browser is a two-step process: first send the file header before sending data. Therefore, GET is more meaningful.
17. Reduce the number of DOM elements
Is there a label that is more appropriate for use? Life is not just DIV + CSS
18. Avoid 404
Some sites change the 404 error response page to "are you looking for ***", which improves the user experience, but also wastes server resources (such as databases ). The worst case is that there is a problem with the link to the external JavaScript and Code 404 is returned. First, this kind of loading will destroy parallel loading. Second, the browser will try to find useful parts in the returned 404 response content as JavaScript code for execution.
19. Reduce the cookie size
20. Use a non-Cookie domain
Comparing slice CSS, Yahoo! The static files are all on yimg.com. When the client requests static files, the impact of repeated cookie transmission on the primary domain name (Yahoo.com) is reduced.
21. Do not use filters
Png24 in IE6 translucent that thing, don't mess up, calmly cut into png8 + JPG
22. Do not scale the image in HTML
23. Narrow down favicon. ICO and Cache

Comparison between awesome and authoritative Explanatory Materials

With regard to these provisions, the most authoritative and detailed explanation by the predecessors is best
Practices for speeding up your web site and Web
Performance Best Practices

Baidu's extensive experience center also has an article on the optimization of the load part: http://www.baiduux.com/blog/2011/02/15/browser-loading/

************************************** The above three after reading this article, there are basically no difficulties in page optimization.

Solve the problem

Through the Tool Test above, you can check the front-end of the web page for a small number of problems, and you need to solve the problem one by one. The following is a record of my website's problems, you can refer to website Optimization-Let Your webpage fly

 

Other problems

Can I go online after all of the above operations? Note the following:

• Have you used Google analysis and other statistical tools? (Baidu statistics or cnzz statistics can be used in China)

You should track the access to each page, which are popular, and which make more money. Below is a page heat map I use Baidu statistics: through the hot dive, you can analyze the places that users prefer to click on the page!

• Is there a website map (sitemap. XML) file?

The search engine can find all the pages of the website, but the website map can give directions to the search engine and tell them the page weight. below is the website map of the blog Park.

.

Have you tested multiple browsers?

You can use browsershots.org to check whether your website is visible in all browsers.

 

Here is an article that summarizes the small issues that are very good. You can take a look at the 13 issues that need to be checked before the website goes online.

 

Real-time website monitoring

Foreign users can useSiteuptime.com/pingdom.comDomestic users can use the monitoring site. below is my monitoring:

Cloudmonitor now supports server performance monitoring, webserver monitoring, and user experience tracking, as shown below:

 

 

Supports multiple monitoring and various types, and monitors every 15 minutes. It helps you monitor your website in real time.

Summary

Summary of webpage front-end optimization includes: webpage performance testing tools, front-end optimization principles, solutions, 13 small issues that need attention, and finally real-time website monitoring to ensure that your website is normal!

Technorati label: page optimization
YSLOW pagespeed monitoring front-end Optimization

This article is based on the signature-non-commercial use
3.0 release of the license agreement. You are welcome to repost and interpret it. However, the signature of this article, PHP Huaibei (including links), must be retained and cannot be used for commercial purposes. If you have any questions or negotiation with the Authority, please contact me.