9 Tips to improve the performance of your ExpressionEngine website
When talking about improving the performance of ExpressionEngine, I'm referring to optimising the speed in which the website is displayed to the user.
Performance is important for several reasons; improving user-experience, better search engine rankings (search engines take site speed into account when determining rankings) and mobile users with slower internet speeds (and higher bandwidth charges).
Whilst the topic can’t be covered fully in one blog post, I’ve highlighted key areas, not all of which are specific to ExpressionEngine.
How to test the performance of my ExpressionEngine website?
Google PageSpeed Insights provides a top level overview of the performance of your ExpressionEngine website. The results page offers helpful suggestions how to fix the problems highlighted.
1. Server caching
When a page is rendered using ExpressionEngine a number of processes happen in the background. Each of these items only take microseconds to happen, however with process intensive pages this can cause a delay.
Often, these processes only need to happen once in a while, which is where server caching excels. A server side cache saves the output from these processes, so that they do not need to be run each time the page is visited resulting in a faster loading page and less server resource being used.
There are three main options when choosing your method of caching data:
- ExpressionEngine’s native caching - ExpressionEngine’s built-in caching is a great starting point for optimising the performance of your website
- Third Party caching add-ons such as CE Cache provide advanced caching capabilities producing some great results.
- Web Application Accelerators such as Varnish Cache - Varnish Cache is described as an HTTP reverse proxy. This means it sits in front of your website acting as a go between the user and ExpressionEngine. Depending on your site, this can produce some amazing results.
2. Query disabling
So we’ve discovered that background processes can slow a website down. ExpressionEngine make a ‘disable’ parameter available for some template tags to allow developers to optimise queries by turning off processes that may not be needed.
An example of this parameter in use is below:
N.B Although its not in ExpressionEngine’s documentation but you can also disable relationships.
3. Enable compression
Gzip Compression allows your web server to provide a smaller, compressed version of assets on your website, such as images, CSS, JS and HTML.
Compression of your assets can usually save you between fifty to seventy percent of the file size meaning your page takes less time to load.
ExpressionEngine has gzip built-in, however this only compresses the HTML that it outputs. To gzip your CSS, JS and images a simple update to your .htaccess file is normally all that is required.
4. Leverage browser caching
Caching parameters can be set to tell the browser exactly which files it should be remembering and for how long.
It’s recommended to be aggressive when setting these rules, with expiry dates ranging from 1 month to a year for assets such as images and CSS files.
Browser caching rules in most cases are created in the .htacess file.
5. Minimising number of http requests
Put simply, the more files on your website the longer it will take to load.
Whilst there is many ways to achieve this, my preference is to use a task runner such as Gulp, Grunt or CodeKit to automate the process during development.
Alternatively, John D Wells has released a great add-on called Minimee to help
6. Minify resources
The smaller the file size, the quicker it downloads.
There are a lot of ways to accomplish this, one of which is using a task runner such as Gulp. Alternatively, third party add-on Minimee can be used, or online services such as CloudFlare.
7. Use a CDN
A content delivery network (CDN), is a network of servers hosting files in different locations throughout the world, so users can receive the nearest copy to them.
The reason CDNs help improve the performance of a web page is because it reduces the network latency (waiting time) of a user located thousands of miles away, by serving the files to them from a closer location.
There are a lot of CDN providers, I’ve listed three popular choices below:
Keep-alive, also known as a persistent connection is an agreement between the server and the user’s browser to say, ‘hey, you can grab more than one file at a time’.
Whilst it’s true that most http connections are persistent nowadays, there are still many shared hosting environments that have disabled this to reduce server resources.
9. Optimising images
We’ve spent a lot of time talking about how to shave milliseconds off the loading speed and reduce file size by a few kilobytes, but all this hard work is in vain if our images aren’t optimised.
By far the largest file sizes on a web page are images. This isn’t a one size fits all topic as there are many considerations, however, I’ve added some key points when dealing with ExpressionEngine:
- Use the server to resize images, don’t rely on the browser. You should be using some kind of image manipulation to resize images, whether its ExpressionEngine’s built-in functionality, or a third party add-on such as CE image. Doing so will prevent enormous files slowing down your pages.
- Lossless file compression - Applications like Photoshop allow you to optimise your images for web. However, not everyone has access to programs like this. For those that don't, CE Lossless is a great extension for ExpressionEngine to compress images.
- Consider deferring image load - this means that the image is loaded after the page, making the intial load much quicker. One example of this that is commonly used is called Lazy loading which loads the image when it enters the users viewport.