How to Setup Google’s PageSpeed Service On Your Website

To push for a faster web, Google has launched several guidelines and tools that allow you to optimize your website to load faster. If you have followed all the steps, like setting up CDN, minifying CSS and javascripts etc, and find that your website still doesn’t load as fast as you wanted to, then it is best for you to setup Google’s PageSpeed Service and let Google optimize and serve your website for you.

The concept behind the PageSpeed service is simple. After you have set it up, Google will grab a copy of your website, optimize it and cache it in their server. When a request is made on your website, the optimized and cached version from Google server are served in place of the copy from your own server.

There are a few things that you must fulfil before you can make use of the PageSpeed Service.

1. Your domain name must contain the “www” prefix (for example, http://www.example.com). Bare domain such as “http://example.com” (without the www) are not supported at the moment.

2. You need to be able to change your domain’s CNAME and Host record. If you have registered your domain name with your web host, you will need to contact your web host and get them to change the CNAME record for you.

1. Go to this page and click the “Sign up now” button.

pagespeed-signup

Note: PageSpeed Service is currently invite-only. It will take some time for Google to approve your application and send you an invite. I received my invitation in less than an hour after submitting the signup form, but your mileage will vary.

2. Once you have received your invitation, go to Google API page and click the “PageSpeed Service” link in the sidebar.

pagespeed-link-at-sidebar

3. Under the “Add new domain” section, enter the domain of your website. Make sure you exclude the “http://” and include the “www” for your domain name.

pagespeed-enter-domain

Note: If you have not previously verified your website in Google Webmaster, it will prompt you to verify your website before you can proceed.

When you have completed this step, you are done configuring the Google PageSpeed Service for your website. The next step is to change your domain’s CNAME record so Google can serve the cached page for you.

4. Login to your domain registrar and go to the host record section for your domain. For NameCheap, you can access it from the “All Hosts Record” link under the “Host Management” section. For GoDaddy, it is under the DNS Manager section. The instructions below is for NameCheap.

You should see a “www” in your Hosts Record. In most cases, it should be pointed to the same IP address as the “@” record.

pagespeed-hosts-record

Here are the things that you need to change:

  • Change the IP address to “pagespeed.googlehosted.com” (without the quote). In some cases, you might have to add a “.” (dot) at the end (“pagespeed.googlehosted.com.“).
  • Next, change the Record Type from “A” to “CNAME”
  • Save the changes

pagespeed-change-cname-record

That’s it. Now you just need to wait for the DNS changes to propagate throughout the web (it could be as long as 24 hours). For those who are not using NameCheap, you can check out the instructions here for your Domain Registrar.

5. Last, but not least, you might want to redirect all your visitor from the “non-www” domain (http://example.com) to the “www” domain (http://www.example.com) so the cached version from PageSpeed Service will be served at all times. For Apache server that supports .htaccess file, you can just add this entry at the very top of your .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

Remember to change the “example.com” to your own domain name.

After you have properly setup PageSpeed Service on your site, you can now run a page speed test and see the increase in performance. At the Google API Console, simply click the “Run Speed Test” link and it will bring you to the page where you can run the speed test.

Now you can sit back and enjoy the speed boost.

Update: As requested, here is the speed test result for MakeTechEasier after using PageSpeed Service:

pagespeed-result

As can be seen, there is a 24.5% improvement of the load time and 42.1% improvement of the speed index. I could make it load even faster by activating the lazy load feature, but it is causing issue to the images, so I have to deactivate it.