1
Fork 0

Clean up script for smoother delivery
All checks were successful
/ build (push) Successful in 2m33s

This commit is contained in:
Jake Howard 2024-06-12 09:55:09 +01:00
parent 4cb6fb7533
commit 2365ee4169
Signed by: jake
GPG key ID: 57AFB45680EDD477

202
slides.md
View file

@ -68,9 +68,10 @@ layout: fact
<!-- <!--
- Disclaimer: This isn't a general performance talk - Disclaimer: This isn't a general performance talk
- Optimising Python, Django and Wagtail are their own topics - Optimising Python, Django and Wagtail are their own topics
- Caching can be a part of optimisation - Big topics!
- But it's not the only part - Caching can be a part of optimisation
- It's not a replacement for proper benchmarking and investigations - But it's not the only part
- It's not a replacement for proper benchmarking and investigations
--> -->
--- ---
@ -83,12 +84,12 @@ layout: section
- What is caching? - What is caching?
- Caching lets your code remember things it's already done - Caching lets your code remember things it's already done
- Reuse a value you've already done the work to calculate - Reuse a value you've already done the work to calculate
- It's always slower to do something than nothing - Because it's always slower to do something than nothing
- Caching comes in many different forms - Caching comes in many different forms
- From storing a variable outside a loop - From storing a variable outside a loop
- To caching functions - To caching functions
- To caching entire pages with a CDN - To caching entire pages
- Mostly focusing on the higher end today - Mostly focusing on the higher end today
- The higher up the list you are, the more smaller processes you're caching - The higher up the list you are, the more smaller processes you're caching
- And the more performance you can get - And the more performance you can get
--> -->
@ -121,15 +122,16 @@ h1 {
<!-- <!--
- Caching may not seem needed at some scales - Caching may not seem needed at some scales
- Small sites will probably be _fine_ without it - Small sites will probably be _fine_ without it
- As your site grows, it becomes more important - As your site grows, it becomes more important
- Crash under your own weight and success - Otherwise you'll crash under your own weight and success
- But, you may not notice you need it until it's already an issue - But, you may not notice you need it until it's already an issue
- What runs fine locally may not in production - What runs fine locally may not in production
- A problem with so many things at scale - A problem with so many things at scale
- If a page gets popular, it'll soon meet with the hug of death - If a page gets popular, it'll soon meet with the hug of death
- Or even if it's not that popular, just shared around a bit - Where it gets overload by its on popularity
- Like the recently-discovered Mastodon issue - Or even if it's not that popular, just shared around a bit
- Like the recently-discovered Mastodon issue
--> -->
--- ---
@ -140,6 +142,7 @@ layout: section
<!-- <!--
- Now, back to Wagtail - Now, back to Wagtail
- This is Wagtail Space, after all
- Let's talk about 2 techniques to help you out with caching - Let's talk about 2 techniques to help you out with caching
- Both are included in all maintained versions of Wagtail - Both are included in all maintained versions of Wagtail
- So you can use them right now! - So you can use them right now!
@ -158,8 +161,8 @@ layout: section
<!-- <!--
- Template fragment caching - Template fragment caching
- New ish in 5.2
- Lots of complex words, but quite a simple concept - Lots of complex words, but quite a simple concept
- Introduced ish in 5.2
--> -->
--- ---
@ -203,14 +206,17 @@ class: p-0 m-0 bg-black
<!-- <!--
- Most of what you build in Wagtail will come out as HTML - Most of what you build in Wagtail will come out as HTML
- Pages to be shown by the browser - Pages to be shown by the browser
- But may take lots of intensive actions to create it - But probably takes lots of intensive actions to create it
- Complex lists / filters or suggestions - Complex lists / filters or suggestions
- Finding lots of renditions - Finding lots of renditions
- Rendering streamfield blocks etc - Rendering streamfield blocks
- etc etc
- These can all be optimised in many different ways - These can all be optimised in many different ways
- The deeper down you go, the more complex and often less impactful those optimisations usually are - The deeper down you go, the more complex and often less impactful those optimisations are
- Why not cache an entire chunk of template? - Why not cache an entire chunk of template?
- With all of that complexity contained within it - With all of that complexity contained within it
- Rather than cache the name of a page for the navbar
- Cache the entire navbar
- That's the thing people see (sort of) - That's the thing people see (sort of)
--> -->
@ -227,6 +233,7 @@ background: /website-homepage.png
- An example: My website - An example: My website
- Subtle self-promotion, I know - Subtle self-promotion, I know
- It's a relatively simple blog - It's a relatively simple blog
- Currently built with Wagtail
--> -->
--- ---
@ -235,20 +242,20 @@ image: /website-posts.png
--- ---
<!-- <!--
Here's a list of posts - Here's a list of posts
- Each item has a lot to it - Each item has a lot to it
- Title - Title
- Date - Date
- An image (renditions or unsplash) - An image (renditions or unsplash)
- Introduction text (automatically generated from page content) - Introduction text (automatically generated from page content)
- Tags - Tags
- Reading time / Word count - Reading time / Word count
- These all come from a few different places in code - These all come from a few different places in code
- Database fields - Database fields
- Model properties - Model properties
- Template tags - Template tags
- It'd be nice to cache them all together as they are - It'd be nice to cache them all together as they are
- That's fragment caching! - That's fragment caching!
--> -->
--- ---
@ -327,21 +334,26 @@ layout: none
- Makes them easier to work with - Makes them easier to work with
- And makes fragment caching much easier too - And makes fragment caching much easier too
- This has no caching at all - This has no caching at all
- [click]Let's add some - Every time I used the template, the template is evaluated
- All the template tags are run
- [click]Let's cache it
- Nice and simple
- It's just 2 lines of change[click] - It's just 2 lines of change[click]
- The tag might look a bit weird - The tag might look a bit strange
- It's not an inclusion or a filter - It's not an inclusion or a filter
- It's a fully custom template tag - It's a fully custom template tag
- A name: To uniquely identify this template fragment from others - Let's look at its structure
- A TTL: To determine how long the cache is valid for - A name: To uniquely identify this template fragment from others
- Whatever variables the tag needs - A TTL: To determine how long the cache is valid for
- So if the variables change, the cache is automatically invalidated - Whatever variables the tag needs
- Don't show listing images? Different cache! - So if the variables change, the cache is automatically invalidated
- [click]Put the HTML you want in the middle - Don't show listing images? Different cache!
- It's still a Django template, so calling tags etc is completely fine - [click]Put the HTML you want in the middle
- They'll be cached too - It's still a Django template, so calling tags etc is completely fine
- They'll be cached too
- [click]The template is in charge of caching itself - [click]The template is in charge of caching itself
- Keep the complexities hidden, and in 1 place - Keep the complexities hidden, and in 1 place
- Pages using it don't need to worry about it too much
--> -->
--- ---
@ -353,11 +365,14 @@ class: text-right
# What about<br>search? # What about<br>search?
<!-- <!--
This is a component, it's used in a few different places - The 'listing item' is a component, it's used in a few different places
- There's a posts list, and a search - There's a posts list, and a search
- And a few others
- But the UI for each item is the same - But the UI for each item is the same
- It takes the same context: A page, and creates the same HTML - It takes the same context: A page
- And creates the same HTML
- If it looks the same, just on different pages, can I reuse it? - If it looks the same, just on different pages, can I reuse it?
- Including its cache?
- Yes! - Yes!
--> -->
@ -393,8 +408,9 @@ image: /website-search.png
<!-- <!--
- Caching HTML blocks has a few nice benefits over caching the whole page - Caching HTML blocks has a few nice benefits over caching the whole page
- Searches are still performed live, but the display of the results are cached - For example, a search page
- Published pages appear immediately, without needing to invalidate a cache - Searches are still performed live, but the display of the results are cached
- Published pages appear immediately, without needing to invalidate a cache
--> -->
--- ---
@ -436,13 +452,16 @@ code {
</style> </style>
<!-- <!--
If I change a page, I want the content to update - Cache invalidation is one of the 2 hardest problems in computer science
- Alongside naming things and off-by-one errors
- If I change a page, I want the content to update
- How does it know when to regenerate the HTML? - How does it know when to regenerate the HTML?
- [click]`page.cache_key` - [click]`page.cache_key`
- Custom attribute on all your pages - Custom attribute on all your pages
- [click]You can use it for other things if you need it - [click]You can use it for other things if you need it
- If a change is published, or the page is moved, the cache key changes, so the existing cache is ignored - If a change is published, or the page is moved, the cache key changes, so the existing cache is ignored
- And the old cached item will eventually expire - And the old cached item will eventually expire
- If that's not enough, and you want to manually clear the cache, you can do that too
--> -->
--- ---
@ -461,31 +480,37 @@ layout: center
```jinja ```jinja
{% load wagtail_cache %} {% load wagtail_cache %}
{% wagtailcache 500 sidebar request.user.username %} {% 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 .. .. sidebar for logged in user ..
{% endwagtailcache %} {% endwagtailcache %}
``` ```
```` ````
<v-click>
- Current page
- Current site
- Skip in preview
</v-click>
<!-- <!--
- This might sound familiar - This might sound familiar to some
- Django's `{% cache %}`? - Django's `{% cache %}` tag
- This isn't new, Django has had a cache tag for a very long time - This isn't new, Django has had a cache tag for a very long time
- In fact, 2007 - In fact, 2007
- But it's dangerous to use it with Wagtail unmodified - But it's dangerous to use it with Wagtail unmodified
- Preview content can get cached - Preview content can get cached
- Per-site settings cache the wrong value - Per-site settings cache the wrong value
- [click]It's only a few small changes to use Wagtail's - A host of other weird bugs
- [click]Which wraps this tag, but is aware of the current page and site automatically - [click]It's only a few small changes to use Wagtail's `wagtailpagecache`
- Which wraps this tag, but is aware of the current page and site automatically
- If you modify the page, the cache is automatically invalidated - If you modify the page, the cache is automatically invalidated
- If you use the on different sites, they're cached separately
- If that's not enough, and you want something more manual
- [click]There's `wagtailcache`
- This doesn't automatically use the page and site
- But _does_ ignore preview requests
- Making it a closer analogue for Django's `cache` tag
--> -->
--- ---
@ -496,6 +521,7 @@ layout: section
# Frontend Caching # Frontend Caching
<!-- <!--
- Part 2
- Frontend caching - Frontend caching
- You can spend ages optimising a request - You can spend ages optimising a request
- Caching common chunks of HTML - Caching common chunks of HTML
@ -520,7 +546,7 @@ flowchart LR
- What if we put something in front of Wagtail to serve the requests instead - What if we put something in front of Wagtail to serve the requests instead
- A CDN (eg Cloudflare, CloudFront) - A CDN (eg Cloudflare, CloudFront)
- They cache the page, and serve it themselves - They cache the page, and serve it themselves
- A CDN is generally helping you in 2 main ways: - A CDN generally helps you in 2 main ways:
--> -->
--- ---
@ -562,15 +588,16 @@ flowchart TD
``` ```
<!-- <!--
Serve a static copy of your website, so your servers aren't processing every request - Firstly: Serve a static copy of your website, so your servers aren't processing every request
- Handle many more requests concurrently - Allows you to handle many more requests concurrently
- Cloudflare handles 50 million requests per second globally (on average) - Cloudflare handles 50 million requests per second globally (on average)
- Your servers can't - Your servers can't
- Handle more traffic with fewer servers - Handle more traffic with fewer servers
- Imagine it like converting your site to be static - Imagine it like converting your site to be static
- 0 Database requests - 0 Database queries
- 0 templates used - 0 templates used
- 0 cache hits - 0 cache hits
- 0 lines of code
--> -->
--- ---
@ -580,7 +607,7 @@ class: bg-white
--- ---
<!-- <!--
- Store said cached copy closer to your users - Secondly: Store said cached copy closer to your users
- Reduced latency - Reduced latency
- Makes your site seem faster - Makes your site seem faster
- Even helps on your Google Lighthouse scores - Even helps on your Google Lighthouse scores
@ -595,12 +622,6 @@ background: /wagtail-homepage.png
## Example ## Example
# https://wagtail.org # https://wagtail.org
<style>
code {
background-color: transparent !important;
}
</style>
<!-- <!--
- Let's look at an example: Wagtail.org - Let's look at an example: Wagtail.org
--> -->
@ -614,6 +635,7 @@ transition: fade
<!-- <!--
- Wagtail.org is hosted in Dublin, Ireland (AWS `eu-west-1`) - Wagtail.org is hosted in Dublin, Ireland (AWS `eu-west-1`)
- But I'm in Arnhem - But I'm in Arnhem
- Quite far away
--> -->
--- ---
@ -621,6 +643,7 @@ layout: cover
background: /map.jpg background: /map.jpg
transition: fade transition: fade
--- ---
## Arnhem &rarr; Ireland ## Arnhem &rarr; Ireland
# ~XXms # ~XXms
@ -633,6 +656,7 @@ h1 {
<!-- <!--
- XXms away - XXms away
- But responses are being served quickly - But responses are being served quickly
- Page loads take just XXms
- That's the CDN (Cloudflare, in our case) - That's the CDN (Cloudflare, in our case)
--> -->
@ -652,9 +676,9 @@ h1 {
<!-- <!--
- This was actually served from XXX - This was actually served from XXX
- Just XXms to get a response - Just XXms from me
- It's closer to us
- Quicker - Quicker
- Closer to us
--> -->
--- ---
@ -682,12 +706,15 @@ flowchart LR
Let's cache our content! Let's cache our content!
- Put a caching layer between users and the site - Put a caching layer between users and the site
- Requests are sent via cache - Requests are sent via cache
- Usually just adding a DNS record - If they're cached, return them
- It's always DNS - Otherwise, get the actual content from Wagtail
- Ensure the CDN knows how long to cache pages for - Ensure the CDN knows how long to cache pages for
- Cache headers - Somewhere between "Forever" and "1 second"
- Configuration in the CDN itself - An hour is probably fine
- There's another talk about this - Lots of different options
- Cache headers
- Configuration in the CDN itself
- There's another talk about this
--> -->
--- ---
@ -719,7 +746,7 @@ flowchart LR
- Make sure you skip caching authenticated requests (ie the admin) - Make sure you skip caching authenticated requests (ie the admin)
- These pages are dynamic based on who is viewing them, so we can't cache them easily - These pages are dynamic based on who is viewing them, so we can't cache them easily
- Wagtail does its best to make sure the admin is fast anyway - Wagtail does its best to make sure the admin is fast anyway
- May need to include the session id as part of the cache key - Exactly how to do this will again depend on your CDN
--> -->
--- ---
@ -755,6 +782,7 @@ flowchart LR
- Server load should drop drastically - Server load should drop drastically
- Might even be able to scale down - Might even be able to scale down
- Wagtail.org serves ~70% of all page loads from the CDN - Wagtail.org serves ~70% of all page loads from the CDN
- And with some work we could probably get that higher
--> -->
--- ---
@ -781,11 +809,12 @@ background: /wagtail-homepage-typo.png
<!-- <!--
- Simple: It doesn't! - Simple: It doesn't!
- The whole point of it is it doesn't need to hit Wagtail for every request - The whole point of it is it doesn't need to hit Wagtail for every request
- So it can't know - So it can't know
- The cache will expire _eventually_ - The cache will expire _eventually_
- What if it needs to go out sooner - After an hour or so
- What if it's more serious than just a typo - What if it needs to go out sooner
- What if it's more serious than just a typo
--> -->
--- ---
@ -803,7 +832,7 @@ layout: section
<!-- <!--
- Frontend cache invalidation! - Frontend cache invalidation!
- Wagtail to the rescue - Wagtail to the rescue
- Some magic Wagtail sauce - Some magic Wagtail sauce
--> -->
--- ---
@ -887,7 +916,7 @@ code {
<!-- <!--
- Integrating is simple - Integrating is simple
- [click]Add entry to `INSTALLED_APPS` - [click]Add entry to `INSTALLED_APPS`
- [click]dd credentials and configuration - [click]Add configuration and credentials
- Wagtail supports quite a few backends! - Wagtail supports quite a few backends!
- [click]That's it! - [click]That's it!
- All the hooks into all the right places are set up for you! - All the hooks into all the right places are set up for you!
@ -920,7 +949,7 @@ flowchart LR
- When you publish a page, it'll automatically be purged - When you publish a page, it'll automatically be purged
- It can take a minute or so, depending on your CDN - It can take a minute or so, depending on your CDN
- Usually much faster than that - Usually much faster than that
- Then when a user loads the page, it's cached, and subsequent loads go back to being lightning fast - Then when a user loads the page from Wagtail, it's cached, and subsequent loads go back to being lightning fast
--> -->
--- ---
@ -934,6 +963,9 @@ background: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-
- When most people think of "performance", they tend to think "database queries" - When most people think of "performance", they tend to think "database queries"
- Which is true, that's where a lot of time goes - Which is true, that's where a lot of time goes
- But there's more to optimising a site than sprinkling `select_related` / `prefetch_related` - But there's more to optimising a site than sprinkling `select_related` / `prefetch_related`
- "Performance" means lots of things to different people
- Your application is made up of lots of different components
- So too must your performance investigations
- It's faster to do less than to do more - It's faster to do less than to do more
- It's faster still to do nothing than something - It's faster still to do nothing than something
- The higher up the stack your cache is, the more impactful it can be - The higher up the stack your cache is, the more impactful it can be