New Wagtail Course! 🥳 The Ultimate Wagtail Developers Course

Tutorial Wagtail Version: 2.x

How to Add Template Caching

Wagtail is a fast CMS. It's built largely for performance, which is why a lot of beautiful features are not enabled by default. In this lesson we're going to take a look at database queries and template fragment caching to speed up our load times (page performance).

It's easy to get distracted inside a template and forget about the cost of looking up data in a database. That's actually a benefit to using a framework like Django and a CMS like Wagtail: you don't have to worry about very much.

But as your website grows, the number of queries and amount of processing power your website needs will increase, and that will slow down your page load time. Django and Wagtail are already very conscious of this and work towards doing their best to keep your site fast and efficient. It's also easy to take advantage of the features we're given and make a terribly slow website. Admit it: we've all done it.

In this tutorial I'll show you how to enable template fragment caching, and in the video I'll teach you why caching is important and how it's beneficial, and how it can trick you into thinking there's a problem when it's really just cache being good at it's job.

There are many different types of caching. We're strictly looking at template fragment caching in this tutorial.

Open your file. In this tutorial we used, but if you want caching to work in production simple paste this code into your file.

``` CACHES = { "default": { "BACKEND": "django.core.cache.backends.filebased.FileBasedCache", "LOCATION": "/path/to/your/site/cache" } } ```

Note: the LOCATION key value pair needs to be changed in the above code. Point it towards a directory called "cache" in your project. If you're unsure how to get your project location, follow these steps:

  1. Open your terminal
  2. cd into your project
  3. type pwd
Template files

Next you'll need to identify heavy query areas of your website. Navigation/headers are usually good. StreamFields can be good too. Beautiful jumbotrons or hero areas with lots of custom content would be a good place to cache. Listing pages are good candidates for template fragment caching too.

On any template you want to use caching, make sure you load your cache tag. And then add a section you'd like to cache.

``` {% extends "base.html" %} {% load wagtailimages_tags cache %} {% block content %} {% for post in posts %} {% cache 604800 blog_post_preview %} <div class="row mt-5 mb-5"> <div class="col-sm-3"> {% image post.banner_image fill-250x250 as blog_img %} <a href="{{ post.url }}"> <img src="{{ blog_img.url }}" alt="{{ blog_img.alt }}" style='width: 100%;'> </a> </div> <div class="col-sm-9"> <a href="{{ post.url }}"> <h2>{{ post.custom_title }}</h2> {% if post.specific.subtitle %} <p>{{ post.specific.subtitle }}</p> {% endif %} <a href="{{ post.url }}" class="btn btn-primary mt-4">Read More</a> </a> </div> </div> {% endcache %} {% endfor %} {% endblock content %} ```

If you applied your caching correctly, this will cache loop cycle into its own .djcache file. This is useful for pagination. But you can cache outside of a for loop as well. For example, in the video I cached the entire navigation menu loop in base.html.

``` {% load cache %} {% cache 604800 navigation %} {% for item in navigation.menu_items.all %} <li> <a href="{{ }}" class="nav-link"{% if item.open_in_new_tab %} target="_blank"{% endif %}>{{ item.title }}</a> </li> {% endfor %} {% endcache %} ```
Deleting cache

You'll eventually need to delete your cache. In the video I demonstrated how caching gets in the way of updating your website's navbar. Open up your django shell and type the following command:

``` > from django.core.cache import cache > cache.clear() ```

Not interested in watching a 25 minute video about template fragment caching? Or just need the code? No problem! Here's the link to the entire GitHub commit:

Related tutorials

Using Wagtails save() method to remove template caching

Posted on

In the previous lesson we discovered how to save sections of a template and reduce the number of queries on any given page. But to delete the cache so that Wagtail CMS could update the page was a very manual task. In this tutorial, we'll learn how to use Wagtails save() method to delete specific template fragment cache from our site.

View lesson, Using Wagtails save() method to remove template caching

How to add localization to your website

Posted on

Learn how to make your Wagtail website multilingual with different translations

View lesson, How to add localization to your website

How to Add a New Wagtail Page From Scratch

Posted on

In this video we're going to explore how to add a new app to our Wagtail CMS website, how to install it, and how to add the custom page model. We'll be creating a brand new Wagtail Page from scratch.

View lesson, How to Add a New Wagtail Page From Scratch

How to Add a Basic StreamField to your Wagtail CMS Page

Posted on

In this lesson we are going to learn how to add a basic StreamField to a a generic Wagtail CMS Page. We'll create a new app from scratch, and this StreamField will have a title and text (using StructBlock), a custom template, and it will lay the foundation for the next lesson which covers inheriting RichTextBlock and modifying the features it can have.

View lesson, How to Add a Basic StreamField to your Wagtail CMS Page

The Ultimate Wagtail Developers Course

This course covers everything from basic installation to advanced features like custom blocks and API integration, it's perfect for developers looking to enhance their skills with this powerful CMS.

Ultimate Wagtail Developers Course Logo