Add promo includes to Learn articles

Author: csswizardry

_posts/2019-08-08-time-to-first-byte-what-it-is-and-why-it-matters.md

@@ -40,6 +40,8 @@ an air of  [closing the stable door after the horse has
 bolted](https://www.collinsdictionary.com/dictionary/english/to-close-the-stable-door-after-the-horse-has-bolted).
 You really want to squish those TTFB bugs as soon as you can.
 
+{% include promo.html %}
+
 ## What is TTFB?
 
 <figure>
@@ -138,6 +140,8 @@ taking place in our TTFB phase, it’s almost a miracle that websites load at al
 
 So. Much. Stuff!
 
+{% include promo.html %}
+
 ## Demystifying TTFB
 
 Thankfully, it’s not all so unclear anymore! With a little bit of extra work

_posts/2021-02-26-measuring-network-performance-in-mobile-safari.md

@@ -31,6 +31,8 @@ a completely different ballgame to Chrome, and not something many people tend to
 focus on. So, I’m going to share with you a handful of tips to make it a little
 easier should you need to do the same—and you should do the same.
 
+{% include promo.html %}
+
 ## Why iOS Gets Overlooked
 
 Google has a pretty tight grip on the tech industry: it makes by far the most
@@ -119,6 +121,8 @@ upon and [written
 about](https://www.catchpoint.com/blog/m1-mac-mini-mobile-device-testing)
 only a month prior to this article you’re reading right now.
 
+{% include promo.html %}
+
 ## Testing in Safari’s DevTools
 
 What we really want to do, alongside capturing good benchmark- and more

_posts/2023-07-01-in-defence-of-domcontentloaded.md

@@ -24,6 +24,8 @@ it is…
 _**Want actionable timings and not just trivia?** [Explore my consultancy
 services](/consultancy/)._
 
+{% include promo.html %}
+
 For many, many years now, performance engineers have been making a concerted
 effort to move away from technical metrics such as `Load`, and toward more
 user-facing, UX metrics such as [Speed
@@ -331,6 +333,8 @@ This demo below contains:
 
 Or take a look at [the live demo on Glitch](https://deep-bow-engine.glitch.me/).
 
+{% include promo.html %}
+
 ## A Better Way?
 
 This is all genuinely exciting and interesting to me, but we’re running into

_posts/2023-09-28-the-ultimate-lqip-lcp-technique.md

@@ -30,6 +30,8 @@ important to consider how we offer a reasonably pleasant experience while users
 are waiting for images to load. One solution to that problem is _Low-Quality
 Image Placeholders_.
 
+{% include promo.html %}
+
 ## Low-Quality Image Placeholders
 
 Low-Quality Image Placeholders are nothing new. [Guy
@@ -151,6 +153,8 @@ concerned, are <a
 href="https://www.businesswire.com/news/home/20230517005168/en/Cloudinary-Global-E-Commerce-Survey-Reveals-Visual-Content-Can-Help-Reduce-Returns-by-One-Third">especially
 harmful</a>.</p>
 
+{% include promo.html %}
+
 ## Don’t Upscale Your LQIP
 
 Each image in the tests so far has been a 200×200px `<img>` displayed at

_posts/2023-10-16-what-is-the-maximum-max-age.md

@@ -35,6 +35,8 @@ I wondered the same. Let’s find out together.
   </details>
 </div>
 
+{% include promo.html %}
+
 ## `max-age`
 
 `max-age` is a `Cache-Control` directive that instructs a cache that it may
@@ -145,6 +147,8 @@ binary form is `01111111111111111111111111111111`: a zero followed by 31 ones
 (the first zero is reserved for switching between positive and negative values,
 so `11111111111111111111111111111111` would be equal to −2,147,483,648).
 
+{% include promo.html %}
+
 ## Does It Matter?
 
 Honestly, no.

_posts/2023-10-17-the-three-c-concatenate-compress-cache.md

@@ -27,6 +27,8 @@ finished.
 
 Let’s go!
 
+{% include promo.html %}
+
 When serving and storing files on the web, there are a number of different
 things we need to take into consideration in order to balance ergonomics,
 performance, and effectiveness. In this post, I’m going to break these processes
@@ -410,6 +412,8 @@ For example:
   bundling it into `app.js`: discrete changes to components shouldn’t require
   fetching all of `app.js` again.
 
+{% include promo.html %}
+
 ## The Future Is Brighter
 
 The reason we’re erring on the side of fewer, larger bundles is that

_posts/2024-09-13-optimising-for-high-latency-environments.md

@@ -26,6 +26,8 @@ to the Chrome User Experience Report (CrUX). This gives fascinating insights
 into the network topography of our visitors, and how much we might be impacted
 by high latency regions.
 
+{% include promo.html %}
+
 ## What is RTT?
 
 Round-trip-time (RTT) is basically a measure of latency—how long did it take to
@@ -117,6 +119,8 @@ remember](/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/).
 overall TTFB metric.</figcaption>
 </figure>
 
+{% include promo.html %}
+
 ## Improving Experiences for High Latency Environments
 
 Before we dive in, I want to reiterate that this article is about general

_posts/2024-12-02-a-layered-approach-to-speculation-rules.md

@@ -30,6 +30,8 @@ out of other useful things.
 Recently, I’ve been playing similar games with the [Speculation Rules
 API](https://developer.chrome.com/docs/web-platform/prerender-pages).
 
+{% include promo.html %}
+
 ## Speculation Rules
 
 I don’t want to go super in-depth about the [Speculation Rules
@@ -138,6 +140,8 @@ traffic, so the risk of increased server load anywhere is minimal. For sites
 with lots of traffic and highly dynamic back-ends (database queries, API calls,
 insufficient caching), this approach might be a little too liberal.
 
+{% include promo.html %}
+
 ## A Multi-Tiered Approach
 
 On a recent client project, I wanted to take the idea further. They have a large

_posts/2026-04-02-what-is-css-containment-and-how-can-i-use-it.md

@@ -46,6 +46,8 @@ In this post, we’ll take a look at what CSS containment actually is, what each
 creating hard-to-debug side effects. We’ll also look at my most favourite
 real-world example of just how effective containment can be. Let’s go!
 
+{% include promo.html %}
+
 ## Why Containment Exists
 
 To understand containment, you don’t need to memorise the entire rendering
@@ -342,6 +344,8 @@ As a rule of thumb: do not reach for `strict` until you have a clear reason and
 a good understanding of what will happen.
 
 
+{% include promo.html %}
+
 ## Containment in the Real World
 
 So far we have stayed fairly abstract. Let us start with a real example before

_posts/2026-05-07-better-browser-caching-with-no-vary-search.md

@@ -51,6 +51,8 @@ are the same page, just with different tracking baggage attached.
 And yet, to an HTTP cache, different query strings traditionally equate to
 completely different URLs, which means different cache entries. That is wasteful.
 
+{% include promo.html %}
+
 ## The Problem We’re Solving
 
 By default, caches are cautious. If the URL differs, the cache key differs, and,
@@ -314,6 +316,8 @@ bust cache until someone has explicitly decided they are safe to ignore.
 
 Again, this is not wasteful—it’s just the same behaviour we’ve always had.
 
+{% include promo.html %}
+
 ## Use It Carefully
 
 This header is only as good as the assumptions behind it: if two URLs really do