← Alle Beiträge

Leitfäden

Lesezeit- und Wortzahl-Abzeichen zu jeder Seite hinzufügen

17 Mai 2026 · von JustZix Team

Bevor Sie sich einem Artikel verschreiben, hilft es zu wissen, wie groß die Verpflichtung ist. Ist das ein dreiminütiges Überfliegen oder ein zwanzigminütiger Tiefgang? Viele Seiten sagen es nicht. Mit einer kleinen JustZix-JavaScript-Regel können Sie jeder Seite selbst ein Lesezeit- und Wortzahl-Abzeichen hinzufügen.

Wie die Lesezeit geschätzt wird

Die Standardmethode ist einfach: Zählen Sie die Wörter im Artikel und teilen Sie dann durch eine durchschnittliche Lesegeschwindigkeit. Die meisten Schätzungen verwenden 200 bis 250 Wörter pro Minute für erwachsene Leser von Online-Prosa. Wir verwenden 220 als vernünftigen Mittelwert. Es wird nie genau sein, aber es gibt ein nützliches Gefühl für die Größenordnung.

Das Zählskript

Dieses Snippet findet den Hauptartikel, zählt seine Wörter und berechnet Minuten. Fügen Sie es in den JS-Bereich einer JustZix-Regel ein:

function countArticle() {
  var el = document.querySelector('article, main, .post-content');
  if (!el) return null;
  var text = el.innerText || '';
  var words = text.trim().split(/\s+/).filter(Boolean).length;
  var minutes = Math.max(1, Math.round(words / 220));
  return { words: words, minutes: minutes };
}

Der Regex /\s+/ teilt bei jeder Folge von Leerraum, und filter(Boolean) entfernt leere Einträge, sodass die Zählung sauber ist.

Das Abzeichen zeichnen

Bauen Sie nun ein kleines schwebendes Element und platzieren Sie es in einer Ecke des Anzeigebereichs:

function showBadge(stats) {
  if (!stats) return;
  var b = document.createElement('div');
  b.id = 'jz-read-badge';
  b.textContent = stats.minutes + ' Min. Lesezeit · '
    + stats.words.toLocaleString() + ' Wörter';
  b.style.cssText = [
    'position:fixed', 'bottom:16px', 'right:16px',
    'z-index:99999', 'padding:8px 14px',
    'background:#2b2620', 'color:#f4ecd8',
    'font:13px/1 system-ui, sans-serif',
    'border-radius:20px', 'box-shadow:0 2px 8px rgba(0,0,0,.3)'
  ].join(';');
  document.body.appendChild(b);
}

var stats = countArticle();
showBadge(stats);

Das Abzeichen ist an die untere rechte Ecke fixiert, sodass es beim Scrollen sichtbar bleibt, ohne Text zu verdecken.

Den Fortschritt beim Scrollen aktualisieren

Sie können das Abzeichen lebendig machen, indem Sie anzeigen, wie viel übrig ist. Fügen Sie einen Scroll-Listener hinzu, der basierend auf der Position neu berechnet:

window.addEventListener('scroll', function () {
  var badge = document.getElementById('jz-read-badge');
  if (!badge || !stats) return;
  var max = document.body.scrollHeight - window.innerHeight;
  var ratio = max > 0 ? window.scrollY / max : 1;
  var left = Math.max(0, Math.round(stats.minutes * (1 - ratio)));
  badge.textContent = left + ' Min. übrig · '
    + Math.round(ratio * 100) + '%';
}, { passive: true });

Die Option { passive: true } sagt dem Browser, dass der Listener das Scrollen nicht blockiert, was die Seite geschmeidig hält.

Seiten behandeln, die spät laden

Manche Seiten rendern den Artikel nach dem ersten Laden. Wenn das Abzeichen null Wörter zeigt, verzögern Sie die Zählung leicht:

setTimeout(function () {
  if (!document.getElementById('jz-read-badge')) {
    showBadge(countArticle());
  }
}, 1200);

Es zu einer Regel machen

Erstellen Sie eine JustZix-Regel, setzen Sie das URL-Muster auf die Seiten, wo Sie das Abzeichen wollen, und fügen Sie die Zähl-, Abzeichen- und Scroll-Blöcke in den JS-Bereich ein. Speichern und neu laden — eine ordentliche Pille in der Ecke sagt Ihnen nun, was Sie erwartet und wie weit Sie gekommen sind.

Ein Lese-Abzeichen passt natürlich zu einem ruhigen Layout. Kombinieren Sie es mit ausgeblendeten Seitenleisten und einem warmen Hintergrund für eine konzentrierte Leseumgebung. Durchstöbern Sie unsere fertigen Beispiele für weitere JS-Rezepte und laden Sie JustZix herunter, um das Abzeichen heute hinzuzufügen.