Définitions : le langage de la webperf expliqué simplement

Pour vous guider dans le monde de la webperf, nous partageons ici nos propres définitions du jargon technique en français. Elles diffèrent de ce que l’on trouve dans la plupart des lexiques et glossaires en ligne pour une bonne raison : nous avons cherché à les rendre les plus compréhensibles possible par les néophytes. Bonne lecture !

A

A/B Testing

Outil permettant de comparer l’efficacité de plusieurs versions d’une même page web sur des utilisateurs réels. Sa complexité technique a fait émerger des acteurs spécialisés dont les solutions sont payantes : AB Tasty, Kameleoon…

Accessibilité

Désigne la capacité d’un site web à être utilisable de façon optimale par tous les utilisateurs quel que soit leur navigateur, leur localisation ou encore leurs capacités physiques et psychologiques. Les règles WCAG, qui font référence, mettent le focus sur les personnes handicapées et les séniors, qui éprouvent souvent des difficultés à naviguer sur Internet.

Ajax

Acronyme de « Asynchronous JavaScript and XML », il s’agit d’une technologie permettant à un navigateur web d’échanger avec un serveur sans avoir à recharger la page courante. Elle est à la base d’outils comme l’Infinite Scroll, mais aussi des SPA qui fonctionnent comme une application.

API

Acronyme de « Application Programming Interface », désigne la possibilité pour une application de donner accès à tout ou partie de ses fonctionnalités à une application tierce. L’objectif est d’en faciliter l’usage et l’intégration au sein d’un workflow existant. Vous regardez par exemple des séries sur votre smart TV grâce à l’API de Netflix.

APM

Acronyme de « Application Performance Management », désigne un outil installé sur un serveur web afin d’en monitorer la performance. Il se connecte pour cela aux composants clés du système d’exploitation (processeur, mémoire vive, noyau système…) et aux applications spécifiques (bases de données SQL, serveur web, exécutable PHP, système de cache…).

Aria

Acronyme de « Accessible Rich Internet Applications », désigne un balisage destiné à ajouter un niveau sémantique supplémentaire aux pages web. En complétant les balises html avec des attributs spécifiques, Aria informer les navigateurs sur le rôle et le comportement attendu de chaque élément d’interface.

Asynchrone

Par opposition à synchrone, un chargement asynchrone s’exécute en arrière-plan, permettant au reste de la page de poursuivre son chargement sans être interrompue.

B

Back-end

Partie d’un site accessible uniquement aux propriétaires et gestionnaires d’un site, par opposition au front-end qui est accessible par l’ensemble des internautes. Cela concerne l’administration et l’ensemble des scripts et outils exécutés par le serveur web.

Base64

Système d’encodage de chaînes de texte sous la forme de caractères et chiffres. Les contenus ainsi encodés sont en moyenne 33% plus lourds. Dans le web, on l’utilise principalement pour intégrer des ressources en inline (images, fontes…).

Blocking Time

Période durant laquelle une page web n’est plus interactive en raison d’une trop forte sollicitation des ressources de l’appareil par JavaScript. Cela se traduit par des freezes et/ou une latence excessive.

Brotli

Algorithme de compression moderne utilisé par les serveurs web pour réduire le poids des ressources encodées en texte (html, CSS, JavaScript…), et donc leur temps de téléchargement par les navigateurs. Plus récent que Gzip, il offre un meilleur ratio de compression.

C

CDN

Acronyme de « Content Delivery Network », cet outil s’interface entre l’hébergement et le navigateur des visiteurs afin d’améliorer les temps de chargement d’un site. Il repose notamment sur la copie des ressources statiques du serveur d’origine dans chaque centre de données du prestataire à travers le monde. Cloudflare est le plus populaire.

CLS

Acronyme de « Cumulative Layout Shift », cet indicateur de performance mesure la capacité d’une page à proposer une interface dont les éléments restent stables dans le temps. Il fait partie des 3 Core Web Vitals.

CMS

