Un lecteur audio ralentit-il votre page ? Ce qu'il faut regarder avant d'en poser un
Ajouter de l'audio à un article ne doit pas coûter des points de vitesse de chargement. Script asynchrone, audio servi depuis un CDN, bloc rendu côté serveur : les trois façons de ne rien peser, et comment le vérifier.
La première objection d'une équipe technique, quand on lui propose d'ajouter un lecteur audio, n'est pas sur le prix ni sur la voix. C'est : est-ce que ça va ralentir mes pages ? La crainte est légitime. Un script tiers mal conçu bloque le rendu, retarde l'affichage du texte, fait chuter les indicateurs de vitesse que Google regarde, et un article qui met une seconde de plus à s'afficher perd des lecteurs avant même la première phrase. Poser un lecteur audio ne doit rien coûter de tout cela. Voici ce qui fait la différence, et comment le contrôler sur vos propres pages plutôt que de nous croire sur parole.
Un script qui ne bloque pas le rendu
Le premier point, c'est la façon dont le script se charge. Le lecteur WeDispatch s'appuie sur un script léger et asynchrone : le navigateur continue d'afficher votre article pendant qu'il le récupère, au lieu d'attendre. Le texte apparaît d'abord, le lecteur ensuite, sans jamais retarder le moment où le lecteur voit et peut lire le contenu. C'est la différence entre un script qui s'insère dans le chemin critique de l'affichage et un script qui vit à côté. Un lecteur qui bloque le rendu se paie sur le plus grand contenu affiché, l'indicateur que les moteurs surveillent ; un lecteur asynchrone ne le touche pas. La page se charge comme si le lecteur n'était pas là, puis le lecteur arrive.
L'audio n'est pas dans la page, il est sur un CDN
Le deuxième point, c'est le fichier audio lui-même. Un article de 1000 mots pèse quelques mégaoctets en audio, et il serait absurde de faire porter ce poids à la page. Il ne l'est pas : le fichier est servi depuis un réseau de diffusion (CDN), avec un an de cache, et il n'est téléchargé que lorsque l'auditeur appuie sur « Écouter ». Tant que personne ne lance la lecture, la page ne charge que le bouton, pas le son. C'est ce qui permet de sonoriser un site entier sans alourdir une seule page pour les visiteurs qui viennent seulement lire. Le stockage et la rétention des fichiers sont de notre côté, ce qui vous évite aussi d'avoir à provisionner de l'espace ou à gérer un cache.
Le cas des plateformes qui refusent tout script tiers
Certaines grandes rédactions vont plus loin : leur règle interdit purement et simplement le moindre script tiers, et l'iframe est exclue elle aussi parce qu'elle échappe au référencement. Pour elles, la vraie garantie de performance est de ne rien charger depuis un domaine externe du tout. C'est le rôle du bloc de composition côté serveur : nous ne rendons que des données, votre moteur produit le HTML, et notre JavaScript est concaténé avec le vôtre plutôt que chargé depuis chez nous. Le budget de rendu est mesuré, de l'ordre de cent quarante millisecondes sur une instance neuve et nul sur une page déjà servie grâce au cache déclaré. Rien n'est appelé depuis notre domaine à l'exécution : la performance de la page reste entièrement sous le contrôle de votre équipe, ce qui est exactement ce qu'elle demande.
Comment le vérifier vous-même
Aucune de ces affirmations ne vaut sans mesure, et la mesure est à votre portée. Ouvrez une page avec le lecteur dans les outils de développement de votre navigateur, onglet réseau, et regardez deux choses : quand le script du lecteur se charge par rapport à l'affichage du texte, et si le fichier audio se télécharge avant que vous ayez cliqué sur « Écouter ». Un outil de mesure de performance comme celui qu'intègre votre navigateur vous donnera le reste : comparez le score de la page avec et sans le lecteur. L'écart, s'il est bien fait, doit être dans le bruit de mesure. C'est aussi une bonne occasion de décider par où poser le lecteur, un sujet que détaille comment ajouter l'audio sans toucher au thème WordPress. La règle générale tient en une phrase : un lecteur audio bien conçu se voit à l'écoute, jamais dans le temps de chargement. Si vous constatez le contraire, ce n'est pas l'audio qui est en cause, c'est la façon dont il a été branché.
Sonorisez vos articles avec WeDispatch
Ce blog sera lui-même sonorisé par WeDispatch. Envie de voir ce que ça donne sur vos contenus ?
Demandez une démo