How I Built a Zero-Dependency, 1KB Reading Time Engine for Plain Text, HTML, and Markdown

Let's be honest: as modern web developers, we love adding content metrics to our blogs, portfolios, and docs portals. A simple "3 min read" badge is one of those tiny user experience touches that immediately helps set reader expectations before they commit to an article.

But when you look under the hood of standard reading time libraries on npm, things get messy fast.

Most existing solutions come with a hidden tax: bloated bundles, a heavy trail of third-party dependencies, and rigid, fragile parsers that break the moment you throw nested HTML tags or raw Markdown syntax at them.

To solve this, I set out to build a lightweight, production-grade library: count-read-time. It is a universal reading-time engine that packs intelligent multi-syntax parsing, dynamic media scaling, and code-block tracking into a package that weights under 1 kB (minified + gzipped).

Here is the honest developer breakdown of how the engine works, how I optimized it to absolute zero dependencies, and how you can use it in your projects today.

1. The Core Problem: Why Generic Parsers Bloat Your Bundles

If your blog pulls rich content from a headless CMS (like Sanity, Strapi, or local Markdown/MDX files) as large HTML or Markdown strings, your serverless edge functions or client-side bundles shouldn't have to carry heavy parser tools.

Most standard libraries rely on massive regular expression blocks or full third-party parser engines (like marked or jsdom) to calculate word counts. While these are excellent for rendering layouts, using them just to parse raw text introduces significant performance lag.

When building count-read-time, I set a hard constraint: keep it completely zero-dependency and under 1.5kB minified, while maintaining 99%+ accuracy across raw text, HTML tags, and Markdown syntax.

2. Under the Hood: How the Engine Works

The library splits text processing into a clean, sequential micro-monolith architecture:

2.1 The Regex Stripping Pipeline

Instead of spinning up a virtual DOM or full AST trees (which would bloat the bundle), the engine uses highly optimized, non-backtracking regular expression passes:

1. HTML Stripping: Removes all structural tags (<p>, <div>, etc.) and script blocks, preserving only raw readable text.
2. Markdown Cleanup: Bypasses headers (#, ##), bold/italic formatting tags, link brackets, and MDX frontmatter headers.
3. Programming Code Blocks: Prevents massive inline code snippets or code blocks from artificially inflating reading times—a major flaw in standard text counters.

2.2 The Media Latency Math (Humanized Scaling)

Humans don't read images at a static speed. Your brain takes longer to process the first few diagrams in an article, but as you scroll down, your visual scanning speed accelerates.

The engine implements a decaying exponential scale to calculate media reading overhead:

Instead of multiplying images by a flat 10 seconds, count-read-time scales visual delays dynamically—12 seconds for the first image, 11 for the second, 10 for the third, decaying down to a floor value of 3 seconds from the 10th image onwards. This closely mimics real human cognitive behavior.

3. Comparative Performance Metrics

Here is a realistic technical comparison of count-read-time against common bloated alternatives on the npm registry:

4. Quickstart Integration

The library natively exports both CommonJS and ESM configurations, working flawlessly with standard Node.js backends and modern frameworks like React, Next.js, and Vite.

4.1 Basic Implementation

Here is how to fetch and parse any Markdown or text file with zero configurations:

import estimateReadTime from 'count-read-time';
import fs from 'fs';
// Read content from your data source
const markdownContent = fs.readFileSync('POST.md', 'utf-8');
// Calculate reading metrics dynamically
const readingStats = estimateReadTime(markdownContent);
console.log(readingStats);
/* Output:
{ 
  text: '3 min read', 
  words: 642, 
  time: 192600 
}
*/

4.2 Custom WPM and Formats

For technical blogs or research journals where the reading pace is naturally slower, you can pass customized parameters:

const customizedMetrics = estimateReadTime(markdownContent, {
  wpm: 150,        // Slower reading pace for technical logs
  format: 'coffee' // Appends dynamic visual badges directly to the output
});
console.log(customizedMetrics); 
// Output: "☕ 4 min read"

5. Conclusion & Distribution

Building professional developer tools isn't just about making the code work; it's about making it sustainable, zero-dependency, and lightweight enough for modern serverless and edge architectures. By skipping the dependency clutter and targeting pure, structured string manipulation loops, count-read-time provides a robust, production-grade solution.

You can install the package instantly via your terminal:

npm i count-read-time

📦 Project Assets:

• 🌟 Explore the active code repository on the official GitHub Repository.
• 📦 Download and read package parameters on the official npm Registry Distribution.

Have any questions about writing lightweight, zero-dependency utility libraries or configuring dual ESM/CommonJS modules? Let's discuss in the comments below!