Acronyme de « Content Management System », il s’agit d’un outil permettent de faire vivre un site web et ses contenus à travers une interface de gestion en ligne. Le plus connu est WordPress mais il en existe des centaines, parfois spécialisés dans certains types de contenus : blog, e-commerce, vidéos…

Concaténation

Technique d’optimisation des temps de chargement visant à regrouper plusieurs fichiers CSS ou JavaScript en un seul. Synonyme : combinaison.

Core Web Vitals

Les Core Web Vitals, ou Signaux Web Essentiels en français, regroupent 3 métriques destinées à mesurer la performance d’une page en termes de vitesse et de réactivité : LCP, FID et CLS. Ils font partie des Web Vitals, qui intègrent 3 autres mesures. Il s’agit des indicateurs de performance pris en compte par Google dans son algorithme et ses outils : Page Speed Insights, Lighthouse, etc.

CrUX

Acronyme de « Chrome User Experience Report », cet outil développé par Google permet de connaître le niveau de performance réel d’une page ou d’un site. Pour ce faire, il récolte des indicateurs de performance, dont les Core Web Vitals, durant la navigation des visiteurs sur les navigateurs qui le supportent.

CSP

Acronyme de « Content Security Policy », qui se traduit en français par « politique de sécurité des contenus ». Il s’agit d’une en-tête http qui vise à fournir au navigateur des informations sur l’origine possible des différents types de ressources : CSS, JavaScript, images, iframes, etc. Mettre en place une CSP améliore la sécurité d’un site mais permet aussi de réaliser un état des lieux qui s’avère très utile en matière de web performance.

CSS

Acronyme de « Cascading Style Sheet », qui se traduit en français par « feuilles de style en cascade ». Il s’agit du langage utilisé par les navigateurs web pour mettre en forme les pages en html et xml : affichage des textes, position et couleur des éléments, animations… Il est encadré par le W3C.

D

DNS

Acronyme de « Domain Name System », ce protocole est utilisé par les navigateurs pour diriger les visiteurs d’une page vers le serveur approprié. Il associe chaque nom de domaine à une adresse IP grâce aux données renseignées par leur propriétaire (champs DNS). Une infrastructure de cache mondiale garantit sa réactivité, mais génère en contrepartie des délais de propagation en cas de changement de serveur.

DOM

Le DOM (Document Object Model) est la représentation par la navigateur de la structure d’une page, chaque balise html devenant un « noeud ». Il évolue de façon dynamique en fonction des ajouts, suppressions et modifications de noeuds effectuées en JavaScript.

E

Embed

Se traduit en français par « contenu embarqué », et se matérialise au sein d’une page web par l’inclusion d’un contenu provenant d’un site tiers. Les réseaux sociaux comme Instagram, Twitter ou YouTube proposent tous ce type d’intégrations.

F

Fallback

Un fallback peut se traduire en français par « solution de repli » ou encore « à défaut de ». Dans le web, cela consiste à proposer une alternative dans le cas où une fonctionnalité ou un format de ressource ne serait pas supporté par le navigateur.

FCP

Acronyme de « First Contentful Paint », cet indicateur de performance mesure le temps nécessaire au premier élément visible de la page pour s’afficher (image, texte…).

FID

Acronyme de « First Input Delay », cet indicateur de performance mesure le temps nécessaire à une page pour être interactive de façon fluide. Il fait partie des 3 Core Web Vitals.

Fil d’ariane

Représentation visuelle de la position de la page courante dans un site. Chaque élément de l’arborescence est cliquable afin de permettre un retour rapide vers la page d’accueil et les pages parentes (catégorie(s) pour un article par exemple). En anglais, on parle de « breadcrumb ».

Front-end

Partie d’un site accessible par l’ensemble des internautes, par opposition au back-end qui n’est accessible qu’aux propriétaires et gestionnaires du site.

FTP

Acronyme de « File Transfer Protocol », ce protocole permet de transférer des données sur l’espace de stockage d’un serveur web : images, fichiers php… Il n’est accessible qu’au propriétaire du site grâce à des identifiants de connexion.

