← Tutti gli articoli

Tutorial

Conteggio parole e tempo di lettura su qualsiasi pagina

15 maggio 2026 · di JustZix Team

Quanto ci vorrà per questo articolo — due minuti o venti? La maggior parte delle pagine non lo dice. Questa regola aggiunge in cima a ogni articolo una piccola barra: numero di parole e tempo di lettura stimato.

La regola

Il JavaScript della regola, pattern di URL per un blog o un sito che leggi:

const art = document.querySelector('article, main, .entry-content');
if (art) {
  const words = art.innerText.trim().split(/\s+/).length;
  const min = Math.max(1, Math.round(words / 200));
  const bar = document.createElement('div');
  bar.textContent = words + ' parole · ~' + min + ' min di lettura';
  bar.style.cssText =
    'position:sticky;top:0;z-index:9999;padding:6px 12px;' +
    'background:#1f2937;color:#fff;font:13px/1.4 system-ui;' +
    'text-align:center';
  art.prepend(bar);
}

Come funziona

Contare le parole

art.innerText è il testo visibile dell'articolo (senza i tag HTML). split(/\s+/) lo taglia a ogni sequenza di spazi bianchi — la lunghezza dell'array è il conteggio delle parole. Semplice e abbastanza accurato.

200 parole al minuto

Il ritmo medio di lettura-con-comprensione è di 200–250 parole al minuto. Prendiamo 200 come via di mezzo prudente; Math.max(1, ...) impedisce a un testo breve di mostrare «0 min».

Una barra sticky

position: sticky; top: 0 mantiene la barra visibile mentre scrolli nell'articolo — una piccola informazione, sempre a portata.

Variante — una barra di avanzamento della lettura

Vuoi vedere quanto resta dell'articolo? Aggiungi in cima una barra sottile che cresce con lo scroll:

const p = document.createElement('div');
p.style.cssText =
  'position:fixed;top:0;left:0;height:3px;z-index:99999;' +
  'background:#14b8a6;width:0';
document.body.appendChild(p);
addEventListener('scroll', () => {
  const h = document.body.scrollHeight - innerHeight;
  p.style.width = (scrollY / h * 100) + '%';
});

Trappole

• Conta anche didascalie e codice. innerText include tutto nel contenitore — blocchi di codice inclusi. Per un articolo tipico la differenza è trascurabile.
• Scelta del contenitore. Se il contatore mostra un numero assurdo, querySelector ha colpito un elemento troppo ampio — restringi il selettore.

Vedi anche

• Esempi — altre regole pronte all'uso
• Modalità lettura — comfort per leggere fino in fondo
• Monitor Web Vitals — un'altra barra informativa sulla pagina

Installa JustZix — e sappi in anticipo a cosa vai incontro.