Google Pagespeed Module and Drupal

Google is trying to make the web faster! Every site owner should be aware off the Google Pagespeed tool (and YSlow) to make sure that the website they are running is as fast as it can be. The optimization tools they offer are great for anyone working with Drupal. But Google have taken it one step further by introducing Google Pagespeed module for you webserver that does a lot of optimization on the fly. The question is - does it make sense for Drupal?

First off - if you haven't downloaded Google Pagespeed or YSlow, please do it now. Also run the WebPageTest to see how much you actually can speed up. It will help you find many small optimization tips that you might or not might be able to implement, that all put together will speed up your website with valuable microseconds. You might not think that microseconds matter, but it does, both from conversion rate and SEO point-of-view. If you are running a Drupal Commerce site, the page speed is most likely in direct correlation to your sales.

To help you do many of those optimizations Google also released a Pagespeed module and a, for the time being - free, Pagespeed service that both will help you optimize without having to put to much effort into it. I will take a closer look at the Google Pagespeed module.

Installation of the Pagespeed module

For all you Apache users out there. Please use Nginx :) But if not - the module is available to install using most famous package managers, so it should be pretty straightforward if you have done a little bit of apt-get or yum before. 

If you are using Nginx though you will have to build it yourself. For some (younger) developers/freelancers this might be a nightmare or even gibberish since you always been used to use package managers. But you should really start learning how to build Nginx yourself, and understand what it is you are doing. The reasons for learning this are that you can create an optimized version without modules that you don't need and also with Nginx modules and 3rd party developer modules that are awesome to have. Pagespeed is one of the later.

What does Pagespeed module do?

So what Pagespeed module does is basically that it will interject the page that you are serving and modify it to optimize it for speed. And it does it really fast. Many of the optimizations though can already be done by Drupal and what I'm trying to figure out with this article is if it's worth installing the module or if we are better of with Drupals modules. I will compare the functionality head to head and see where it makes sense to use the Pagespeed module and where it makes sense just to use a contributed module. As I'm writing this though the Pagespeed module is still in beta mode as well as some of the modules, so please take this article for what it is - a snapshot of the current state. It might not be that up-to-date next month.

Note also that it does some other optimization outside of the filters, but I will just focus on the filters in this post.

Comparison between Pagespeed module filters vs. Drupal (contributed) modules?

---

Add head

This you control via your theme, so it has no usage for you whatsoever as long as you know theming.

Result: Drupal does this already

---

Add instrumentation

This lets you add controls how fast your page renders. Drupal does not have any tool that I know of that does this, but there exists javascripts that can do this. 

Result: Drupal can't do this (yet)

---

Async Google Analytics

Just use the Google Analytics module and you will have better control and it does handle Asynchronous load.

Result: Drupal does this better

---

Canonicalize Javascript Libraries

This makes sure to use external hosted open source javascript libraries when you are hosting them locally. This might not always make sense, but what it will give you is the possibility that someone has a browser cached version of for instance jQuery or Bootstrap, meaning faster load time. It also fetches the correct protocol depending on how your site is loaded (http/https), which can save some time when you load without SSL. JavaScript Libraries module gives you the possibillity somewhat to do this, but it's not as automatic. 

Result: Drupal does this worse

---

Collapse Whitespace

This removes whitespace that is not needed. Minify module does this better (better as in less bytes).

Result: Drupal does this better

---

Combine CSS

Drupal does this natively. If you use the module Advanced CSS/JS Aggregation it does it better since it also removes whitespace.

Result: Drupal does this better

---

Combine Javascripts

Drupal does this natively. If you use the module Advanced CSS/JS Aggregation it does it better since it also removes whitespace and minifies.

Result: Drupal does this better

---

Combine Heads

I might be oblivious here, but when do you make two <head> tags? Anyway this is controlled with your normal theme layer.

Result: Drupal does this already

---

Convert Meta Tags

This takes old style meta tags and make http-equiv attitributes of them. This can be controlled in the theme layers.

Result: Drupal does this already.

---

Deduplicate Inlined Images

If you don't know what inlined images are I wrote about it. This will take images that are shown multiple times on a page an load it as javascript inline images instead to make the page faster. The problem - when I tried this it didn't work. That's maybe the beta part of it or me not understanding how to implement this.

Result: Drupal does this worse - if the actual Pagespeed filter worked :)

---

Defer Javascript

This takes a javascript and makes it load after the full page is loaded. The can be done in Drupal with some javascript magic and anyway requires careful planing on what you can load after the page is loaded. AFAIK there does not exist a Drupal module that helps you with this.

Result: Drupal does this already

---

Elide Attributes

This will remove unnecessary attributes in tags. Click on the link to understand more. This can be done in Drupal, but can be hard to control everywhere so it totally makes sense to use this filter.

Result: Drupal does this already

---

Extend Cache

This automatically rewrites expiry headers on static files that does not have it. This can be controlled with the webserver. But this Pagespeed filter can even work in tango with webserver so you have automatically on some resources, and manully on the ones that you choose. The only thing Drupal controlls is the header for the PHP content, so it does not concern Drupal so much.

Result: Your webserver can do this already, but it's a nice feature.

---

Extend Cache PDF

Read above, but for PDF

Result: Your webserver can do this already, but it's a nice feature if you have many PDF's

---

Flatten CSS imports

This minifies and links together CSS files up to a certain size and puts it inline. This does not really make sense to do since it will take people longer time to see the actual content of your web page. And even though most people claims that this is unlikely to affect SEO, are you willing to take the chance? Anyway, AFAIK this can't be done automagically in Drupal.

