Go to: yslow tool Introduction

yslow is a Firefox tool plug-in developed by Yahoo for testing and analyzing website optimization. You must install Firefox first. Yslow summarizes 13 improvements to website speed experience, and uses indicators from F to a to evaluate your website speed and provide data. F indicates the worst, a Represents the best. We can optimize our websites and servers through the data obtained through analysis.
This is just the same evaluation analysis. We need to make improvements on our own. Here we will talk about how to optimize each article:

1. make fewer HTTP requests (reducing the number of HTTP requests)
A webpage must inevitably introduce a large number of external files: javascript, CSS, background images ...... Due to the stateless nature of the HTTP protocol, each user's access will request all files from the server again, and the accumulation of a large number of HTTP requests is the main reason that affects the website speed.
there is only one solution: merge. The ideal scenario is that a webpage contains only one CSS, one JS, and one background image.
JavaScript and CSS files are well understood. How can I merge background images? The main method used here is CSS Sprites. Simply put, all the images are spliced into a large image, and the background image coordinates are specified in different CSS to display different images. For more information, see Dave Shea's image slicing's Kiss of death. The website also provides online CSS Sprites services. You only need to upload small images, you can obtain the spliced big image and corresponding coordinates.
however, it is becoming increasingly difficult to reduce the number of HTTP requests in the face of more and more development frameworks containing more than 10 files. I always think that the so-called framework should be a complete set of development ideas, from server configuration to database is designed for UI experience and Seo. However, many frameworks are isolated from each other, and the background is out of touch with the front-end, it only provides convenience to a certain extent in one of its own fields, and does not take into account the final product integration, even the basic Code intrusion issues have not been properly handled (Here we criticize dojo by name, I hate to print the chapter of dojo on all HTML tags.
If a framework is used on a website, we recommend that you use a lightweight and Low-invasive framework to optimize and maintain your products in the future.

2. Use a CDN (CDN can be skipped, not within the capability range)
The content delivery network (CDN) allows you to intelligently Select Service nodes based on network nodes. This is especially important when deploying large websites. However, this is a hardware-level solution. We can ignore this evaluation when we have no conditions to configure CDN.
Enter about: config in the address bar of Firefox, and create a new string named extensions. firebug. yslow. cdnhostnames. The value is the domain name of the website to be evaluated. Separate multiple settings with commas. For example, my settings are artwc.com and localhost.

3. Add an Expires header (specify expires for the file header and File Cache)
Expires is part of the browser cache mechanism. The browser cache depends on four values in the header: cache-control, expires, last-modified, and etag. The evaluation of this project mainly targets cache-control and expires.
The specific cache principle is not involved in this article. If you are interested, you can refer to the caching tutorial article. To optimize this option, we need to set cache-control and expires for all files on the site. Here, we use the Apache host as an example:

Enable the mod_header module and cancel it in httpd. conf.

• Loadmodule headers_module modules/mod_headers.so

Comments of a row. Set a long expiration time for images, files, and other files that are not updated frequently.

• <Filesmatch "\. (ICO | PDF | FLV | JPG | JPEG | PNG | GIF | JS | CSS | SWF) $">

• Header set expires "Thu, 15 APR 2010 20:00:00 GMT"

• <! -- <Span -->Filesmatch> 

You can set cache-control in more detail. Here, we set the settings for images and files for 7 days, XML, HTML, and PHP for 2 hours.

• header set cache-control "Max-age = 604800, public "

• filesmatch>

• header set cache-control "Max-age = 7200, must-revalidate "

• filesmatch>

Expires can also be implemented by enabling mod_expires

 

4. gzip components/enable gzip Compression
HTTP/1.1 supports receiving gzip-compressed data from the server. In apache2, you can enable mod_deflate.
Also remove comments

• Loadmodule deflate_module modules/mod_deflate.so

Add gzip to all text files

 

• Deflatecompressionlevel 3
• <Filesmatch "\. (PhP | HTM | HTML | JS | CSS) $">
• Setoutputfilter deflate
• <! -- <Span -->Filesmatch>

5. Put CSS at the top (place the CSS file in the header)
The main purpose of this article is to avoid the white screen of the browser caused by the final loading of CSS and improve the user experience.

6. Put JS at the bottom (put the JS file at the bottom)
It is also easy to understand, in order to let the DOM load first.

7. Avoid CSS expressions (avoid CSS expressions)
CSS expressions can easily cause the browser to be suspended and is not in W3C specifications. It is not just avoided, but it is best not to use it at all.

8. Make JS and CSS external (separate JS and CSS files)
Load JS and CSS files into external files separately. One function can be reused, and the other can generate cache. Of course, the best solution of this and the first one should be found by mutual reference.

9. Reduce DNS lookups (Reduce DNS queries)
External files are distributed across multiple servers. a dns query is performed once when each server is connected. This query is deployed on multiple servers.

10. Minify JS (compressing JS files)
Compress JS files, Yahoo! The recommended tools are jsmin and Yui compressor. This site can also perform JS CompressionHttp://artwc.com/tools.html

11. Avoid redirects (avoid redirection)
Each redirection resends the header request. Therefore, in Apache, mod_rewrite is extremely powerful and must be learned.

12. Remove duplicate scripts (remove duplicate scripts)
If a file is repeatedly referenced on the page because it is not properly planned during development, ie will re-send a request to the server even if it is repeatedly referenced.

13. Configure etags (configure etags)
In article 3, cache-control and expires in the browser cache mechanism have been configured. The other two are evaluated: Last-modified and etag.
Simply put, even if the file duration is set, the browser often re-downloads the entire resource because of last-modified and etag when accessing the resource, so the simple method is to disable last-modified and etag, and make the following configuration in Apache:

• fileetag none

• header unset last-modified P>

• filesmatch>