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:

1. ExpressionEngine’s native caching - ExpressionEngine’s built-in caching is a great starting point for optimising the performance of your website
2. Third Party caching add-ons such as CE Cache provide advanced caching capabilities producing some great results.
3. 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:

{exp:channel:entries disable=“categories|category_fields|custom_fields|member_data|pagination|relationships”}

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

When a browser loads a page on your website, the HTML, CSS, JavaScript and images are downloaded and stored locally on the user's computer.

Most files do not change often, such as the CSS, Javascript and images so it doesn’t make sense to ask the browser to download these files each time it visits the site.

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

When a browser visits a web page, a separate http request is made to download every single HTML, CSS, JavaScript and image file. Each http request causes a delay in the page loading.

Put simply, the more files on your website the longer it will take to load.

Whilst a lot of these requests such as images are unavoidable, files such as JavaScript and CSS can be combined to reduce the overall number of http requests.

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.

The idea behind minifying HTML, JavaScript and CSS is to strip out all the unnecessary whitespace and comments in code reducing the file size and speeding up the delivery of the assets.

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.

Typically ‘static assets’ such as images, CSS, and JavaScript are hosted on CDNs.

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:

• CloudFlare (Free option available)
• MaxCDN
• Amazon CloudFront

8. Keep-alive

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.