Optimize Web site performance

First, the front-end optimization

Website performance optimization is a very comprehensive topic, related to the configuration of the server and the site front and back of the program and other aspects, I just from the actual experience, to share the site I have tried to optimize the performance of the method. The reason to hang a web2.0 in the title, because this article is more emphasis on small and medium-sized website performance optimization, I used the system is a typical web2.0 lamp architecture.

First of all, the optimization of the front-end, user access to the Web page wait time, 80% is happening in the browser front-end, especially the page and the various elements of the page (image, CSS, Javascript, flash ...) ) above the download. Therefore, in many cases, the optimization of the front-end can play a multiplier role in comparison to the arduous and complicated process improvement of the time spent. Yahoo recently published the internal use of performance testing tools YSlow to third parties, and released the famous website performance optimization of 13 rules, it is recommended that you download and install YSlow, and as a tool to evaluate the site optimization effect. Here are some of the most valuable details to illustrate how to optimize:

For users who visit your site for the first time and have not yet cached your site content in the browser cache, the things we can do include:

1) Reduce the number of HTTP connections generated by one page access
For users who visit your site for the first time, the number of HTTP connections generated by the page is a key bottleneck that affects performance.

Countermeasures:
-Minimize the use of images and minimize the use of JavaScript by discarding unnecessary page effects.
-Use some optimization techniques, such as using the background displacement of the image to reduce the number of images; image map technology; Use inline images to bundle CSS images into a Web page.
-Try to combine JS and CSS files to reduce the number of independent files.

2) Compress Web content using gzip
Using gzip to compress static content in a Web page can significantly reduce the time it takes for users to visit a webpage (said to be up to 60%). The mainstream Web server supports or provides gzip compression, and if you use the Apache server, you only need to turn on Mod_gzip (apache1.x) or mod_deflate (apache2.x) in the configuration file. All static pages, using GZIP compression can significantly improve server efficiency and reduce bandwidth expenditure, note that the image content itself is a compressed format, be sure not to compress.

3) put CSS at the top of the page, JS file at the bottom of the page
CSS reference to be placed in the head header of the HTML, JS file reference as far as possible at the bottom of the page after the label, the main idea is to let the core content of the page early display. However, it is important to note that some of the large number of JS pages, there may be some JS files at the bottom will cause some unpredictable problems, according to the actual situation appropriate application can be.

4) Minimize the content of JS files
Specifically, some JavaScript compression tools are used to compress the JS script, removing whitespace characters, annotations, minimizing variable names, and so on. On the basis of using gzip compression, the compression of JS content can improve the performance by 5%.

5) Minimize the use of external scripts and reduce DNS query time
Do not reference too many external scripts in the Web page, first, a DNS parsing process takes 20-120 milliseconds, and second, if you refer to too many external files in the page (such as various ads, federation, etc.), your site may be dragged slowly because of the response speed of the external file. If you have to, try putting these scripts in the footer. However, it is necessary to mention that the browser generally can only parallel processing two requests under the same domain name, and for different sub-domains are not subject to this limitation, so appropriate to the site static content (CSS,JS) under the other sub-domain (such as static.xxx.com) will help improve the browser's ability to download Web content in parallel.

For your site's frequent access users, the main optimization idea is to maximize the use of the user's browser cache to reduce server overhead.

1) Add Expiration time in header (Expires header)
Adding a longer expiration time to static content in the header allows users to access the files in the cache in the future, without any interaction with the server. However, there are some problems, when the image, CSS and JS files are updated, users will not be able to get this update if they do not refresh the browser. This way, when we modify the images, CSS and JS files, we have to rename them to ensure that the user has access to the latest content. This can be a hassle for development, because these files may be referenced by many files in the site. Flickr's solution is to use URL rewrite to make the URLs of different version numbers point to the same file in fact, which is a smart approach, because the URL level of operational efficiency is very high, can provide a lot of convenience to the development process.

To understand why this is done, you must understand how the browser works when it accesses URLs:
A. The first time the URL is accessed, the user obtains the page content from the server segment and puts the relevant file (Images,css,js ... ) is placed in the cache, also will be in the file header expired Time,last modified, etags and other related information is also preserved together.
B. When the user repeatedly accesses the URL, the browser first looks at whether there are files of the same name in the cache, and if so, checks the expiration time of the file, and if it has not expired, reads the file directly from the cache and no longer accesses the server.
C. If the expiration time of a file in the cache does not exist or is exceeded, the browser accesses the server to obtain the header information of the file, checks for information such as last modifed and etags, and if the files in the local cache have not been modified since the previous access, the files in the local cache are used; Then get the latest version from the server.

My experience, if possible, to follow this principle to add an expiration time to a static file, which can significantly reduce the user's repeated access to server resources.

2) Place CSS and JS files in separate external file references
Put CSS and JS files in separate files so that they are cached separately and can be read directly from the browser's cache when accessing other pages. Some of the homepage of some websites may be the exception, these homepage's own browsing may not be big, but is the user visits the website first impression as well as directs to the other page the starting point, may also these pages themselves use a lot of Ajax local refresh and the technology, then can the CSS and the JS file directly writes in the page.

