Add FAQ front matter to learn articles

csswizardry · csswizardry · commit c4a0e33e008a · 2026-04-24T15:17:53.000+01:00
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -47,6 +47,22 @@ <h1 itemprop="name  headline" elementtiming=page-title style="view-transition-na
 
           {{ content }}
 
+          {% if page.faq and page.faq.size > 0 %}
+
+            <hr>
+
+            <h2>Frequently Asked Questions</h2>
+
+            <div class="c-faq">
+              {% for item in page.faq %}
+                <details>
+                  <summary>{{ item.question }}</summary>
+                  <p>{{ item.answer }}</p>
+                </details>
+              {% endfor %}
+            </div>
+          {% endif %}
+
       </div><!-- /.s-post -->
 
         {% if page.faq %}
diff --git a/_posts/2018-11-09-css-and-network-performance.md b/_posts/2018-11-09-css-and-network-performance.md
@@ -5,6 +5,15 @@ date: 2018-11-09 19:57:12
 categories: Web Development
 meta: "How can CSS impact network and resource-loading performance? Can things
 be that serious?"
+faq:
+  - question: "Can CSS affect network performance?"
+    answer: "Yes. CSS can delay rendering, block later requests, and influence how quickly the browser discovers and prioritises other resources."
+  - question: "Is @import bad for performance?"
+    answer: "Usually, yes. @import often creates additional request chains and can delay stylesheet discovery, which is why external stylesheets linked directly in HTML are generally preferable."
+  - question: "Should I inline critical CSS?"
+    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."
 ---
 
 Despite having been called <cite>CSS Wizardry</cite> for over a decade now,
diff --git a/_posts/2019-03-04-cache-control-for-civilians.md b/_posts/2019-03-04-cache-control-for-civilians.md
@@ -5,6 +5,17 @@ date: 2019-03-04 01:21:39
 last_modified_at: 2025-06-05
 categories: Web Development
 meta: "What does Cache-Control really do? In basic terms? Let’s find out!"
+faq:
+  - question: "What does Cache-Control do?"
+    answer: "Cache-Control tells browsers and intermediary caches how a response should be stored, how long it can be reused for, and when it needs to be revalidated."
+  - question: "What is the difference between no-store and no-cache?"
+    answer: "no-store means do not store the response at all. no-cache still allows storage, but the cached response must be successfully revalidated before it can be reused."
+  - question: "What does max-age mean?"
+    answer: "max-age defines how long a response can be considered fresh. While it is fresh, the browser can usually reuse it without contacting the server."
+  - question: "What is immutable used for?"
+    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."
 ---
 
 ## Why Caching Headers Still Matter for Web Performance in 2025
diff --git a/_posts/2019-08-08-time-to-first-byte-what-it-is-and-why-it-matters.md b/_posts/2019-08-08-time-to-first-byte-what-it-is-and-why-it-matters.md
@@ -4,6 +4,15 @@ title: "Time to First Byte: What It Is and How to Improve It"
 date: 2019-08-08 02:06:56
 categories: Web Development
 meta: "Just how much does TTFB matter when it comes to front-end performance?"
+faq:
+  - question: "What is Time to First Byte?"
+    answer: "Time to First Byte measures how long it takes from making a request until the first byte of the response arrives back from the server."
+  - question: "Why does TTFB matter?"
+    answer: "TTFB matters because every downstream task depends on it. A slow first byte delays rendering, resource discovery, and other performance milestones."
+  - question: "What causes a slow TTFB?"
+    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."
 ---
 
 I’m working on a client project at the moment and, as they’re an ecommerce site,
diff --git a/_posts/2020-05-19-the-fastest-google-fonts.md b/_posts/2020-05-19-the-fastest-google-fonts.md
@@ -5,6 +5,15 @@ date: 2020-05-19 17:35:04
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2020/05/filmstrip-foit.png"
 meta: "Google Fonts is fast. Now it’s faster. Much faster."
+faq:
+  - question: "What is the fastest way to load Google Fonts?"
+    answer: "It depends on the trade-offs you want, but strong options include reducing the number of files requested, using the right loading strategy, and adding supporting hints such as preconnect or preload where appropriate."
+  - question: "Does font-display help Google Fonts performance?"
+    answer: "Yes. font-display can improve perceived performance by controlling how text is shown while the font loads, with swap and optional being especially useful."
+  - question: "Should I preload Google Fonts?"
+    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."
 ---
 
 <div class="c-highlight  mb">
