diff --git a/public/map.jpg b/public/map.jpg new file mode 100644 index 0000000..f25d6ac Binary files /dev/null and b/public/map.jpg differ diff --git a/public/wagtail-homepage-typo.png b/public/wagtail-homepage-typo.png new file mode 100644 index 0000000..c41389a Binary files /dev/null and b/public/wagtail-homepage-typo.png differ diff --git a/public/wagtail-homepage.png b/public/wagtail-homepage.png new file mode 100644 index 0000000..3b7575d Binary files /dev/null and b/public/wagtail-homepage.png differ diff --git a/slides.md b/slides.md index 7c94cf6..3e70d7c 100644 --- a/slides.md +++ b/slides.md @@ -313,3 +313,295 @@ layout: section ## 2: # Frontend Caching + +--- +layout: fact +--- + +```mermaid +flowchart LR + U[User] + CDN{Content
Delivery Network} + W[(Wagtail)] + + U--->CDN + CDN-..->W +``` + +--- +layout: fact +--- + +```mermaid +flowchart TD + U1[🧑‍💻] + U2[🧑‍💻] + U3[🧑‍💻] + U4[🧑‍💻] + U5[🧑‍💻] + U6[🧑‍💻] + U7[🧑‍💻] + U8[🧑‍💻] + U9[🧑‍💻] + U10[🧑‍💻] + U11[🧑‍💻] + U12[🧑‍💻] + U13[🧑‍💻] + CDN{Content
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 +--- + +Source: Cloudflare + + + +--- +layout: cover +background: /wagtail-homepage.png +--- + +# An example + +--- +layout: image +image: /map.jpg +transition: fade +--- + +--- +layout: cover +background: /map.jpg +--- + +# ~XXms + + + +--- +layout: fact +--- + +```mermaid +flowchart LR + U[User] + + subgraph Content Delivery Network + CDN{Content
Delivery Network} + C[(Cache)] + end + + W[(Wagtail)] + + U---->CDN + CDN-.->C + C---->W + C-.->CDN +``` + +--- +layout: fact +--- + +```mermaid +flowchart LR + U[User] + A[Admin] + + subgraph Content Delivery Network + CDN{Content
Delivery Network} + C[(Cache)] + end + + W[(Wagtail)] + + U---->CDN + CDN-.->C + C---->W + C-.->CDN + + A---->CDN + CDN---->W +``` + +--- +layout: fact +--- + +# Content is cached! + +```mermaid +flowchart LR + U1[User] + U2[User] + U3[User] + + subgraph Content Delivery Network + CDN{Content
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 +--- + +--- +layout: section +--- + +## Solution: +# Frontend Cache Invalidation +### Wagtail secret sauce + +--- +layout: fact +--- + +```mermaid +flowchart LR + U[User] + + subgraph Content Delivery Network + CDN{Content
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. + +```python {3} +INSTALLED_APPS = [ + ... + "wagtail.contrib.frontend_cache" +] +``` + +#### 2. + +```python +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 +--- + +```mermaid +flowchart LR + A[Admin] + + subgraph Content Delivery Network + CDN{Content
Delivery Network} + C[(Cache)] + end + + W[(Wagtail)] + + A-->|Publish new content to
/blog/post-1|W + + W-.->|PURGE /blog/post-1|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 +---