Full stack

Se dit d’un développeur qui maîtrise les environnements techniques côté serveur (langage php, syntaxe SQL, administration système…) et côté navigateur (html, CSS, JavaScript…). Ces profils sont rares et recherchés par de nombreuses sociétés pour leur grande polyvalence et leur capacité intervenir à la fois sur le front-end et le back-end.

G

Gzip

Algorithme de compression utilisé historiquement par les serveurs web pour réduire le poids des ressources encodées en texte (html, CSS, JavaScript…), et donc leur temps de téléchargement par les navigateurs.

H

.htaccess

Fichier système consulté par le serveur web Apache avant de servir une page ou ressource. Il est couramment utilisé pour mettre en place une réécriture d’url, pour gérer des redirections 301, pour ajouter des en-têtes de sécurité ou encore pour optimiser la mise en cache des ressources par le navigateur.

HTML

Acronyme de « Hypertext Markup Language », il s’agit du langage à la base de toute page web. Il est constitué de multiples balises, chacune ayant son propre rôle à jouer : paragraphes, images, tableaux, sections… Des attributs permettent aux développeurs de modifier leur comportement en fonction des besoins.

I

Icon Font

Ensemble d’icônes regroupées au sein d’une Webfont sous la forme de caractères. Le format est très répandu car il offre un rendu vectoriel et est facile à utiliser, mais il nécessite en contrepartie un important volume de CSS et de Webfonts. La plus populaire est Font Awesome.

Iframe

Élément html permettant d’afficher une page web au sein d’une autre page web dans un espace aux dimensions définies. C’est la solution privilégiée pour afficher la plupart des bandeaux publicitaires et des Embeds de réseaux sociaux.

Infinite Scrolling

Élément d’UI alternatif à la traditionnelle pagination multi-pages. Avec le « scroll infini », les contenus suivants de la liste sont chargés dynamiquement dans la page courante lorsqu’elle défile. On utilise pour cela la technologie Ajax.

Inline

Du code dit « inline » est inséré directement au sein de la page d’origine, par opposition à un appel dans un fichier externe. Dans html, les balises inline les plus courantes sont <style></style> pour le CSS, <script></script> pour le JavaScript ou encore <svg></svg> pour les images. Il est également possible d’utiliser un encodage base64 pour intégrer n’importe quelle ressource en inline.

J

JavaScript

Langage de programmation utilisé par les éditeurs de sites web pour rendre leurs pages plus dynamiques, ajouter une surcouche d’interactivité, afficher des publicités ou encore assurer le suivi de leur fréquentation. L’interprétation du code est coûteuse pour les navigateurs : elle génère souvent du « Blocking Time » et du FID.

Json

Acronyme de « JavaScript Object Notation », désigne une syntaxe permettant d’échanger des données entre plusieurs outils. Sa grande simplicité en facilite la génération et la lecture par les langages informatiques, dont PHP et JavaScript. Sur Internet, il est très largement utilisé par les API et outils destinés aux éditeurs de sites web.

L

Lazy-loading

Le lazy-loading désigne le fait de ne déclencher le chargement de certaines ressources d’une page (images, vidéos, contenus embarqués…) que lorsque les visiteurs sont susceptibles de les voir. On le met en place via des outils JavaScript ou grâce à l’attribut html natif « loading=lazy ».

LCP

Acronyme de « Largest Contentful Paint », cet indicateur de performance mesure le temps nécessaire au principal élément visible de la page pour s’afficher. Il fait partie des 3 Core Web Vitals.

Lighthouse

Outil d’audit web développé par les équipes de Google et qui propose un focus sur 5 volets : Performance, Bonnes pratiques, Accessibilité, SEO et Progressive Web Apps. On peut y tester n’importe quelle page, sur Desktop et mobile, afin d’en connaître le score (de 0 à 100).

M

Media Queries

