← Tous les articles

Tutoriels

Nombre de mots et temps de lecture sur n'importe quelle page

15 mai 2026 · par JustZix Team

Combien de temps prendra cet article — deux minutes ou vingt ? La plupart des pages ne le disent pas. Cette règle ajoute en haut de chaque article une petite barre : nombre de mots et temps de lecture estimé.

La règle

Le JavaScript de la règle, motif d'URL pour un blog ou un site que vous lisez :

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 + ' mots · ~' + min + ' min de lecture';
  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);
}

Comment ça marche

Compter les mots

art.innerText est le texte visible de l'article (sans les balises HTML). split(/\s+/) le coupe à chaque suite d'espaces — la longueur du tableau est le nombre de mots. Simple et assez précis.

200 mots par minute

Le rythme moyen de lecture-avec-compréhension est de 200 à 250 mots par minute. On prend 200 comme milieu prudent ; Math.max(1, ...) empêche un texte court d'afficher « 0 min ».

Une barre sticky

position: sticky; top: 0 garde la barre visible quand vous scrollez dans l'article — une petite info, toujours à portée.

Variante — une barre de progression de lecture

Vous voulez voir combien il reste de l'article ? Ajoutez en haut une barre fine qui grandit avec le défilement :

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

Pièges

• Elle compte aussi les légendes et le code. innerText inclut tout dans le conteneur — blocs de code compris. Pour un article typique, la différence est négligeable.
• Choix du conteneur. Si le compteur affiche un nombre absurde, querySelector a touché un élément trop large — restreignez le sélecteur.

À voir aussi

• Exemples — plus de règles prêtes à l'emploi
• Mode lecture — du confort pour lire jusqu'au bout
• Moniteur Web Vitals — une autre barre d'info sur la page

Installez JustZix — et sachez d'avance à quoi vous vous engagez.