Google

Use Google PageSpeed Insights to analyze your Web page performance

Google PageSpeed Insights can analyze how your web pages are running and provide solutions to improve operation and load time.

From bicycle speed to warp drive

According to one claim I recently came across, "40% of your website visitors will not wait more than 3 seconds," meaning that by the count of three almost half the people who access a site will give up and go elsewhere if it hasn't loaded. Furthermore, the same resource indicates "47% of consumers expect a web page to load in 2 seconds or less." Wow!

Retailers had it easy twenty-five plus years ago, when a kid might invest an hour riding his bike twelve miles to a store to look for a certain jacket (yes, I was that kid). Now if the site selling the jacket doesn't load in three seconds that kid may just browse comfortably at home, find someone else's site and buy from them. Sometimes it's not easy reeling in customers.

While we may all have slightly different definitions of what constitutes a "slow website" (despite having broadband at home for the past ten years I still consider anything north of dial-up speed to be a generally acceptable response time except when I'm trying to buy U2 tickets), website administrators should err on the side of maximum caution.

Nobody will ever call them up to complain the site is too speedy, after all. If you run a website that generates revenue for your organization (and isn't that supposed to be the purpose of a business website?) you'll want to make sure it's as tip-top and ship-shape as possible, particularly in the realm of response time. Google PageSpeed Insights can help.

What are Google PageSpeed Insights?

Google PageSpeed Insights is a free open source web page analysis service which can offer guidelines on how to maximize the performance of your pages. It is part of Google PageSpeed Tools which provides both analysis and optimization services. PageSpeed Insights doesn't require you to host your site with or be a customer of Google. You don't have to fill out any annoying registration forms, set up an account, or provide an email address to use it. You can enter any URL you'd like to check; you do not need to be the owner or administrator. There is no need to provide any credentials for the site being analyzed, nor share any other confidential information.

Google offers a link to let you access the service directly, or you can install a browser extension for Google Chrome and Firefox which is essential for internal sites which aren't public-facing as well as some other specific public sites (discussed below).

How does PageSpeed Insights work?

Google has an excellent FAQ which states PageSpeed:

"analyzes the content of a web page, and then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates. It runs a number of diagnostic tests against a web page, and analyzes the page's performance on a number of 'rules' that are known to speed up page load time. The rules are based on general principles of web page performance, including resource caching, data upload and download size, and client-server round-trip times. They examine factors such as web server configuration, JavaScript and CSS code, image file properties, and so on. For each rule, PageSpeed gives a general score, using a simple red-yellow-green grading scheme, then suggests specific techniques for correctly implementing each rule. It also provides some automatic optimization of external resources included on a page, such as minifying JavaScript code and compressing images."

When you go to the main PageSpeed Tools site you will see the following (Figure A).

Figure A

To get started, click "Analyze your site online" (again, this does not have to be your site; any site can be analyzed - keeping in mind it must be publicly accessible, of course). (Figure B)

Figure B

Enter a URL to analyze and click "Analyze." For instance, I'll analyze www.microsoft.com. (Figure C)

Figure C

Note you can analyze both the "Desktop" and the "Mobile" versions of the page using the corresponding buttons in the upper right, as shown in the screenshot above.

So, what does this all mean?

In the above example, www.microsoft.com was given a score of 73 out of 100. Interestingly, this doesn't actually reflect the loading time of a page; it indicates "how much faster a page could be." A 73 means the performance could increase by about another third of what it currently is. Whether that's realistic given the content is another question.

The results page will show suggestions for site optimization, ranked in the High, Medium, and Low priority scales. There are helpful links to click throughout the process to obtain more information, and you can even expand the "Already done!" section to see what Microsoft has accomplished with their page so far to help it run better. (Figure D)

Figure D

You can hover your mouse over the "Already done!" items, which are truncated, to display the full entry. The second object down reads "Avoid a character set in the meta tag," for instance.

What should I do about these suggestions?

Let's start with the High priority suggestions as shown in the screenshot above. Google recommends "Leverage browser caching" and "Combine images into CSS sprites." If I click on "Leverage browser caching" it will display the following page (Figure E).

Figure E

You don't have to be an expert webmaster to interpret these results (though hopefully you have a good one running your site.). I'm not a webmaster Jedi myself, but this is straightforward advice regarding setting expiration times for various files, and I could take immediate advantage of these tips if desired.

If you need to understand the topic further you can click "Learn more" as shown underneath "Leverage browser caching" and this will take you to a useful page giving more information. (Figure F)

Figure F

The other high priority suggestion for Microsoft's site was to "Combine images into CSS sprites." Clicking that entry brings up the page shown in Figure G.

Figure G

Basically, Google is recommending "combining images into as few files as possible" using what are called CSS sprites. I can click "Learn more" for a detailed explanation, or just research CSS sprites on my own if I'm not familiar with the concept. W3schools.com has a good entry on the topic, but again, knowledge of these concepts is likely already a strong part of any webmaster's bread and butter.

Just because Google says "do this" may not mean you necessarily should do so, of course. Certain web pages are set up in a certain way and perhaps one setting has been applied to prevent other settings from making the experience worse (meaning improving one setting might cause others to deteriorate). Always test any changes in development before applying them to production.

You can review the Google PageSpeed Insights Rules directly to get more familiar with the genre and terminology.

What can the mobile site analysis function do?

According to the Google PageSpeed FAQ:

"PageSpeed Mobile analyzes the mobile version of a page and tailors suggestions based on the characteristics of mobile networks and mobile devices. For instance, since mobile device CPUs are less powerful than desktop CPUs, suggestions that reduce CPU consumption (for instance JavaScript Parse time) are featured more prominently in the PageSpeed Mobile results."

Again, to access this function look for the "Mobile" button in the upper right of the screen after you've analyzed a webpage with PageSpeed Insights. (Figure H)

Figure H

Click the "Mobile" button and you will get a similar but separate set of recommendations. (Figure I)

Figure I

Ouch. The score dipped down to 64. Note that the high priority suggestions are almost the same as for the Desktop analysis; Google has also added an option to "Defer parsing of JavaScript" which may explain the lower score for the mobile review.

Let's not just pick on Microsoft; that wouldn't be very sporty. Here I ran PageSpeed against Facebook (the Desktop version), and I have to say I was impressed with the results - a 98 out of 100. (Figure J)

Figure J

But what's this? We just analyzed the login page for Facebook (thanks to the helpful graphic showing the page in question). Not too much detail or anything dynamic about it so that's why it got a 98. I'll try logging into Facebook and then analyzing the page (https://www.facebook.com/home.php) to see what it says. (Figure K)

Figure K

Hmm, that doesn't seem to have worked. This is a situation that calls for the PageSpeed browser extension, which can analyze pages directly rather than using the typed (or pasted) URL, since that doesn't seem to pick up some sites you might be logged into which are displaying specific content. I recommend using the PageSpeed extension with Chrome because Chrome is the superior browser (sorry, I slip that comment in wherever I can).

How can I install and use the Chrome browser extension?

To use the Chrome browser extension, you'll need to install it from the Chrome web store. (Figure L)

Figure L

Click "Add to Chrome". (Figure M)

Figure M

Click "Add." Once the installation of the extension has completed, you will see a new icon in the upper right of the Chrome window resembling a blue folder. (Figure N)

Figure N

Click this blue folder and the following intro box will appear. (Figure O)

Figure O

Press Ctrl-Shift-I to turn on Developer Tools, which allows you to examine the technical details and operations of web pages. (Figure P)

Figure P

Note the website code displayed at the bottom and the toolbar above that. You will see an icon in the toolbar titled "PageSpeed," again with a blue folder. Access the site you wish to analyze then click the PageSpeed icon. (Figure Q)

Figure Q

You can use the "Analyze" or "Start Analyzing" buttons to begin. The process is then similar to that outlined above when analyzing URLs directly from the PageSpeed website.

Let's check out that Facebook page now once I log into it again. (Figure R)

Figure R

91/100 seems a bit more reasonable. The high priority suggestions involve working with images to properly size them, "combine into as few files as possible" and optimize them using proper "formatting and compressing." This makes sense because most of my Facebook friends are posting pictures of meals, beverages, cats, babies, views from airplane or hotel windows, traffic jams, automobile temperature gauges and, on occasion, themselves.

Press Ctrl-Shift-I to turn developer tools in Chrome off so web pages look normal again.

How can I install and use the Firefox extension?

Installing the PageSpeed Firefox extension is similar, though you'll have to also install the Firebug extension for the correct version of Firefox you're using (which can be any given guess on any given day if you are allowing Firefox to automatically install updates). Install Firebug and then look for the icon in the upper right of your Firefox window. (Figure S)

Figure S

Click this icon to turn on Firebug; a window similar to Developer Tools in Chrome will appear at the bottom of your Firefox window. (Figure T)

Figure T

Note the "Page Speed" button at the right side of the toolbar at the top. Click this and the following window will appear. (Figure U)

Figure U

You can then use the "Analyze Performance" button on a site. Results will appear a bit differently than with Chrome, but the basic methodology of reviewing the details remains the same. For instance, here's what I was presented after analyzing www.microsoft.com (which interestingly got bumped up to 74, probably because the site is being continuously adjusted). (Figure V)

Figure V

Just click the Firebug icon in the upper right of your screen to turn off the Firefox extension. (Figure W)

Figure W

Mobile

Is there a way to review web pages from my mobile device, or analyze mobile pages from the browser extensions in the desktop versions of Chrome and Firefox?

You can review web pages from the Chrome for Android web browser. Google has a blog post which explains how to do this. There does not seem to be a way to presently conduct a mobile site analysis in either of the desktop-based browser extensions; you have to use the PageSpeed Insights URL. This means any internal sites you may have for mobile browsers cannot be analyzed at this time.

Where can I find out more?

If you're interested in setting up an API for PageSpeed Insights which can periodically review your site, there is a developer's guide available for the task.

Google also offers a page dedicated to "Web Performance Best Practices." There is a PageSpeed discussion group available as well.

There's a lot of work involved with site optimization! Doesn't Google offer a service to take care of that for me?

Yes! Remember when I said Google PageSpeed Tools "provides both analysis and optimization services?" The Google PageSpeed Service can automatically optimize your website pages. In my next post, I'll discuss how this works and what it can bring to the table.

Also read:

About

Scott Matteson is a senior systems administrator and freelance technical writer who also performs consulting work for small organizations. He resides in the Greater Boston area with his wife and three children.

3 comments
danilkos
danilkos

Hello. I strongly suggest a tool to install google mod_pagespeed and optimizer for php: http://www.getpagespeed.com/ It easily  installed all required software for speed so that you don't have to manually concatenate and minify asset files

eldergabriel
eldergabriel

Thanks for the heads up and thorough explanation. Does netcraft offer anything similar?

Mark W. Kaelin
Mark W. Kaelin

Have you used PageSpeed Insights to analyze your website? What advice did you get?

Editor's Picks