Google's YSlow -- Page Speed (with plug-in download)

Document directory

• Let's take a look at the interface.
• 20 measurement criteria for "Page Speed"
• More information

Yahoo'sYSlowEveryone should be familiar with it, which is a powerful tool to find out why our webpage is slow. Google also has a similar FireFox plug-in named"Page Speed", Although the name is much inferior to YSlow, the function is completely different from YSlow. Unlike YSlow's 14 measurement standards, what are the "Page Speed" webpage Speed measurement standards? This article will reveal the secrets of "Page Speed.

Let's take a look at the interface.

Like YSlow, "Page Speed" is also a FireFox plug-in based on firebug appending components. Although it sounds a bit difficult, it is easy to understand: If you want to use "Page Speed", you need to install firbug, and firebug is an additional component of FireFox, therefore, you must follow the FireFox browser. At the same time, it means: IE! NO! Sorry!

"Page Speed" has two panels: "Page Speed" Panel and "Page Speed Activity" panel.

"Page Speed" Panel

Page Speed Panel of the additional Page Speed component

As YSlow uses 14 Yahoo standards to measure the overall Speed of a webpage, Page Speed uses 20 standards specified by Google to measure the overall Speed of a webpage. The Page Speed panel is used to display the score of Your webpage on the Google 20 standard. "Page Speed" is measured by 20 criteria by analyzing the loading and rendering Speed of Your webpage, finally, you will be notified about the speed of your webpage, the standard score, the problem, and how to improve it.

"Page Speed Activity" Panel

Page Speed Activity Panel of the additional Page Speed component

The "Page Speed Activity" panel shows the time used to load various elements on your webpage. In this way, you can clearly know who is wasting and taking a lot of time, so as to make more targeted improvements. The time occupied by different stages is represented by different color blocks.

20 measurement criteria for "Page Speed"

If you are familiar with YSlow, you will surely know the 14 Standards YSlow is used to measure the Speed of web pages, and "Page Speed" has 20 standards, so what is the difference between them? What new ideas does Google bring to us?

To add: if you are not familiar with the 14 YSlow standards, you can read the two articles I wrote earlier: how to improve the efficiency of web pages (part 1) -- 14 guidelines for improving webpage efficiency and how to improve webpage efficiency (next) -- Use YSlow to know why your web Slow, this article introduces in detail the use of YSlow and 14 measurement standards of YSlow. These two articles are also included in the book "the best collection of blog gardens-the path to web standards.

To continue: If you want to learn more about the 14 YSlow metrics, you can buy a book named "high-performance website construction Guide". the cover of a book is the kind of dog that often appears in movies such as "The Beast.

High-performance website construction Guide

OK. Let's go back to the question: what are the 20 measurement criteria of "Page Speed?

Put CSS in the document head

Place your CSS style sheet file in the header of the entire page. There is nothing hard to understand. Css is downloaded first to render the webpage effect more quickly. This makes people feel that the webpage is very fast.

For more details about "Put CSS in the document head", see the official documentation.

Use efficient CSS selectors

Use a more efficient CSS selector. For example, do not use the * character as follows:

*{padding:0;margin:0}

The score like this will be very low. The correct method should be to set only the tag elements you want to set, for example:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

}

If you are more interested in this article, you can go to the detailed explanation in the official document of Use efficient CSS selectors.

Leverage proxy caching

Proxy Cache. This term sounds so awesome that I know it only after checking the materials: the so-called proxy cacheing is a public cache for static resources, allow the browser to download these static resources from the nearest proxy server instead of the remote origin server. These proxy servers are generally provided by ISP and access service providers.

This proxy server cache allows users accessing services through the same ISP to share these static resources, saving the bandwidth of the original server and greatly improving the download speed, especially for LAN users.

For details about the "Leverage proxy caching" documentation, see the official documentation.

Minify JavaScript

Minimize JavaScript scripts. There seems to be nothing to say about this. Compress Your JavaScript script.

For more information about "Minify JavaScript", see the official documentation for details.

Optimize images

Optimization of images is actually the most frequently used css script, which is also translated into "css Genie". Although the translation is beautiful, it is actually very simple, that is, multiple images are used, put it in an image file. This effectively reduces the number of http requests.

If you are more interested in "Optimize images", you can read this. Example of a css scheme: [CSS turning to the door] technical example (with source code download).