diff --git a/_posts/2021-02-26-measuring-network-performance-in-mobile-safari.md b/_posts/2021-02-26-measuring-network-performance-in-mobile-safari.md
@@ -5,6 +5,15 @@ date: 2021-02-26 01:41:12
 categories: Web Development
 main: "https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/wp-content/uploads/2021/02/inspecting-safari-02.png"
 meta: "How often do you test your site in iOS Safari? Do you even know how?!"
+faq:
+  - question: "How can I test web performance in iOS Safari?"
+    answer: "A reliable approach is to use a real iPhone and inspect it through Safari’s developer tools on a Mac, or use WebPageTest where appropriate."
+  - question: "Can I just emulate Mobile Safari?"
+    answer: "Not fully. Emulation can be helpful, but it is not a complete substitute for testing on real iOS hardware and Safari itself."
+  - question: "What do I need to debug an iPhone with Safari DevTools?"
+    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."
 ---
 
 <p class="c-highlight"><strong>N.B.</strong> This article is no longer accurate,
diff --git a/_posts/2022-03-28-optimising-largest-contentful-paint.md b/_posts/2022-03-28-optimising-largest-contentful-paint.md
@@ -5,6 +5,17 @@ date: 2022-03-28 23:02:11
 categories: Web Development
 main: "https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/wp-content/uploads/2022/03/chart-full.png"
 meta: "Let’s look at some more technical and non-obvious aspects of optimising Largest Contentful Paint"
+faq:
+  - question: "What is Largest Contentful Paint?"
+    answer: "Largest Contentful Paint is a Core Web Vitals metric that measures when the largest visible content element in the viewport finishes rendering."
+  - question: "What usually improves LCP most?"
+    answer: "The biggest wins usually come from improving server response times, choosing a good LCP candidate, and making sure the browser can discover and prioritise it quickly."
+  - question: "Should I lazy-load my LCP image?"
+    answer: "No. Lazy-loading your LCP candidate usually delays it and makes the metric worse."
+  - question: "Can animations or fades hurt LCP?"
+    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."
 ---
 
 <!--
diff --git a/_posts/2023-07-24-core-web-vitals-for-search-engine-optimisation.md b/_posts/2023-07-24-core-web-vitals-for-search-engine-optimisation.md
@@ -5,6 +5,17 @@ date: 2023-07-24 00:00:00
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2023/07/cwv-seo.png"
 meta: "There’s still a lot of misunderstanding about CWV for SEO. Let’s work it out together."
+faq:
+  - question: "Do Core Web Vitals affect SEO?"
+    answer: "Yes, but only modestly. Core Web Vitals are a ranking signal, not the dominant factor, and they rarely outweigh stronger content or relevance."
+  - question: "Are Core Web Vitals a tie-breaker?"
+    answer: "That is the most practical way to think about them. They can help separate otherwise similar results, but they are not a substitute for strong content and search intent alignment."
+  - question: "Do I need to pass Core Web Vitals on every page?"
+    answer: "No. Rankings are assessed at the URL level, so some pages can fail without dragging every other page down with them."
+  - question: "Do Lighthouse or PageSpeed Insights scores affect rankings?"
+    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."
 ---
 
 ## Updates
diff --git a/_posts/2023-09-28-the-ultimate-lqip-lcp-technique.md b/_posts/2023-09-28-the-ultimate-lqip-lcp-technique.md
@@ -6,6 +6,17 @@ last_modified_at: 2025-09-05
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2023/09/csswizardry.com-lcp.jpg"
 meta: "Can Low-Quality Image Placeholders and LCP play nicely together?"
+faq:
+  - question: "Can low-quality image placeholders hurt LCP?"
+    answer: "Yes. If implemented badly, LQIPs can delay or interfere with the real Largest Contentful Paint candidate and make the metric worse."
+  - question: "Can LQIPs and LCP work well together?"
+    answer: "Yes. With the right approach, you can keep the UX benefits of a placeholder without compromising the final LCP result."
+  - question: "Should I upscale an LQIP aggressively?"
+    answer: "No. Over-upscaling a tiny placeholder can introduce a visible quality penalty and undermine the overall result."
+  - question: "How small should an LQIP be?"
+    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."
 ---
 
 At the time of writing,
diff --git a/_posts/2023-10-17-the-three-c-concatenate-compress-cache.md b/_posts/2023-10-17-the-three-c-concatenate-compress-cache.md
@@ -5,6 +5,17 @@ date: 2023-10-17 00:00:00
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2023/10/chart-all.png"
 meta: "We know we should do it, but do we know how?"