Result: Drupal does this worse

---

Include JavaScript Source Maps

Source Maps is basically a way to keep all the client-side code readable in the same time as you make it performant. This can be done manully in Drupal of course, but is a help of a job. If you use LESS, they are working to support it in a module.

Result: Drupal does this worse

---

Inline @import to link

This take @import and make it to links. This is to be used together with other filters. Can be done already in Drupal

Result: Drupal does this already

---

Inline CSS

Similiar to Flatten CSS imports. Does not make sense, but Drupal can't do it.

Result: Drupal does this worse

---

Inline Google Fonts CSS

Takes the css for Google fonts and inlines them. Something that is imposible to do otherwise. This saves you one call per font.

Result: Drupal does this worse

---

Inline JavaScript

Similiar to Flatten CSS imports, but for JavaScript. Drupal can't do this.

Result: Drupal does this worse

---

Inline Preview Images

This takes all images on your page that are inline and large and makes a smaller copy of them that is loaded before the larger copy. Smart as hell. Image Lazyloader can do this.

Result: Drupal does this already

---

Insert Google Analytics

As written earlier, use Google Analytics module instead.

Result: Drupal does this better

---

Lazyload Images

This takes all images that is not in the viewport and wait to load them until they are seen. Image Lazyloader module does this already.

Result: Drupal does this already

---

Local Storage Cache

This takes inline resources and save it to the clients storage using HTML5. This requires Inline CSS and Inline Javascript to be enabled. This filter is experimental, so be careful with it. This can be done in the theme layer in Drupal. Note that this makes the pages slower for browsers not using HTML5.

Result: Drupal does this already

---

Minify JavaScript

Very basic - it minifies the JavaScript. I compared with Advanced CSS/JS Aggregation and it does it better (fewer bytes). 

Result: Drupal does this better

---

Move CSS Above Scripts

Does what it says - moves the CSS above the JavaScripts so they are not blocking rendering. Can be done in the theme layer of Drupal.

Result: Drupal does this already

---

Move CSS to Head

Also does exactly what is says - moves all the CSS inside the <HEAD>. Can be done in the theme layer in Drupal.

Result: Drupal does this already

---

Optimize Images

This takes images and checks if they can be optimized and then does it. Fairly simple. ImageCache Actions gives you flexibility to edit images, but it will not always be optimized for size. ImageAPI Optimize does this though.

Result: Drupal does this already

---

Outline CSS

This does the opposite of inline CSS. This can of course be controlled with hook_css_alter but it's not the simplest of solutions.

Result: Drupal does this already

---

Outline JavaScript

As the above but for JavaScript - Drupal does this via hook_js_alter, but it's hard to do.

Result: Drupal does this already

---

Pedantic

Does your page more HTML4 compliant if you only focussed on HTML5. You can do this in the theme layer.

Result: Drupal does this already

---

Pre-Resolve DNS

Also pretty self-explanatory. Adds headers to pre-resolve the domain names before fetching images etc. Can speed up on hard-to-fetch DNS servers. You can do this in the theme layer.

Result: Drupal does this already

---

Prioritze Critical CSS

This checks through the webpage and loads all CSS needed for the intial rendering first and then the CSS that is not needed on that specific page. If you are anal retentive you can do this in the theme layer. Don't :)

Result: In theory Drupal does this already

---

Remove Comments

This removes all inline comments from the code. This can be done in the theme layer. I don't actually know of a module that does this, but it should exist :)

Result: Drupal does this already

---

Remove quotes

This removes non-essantial quotes from the html to save a few bytes. This can be done in the theme layer.

Result: Drupal does this already

---

Rewrite CSS

Takes the CSS and minifies it and removes whitespaces. Advanced CSS/JS Aggregation can do this even better.

Result: Drupal does this better

---

Rewrite Domain

So this tells which domains to do rewrites for and which not. It's only a helper function.

Result: Just helper function

---

Rewrite Style Attributes

This makes sure to rewrite things that are inside inline style="" arguments as well. Only a helper function

Result: Just helper function

---

Run Experiments

This enables you to run A/B testing between different filter settings. A/B testing can be done via various modules/JavaScript in Drupal, but of course not on the Pagespeed filters. But I'll say that this is only a helper function as well.

Result: Just helper function

---

Sprite Images

Awesome filter. Takes all gifs/pngs in CSS and combine them automatically to a spritemap. Spritesheets does this for Drupal.

Result: Drupal does this already

---

Trim URLs

This takes absolut URL's and make them relative where it's possible. This is done pretty well automatically by the l function in Drupal so you probably don't need this.

Result: Drupal does this already

Conclussions

So basically this rocks! If you take all the places where it says that "Drupal does this already", most of them basically mean - Drupal does this, but it's a pain in the ass to implement. So unless you really want 100% control of every line of PHP code on your site (Why did you choose Drupal then?), it totally makes sense to run the Pagespeed module on your server.

Also note that since the Google Pagespeed module is written in a compiled language it will of course do anything that Drupal/PHP can do, but much faster.

There are some exemptions though - mainly being:

• Use Google Analytics module instead of the Analytics filter. It gives much more control.
• Between Advanced CSS/JS Aggregation module and the filters it's a tight race depending on your needs. The Drupal module is easier to implement though.

Anyway the Pagespeed module is still in beta so be a little bit careful with it, but if you dare - use it with Drupal!

The top picture was shot by Eric Fisher and is shown under CC 2.0 License.