feat: Add social hero references to host pages

Author: csswizardry

_posts/2018-11-09-css-and-network-performance.md

@@ -17,6 +17,7 @@ faq:
     answer: "Inlining a small amount of critical CSS can help the browser render above-the-fold content sooner by avoiding an extra render-blocking stylesheet request."
   - question: "Where should I place my stylesheet links?"
     answer: "That depends on the constraints, but in general you want to avoid accidentally blocking more important work and you should place stylesheets deliberately rather than by habit."
+main: "/wp-content/uploads/2018/11/css-performance-main.png"
 ---
 
 Despite having been called <cite>CSS Wizardry</cite> for over a decade now,

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

@@ -19,6 +19,7 @@ faq:
     answer: "immutable tells the browser that a fresh resource will not change during its cache lifetime, which helps avoid unnecessary revalidation on refresh."
   - question: "How should I update long-lived cached files?"
     answer: "The safest approach is cache busting with fingerprinted filenames, so you can cache assets aggressively while still forcing clients to fetch a new version when the file changes."
+main: "/wp-content/uploads/2019/03/cache-control-main.png"
 ---
 
 <p class="c-highlight">Try out the <a href="/max-age/"><code>max-age</code>

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

@@ -16,6 +16,7 @@ faq:
     answer: "Slow TTFB can come from network latency, redirects, slow application logic, overloaded infrastructure, or cache misses closer to origin."
   - question: "How can I improve TTFB?"
     answer: "Common improvements include reducing server work, caching more effectively, cutting redirects, using a CDN, and bringing content physically closer to users."
+main: "/wp-content/uploads/2019/08/ttfb-main.png"
 ---
 
 I’m working on a client project at the moment and, as they’re an ecommerce site,

_posts/2020-05-19-the-fastest-google-fonts.md

@@ -20,6 +20,7 @@ faq:
     answer: "Sometimes. preload can speed up font discovery, but it needs to be used carefully because it can also add unnecessary work if applied indiscriminately."
   - question: "Is preconnect useful for Google Fonts?"
     answer: "Yes. preconnect can reduce the setup cost of talking to the Google Fonts origins, which often helps the fonts start downloading sooner."
+main: "/wp-content/uploads/2020/05/google-fonts-main.png"
 ---
 
 <div class="c-highlight  mb">

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

@@ -21,6 +21,7 @@ faq:
     answer: "You need a Mac, an iPhone, Safari, and the relevant developer and Web Inspector settings enabled so the phone can be inspected remotely."
   - question: "Why is testing on iOS important?"
     answer: "Because iOS Safari behaves differently enough that issues with rendering, networking, or performance can go unnoticed if you only test in desktop browsers or Chrome."
+main: "/wp-content/uploads/2021/02/mobile-safari-main.png"
 ---
 
 <p class="c-highlight"><strong>N.B.</strong> This article is no longer accurate,

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

@@ -23,6 +23,7 @@ faq:
     answer: "Yes. Fade-ins and similar effects can delay when the browser considers the content fully rendered, which can worsen LCP."
   - question: "Are image-based LCPs always best?"
     answer: "Not necessarily. In many cases a text-based candidate is easier to prioritise and can produce a faster, more reliable LCP than a heavy image."
+main: "/wp-content/uploads/2022/03/lcp-main.png"
 ---
 
 <!--

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

@@ -17,6 +17,7 @@ faq:
     answer: "DOMContentLoaded is an internal browser event that fires once all deferred JavaScript has finished running."
   - question: "Is DOMContentLoaded useful?"
     answer: "From a user experience perspective, DOMContentLoaded isn’t a great metric to benchmark yourself on. However, from a diagnostic point of view, it can be helpful in determining when your JavaScript has finished executing."
+main: "/wp-content/uploads/2023/07/domcontentloaded-main.png"
 ---
 
 Honestly, I started writing this article for no real reason, and somewhat

_posts/2023-07-24-core-web-vitals-for-search-engine-optimisation.md

@@ -22,6 +22,7 @@ faq:
     answer: "No. Google’s rankings are based on real-world field data, not Lighthouse scores."
   - question: "Does iOS traffic count toward Core Web Vitals for SEO?"
     answer: "No. Core Web Vitals data used for Google Search comes from Chrome data sources, so Safari traffic is not included."
+main: "/wp-content/uploads/2023/07/cwv-seo-main.png"
 ---
 
 ## Updates

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

@@ -24,6 +24,7 @@ faq:
     answer: "The article recommends aiming for a sensible minimum quality threshold rather than making the placeholder as tiny as possible at any cost."
   - question: "How do I verify that an LQIP implementation works?"
     answer: "You should test the real page, confirm which element becomes the LCP candidate, and make sure the placeholder does not slow or replace the final intended image."
+main: "/wp-content/uploads/2023/09/lqip-main.png"
 ---
 
 At the time of writing,

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

@@ -16,6 +16,7 @@ faq:
     answer: "Most teams stick to one year, but RFC9111 states caches MUST honour any value up to 2,147,483,648 seconds—68 years—the largest signed 32-bit integer."
   - question: "Should I swap my 31536000s for 2147483648s?"
     answer: "Maybe, but only for truly immutable, fingerprinted assets. HTML and API responses should keep short or revalidated lifetimes to avoid serving stale data."
+main: "/wp-content/uploads/2023/10/max-max-age-main.png"
 ---
 
 <p class="c-highlight">Try out the <a href="/max-age/"><code>max-age</code>