Add cross sells to posts

Author: csswizardry

_posts/2019-03-04-cache-control-for-civilians.md

@@ -159,6 +159,8 @@ a fresher response), but if the server responds favourably, the network transfer
 is only a file’s headers: the body can be grabbed from cache rather than
 redownloaded.
 
+{% include cross-sell.html %}
+
 So, like I say, this is a smart way to combine freshness and the possibility of
 getting a file from cache, but it will hit the network for at least an HTTP
 header response.
@@ -321,6 +323,8 @@ served.
 
 ## `no-transform`
 
+{% include cross-sell.html %}
+
 `no-transform` doesn’t have anything do with storing, serving, or revalidating
 freshness, but it does instruct intermediaries that they cannot modify, or
 _transform_, any of the response.
@@ -420,6 +424,8 @@ that release. This is potentially wasteful, so prefer options (1) or (2).
 
 ### `Clear-Site-Data`
 
+{% include cross-sell.html %}
+
 Cache invalidation is hard—[famously
 so](https://martinfowler.com/bliki/TwoHardThings.html)—so there’s [a spec
 currently underway](https://www.w3.org/TR/clear-site-data/) that helps
@@ -469,6 +475,8 @@ Request URL: /account/
 Cache-Control: no-store
 ```
 
+{% include cross-sell.html %}
+
 As per the spec, this would be sufficient to prevent a browser persisting the
 response to disk at all, across private and shared caches:
 

_posts/2022-03-28-optimising-largest-contentful-paint.md

@@ -55,6 +55,8 @@ not limited to):
 * First Paint
 * First Contentful Paint
 
+{% include cross-sell.html %}
+
 If any of these are slow, you’re already on the back foot, and they’re going to
 have a knock-on effect on your LCP. The metrics above don’t matter in and of
 themselves, but it’s going to help your LCP if you can get them as low as
@@ -163,6 +165,8 @@ The initial demos can be found at:
   <div style="background-image: url(lcp.jpg)">...</div>
   ```
 
+{% include cross-sell.html %}
+
 [The WebPageTest
 comparison](https://webpagetest.org/video/compare.php?tests=%2C220320_BiDc0C_6AJ%2C220320_BiDcJT_6AP%2C220320_BiDcN0_6AM%2C220320_BiDc56_6AK&thumbSize=200&ival=100&end=full)
 is available for you to look through, though we’ll pick apart individual
@@ -239,6 +243,8 @@ degraded LCP scores for your site.
 <figcaption>This bug is fixed in Chrome 102.</figcaption>
 </figure>
 
+{% include cross-sell.html %}
+
 Because of the current reporting bug, `<image>` in `<svg>` is likely to go from
 being (inadvertently) one of the fastest LCP types, to one of the slowest. In
 the unlikely event that you are using `<image>` in `<svg>`, it’s probably
@@ -313,6 +319,8 @@ which is far too late. We don’t like `background-image` LCPs.
 
 #### Getting Around `background-image` Issues
 
+{% include cross-sell.html %}
+
 If you currently have a site whose LCP is a `background-image`, you might be
 thinking of refactoring or rebuilding that component right now. But, happily,
 there’s a very quick workaround that requires almost zero effort: let’s
@@ -356,6 +364,8 @@ In summary:
 
 ## Don’t Shoot Yourself in the Foot
 
+{% include cross-sell.html %}
+
 Alright! Now we know which are the best candidates, is there anything else can
 do (or avoid doing) to make sure we aren’t running slowly? It turns out there
 are plenty of things that folks do which inadvertently hold back LCP scores.

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

@@ -185,6 +185,8 @@ The first takeaway is: **don’t upscale your LQIP**.
 
 ### Calculating the Upscaling Penalty
 
+{% include cross-sell.html %}
+
 Let’s get a bit more detailed about upscaling and penalties. Some [close reading
 of the spec](https://www.w3.org/TR/largest-contentful-paint/#sec-add-lcp-entry)
 tells us exactly how this works. It’s not the easiest thing to digest, but I’ll
@@ -277,6 +279,8 @@ order to register a fast LCP time:
 > displayed.  
 > — [Largest Contentful Paint change in Chrome 112 to ignore low-entropy images](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2023_04_lcp.md)
 
+{% include cross-sell.html %}
+
 This one is much simpler to make sense of. In order for an image to be counted
 as an LCP candidate, it needs to contain at least 0.05 bits of data per pixel
 displayed.
@@ -407,6 +411,8 @@ size)</a></figcaption>
 
 ## Implementing Low-Quality Image Placeholders
 
+{% include cross-sell.html %}
+
 My implementation becomes incredibly simple as I’m using a background image.
 This means I can simply layer up the progressively higher-resolution files using
 CSS’ multiple backgrounds:

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

@@ -44,6 +44,8 @@ a `max-age` that equates to forever?
 
 ## `immutable`
 
+{% include cross-sell.html %}
+
 If we’re confident that we can cache a file for a year, we must be also quite
 confident that it never _really_ changes. After all, a year is a very long time
 in internet timescales. If we have this degree of confidence that a file won’t
@@ -121,6 +123,8 @@ It turns out there is a maximum value for `max-age`, and it’s defined in [RFC
 > the cache **MUST** consider the value to be 2147483648 (2<sup>31</sup>) or the
 > greatest positive integer it can conveniently represent.
 
+{% include cross-sell.html %}
+
 The spec says caches should accept a maximum `max-age` value of
 whatever-it’s-been-told, falling back to 2,147,483,648 seconds (which is 68
 years), or failing that, falling back to as-long-as-it-possibly-can. This

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

@@ -75,6 +75,8 @@ In this scenario, I am explicitly prerendering named and known URLs, with
 a loose idea of a potential and likely user journey—I’m warming up what I think
 might be the visitor’s next page.
 
+{% include cross-sell.html %}
+
 While these are both functional and beneficial, I wanted to do more. My site,
 although not very obviously, has two sides to it: the blog, for folk like you,
 and the commercial aspect, for [potential clients](/services/). While steering
@@ -432,6 +434,8 @@ We could apply these against this example page:
 </footer>
 ```
 
+{% include cross-sell.html %}
+
 * Top-level navigation items with `data-prefetch=prerender` (e.g. the _About_
   page) are immediately prerendered.
 * Sub-level navigation items with `data-prefetch` (e.g. the _Solutions_ page)

_posts/2024-12-04-licensing-code-on-css-wizardry.md

@@ -29,6 +29,8 @@ Over the years, conscientious developers and organisations have occasionally
 reached out to ask if they can use my code in commercial settings. My answer has
 always been an informal _yes!_
 
+{% include cross-sell.html %}
+
 However, I feel it’s time to provide more structure and clarity. From now on,
 everything shared on `csswizardry.com`—unless stated otherwise—is covered by the
 MIT License.
@@ -50,6 +52,8 @@ purposes.
 At the same time, it protects me by absolving any liability for how the content
 is used. It’s a win-win.
 
+{% include cross-sell.html %}
+
 The MIT License is already a familiar standard in the open-source world, so the
 chances are you or your company have used work under this license before. It’s
 simple, clear, and works perfectly for my goals.