3) Remove the duplicate script
In IE, containing duplicate JS script will cause the browser's cache is not used, carefully check your program, remove the duplicate reference script should not be a difficult thing.

4) Avoid the occurrence of redirects
In addition to the human redirection in the header, page redirection often happens inadvertently, and redirected content will not use the browser's cache. For example, when the user accesses www.xxx.com, the server will turn to www.xxx.com/via 301 and add a "/" to the back. If the server is poorly configured, this can also add an additional burden to the server. You can avoid unnecessary redirects by configuring Apache alias or by using the Mod_rewrite module.

There are some, such as the use of CDN distribution mechanism, avoid CSS expressions, such as avoiding the use of etags, and so on, because less common, here is not to repeat.

Finish the above optimization, you can try to test the performance of the page with YSlow scores, generally can reach more than 70 points.

Of course, in addition to the browser front-end and static content optimization, but also for the program script, server, database, load optimization, these deeper optimization methods have higher requirements for technology. The latter part of this paper will focus on the optimization of the backend.

Second, back-end optimization

Last written web2.0 website front-end optimization, always want to write the method of back-end optimization, today finally have time to sort out the ideas.

Front-end optimization can avoid unnecessary waste of server and bandwidth resources, but with the increase of site access, only front-end optimization has not solved all the problems, the back-end software processing the ability of parallel requests, program operation efficiency, hardware performance and system scalability, will be a key bottleneck that affects the performance and stability of your site. Optimizing system and program performance can be started in the following ways:

1) Optimization of the configuration of Apache, MySQL and other software
Although the default settings for software such as Apache and MySQL are sufficient to make your site work, it is possible to achieve higher efficiency and stability by adjusting some of the system parameters of MySQL and Apache. There are a lot of professional articles and forums in this field (e.g. http://www.mysqlperformanceblog.com/), to be mastered also need to conduct in-depth research and practice, here is not the focus of discussion.

2) Application Environment acceleration
This is only the PHP development environment I most commonly used as an example, some tool software can optimize the PHP running environment to achieve speed, the basic principle is to pre-compile and cache PHP code, and do not need to change any code, so it is relatively simple, can be more efficient PHP operation more than 50%. The more popular free PHP accelerator tools are: APC (http://PECL.PHP.NET/PACKAGE-INFO.PHP?PACKAGE=APC), Turck MMCache turck-mmcache.sourceforge.net), PHP accelebrator (www.php-accelerator.co.uk), and a paid Zend performance Suite

3) separate static and dynamic content
Apache is a fully functional but relatively large Web server, its resource consumption is substantially proportional to the number of simultaneous processes, the server memory consumption is relatively large, the efficiency of processing parallel tasks is also general. In some cases, we can use a relatively lightweight web server to host static pictures, stylesheets, and JavaScript files, which can greatly improve the processing speed of static files, but also reduce the memory consumption. The Web server I'm using is nginx from Russia, and other options include LIGHTTPD and thttpd.

4) front-end access load balancing based on reverse proxy
When a front-end server is insufficient for user access, load balancing of Web access through the front end machine is the fastest and most feasible solution. Through the Apache Mod_proxy can be implemented based on reverse proxy load balancing, it is recommended to use Nginx Proxy server, processing faster than Apache.

5) Application of cache technology to improve database performance, file cache and distributed cache
The ability of database access to handle concurrent access is a key bottleneck for many web site applications, and it is important to ensure that the cache of database queries is fully used before building a server cluster using master-slave and multi-farm methods. Some database types (such as MySQL's InnoDB) have their own built-in support for caching, and you can also use program methods to cache frequently used queries through files or memory. For example, through PHP ob_start and file read and write functions can be easily implemented in the form of file caching, and if you have more than one server, you can use the Memcache technology through distributed shared memory to the database query cache, not only high efficiency and scalability is good, Memcache technology has been tested in well-known web applications such as LiveJournal and craigslist.org.

6) Detection of server running status, find the bottleneck that affects performance
System optimization does not once and for all, it is necessary to detect the operational state of the server in time to identify the bottlenecks affecting performance, as well as potential problems, because the performance of the site will always depend on the short board in the cask. Some scripts can be written to detect the operation of Web services, and some open source software also provides good functionality

7) A good extension architecture is the basis for stability and performance
Some tips and tricks can help you get through the present, but to make your site capable of dealing with large-scale visits requires a thorough planning of the system architecture, which many of our predecessors have selflessly structured
The experience of the site to share to us, so that we can go a lot less detours. Two inspirational articles I've read recently:
-A large-scale website performance optimization approach from LiveJournal background development
-six times of MySpace refactoring

Finally, we have to mention the effect of program coding and database structure on performance, a series of bad loop statements, an unreasonable query statement, a poorly designed data table or index table, enough to reduce the speed of the application to run exponentially. It is the foundation of improving programming quality to cultivate the ability of global thinking, to develop good programming habits and to understand the operating mechanism of database.

Optimize Web site performance