slides/wagtail-caching
1
Fork 0
Code Activity Actions
wagtail-caching/slides.md
Jake Howard 631de3a464
All checks were successful
/ build (push) Successful in 2m14s
Details
Populate numbers
2024-06-13 22:44:46 +01:00

22 KiB
Raw Blame History

title class highlighter transition monaco mdc themeConfig
Wagtail & Caching text-center shiki slide-left false true
primary
#2e1f5e

+ Caching = ❤️

Jake Howard

Wagtail Space NL 2024

layout: full

$ whoami

  • Senior Systems Engineer @ Torchbox
  • Core, Security & Performance teams @ Wagtail
  • I'm an avid self-hoster
  • I help students build robots in my "spare" time (https://srobo.org)
  • theorangeone.net
  • @RealOrangeOne
  • @RealOrangeOne
  • @jake@theorangeone.net

layout: fact

Disclaimer

layout: section

What is caching?

layout: center

Scale

layout: section

Caching in Wagtail

layout: section

1:

Template Fragment Caching

layout: image-right image: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png backgroundSize: cover class: p-0 m-0 bg-black

<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

Example:

My website

https://theorangeone.net

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 %}

{% 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 class: text-right

What about
search?

layout: center

<section class="container">
  {% for page in listing_pages %}
    {% include "common/listing-item.html" %}
  {% endfor %}
</section>

layout: image image: /website-search.png

layout: full

Updating cached content

>>> 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?

```jinja
{% load cache %}
{% cache 500 sidebar request.user.username %}
    .. sidebar for logged in user ..
{% endcache %}
```

```jinja
{% load wagtail_cache %}
{% wagtailpagecache 500 sidebar request.user.username %}
    .. sidebar for logged in user ..
{% endwagtailpagecache %}
```

```jinja
{% load wagtail_cache %}
{% wagtailcache 500 sidebar request.user.username page.cache_key site.id %}
    .. sidebar for logged in user ..
{% endwagtailcache %}
```

layout: section

2:

Frontend Caching

layout: fact

flowchart LR
  U[User]
  CDN{Content<br>Delivery Network}
  W[(Wagtail)]

  U--->CDN
  CDN-..->W

layout: fact

flowchart TD
  U1[🧑‍💻]
  U2[🧑‍💻]
  U3[🧑‍💻]
  U4[🧑‍💻]
  U5[🧑‍💻]
  U6[🧑‍💻]
  U7[🧑‍💻]
  U8[🧑‍💻]
  U9[🧑‍💻]
  U10[🧑‍💻]
  U11[🧑‍💻]
  U12[🧑‍💻]
  U13[🧑‍💻]
  CDN{Content<br>Delivery Network}
  W[(Wagtail)]

  U1--->CDN
  U2--->CDN
  U3--->CDN
  U4--->CDN
  U5--->CDN
  U6--->CDN
  U7--->CDN
  U8--->CDN
  U9--->CDN
  U10--->CDN
  U11--->CDN
  U12--->CDN
  U13--->CDN
  CDN-...->W

layout: image image: https://www.cloudflare.com/network-maps/cloudflare-pops-2O04nulSdNrRpJR9fs9OKv.svg class: bg-white

layout: cover background: /wagtail-homepage.png

Example

https://wagtail.org

layout: image image: /map.jpg transition: fade

layout: cover background: /map.jpg transition: fade

Arnhem → Ireland

~25ms

layout: cover background: /map.jpg

Arnhem → Amsterdam

~7ms

layout: fact

flowchart LR
  U[User]

  subgraph Content Delivery Network
    CDN{Content<br>Delivery Network}
    C[(Cache)]
  end

  W[(Wagtail)]

  U---->CDN
  CDN-.->C
  C---->W
  C-.->CDN

layout: fact

flowchart LR
  U[User]
  A[Admin]

  subgraph Content Delivery Network
    CDN{Content<br>Delivery Network}
    C[(Cache)]
  end

  W[(Wagtail)]

  U---->CDN
  CDN-.->C
  C---->W
  C-.->CDN

  A---->CDN
  CDN---->W

layout: section

Content is cached!

flowchart LR
  U1[User]
  U2[User]
  U3[User]

  subgraph Content Delivery Network
    CDN{Content<br>Delivery Network}
    C[(Cache)]
  end

  W[(Wagtail)]

  U1===>CDN
  U2===>CDN
  U3===>CDN
  CDN==>C
  C==>CDN
  C-.....->W

layout: image image: /wagtail-homepage-typo.png transition: fade

layout: cover background: /wagtail-homepage-typo.png

It doesn't*

layout: section

Solution:

Frontend Cache Invalidation

Wagtail secret sauce

layout: fact

flowchart LR
  U[User]

  subgraph Content Delivery Network
    CDN{Content<br>Delivery Network}
    C[(Cache)]
  end

  W[(Wagtail)]

  U--->CDN
  CDN-->C
  C-->CDN
  C--->W

  W-.->|Frontend Cache Invalidation|CDN

layout: center

settings.py

1.

INSTALLED_APPS = [
    ...
    "wagtail.contrib.frontend_cache"
]

2.

WAGTAILFRONTENDCACHE = {
  'cloudflare': {
    'BACKEND': 'wagtail.contrib.frontend_cache.backends.CloudflareBackend',
    'BEARER_TOKEN': os.environ["CF_BEARER_TOKEN"],
    'ZONEID': os.environ["CF_ZONE_ID"],
  },
}

3. ???

4. Profit!

layout: fact

flowchart LR
  A[Admin]

  subgraph Content Delivery Network
    CDN{Content<br>Delivery Network}
    C[(Cache)]
  end

  W[(Wagtail)]

  A-->|Publish new content to<br>blog post 1|W

  W-.->|<code>PURGE /blog/post-1</code>|CDN

  CDN-.->C

layout: cover background: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png

Conclusion

layout: cover

Performance means:

  • Users are happier
  • Servers are happier
  • The planet is happier

layout: end

END