Minimize cookie size

Minimize your cookie. Cookie is indeed a good thing. It allows you to save something on the user's client, but never add anything to the user's pocket. The reason is very simple: the cookie size is limited, there is a maximum limit, and the cookie Session slows down the page rendering speed. In addition, for security considerations, do not add any copper-clad iron to cookies.

For more information about "Minimize cookie size", see here.

Enable gzip compression

Use gzip compression. We should be familiar with this details. To put it bluntly, the server sends a compressed page to the browser, which greatly reduces the transmission byte and speeds up the transmission.

This figure illustrates how gzip technology works.

For more information about "Enable gzip compression", see the official documentation.

Combine external JavaScript

Merge external JavaScript files. The principle is simple, but it is still to read less. js files, thus effectively reducing the number of http requests.

Merging external JavaScript files can effectively reduce the number of http requests

For more information about Combine external JavaScript, see this document.

Minimize DNS lookups

Minimize DNS queries. For details, see the following: details of the Minimize DNS lookups rule.

Optimize the order of styles and scripts

Optimize the sequence of style sheets and scripts. If you have read Zhao's series "break away from the browser" (this series has also been included in the "blog garden essence set-web standard path" book ). The Internet Explorer can only download two files under the same domain name. Therefore, it is very important to first download the style sheets and scripts. Therefore, if possible, pay attention to the order of style sheets and scripts. We recommend that you place css on a js file so that the css file is loaded first. In this way, you can render the page first to speed up the viewer's perception.

Internet Explorer can download only two files under the same domain name at the same time

For more information about "Optimize the order of styles and scripts", see this.

Serve resources from a consistent URL

Use the same url address for the same resource. It is easy to understand. If it is the same image, we should not look in the East or the West, and then use different URLs for reference. The reason for doing so is also very simple, because -- cache!

For more information about "Serve resources from a consistent URL", see here

Avoid CSS expressions

Avoid CSS expressions. This article also describes how to improve the efficiency of web pages (Part I)-14 guidelines for improving the efficiency of web pages. Now we need to add that IE8 no longer supports css expressions.

For more information about "Avoid CSS expressions", see here.

Parallelize downloads internal SS hostnames

Download web resources from different hosts at the same time. This principle has been described in the "Optimize the order of styles and scripts" principle. The reason still lies in Lao Zhao's "getting rid of the browser": IE can only download two files under the same domain name at the same time.

For more information about "Parallelize downloads using SS hostnames", see this.

Combine external CSS

Merge external css files. This is the same as the "Combine external JavaScript" principle. Or to reduce the number of http requests.

For more details about "Combine external CSS", see this.

Specify image dimensions

Specify the image height and width. Long ago. One person asked me, "clearly specifying the width and height of the image can speed up page rendering ?" At that time, my answer was: "It should be okay !". It seems that I was mistaken. Clearly pointing out the image height and width can effectively speed up the layout of the browser around the rendering image and the rendering speed.

For more information about "Specify image dimensions", see here.

Minimize redirects

Avoid redirection whenever possible. The principle is very simple. When you arrive at your colleague Mr. B's house from location A, his neighbor tells you that Mr. B has moved to Location C. So, you ran to Location C again, And someone at Location C told you that Mr. B has moved to Location D again. So you ran to Location D to find the B colleague. B's colleague tells you that if you come to Location D directly, you don't need to be so troublesome and the speed will be faster. Webpage redirection and redirection are the same.

For more information about "Minimize redirects", see here.

Defer loading of JavaScript

Deferred loading of JavaScript. It sounds like a high-tech thing. In fact, this is really very effective. Not only can the script be postponed, but also some large images and flash files can be postponed. In fact, the implementation is not very difficult, that is, do not load some relatively large things first, when the page is loaded, then load those things.

For more information about "Defer loading of JavaScript", see here.

More information

For more information about "Page Speed. Click here to go to the Page Speed download Page. The latest FireFox3.5.2 version is supported.

More related reading lists for "Page Speed"

• "Page Speed" official homepage
• "Page Speed" Technical Documentation Library
• How to improve the efficiency of web pages (Part I)-14 guidelines for improving the efficiency of web pages
• How to improve the efficiency of web pages (Part 2) -- Use YSlow to know why your web Slow
• Lao Zhao's "break away from the limitations of browsers (3)-two connections are not" Parallel"