← Alle Beiträge

Anleitungen

Wortzahl und Lesezeit auf jeder Seite

15 Mai 2026 · von JustZix Team

Wie lange dauert dieser Artikel — zwei Minuten oder zwanzig? Die meisten Seiten sagen es nicht. Diese Regel ergänzt oben an jedem Artikel eine kleine Leiste: Wortzahl und geschätzte Lesezeit.

Die Regel

Das JavaScript der Regel, URL-Muster für einen Blog oder eine Seite, die du liest:

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 + ' Wörter · ~' + min + ' Min. Lesezeit';
  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);
}

Wie es funktioniert

Wörter zählen

art.innerText ist der sichtbare Text des Artikels (ohne HTML-Tags). split(/\s+/) schneidet ihn an jeder Folge von Leerraum — die Array-Länge ist die Wortzahl. Einfach und genau genug.

200 Wörter pro Minute

Das durchschnittliche Lese-mit-Verständnis-Tempo liegt bei 200–250 Wörtern pro Minute. Wir nehmen 200 als vorsichtige Mitte; Math.max(1, ...) verhindert, dass ein kurzer Text „0 Min." zeigt.

Eine Sticky-Leiste

position: sticky; top: 0 hält die Leiste sichtbar, während du in den Artikel scrollst — eine kleine Information, immer griffbereit.

Variante — eine Lesefortschrittsleiste

Willst du sehen, wie viel vom Artikel übrig ist? Ergänze oben eine dünne Leiste, die mit dem Scrollen wächst:

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) + '%';
});

Fallstricke

• Es zählt auch Bildunterschriften und Code. innerText umfasst alles im Container — Code-Blöcke inklusive. Für einen typischen Artikel ist der Unterschied vernachlässigbar.
• Container-Wahl. Zeigt der Zähler eine absurde Zahl, hat querySelector ein zu breites Element getroffen — verenge den Selektor.

Siehe auch

• Beispiele — mehr fertige Regeln
• Lesemodus — Komfort, bis zum Ende zu lesen
• Web-Vitals-Monitor — eine weitere Info-Leiste auf der Seite

Installiere JustZix — und wisse vorab, worauf du dich einlässt.