RSS Feed
Google PageSpeed enabled on select server
Posted by Bill Williams on 26 March 2017 01:43 PM

We at are pleased to announce the immediate availability of Google PageSpeed or mod_pagespeed for your website with our Linux hosting and Semi-dedicated packages. 

  1. Google PageSpeed dramatically increases the Speed of your website by optimising content delivery without touching your source code. 

  2. How can I enable Pagespeed on my website? -  Please add the following line in the .htaccess under your public_html

       ModPagespeed On

  3. How do I know if Pagespeed is working on my website? - View the source code of your webpage and search for word 'pagespeed'

  4. More reading on Google Pagespeed options is available at
    A few important default content optimisation done by Google Pagespeed on your website are given below

Combine/minify CSS & JavaScript

By combining all your JavaScript and/or CSS into a smaller number of files, it reduces the number of requests your browser needs to send to the server. Without going into latency, blocking, etc., think of it like this: If you ask a coworker to give you a status update on a project, you’d rather review a one page report instead of 17 different Post-it® notes, right? This is certainly the  case if they’re bringing you one Post-it note at a time. While developers who are speed-conscious will try and do this work before moving code to production, PSM can handle this for you.

Minifying the CSS/JavaScript can be shown simply by a demonstration. Take this small example JavaScript snippet:

  var productSlider = jQuery('#slider');
  if (productSlider) {

This code could be used to initialize a carousel on a page, if available. If I were to minify it, it would look like this:

jQuery(function(){var e=jQuery("#slider");if(e){e.carousel()}})

It compresses the file size as much as possible, while still leaving it executable by your browser. Obviously, you will have a lot more JavaScript on your site that needs to be executed, but the benefits of minifying are real. It will result in quicker download times for your users and reduce the bandwidth consumption of your website. Combine this technique with the one above, and not only will the browser download the necessary JavaScript for your website faster, but it will do so with fewer requests. 

Defer JavaScript

Deferring your JavaScript is an attempt to delay its execution until the page loads, which will speed up the rendering of your site. This filter does come with a warning, though (see limitations here). You should test this filter by making sure your site still operates as expected.

Flatten CSS @imports

Including an external CSS “library” from another file/project into a website can help speed up the development cycle. An example of this would be when you desire to include Bootstrap’s CSS into your CSS so it’s condensed into one file. And while it’s easy to just include the rule @import <yourCSSFileName>, PS Insights will complain about this and deduct from your score. Once the first CSS file is downloaded, it finds your @import rule and realizes it has to download another file. If you’ve done this a lot, it will have to download a lot of extra files without you realizing this. PSM will fetch the files you have imported, combine them with the other CSS files, and minify them for you.

Inline JavaScript

This filter can be useful, especially if you are on a Wordpress site. With the inline JavaScript filter turned on, PSM will reduce the number of requests the browser makes to the server, but in a unique way. Let’s say you install a Wordpress plugin to your site that's already been optimized. Chances are, this plugin will add its own styling or JavaScript. So now there are extra files that a user’s browser has to download to make your site work correctly. Often times, the PSM will actually inline JavaScript directly into the page for you instead of requiring the additional download.

For many years, SEOs have often recommended that all CSS and JavaScript should be included in an external file and kept separate from your content. But I am not exactly sure this is still a must. Here are a couple of reasons why:

  • Web scraping bots have grown up a lot over the years. They’re parsing and executing JavaScript; they’re headless browsers.

  • Speed is extremely important in the mobile world we live in. Often times, making something load a little bit faster is necessary if you can do it. And if you can keep to your current coding/development standards, and let the PSM speed it up for you, I say go for it.

  • Google built this module. If they can crawl and parse itand I am willing to bet with most SEO-built sites they can—then go for the speed.

Optimize images

There is a big issue that can really drag down a site: unoptimized images. There are multiple options that can be used to fix this issue. I will touch on them a little bit now, then discuss later in this post how to add these different options into your server configuration:

  • Inline images: This creates a low quality “preview” image that is loaded much quicker than your original asset. Once the page has loaded, it replaces the low quality image with your original high quality version as they become available.

  • Lazyload images: By lazy loading images, PSM will defer loading of images that are not visible to the client. This prioritizes all above the fold resources to be loaded first.

  • Sprite images: These are attempts to merge GIFs or PNGs used for backgrounds in CSS into a single image file. Your CSS rules are also rewritten to point to this new image while adding the positioning CSS rules to reference the image correctly. An example of this would be if you had your Facebook, Twitter, Linkedin, Pinterest, Google+ social icons all as separate images on a page. PSM would attempt to combine them all into one image and update your CSS to reference it correctly.

  • Auto convert images: PSM will attempt to convert images to a more optimized format for you, if possible. For instance, if you have a PNG but it has no transparency, PSM will attempt to convert it to JPEG for you and update your HTML to reference this new image. It will even convert some images to the new WebP format. The best part about this is the PSM will convert multiple versions of the image, and depending on the browser making the request, it will serve a supported image. While Chrome and Opera support WebP, older versions of Internet Explorer won’t. So some browsers will get the fast WebP image, while others may get a JPEG or PNG, all without you changing your site. The fastest (and supported) image will always be served on a per-browser basis. Pretty cool, huh?

Extend cache

In case you’ve never understood what the cache is, it’s basically temporary storage (copies) of your web pages created so that your pages can be served quicker while reducing the work the actual server has to do. Your webpage will most likely make a lot of database queries to generate the final HTML. A caching system can take this expected output and save a local copy of it. The next user who comes along that requests the same page will receive this already generated HTML page without querying the database. This filter/feature attempts to extend the caching of your pages.

While Apache and nginx have great caching features, one thing PSM will do is add its own hash variable to the asset. Because of this hash, if you change an image on your site, the HTML will be automatically be rewritten to use the new hash. This will essentially update your cache on the fly without the cache needing to be cleared manually.

Your CMS manager may replace an image on the site, but when checking the actual page, still sees the old image. This often happens because whatever caching mechanism is being used hasn’t timed out yet. It may be configured to wait a week, month, or even a year to see if the image has changed. That doesn’t happen when using the PageSpeed module.

There are a lot of additional options/filters you can use. This is just small subset of them. Check out the PSM Filters documentation to find out more. But not yet! I haven’t even told you how to get up and running.

Comments (0)
Post a new comment
Full Name:
CAPTCHA Verification 
Please enter the text you see in the image into the textbox below (we use this to prevent automated submissions).