Les Media Queries sont un outil CSS permettant de cibler certains appareils et navigateurs en fonction de leurs caractéristiques. On les utilise notamment pour créer des sites « Responsive Web Design » en se basant sur les tailles d’écrans, mais aussi pour détecter le type de pointeur (souris, écran tactile…) ou encore pour afficher une interface spécifique lorsque le mode sombre est activé.

Microdonnées

Désigne un balisage destiné à présenter de façon structurée les données d’une page. Il peut être intégré directement au code html ou bien au format Json+ld. Google se repose en grande partie sur les microdonnées pour générer les « Rich Snippets » affichés dans ses pages de résultats (notation avec étoiles, recettes de cuisine, guides pas-à-pas…). Synonymes : données structurées, microdata.

Minification

Technique d’optimisation visant à réduire le poids des fichiers CSS, JavaScript et html en supprimant tout caractère non essentiel : espaces, sauts de lignes, commentaires, éléments de syntaxe optionnels…

O

Obfuscation de lien

Technique d’optimisation SEO visant à masquer un lien hypertexte aux robots d’indexation tout en assurant un fonctionnement transparent dans les navigateurs. Cela se fait généralement à l’aide de JavaScript et d’un encodage en base64.

P

Page Speed Insights

Outil de mesure de la performance développé par les équipes de Google et centré sur les Core Web Vitals. On peut y lancer des tests synthétiques et accéder aux données terrain (CrUX) de n’importe quelle page, sur Desktop et mobile.

PHP

Acronyme de « Hypertext Preprocessor », désigne un langage de programmation utilisé pour faire fonctionner une majorité de sites web. Gratuit et Open-Source, on le retrouve au coeur de la plupart des CMS actuels : WordPress, Prestashop, Magento, Drupal… Il évolue régulièrement afin de gagner en performance.

Proxy

Outil qui s’interface entre un navigateur web et un serveur web pour y apporter de nouvelles fonctionnalités. La plupart des proxy améliorent le niveau de performance et/ou la sécurité. Les cdn comme Cloudflare sont techniquement des proxy.

PWA

Acronyme de « Progressive Web App », désigne un type de site web dont le premier affichage génère le téléchargement en arrière plan d’une « application web ». Les fonctionnalités et l’interface sont en conséquence plus proches de ce que proposent nativement les appareils mobiles.

R

Ressource

Une ressource est un fichier appelé par le navigateur (via ce que l’on appelle une requête http) afin d’afficher une page web. Tout fichier JavaScript, CSS, fonte ou image est ainsi une ressource du point de vue d’une page web.

Ressource tierce

Ressource appelée par une page depuis un nom de domaine différent. Il s’agit bien souvent de JavaScript et de fontes, mais aussi parfois de CSS ou d’images.

Robots.txt

Ce fichier texte, qui se place à la racine d’un site, vise à en faciliter le crawl par les moteurs de recherche. Il guide pour cela les robots d’indexation en autorisant et en bloquant certaines sections, mais aussi en fournissant des liens vers les sitemaps xml.

S

SEO

Acronyme de « Search Engine Optimization », le terme désigne la discipline visant à améliorer la visibilité d’un site dans les moteurs de recherche. Historiquement très centré sur les positions dans les pages de résultats de recherche, le SEO s’est complexifié au fil des évolutions de l’algorithme de Google. Synonyme : référencement naturel.

Serveur web

Ordinateur sur lequel sont hébergées les données d’un site web, et accessible à tous via une connexion Internet. Des logiciels spécifiques assurent son fonctionnement : Apache ou Nginx pour servir les fichiers, MySQL pour gérer les bases de données, PHP pour exécuter les scripts… Son propriétaire peut, lui, s’y connecter en FTP ou SSL pour en assurer la gestion.

SPA

Acronyme de « Single Page App », désigne un type de site web conçu en JavaScript comme une application mobile. Les composants affichés sur la page courante sont mis à jour dynamiquement via des appels en Ajax en fonction des interactions de l’utilisateur.

Speed Index

