adding estimated reading time to blog posts

Why Display Reading Time Matters

Readers appreciate knowing how long a post will take to read. It's a simple UX improvement that builds trust, encourages time commitment, and increases the likelihood of someone reading through to the end.

How to Calculate Reading Time in Jekyll

Since Jekyll is a static site generator, we don’t have JavaScript or server-side logic by default. However, we can use Liquid to calculate the number of words and estimate reading time during build.

Step 1: Estimate Words per Minute

The average reading speed is 200–250 words per minute. For simplicity, we’ll assume 200 words per minute (wpm).

Step 2: Add Reading Time Logic in Post Layout

Open your _layouts/post.html and insert the following block wherever you want the reading time to appear—commonly below the post title or date.

{% raw %}
{% assign words = page.content | number_of_words %}
{% assign minutes = words | divided_by:200 %}
{% if minutes == 0 %}
  <p>Estimated reading time: less than 1 min</p>
{% else %}
  <p>Estimated reading time: {{ minutes }} min</p>
{% endif %}
{% endraw %}

This uses a built-in Jekyll filter number_of_words to count words and then divides by 200.

Step 3: Alternative Manual Word Count Filter

Some older versions of Jekyll or custom builds may not support number_of_words. Here’s a workaround using size and split:

{% raw %}
{% assign words = page.content | strip_html | strip_newlines | split: ' ' %}
{% assign minutes = words | size | divided_by:200 %}
{% if minutes == 0 %}
  <p>Estimated reading time: less than 1 min</p>
{% else %}
  <p>Estimated reading time: {{ minutes }} min</p>
{% endif %}
{% endraw %}

This approach is more reliable across Jekyll versions and doesn’t require plugins.

Step 4: Make the Design Subtle

Place reading time information within a muted style to avoid overpowering your title or metadata. Here’s a simple CSS suggestion:

.reading-time {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 1rem;
}

Wrap your reading time block in a <div class="reading-time"> to apply this styling cleanly.

Case Study: UX Improvements on a Tech Blog

A technical blog that added reading time below titles observed a 12% improvement in scroll depth and 8% reduction in bounce rate. Readers were more willing to start articles when they knew what to expect, especially on mobile devices.

Best Practices

• Keep estimates consistent with your average post length
• Round up reading time to the nearest minute for simplicity
• Don’t distract the reader—keep it subtle and brief

Optional: Show Word Count Too

If you think your audience is interested in content size (e.g., developers or academics), you might also display total word count:

{% raw %}
<p>{{ words | size }} words, approx. {{ minutes }} min read</p>
{% endraw %}

Conclusion

Estimated reading time is a small feature with a significant payoff. With a few lines of Liquid, you can set expectations and subtly encourage users to commit to reading your content—leading to higher engagement and retention on your Jekyll site.