| title |
class |
highlighter |
transition |
monaco |
mdc |
themeConfig |
| Wagtail & Caching |
text-center |
shiki |
slide-left |
false |
true |
|
Wagtail & Caching
Jake Howard
- Senior Systems Engineer @ Torchbox
- Security Team & Performance Working Group @ Wagtail
- theorangeone.net
- @RealOrangeOne
- @RealOrangeOne
- @jake@theorangeone.net
layout: fact
Disclaimer
layout: cover
What is caching?
layout: center
Scale
layout: cover
Caching in Wagtail
layout: section
1:
Template Fragment Caching
layout: none
<div class="one-half--medium one-third--large">
<div class="card card--link">
<a href="/developers/springload/made-wagtail/" class="project-image">
<img src="https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.52.2e16d0ba.fill-680x564.png" alt="" title="">
</a>
<div class="project__links">
<a class="project__info" href="/developers/springload/made-wagtail/">
<span class="u-sr-only">Project info</span>
<svg class="i i--grey i--hover">
<use xlink:href="#i-info"></use>
</svg>
</a>
<a class="project__visit" href="http://madewithwagtail.org/" title="Project link" data-analytics="Project|Link click">
<span class="u-sr-only">Project link</span>
<svg class="i i--grey i--hover">
<use xlink:href="#i-visit"></use>
</svg>
</a>
</div>
</div>
<h4 class="project-title">
Made with Wagtail
</h4>
<p class="project-author">
<a href="/developers/springload/" title="View the company page of Springload">
Springload
</a>
</p>
layout: cover
background: /website-homepage.png
An example
layout: image
image: /website-posts.png
layout: none
```html
{% load wagtailcore_tags util_tags %}
<article class="media listing-item">
<div class="columns">
<figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
{% if page.list_image_url %}
<a href="{% pageurl page %}" class="image" title="{{ page.title }}">
<img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
</a>
{% endif %}
</figure>
<div class="media-content column">
<div>
{% if breadcrumbs %}
{% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
{% endif %}
<h2 class="title is-3">
<a href="{% pageurl page %}">{{ page.title }}</a>
</h2>
{% include "common/content-details.html" %}
<p>{{ page.summary }}</p>
</div>
</div>
</div>
</article>
```
```html {all|1|3,27|4-26|all}
{% load wagtailcore_tags wagtail_cache util_tags %}
{% wagtailpagecache FRAGMENT_CACHE_TTL "listing-item" breadcrumbs show_listing_images %}
<article class="media listing-item">
<div class="columns">
<figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
{% if page.list_image_url %}
<a href="{% pageurl page %}" class="image" title="{{ page.title }}">
<img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
</a>
{% endif %}
</figure>
<div class="media-content column">
<div>
{% if breadcrumbs %}
{% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
{% endif %}
<h2 class="title is-3">
<a href="{% pageurl page %}">{{ page.title }}</a>
</h2>
{% include "common/content-details.html" %}
<p>{{ page.summary }}</p>
</div>
</div>
</div>
</article>
{% endwagtailpagecache %}
```
layout: cover
background: /website-search.png
Duplication
layout: center
<section class="container">
{% for page in listing_pages %}
{% include "common/listing-item.html" %}
{% endfor %}
</section>
layout: image
image: /website-search.png
Cache invalidation
>>> BlogPostPage.objects.first().cache_key
@property
def cache_key(self) -> str:
"""
A generic cache key to identify a page in its current state.
Should the page change, so will the key.
Customizations to the cache key should be made in :attr:`get_cache_key_components`.
"""
...
layout: center
What about Django?
{% load cache %}
{% cache 500 sidebar request.user.username %}
.. sidebar for logged in user ..
{% endcache %}
- Current page
- Current site
- Preview
- Cache invalidation
layout: section
2:
Frontend Caching