Indicateur de performance synthétique qui mesure la durée nécessaire à l’affichage des éléments au sein du viewport. L’information étant visuelle et non technique, les outils d’analyse se reposent sur des enregistrements vidéo. En raison de sa complexité, les notations varient selon l’outil utilisé.

SVG

Format d’image vectoriel particulièrement adapté pour les logos, icônes et pictogrammes. Il s’affiche de façon nette quelle que soit la densité de pixels des écrans.

Synchrone

Le chargement synchrone d’une ressource s’exécute dès son appel en interrompant le rendu de la page par le navigateur.

T

Template

Un template est un ensemble de fichiers html destinés à gérer la mise en page d’un site web. Certaines parties sont communes à l’ensemble d’un site (en-tête, menus, footer…) alors que d’autre sont spécifiques à chaque typologie de page : page d’accueil, archives de contenus, articles, fiches produits, page de contact…

TCP

Acronyme de « Transmission Control Protocol », désigne le protocole d’échange de données à la base du fonctionnement d’Internet. C’est lui qui permet aux navigateurs web de télécharger les ressources d’un serveur lorsque vous consultez une page web. Il se repose pour cela sur les adresses IP.

TLS

Acronyme de « Transport Layer Security », ce protocole est chargé d’assurer les échanges sécurisés entre un navigateur et un serveur. Il sécurise les pages en « https » en vérifiant l’authenticité du certificat numérique fourni par le serveur.

TTFB

Acronyme de « Time To First Byte », cet indicateur de performance mesure le temps nécessaire à un serveur pour répondre à la première requête du navigateur. Il dépend de la configuration du serveur, de la présence ou non de cache mais aussi de la connexion du visiteur (débit, latence).

U

UI

Acronyme de « User Interface », que l’on traduit par « Interface Utilisateur » en français. Désigne l’ensemble des éléments graphiques d’une page web. La structure, la typographie, les images ou encore les couleurs constituent ainsi des éléments de l’UI.

UX

Acronyme de « User eXperience », que l’on traduit par « Expérience Utilisateur » en français. Désigne la façon dont un utilisateur interagit avec une page web. Une UX de qualité passe par des choix pertinents en matière d’ergonomie, d’accessibilité et de respect des conventions et bonnes pratiques.

V

Viewport

Zone de la page courante visible dans un navigateur web. Au chargement, le viewport correspond à la zone située au-dessus de la ligne de flottaison.

VPS

Acronyme de « Virtual Private Server », qui se traduit en français par « serveur privé virtuel ». C’est un type d’hébergement entre le serveur mutualisé, peu performant, et le serveur dédié, très performant mais aussi très coûteux. Un VPS offre un compromis intéressant entre performance, coût, sécurité et évolutivité : comme il ne s’agit pas d’une machine physique, on peut en réaliser des sauvegardes instantanées ou encore faire évoluer la configuration à la volée.

W

W3C

Le W3C, ou « World Wide Web Consortium », est l’organisme international chargé d’encadrer les technologies propres au web. Il est à l’origine des standards HTML, XML, CSS ou encore SVG qu’il fait régulièrement évoluer.

WCAG

Acronyme de « Web Content Accessibility Guidelines », ces directives vient à définir les critères d’accessibilité d’un site web aux personnes handicapées et aux séniors. Elles sont définies par le W3C.

Webfont

Police d’écriture téléchargée par une page web pour en afficher tout ou partie des textes. La bonne pratique est de la proposer en Woff2, le format le plus léger, avec un fallback en Woff. On recommande également la mise en place d’un font-display Swap afin de permettre un affichage des textes avant le téléchargement de la webfont.

Web performance

Discipline technique visant à assurer un affichage rapide et une bonne fluidité des page web dans les navigateurs, durant leur chargement et tout au long de leur utilisation. Pour une définition complète, consultez notre article « Qu’est-ce que la web performance ? ».

Vous souhaitez être accompagné par l'Agence Web Performance ?
Contactez-nous
Vous êtes ici : Accueil / Blog / Définitions : le langage de la webperf expliqué simplement