feat: Add Reading Times to Featured Articles

Author: csswizardry

_layouts/post.html

@@ -22,6 +22,8 @@
             <ins>(last updated on <time datetime="{{ page.last_modified_at | date_to_xmlschema }}" itemprop=dateModified>{{ page.last_modified_at | date: "%-d %B, %Y" }}</time>)</ins>
           {% endif %}
 
+          {% if page.reading-time %} • {{page.reading-time}} minute read{% endif %}
+
         </p>
 
           <h1 itemprop="name  headline" elementtiming=page-title style="view-transition-name: x-{{ page.date | date: '%Y-%m-%d' }}">{{ page.title }}</h1>

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

@@ -5,6 +5,7 @@ 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?"
+reading-time: 12
 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."

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

@@ -5,6 +5,7 @@ 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!"
+reading-time: 17
 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."

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

@@ -4,6 +4,7 @@ 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?"
+reading-time: 6
 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."

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

@@ -5,6 +5,7 @@ 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."
+reading-time: 15
 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."

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

@@ -5,6 +5,7 @@ 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?!"
+reading-time: 6
 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."

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

@@ -5,6 +5,7 @@ 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"
+reading-time: 11
 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."

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

@@ -5,6 +5,7 @@ date: 2023-07-01 00:01:19
 categories: Web Development
 main: "https://csswizardry.com/wp-content/uploads/2023/06/devtools-dcl.png"
 meta: "Is there any reason to still measure the DOMContentLoaded event? Perhaps…"
+reading-time: 10
 faq:
   - question: "What is DOMContentLoaded?"
     answer: "DOMContentLoaded is an internal browser event that fires once all deferred JavaScript has finished running."

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

@@ -5,6 +5,7 @@ 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."
+reading-time: 23
 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."

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

@@ -6,6 +6,7 @@ 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?"
+reading-time: 12
 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."