A frequent task for most websites should be a review of their speed - generally focussed on initial loading time.
A good idea is to regularly put aside one hour to implement tweaks that will make the biggest possible difference to the loading speed. This helps you keep on top of things and steers you away from the temptation to pour hours into a job which has diminishing returns.
Much of the work you need to do is with the help of the website's CMS. Therefore I've split the topic into two posts: one for Drupal 7 and one for WordPress. First up, it's Drupal 7.
Benchmarking
Before you start you need to now how things stand now. Only then can you be sure you have made a difference. To get a good measure of loading time, head to https://www.webpagetest.org/runtest.php.
To get a good idea of what you should address to help improve loading time, go to https://developers.google.com/speed/pagespeed/. Google Page Speed will highlight the biggest issues facing your website. Not all should be looked into as a matter of routine, as often there is a reason for the way things have been done, however much Google thinks this is impacting performance. But nevertheless it's a handy crib sheet.
The process: Drupal 7
In order of priority you really should:
Boost
Add Boost to your site. This is a performance optimisation module that makes use of caching to often make a big difference to the speed of your website. Installation is a little more involved than usual: once you have added and activated the module, head to /admin/config/system/boost/htaccess/generator and follow the instructions to add some code to you site's .htaccess file.
Next, you need to configure Boost correctly. First, disable standard Drupal caching at /config/development/performance. Then head to /admin/config/system/boost and setup Boost. Nip over to Boost's module page for the best information on setting it up to do what you want.
Finally, keep in mind that Boost only works for anonymous users.
Compress CSS and JavaScript
Head to /admin/config/development/performance and enable the aggregation of CSS and JS files. This will compress and aggregate the files to optimise their bandwidth - including minifying CSS files. Remember to not enable caching, also on this page, if you're using Boost.
Optimise your images
An image should be no bigger than the maximum size it will be viewed. To make sure this is the case on your website, first make sure you're making use of Image Styles. This will ensure that images are rendered according to the size specified in the Image Style, as well as being optimised (removing unnecessary meta etc). Here's some documentation on Image Styles in case this is something you're not familiar with.
There will almost certainly be some images that you aren't rendering with Image Styles - for example social icons and logos. These still need to be no bigger than necessary and optimised, but this time you'll have to do it manually. Luckily, Google Page Speed will point out those images which are too big. All you need to do is reduce their size and optimise. You can optimise them using either command line tools such as optipng and jpegtran, or web based tools such as tinypng and tinyjpg.
Clear out redundant modules and code
Disable any modules that are not being used. The same goes for plugins, JavaScript and CSS files. This is all stuff you're site does not need to be trying to load.
Minify JS
Earlier you may have compressed and optimised your CSS and JS files via the standard Drupal settings. This will minify your CSS, but not your JS. To finish the job, install Minify. Then go back to /config/development/performance and within the in Bandwidth Optimisation section, select Minify HTML and Use Minified JavaScript files.
If you head to the Minify JavaScript files tab at the top of the settings page you can regenerate your minified JS files. A great thing about this module is it is designed to work with our favourite performance pal, Boost!
Use a CDN
If you're downloading a lot of big images on a page, a CDN may help speed things up. This will put parts of your website on external servers distributed around the world and works as a cache to serve them up to the user as fast as possible.
At Indulge we use Cloudfront from Amazon Web Service for CDNs. You can follow this guide to get yourself setup.
Good work. But be careful of...
Google Page Speed may tell you to do things like change the order in which your JS and CSS files are loaded, to reduce the size of above the fold content. The trouble is, the order in which things load is often deliberate and critical to the site working correctly. It's best to leave this in a standard tune up as the returns are much lower than the potential harm it may cause. Godspeed!