+faq:
+  - question: "What are the three Cs of front-end performance?"
+    answer: "They are concatenate, compress, and cache: three practical ways to reduce request overhead, transfer size, and repeat work."
+  - question: "Do we still need concatenation with HTTP/2 or HTTP/3?"
+    answer: "Not always, but not never either. Modern protocols reduce the need for blanket concatenation, yet there are still cases where fewer requests can be beneficial."
+  - question: "Is compression still important on the modern web?"
+    answer: "Absolutely. Compression remains one of the highest-return ways to reduce payload size and improve delivery speed."
+  - question: "Why is caching one of the three Cs?"
+    answer: "Because the fastest request is often the one you do not need to make again. Good caching eliminates repeat transfers and avoids unnecessary latency."
+  - question: "Can we drop our build tools yet?"
+    answer: "Sometimes, but not universally. The right answer depends on what your tooling is doing for concatenation, compression, caching, and overall delivery strategy."
 ---
 
 I began writing this article in early July 2023 but began to feel a little
diff --git a/_posts/2024-09-13-optimising-for-high-latency-environments.md b/_posts/2024-09-13-optimising-for-high-latency-environments.md
@@ -5,6 +5,15 @@ date: 2024-09-16 11:01:48
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2024/09/diagram-all.png"
 meta: "We can’t do much to change latency, so how can we work around it?"
+faq:
+  - question: "What is high latency in web performance?"
+    answer: "High latency means requests take a long time to begin or complete because of network round-trip time, even before transfer size becomes the main issue."
+  - question: "Can I reduce latency itself?"
+    answer: "Usually only indirectly. You often cannot change the user’s network conditions, so the practical work is reducing round trips, avoiding new connections, and hiding latency where possible."
+  - question: "How do I optimise for high-latency environments?"
+    answer: "Common strategies include cutting transfer size, using a CDN, avoiding redirects and preflights, reusing connections, and caching aggressively."
+  - question: "Do preconnect and caching help with latency?"
+    answer: "Yes. preconnect can pay connection setup costs earlier, and good caching avoids repeated trips across a slow network altogether."
 ---
 
 Last week, I posted [a short update on
diff --git a/_posts/2024-12-02-a-layered-approach-to-speculation-rules.md b/_posts/2024-12-02-a-layered-approach-to-speculation-rules.md
@@ -6,6 +6,17 @@ last_modified_at: 2025-06-05
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2024/12/speculation-rules-poster.jpg"
 meta: "The new Speculation Rules API is incredibly powerful, but we can do so much more! By taking a layered approach, we can add more progressive functionality."
+faq:
+  - question: "What are Speculation Rules?"
+    answer: "Speculation Rules are browser instructions that let you prefetch or prerender likely future navigations so the next page can load much faster."
+  - question: "What is the difference between prefetch and prerender?"
+    answer: "Prefetch fetches resources ahead of time, while prerender goes much further and prepares the destination page in advance so navigation can feel almost instant."
+  - question: "Why use a layered approach to Speculation Rules?"
+    answer: "A layered approach lets you start with safer, cheaper behaviour and progressively add more aggressive speculation where the payoff is higher and the risks are acceptable."
+  - question: "Should every link be prerendered?"
+    answer: "No. Prerendering everything is usually too expensive and too risky, so you should choose targets carefully and apply clear opt-in or opt-out rules."
+  - question: "How can I clear Speculation Rules cache?"
+    answer: "One option is Clear-Site-Data, which can be used to explicitly wipe prefetched or prerendered state when you need a hard reset."
 ---
 
 I’ve always loved doing slightly unconventional and crafty things with simple
diff --git a/_posts/2026-04-02-what-is-css-containment-and-how-can-i-use-it.md b/_posts/2026-04-02-what-is-css-containment-and-how-can-i-use-it.md
@@ -5,6 +5,17 @@ date: 2026-04-02 11:30:00
 categories: Web Development
 main: ""
 meta: "CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely."
+faq:
+  - question: "What is CSS containment?"
+    answer: "CSS containment is a way to isolate parts of the page so the browser can limit how far layout, paint, size, or style calculations need to spread."
+  - question: "What does the contain property do?"
+    answer: "The contain property tells the browser which kinds of work a component can keep to itself, using values such as layout, paint, size, and style."
+  - question: "When should I use CSS containment?"
+    answer: "It works best on self-contained UI islands such as drawers, widgets, panels, or components whose internal changes should not affect the rest of the page."
+  - question: "What is the difference between contain and content-visibility?"
+    answer: "contain constrains browser work around a component, while content-visibility can go further by skipping work for off-screen content until it is needed."
+  - question: "Can CSS containment cause bugs?"
+    answer: "Yes. It can introduce clipping, sizing surprises, new stacking contexts, and other side effects, so it should be applied deliberately and tested carefully."
 ---
 
 Continuing my work on _web performance for design systems_, I want to look at
