Nobody has ever enjoyed waiting for a web page to load.



A slow site doesn’t just displease its users, it also suffers from lower search engine rankings. Maybe you can afford to live with this if your site is truly the only option for the people who use it, but if it has to compete with other sites for visitors’ attention, a slow site has a serious problem.

As pages have become more complex, so too has the job of identifying and addressing performance problems. Once upon a time it was mostly a matter of making sure that images were suitably resized and compressed; today, you need to:

  • know how to your customise and optimise your frontend framework
  • minify your JavaScript and CSS assets
  • ensure that assets are delivered from the most appropriate global locations
  • know how to configure browser and network caching
  • … and more

It’s not easy

It’s not easy: it takes some time to learn how to do it, more time to get it right for your own case, and then it’s an on-going task to keep it all up-to-date.

So, we’ve done it for you.

We’re Django specialists and we know django CMS inside-out. We’ve spent a long time and a lot of effort optimising the way Aldryn projects work.

We want your sites on Aldryn to benefit from these speed advantages by default, so where possible, we’ve built them into the projects themselves.

Where it’s not possible for us to do it on your behalf, we have made it possible for you to take advantage of these improvements with a minimum of effort.

The update to the Explorer Theme project is a showcase for performance improvements, and we’ll discuss some of those improvements here. In future articles, we’ll explain in more technical detail how we have implemented them in the Explorer Theme project, and show how your own projects can do the same.

Nearly all of the optimisations made in the Explorer Theme are also available in the Aldryn Advanced Bootstrap 3 boilerplate.

Cold hard numbers

Numbers aren’t everything when it comes to web performance. What really matters is that your pages feel fast to your users. Services like Google's PageSpeed and Pingdom don't meaure how well your pages are performing, and it's a mistake to lose sight of the real issue while chasing perfect scores. However, they do offer valuable metrics and insight into your site’s performance - it might not matter if you score nearly 100% rather than 100%, it almost certainly does matter if you're only scoring 75%.

With that warning in mind, and to show the results of speed improvements we have implemented, here are some before-and-after figures:

  Before After
Website
Google Page Insights: Mobile* 67/60/63/61/62 ø62.6 100/100/100/100/100 ø100
Google Page Insights: Desktop* 64/64/66/64/65 ø64.6 100/100/100/100/100 ø100
Pingdom Performance Grade 83 99

 

* Average of 5 runs with an Aldryn Personal Website

Those are remarkable improvements. To see how they were achieved, let’s briefly look at the technical details of the issues and how we addressed them.

The issues

Here’s some more detail of what PageSpeed had to say about the older version of the django CMS Explorer site on Aldryn:

Pingdom provided a similar series of improvement suggestions, focused on related but slightly different concerns

Between them they identified some significant issues (blocking content, lack of compression, inadequate caching) and several more minor improvements that could be achieved (minified JavaScript and CSS, optimised images and so on).

Blocking content

Blocking content is material on a page that holds up everything else. There are various techniques for avoiding the problem; the solution we adopt on the Explorer Theme site is to load only critical resources at the start of the HTML document, and others later on (we’ll describe this in more detail in another weblog article).

Caching

Caching on systems right across the network from the server to the browser makes it possible to reuse rather than reload resources. We’ve taken some care to set HTTP headers to allow systems to take advantage of this. Later, we’ll be boosting these gains by making use of a content-delivery network (CDN) to serve media files in the most efficient way possible.

We’ve also improved caching within our applications. Django offers rich caching possibilities, which we’ve used extensively; django CMS’s caching is now more intelligent and granular, and built around the requirements of specific subsystems such as menus and plugins. This allows the application server to offer much better response times.

There are numerous techniques that support better and more efficient caching, such as hashing filenames to help ensure that caching files doesn’t mean serving up stale data. We’ve take such action where we can; it doesn’t in itself make anything faster, but it allows caching to be used more widely and confidently, which does.

Compression

Transporting smaller files is faster, so we compress them wherever possible. HTML content is compressed on the fly by the server. Static content changes rarely, so we take advantage of this and precompress them once, before they’re actually needed.

Other gains

We minify (eliminate unneeded carriage returns and white spaces) in CSS and JavaScript files - this can reduce file sizes significantly.

Image optimisation is no longer a matter simply of resizing and choosing a preferred level of compression. We run images through a series of optimisations using the Django Easy Thumbnails package, for images that are served at runtime, and have a management command to do the same for static image files.

We’ve also implemented some improvements in the way files are served across the network - Pingdom in particular offers some very specific advice about this.

Marginal gains add up

Each of these techniques, by itself, typically only offers a marginal improvement. But taking the trouble to make a large number of marginal improvements adds up to gains that are no longer marginal, but significant.

Our Explorer Theme site and Aldryn Advanced Bootstrap 3 boilerplate put as many of them into practice as possible, but it’s important to understand it’s not a final result so much as an on-going process. There will always be new techniques and technologies to adopt.

Just the start

Some of the steps forward we’ve taken are not specific to the Explorer Theme/Aldryn Advanced Bootstrap 3 boilerplate site, but benefit all Django projects on Aldryn - they will speed up your sites, whatever they are right now, without your needing to do anything. These include several that directly address areas for improvement flagged by the PageSpeed/Pingdom analyses:


Google Page Speed django CMS with Aldryn Django with Aldryn
Avoid landing page redirects Out-of-the-box
for single languages only
Not applicable
Enable compression Out-of-the-box Out-of-the-box
Leverage browser caching Out-of-the-box
Via Aldryn Django “Hash Static” setting
Out-of-the-box
Optimise images Media Files:
Out-of-the-box
Media Files:
Project-dependent
Static Files:
Run aldryn_optimize_static_images
Static Files:
Run aldryn_optimize_static_images
Minify JavaScript Not required
(thanks to compression)
Project-dependent
Via minify.py
Minify HTML Not required
(thanks to compression)
Not required
(thanks to compression)
Minify CSS With Explorer Theme
Via Advanced Bootstrap 3 Boilerplate
Project-dependent
Prioritise visible content With Explorer Theme
Via Advanced Bootstrap 3 Boilerplate
Project-dependent
Reduce server
response time
With Explorer Theme Project-dependent

 

Others are now available to other sites, but require you to do something to take advantage of them, such as static image optimisation (we’ll discuss how you can do this in a subsequent article).

Others still are so specific to the set-up or management of a site that it has to be up to the site administrator or developer to put them into practice - for these, the Explorer Theme site is simply a showcase of best practice, but we’ll be following this with technical articles that explain how you too can adopt them in your own projects.

Starting a site based on the Aldryn Advanced Bootstrap 3 boilerplate means you get nearly all of them automatically - from the very start, by default, it's built for speed and performance.

Try it now

You can see for yourself how the PageSpeed and Pingdom reports for the new and old versions of the django CMS Explorer Theme projects compare. More important than those metrics, you can experience for yourself the difference between the sites as a user.

Many of these advantages are available to your own sites already; you don't even need to do anything to take advantage of them. By launching an Explorer Theme-based project of your own, or using the Aldryn Advanced Bootstrap 3 boilerplate in your new projects, you'll get some extra advantages too.

Launching an Explorer theme project to discover the improvements is easy:

  • Login to Aldryn (login, or register for a free account)
  • Select Add new Project
  • Give your project a Name
  • Select Duplicate (the «Explorer Theme» Project is preselected)
  • Hit Create Project and then deploy it!

And if you'd like to dig deeper into the subject, we've published some more technical information about how we've done it, so whatever projects you have they too can make use of these valuable techniques to improve the speed, search engine rankings and user experience of your sites - read about how to make django CMS as fast as possible.