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:
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)
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).
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)
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:
Figure Jhttps://www.facebook.com/home.php) to see what it says. (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 ODeveloper Tools, which allows you to examine the technical details and operations of web pages. (Figure P)
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)
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 Uwww.microsoft.com (which interestingly got bumped up to 74, probably because the site is being continuously adjusted). (Figure V)
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.
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.