Photo de Paul Delcloy, consultant en web performance
Photo de Paul Delcloy, consultant en web performance

Lexique web performance

Publié le 19/09/2023 à 12:00, dernière mise à jour le 14/03/2024.

La webperformance est une branche très spécifique du développement web. Pour vous aider à y avoir un peu plus clair, la bible des définitions de webperf vous permet de comprendre les termes techniques plus simplement.

Cette page est encore en cours de construction, et sera complétée dans les semaines et mois à venir.

A

A/B Testing

Les outils de test A/B permettent d’appliquer des changements sans modification du code source et de comparer plusieurs versions d’une même page sur les utilisateurs qui parcourent votre site. En mesurant les taux de conversion correspondants à chaque version, vous pouvez ainsi déterminer si votre test est concluant avant d’effectuer la modification dans le code de votre site.

AJAX

Signifiant « Asynchronous JavaScript and XML », cette technologie permet au navigateur de communiquer avec un serveur de manière asynchrone, évitant un rechargement de page pour l’utilisateur. Le terme AJAX est généralement lié à la librairie jQuery mais est également utilisée lors de requêtes XHR.

B

Back-end

Par opposition au front-end, le back-end est le code invisible pour l’utilisateur. Il s’agit de la partie immergée de l’iceberg, qui gère les transactions en base de donnée et la logique derrière chaque action d’un utilisateur. Le code back-end est exécuté par le serveur web.

Blocking Time

Lors d’une forte sollicitation des ressources de l’appareil de l’utilisateur. Il s’agit du temps pendant lequel la page web freeze ou répond très lentement aux intéractions de l’utilisateur.

Brotli

Algorithme de compression permettant la réduction du poids des ressources textuelles (HTML, CSS, JS, …). Apparu après Gzip, il offre de meilleures performances de compression et réduit le temps de téléchargement des ressources compressées par le navigateur.

C

CLS

Le Cumulative Layout Shift est un indicateur de performance qui mesure la stabilité visuelle d’une page web dans le temps. Étant un des Core Web Vitals, le CLS est pris en compte dans le CrUX de Google.

CMP

Les Consent Management Platform sont plus communément appelés bandeaux cookies. La plateforme de gestion du consentement permet de récolter les souhaits des visiteurs lors de leur première visite sur le site concernant le tracking et le dépôt de cookies. Pour être en conformité avec le RGPD, il est forcément présent sur un site qui traite des données personnelles. Ces scripts faussent les tests de webperf et il devient essentiel de trouver un moyen de contourner les bannières de consentement aux cookies.

CrUX

Le Chrome User Experience Report est un outil de la firme Google qui permet de déterminer le niveau de performance d’une page ou d’un site avec des données d’utilisateur réels. Pour obtenir des chiffres, le navigateur compatible (Chrome Desktop et Android pour résumer) récolte des indicateurs webperf (dont les Core Web Vitals). Les données récoltées sont compilées mensuellement dans un BigQuery public et sont consultables dans la Search Console

D

DNS

Le protocole Domain Name System est utilisé par les navigateurs afin d’associer chaque nom de domaine vers le serveur qui lui est associé via un système d’adressage. Pour associer un nom de domaine à une adresse IP, le propriétaire du domaine remplit une zone DNS composée de champs de différents types, permettant de gérer des emails, de pointer vers des serveurs web ou des redirections par exemple.

DOM

Le Document Object Model est la représentation de la structure d’une ressource web par le navigateur définie par un ensemble de balises HTML, chacune est appelée un noeud. Le DOM peut être manipulé de manière dynamique suite à la modification, l’ajout, ou la suppression de noeuds en Javascript.

F

Fallback

Le fallback est une solution de contournement qui consiste à proposer une alternative dans le cas où une fonctionnalité ou une ressource se montrerait incompatible avec le navigateur de l’utilisateur, ou qu’elle serait inaccessible.

FCP

Le First Contentful Paint est un indicateur de performance qui mesure le temps nécessaire à l’affichage du premier élément visible de la page. Il peut s'agit d’un texte, d’une image, ou même d’un simple d’un élément HTML. Le FCP est très fortement impacté par des ressources bloquantes comme des scripts synchrones ou des feuilles de style. Il s’agit du premier métrique front-end et est l’étape suivant le TTFB dans le cycle de vie d’une page web.

FID

Le First Input Delay est un indicateur de performance qui mesure le temps nécessaire avant qu'une page soit considérée comme intéractive de manière fluide. Il fait partie des 3 Core Web Vitals, mais sera remplacé par l’INP en 2024 pour une meilleure prise en compte de l’UX des sites web. Un bon FID est inférieur à 100ms, et mauvais lorsqu’il dépasse 300ms. Cet indicateur sera remplacé en 2024 par l’INP.

Front-end

Le front-end est la partie accessible et visible d’un site web par ses visiteurs. Par opposition au back-end, celui-ci est géré par le navigateur et peut être manipulé par des ressources chargées par le site, des third parties, ou même les extensions installées sur le navigateur de l’utilisateur.

Full stack

Un développeur est dit full-stack lorsqu'il maîtrise les environnements techniques de bout en bout côté serveur (langage back-end comme PHP ou Java, syntaxe SQL pour les base de données) comme du côté navigateur (HTML, CSS, Javascript, …).

G

GZIP

Algorithme de compression utilisé par les serveurs web afin de réduire le poids des ressources textuelles (html, CSS, JS, …). Cet algorithme est plus ancien que Brotli et propose une réduction du poids moins importante du poids des ressources, mais est décompressée plus rapidement.

H

htaccess

Les fichiers .htaccess et .htpasswd sont consultés par le serveur web Apache avant de servir toute ressource ou page web à l’utilisateur. Ces fichiers permettent de donner des instructions comme la réécriture d’URL (pour supprimer les extensions de fichier .php ou .html par exemple), mais aussi définir les durées de cache des utilisateurs. Le fichier .htpasswd permet de protéger l’accès à un dossier par un prompt login / mot de passe.

html

Le langage HTML pour HyperText Markup Language est un langage permettant de définir la structure d’une page web. N’étant pas un langage de programmation, il est composé d’un grand nombre de balises ayant toute un rôle différent. On retrouve dans les balises HTML les paragraphes, images, tableaux, vidéos, L’ensemble du code HTML d’une page web est appelé DOM.

I

Iframe

L’Iframe est un élément HTML qui permet d’afficher une page web au sein d’un autre document. L’Iframe peut être affichée avec ou sans bordure, dans des dimenions définies mais ne peuvent pas modifier le document dans lequel elles sont affichées. Il s'agit d’une balise HTML souvent utilisée par les éditeurs publicitaires.

Inline

Du code inline est inséré directement au sein du DOM de la page HTML. Contrairement à un fichier externe appelé par le document, le code inline n’est jamais mis en cache. Les balises inline les plus courantes sont <style> pour le CSS, <script> pour le JavaScript ou encore <svg> pour les images.

INP

L’INP est le nouveau métric webperf en bêta depuis 2022, futur remplaçant du FID en Mars 2024. Acronyme de « Interaction to Next Paint », cet indicateur de performance mesure la réactivité d’une page suite à une intéraction de la part de l’utilisateur. L’INP est considéré comme bon sous les 200 millisecondes (c’est le seuil considéré comme imperceptible par l’oeil humain), et on le considère mauvais au-delà de 500 millisecondes.

Je suis prêt à relever tous les défis, et vous ?