This article provides guidance on how to improve site performance specifically for Drupal 7, however some of these techniques can be reapplied to non Drupal based sites.
When a user visits a website there is a simple and obvious fact that speed matters. There are numerous studies (Here is a lovely inforgraphic to get you started if you fancy doing some more research https://edubirdie.com/blog/loading-time) which reinforce the point, however we are going to focus on how to attain optimization and performance which result in faster load times and satisfied users.
A great way to see the results in action is to make use of the Network tab in Chrome developer tools (or similar) or, by using a web app like http://www.webpagetest.org/
1. Standard Drupal configuration
By far the easiest way to gain a dramatic increase in speed is to leverage Drupal’s out of the box performance options.
By navigating to Configuration >> Performance you will be presented with a simple set of options that will handle a lot of the hard work for you. Enable ‘Cache pages for anonymous users’ and ‘Cache blocks’ in the ‘Caching’ area, and ‘Aggregate and compress CSS files’ and ‘Aggregate and compress CSS files’ in the ‘Bandwidth Optimization’ area.
Enabling the caching will store the result of database queries in a single table in the database. This consolidation will reduce the total amount of queries, thus speeding up the site.
Enabling the Bandwidth Optimization will combine and compress the CSS and JavaScript files on your site. This leads to a smaller page size; thus a quicker load.
One thing to note is that these settings will cause issues for you if you are using them while you are developing the site; the process of caching then will not happen on every page request so if you are making edits and refreshing the page constantly you will not see any changes. If you want to make a small change after you have set this all up you can click the clear cache button on the performance page.
2. Remove any redundancy
Another great and easy tip is to make sure that only modules and files that are required are actually being used. For example: Disable all modules that aren’t being used and remove JavaScript/CSS files and plugins that are not needed (This may occur if you use a ‘Boilerplate’ style’ template to get started).
3. Boost
Another great way to improve site performance is the Boost module (Note: this will only be advantageous for users who don’t log into the site). Boost will cache pages as compressed html files when a user visits a page and then serve the cached version to subsequent visits to the page. The downside to the module is that it will not work straight out of the box; it will require a small amount of additional setup in the .htaccess file. The Module works well with the standard Bandwidth Optimization mentioned in the previous section, however will not play nice with the Caching, Make sure this is disabled!
The module page for Boost has a useful guide for getting everything set up.
I have personally had fantastic results from using Boost; definitely worth the initial time investment for any site that only requires anonymous traffic.
4. CDN
Leveraging a CDN (Content Delivery Network) will speed up the time it takes to serve static content (Images, Video, Audio, CSS, JS etc) to your users. The CDN acts as an external cache for these files and will store them on multiple high performance servers around the world to make sure each request for the file is optimized as much possible.
Sounds complicated but it’s actually painless to set up using the CDN module.
Here at Indulge we opt to use Amazon’s Web Services’ CDN solutions, Cloudfront. To get everything set up you can make use of this great CDN/Cloudfront guide.
5. Optimizing Images
Another easy and obvious tip is to make sure that images are optimized. There are a number of ways to make sure that the images are optimal.
Image size is important
Try and attain images that are the perfect size for their use, any larger is a waste of precious load time!
Often images on sites can be compressed losslessly resulting in a much smaller file size.
Lossless compression means that the image will be compressed without losing any detail in the image through the use of complex algorithms that will reconstruct the data perfectly in a way that returns the smallest file size.
I tend to use a couple of command line tools to compress images locally before they are deployed such as optipng and jpegtran. Excellent for batch processing a large amount of images, however, if you only need to quickly compress a single image or aren’t comfortable using the command line I would suggest using a web app such as Smush.it.
Use Image Optimize
You can make use of the Image Optimize module that will make sure that images created by image styles are optimized by the Smush.it tool mentioned previously in the article.
This is great for clients who will be uploading their own content!
6. Enable GZIP compression in the .htaccess file
This tip is very simple to implement and will reduce the file size of a large portion of files that are served to the user. The files are then uncompressed on the client side thus reducing the size of the server response.
To enable this in Drupal find the following line in the .htaccess file - # Rules to correctly serve gzip compressed CSS and JS files. and uncomment the code block that follows.
