Why you should add Reading Time?

A small Time to Read label can improve the user experience of your blog instantly.

It helps readers estimate how long an article will take before they start reading it.

What it will render

After this guide, you can render:

<small>5 min read</small>

Example:

5 min read
10 min read
15 min read

Step 1 - Create a ReadingTime Helper

Create a helper file:

src/helpers/reading-time.helper.ts

add the following code:

export class ReadingTimeHelper {
	private static WordsPerMinute: number = 180;

	static getWordCount(content: string): number {
		const cleanedContent: string = content
			.replace(/```[\s\S]*?```/g, ' ')
			.replace(/`.*?`/g, ' ')
			.replace(/[#>*_\-\[\]\(\)!]/g, ' ')
			.replace(/\s+/g, ' ')
			.trim();

		if (!cleanedContent) {
			return 0;
		}

		return cleanedContent.split(' ').length;
	}

	static getMinutes(content: string): number {
		const rawMinutes: number = Math.max(
			1,
			Math.ceil(this.getWordCount(content) / this.WordsPerMinute)
		);
		return this.roundUpToNextFive(rawMinutes);
	}

	static roundUpToNextFive(minutes: number): number {
		return Math.ceil(minutes / 5) * 5;
	}
}

Step 2 - What This Helper Does

It does three things:

Count Words

The helper removes:

  • code blocks
  • inline code
  • markdown symbols
  • extra spaces

This gives a more realistic word count.

Estimate Reading Time

It uses:

180 words per minute

This is a common average for blog content.

Round Up to Better Values

Instead of showing awkward labels like:

3 min read
7 min read
12 min read

It rounds to:

5 min read
10 min read
15 min read

This usually feels cleaner and more natural.

Step 3 - Use It in Your Astro Component

---
import { ReadingTimeHelper } from '../helpers/reading-time.helper';

const readingTime: number = ReadingTimeHelper.getMinutes(post.body || '');
---

<small>{readingTime} min read</small>

Step 4 - Where to Display It

Include it inside the Post Header, Meta or inside the latest posts like:

<h1>{post.data.title}</h1>
<small>{readingTime} min read</small>

Optional Improvements

You can extend this helper later with:

  • support for multiple languages
  • different reading speeds
  • exclude headings from count
  • show exact minutes instead of 5-step rounding

Final Thoughts

This is one of those tiny features that makes a blog feel polished.

It is simple to build, reusable across your Astro project, and improves the reading experience immediately.

If you’re already generating static content with Astro, this is a great addition to your meta fields.