Drupal mobile site optimisation & Google Mobilegeddon

On 21st April 2015 Google made some updates to their search algorithm which means that mobile friendly sites will rank above sites that aren't mobile friendly. This change has been aptly dubbed 'Google Mobilegeddon'. There are some links in the footer of the post if you want to find out more about these changes.

What I'm going to look at are steps you can take to make sure your Drupal site is mobile friendly.

Test your Drupal site to see how mobile-friendly it is

To simply test if your site is seen as mobile friendly you can use Googles Mobile-Friendly Test. Provided your site is responsive it should get the 'ok':

For more detailed information run your site through Google PageSpeed Insights:

This will score your site on Speed and User Experience factors, and lists a breakdown of suggested improvements. Some of the most common things that get flagged are discussed below.

Improving render blocking

One of the most common things I see Drupal sites getting flagged for by Google PageSpeed Insights is 'render-blocking JavaScript and CSS in above-the-fold content'. This refers to the fact that there's a limited amount of external JS/CSS files that can be loaded at the same time, before it starts blocking the rest of your page from loading.
Below are a couple of things you can try in order to prevent render blocking.

  1. Obviously ensure your sites Performance settings for bandwidth optimisation are enabled so that JS & CSS are aggregated and optimised (/admin/config/development/performance)
  2. Load your external JS/CSS with something like LabJS
    See this post for more detail on improving render blocking and parallel downloading of scripts
  3. Make sure any additional JS/CSS files you've added are included in your themes .info file. This will ensure that the files get aggregated when the performance settings are enabled. 
    See this post for some information on how to go about including JS and CSS files in the theme .info
  4. Move your external JS scripts to the bottom of the page. Be warned that this is a fairly drastic option, and comprehensive testing should be done to check it doesn't break anything.
    See this post for more information about moving JS scripts from head to code footer

Optimise images for mobile

It's always good practice to optimise your images as much as possible, without compromising quality, but a lot of responsive sites use the same images for their desktop & mobile layouts. Ideally you should load smaller renditions of your images for mobile in order to cut down on their file sizes. A good way of doing this is using the Picture and Breakpoint modules - both of which are now included in Drupal 8 core.

See these online tutorials on setting up different image renditions according to breakpoints in Drupal 7: 

Something else to consider is using SVG images which are vector based, and can be scaled to any size without increasing the actual file size. These are good for 'line' images with flat colours like logos.
See this post on creating and using SVG images.

Browser caching

A default install of Drupal does implement cache headers - these tell a users browser how long they should cache your sites files before requesting fresh copies. There are some cache settings available on the performance page, but if you want greater control you should look at something like the Cache Expiration module. This integrates with other caching layers like CDN's, Boost, Varnish, Memcache - which you should also check out!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.