Add FAQ front matter to four SEO posts

Author: csswizardry

_posts/2017-02-12-base64-encoding-and-performance.md

@@ -4,6 +4,17 @@ title: "Base64 Encoding & Performance, Part 1: What’s Up with Base64?"
 date: 2017-02-12 12:11:13
 categories: Web Development
 meta: "A look at the many huge disadvantages of Base64 encoding assets into your CSS"
+faq:
+  - question: "What is Base64 encoding?"
+    answer: "Base64 is a way of representing binary data as text so that assets such as images or fonts can be embedded directly inside files like CSS or HTML."
+  - question: "Is Base64 bad for performance?"
+    answer: "Often, yes. Embedding assets as Base64 can increase file size, weaken caching, and force unrelated resources to download together, which can make delivery less efficient."
+  - question: "Why does Base64 make files bigger?"
+    answer: "Base64 encoding expands binary data into a text representation, which usually increases the amount of data that has to be transferred."
+  - question: "Should I inline images in CSS with Base64?"
+    answer: "Usually not by default. While inlining can reduce request count, it often creates bigger, less cacheable files and can make overall performance worse."
+  - question: "Does Gzip solve the problems with Base64?"
+    answer: "Not completely. Compression can reduce some of the overhead, but it does not remove the underlying trade-offs around caching, coupling, and inflated transfer size."
 ---
 
 **This is the first in a two-part post. [Read Part

_posts/2018-05-21-identifying-auditing-discussing-third-parties.md

@@ -4,6 +4,17 @@ title: "Identifying, Auditing, and Discussing Third Parties"
 date: 2018-05-21 10:01:21
 categories: Web Development
 meta: "Gathering data about third-parties using free and open-source tooling"
+faq:
+  - question: "How do I identify third-party scripts on my site?"
+    answer: "A practical starting point is to inspect requests in your tooling and group them by origin so you can see which resources are being loaded from third-party domains."
+  - question: "How do I audit third parties for performance?"
+    answer: "You audit them by measuring what they load, how often they are requested, how much they weigh, how long they block or delay work, and what business value they provide in return."
+  - question: "Why are third parties bad for performance?"
+    answer: "They are not always bad, but they often introduce extra requests, extra bytes, extra execution time, and extra operational risk that your team does not fully control."
+  - question: "How do I talk to stakeholders about third-party performance costs?"
+    answer: "The most effective approach is to bring evidence: clear measurements, concrete trade-offs, and a business-focused explanation of what each third party is costing in speed, resilience, and user experience."
+  - question: "Should I remove every third party?"
+    answer: "No. The goal is not to remove everything, but to understand each dependency, justify its cost, and govern it properly."
 ---
 
 A large part of my performance consultancy work is auditing and subsequently

_posts/2018-10-27-three-types-of-performance-testing.md

@@ -4,6 +4,17 @@ title: "The Three Types of Performance Testing"
 date: 2018-10-27 10:02:39
 categories: Web Development
 meta: "How can we make it easier for businesses to understand when and what to measure?"
+faq:
+  - question: "What are the three types of performance testing?"
+    answer: "This article frames them as proactive, reactive, and passive testing: work done before problems happen, work done in response to issues, and ongoing monitoring that watches performance continuously."
+  - question: "What is proactive performance testing?"
+    answer: "Proactive testing is the work you do ahead of time to prevent problems, such as benchmarking, profiling, auditing, and making performance part of your development process."
+  - question: "What is reactive performance testing?"
+    answer: "Reactive testing happens when a problem has already appeared and you need to investigate, diagnose, and fix it."
+  - question: "What is passive performance testing?"
+    answer: "Passive testing is continuous measurement and monitoring in the background, often through tools that track real-world performance over time."
+  - question: "Which type of performance testing should I start with?"
+    answer: "You usually need all three eventually, but the right starting point depends on your situation: proactive work prevents issues, reactive work solves current ones, and passive monitoring keeps you informed over time."
 ---
 
 A lot of companies—even if they are aware that performance is key to their

_posts/2023-12-09-correctly-configure-preconnections.md

@@ -5,6 +5,17 @@ date: 2023-12-09 19:17:04
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2023/12/bbc-news-waterfall-initial.png"
 meta: "We’re probably familiar with preconnect, but are we getting it right?"
+faq:
+  - question: "What does preconnect do?"
+    answer: "preconnect tells the browser to set up the connection to another origin early by performing DNS lookup, TCP connection setup, and usually TLS negotiation before the resource itself is requested."
+  - question: "What is the difference between preconnect and dns-prefetch?"
+    answer: "dns-prefetch only resolves the hostname. preconnect goes further by also opening the transport connection, which makes it more powerful but also more expensive."
+  - question: "Should I preconnect to every third-party origin?"
+    answer: "No. preconnecting to too many origins can waste resources and reduce the benefit, so it is best reserved for a small number of genuinely important, early-needed connections."
+  - question: "When should I use crossorigin with preconnect?"
+    answer: "You should use crossorigin when the eventual request will need a CORS-enabled connection, such as many font requests, so the warmed connection can be reused properly."
+  - question: "Can too many preconnects hurt performance?"
+    answer: "Yes. Because preconnect is relatively expensive, overusing it can create unnecessary work and compete with more important requests."
 ---
 
 A trivial performance optimisation to help speed up third-party or other-origin