La webperf au coeur du développement chez France Info
France Info fait partie des sites qu'un speed index presque toujours inférieur à 3 000 propulse régulièrement sur le podium du classement de la Webperf réalisé chaque mois par Fasterize et le JDN. Pour Cédric Nilly, responsable technique chez France Télévisions, l'expérience utilisateur doit être irréprochable "quel que soit le pays et le device", ce qui fait de la webperf une priorité technique. Il y a deux ans, le site a été refait sur un CMS complètement maison, codé par les développeurs de l'équipe, flexible et adaptable aux exigences croissantes des performances web".
Côté client, cinq mesures ont été prises pour accélérer le temps de chargement des pages. D'abord, l'activation de HTTP/2, une version plus performante du protocole http, publiée en 2015, a diminué le temps de chargement de plusieurs fichiers en même temps par page.
La deuxième mesure a consisté en l'installation, dans la nouvelle version du site, d'un chemin critique de rendu pour toutes les pages. Il s'agit de déterminer quelles sont les ressources indispensables à l'affichage de l'écran, au-dessus de la ligne de flottaison. Dans cette idée, les développeurs définissent le "critical CSS" : la quantité minimale de CSS susceptible de bloquer le rendu sur l'écran de l'internaute. Concrètement, au lieu d'insérer dans la balise <head> en haut de la page tous les éléments relatifs à l'affichage et d'accumuler les balises <link>, lourdes à charger, le webmaster insère une seule balise <style>, contenant les détails du critical CSS pour l'ensemble de la page. Le reste des balises est ensuite intégré dans le contenu (<body>) de la page. La même démarche est applicable au Javascript, plus long à crawler pour les robots des moteurs de recherche.
"La plupart des fonctionnalités de JQuery sont déjà incluses dans les navigateurs"
Autre chantier : JQuery, une bibliothèque JavaScript libre, qui prend la forme d'un fichier pouvant être inclus dans toute page web. "C'est une très bonne boîte à outils du développement front-end, mais elle est lourde à charger (la version 3.3.1 pèse 87ko) et finalement, un site utilise très peu de fonctionnalités parmi toutes celles qu'elle contient. Or, la plupart de ces fonctionnalités sont déjà incluses dans les navigateurs, ou requièrent seulement quelques lignes de code. Nous avons entamé un développement interne pour sortir de la dépendance à JQuery.", explique le responsable technique. You Might Not Need JQuery est un outil gratuit qui compare le code géré par JQuery et ce qui est réalisable en natif dans le navigateur.
En outre, France Info a mis en place au début de l'année une stratégie progressive web app, que Cédric Nilly considère comme un levier de performance sur plusieurs niveaux. Tout d'abord, parce qu'elle offre l'usage du "service worker, un script qui sert d'intermédiaire entre le navigateur et le réseau et nous permet de gérer le cache, afin d'éviter de recharger le CSS et le JavaScript des pages", explique-t-il. Depuis le printemps 2018, le site a également installé le mode offline, qui avertit les utilisateurs lorsque la connexion est coupée et leur offre la possibilité de relire les articles déjà consultés. Prochainement, la lecture offline s'étendra à des articles pré-chargés avant-même un premier passage de l'internaute.
Enfin, la cinquième mesure côté client mise en place par les développeurs de France Info, concerne l'installation d'un script automatisant la vérification de la taille des images avant publication, ce qui garantit un format standard pour tout le site. Quant aux vidéos, l'ouverture des pages qui en contiennent se fait en deux étapes : un premier affichage en preview avec le bouton "play" suivi quelques millisecondes plus tard de celui avec le JavaScript nécessaire à la lecture. "Il suffit de scroller légèrement pour que la page s'anime", ajoute Cédric Nilly, en décrivant une solution "transparente pour l'utilisateur".
Côté serveur, les fortes audiences du site supposaient dès le départ la mise en place d'une stratégie de cache. Le spécialiste explique que pour l'affichage de chaque page, "il faut calculer les articles suivants et précédents, la liste des articles les plus lus dans cette catégorie, les articles plus tendance, etc. Pour le serveur, c'est beaucoup de travail et le cache économise des calculs : qu'il y ait deux cent ou deux millions de visiteurs sur une page, un seul calcul suffit". Pour rester performant dans le monde entier, le site passe par des CDN, qui conservent en cache les pages et les renvoient en un temps record aux internautes. L'actualisation du contenu des 800 000 pages en cache est gérée par un algorithme de "décache", intégralement codé en interne, chargé de "décacher" le strict minimum sur chaque page au moment le plus stratégique pour ne pas ralentir le site.
"France Info est capable en quelques minutes de rajouter des serveurs en recourant à un cloud privé"
L'actualité se caractérise par des pics d'audience impressionnants : un soir d'élection ou de Coupe du monde, il n'est pas rare de compter plus 100 000 connexions instantanées, ce qui est un défi pour un site, aussi solide soit-il. Pour faire face aux afflux d'internautes, France Info est capable en quelques minutes de rajouter des serveurs ou de la puissance sur les serveurs en recourant à un cloud privé. Même si l'effet est très rapide, il vaut mieux anticiper l'instant précis où les utilisateurs voudront tous avoir la même information.
Enfin, il ne sert à rien d'avoir les meilleures techniques pour la webperf si elles ne sont pas épaulées par une organisation du travail centrée sur la performance. Concrètement, aucun nouvel outil, si moderne ou sophistiqué soit-il, n'est accepté pour interagir avec le site sans passer au crible des critères de la webperf. Pour les équipes marketing, ce n'est pas toujours facile à accepter : un travail d'évangélisation est nécessaire pour que tous adhèrent au processus.
En ce qui concerne les équipes techniques, elles opèrent dans un environnement agile, c'est-à-dire qu'il n'y a pas de silos entre les différents profils. "Nous sommes en permanence en prod, ce qui nous rend très réactifs et diminue le niveau de stress ambiant, puisqu'une intégration n'est pas un événement majeur." Très fréquenté, le site de France Info ne peut pas se permettre d'être immobilisé par un gros bug d'intégration. Implémenter continuellement et progressivement toutes les nouveautés diminue la probabilité que cela se produise.
Conséquence de l'esprit webperf qui règne au sein de l'équipe technique, un "labo webperf" est constamment actif, les techniciens disposant d'une demi-journée par semaine pour mener des recherches sur le projet de leur choix. Prochainement, un outil de redimensionnement à la volée des images viendra compléter l'arsenal pour les présenter au format le plus performant en fonction du navigateur de l'utilisateur.