Cours Web Performances & SEO
Session 1 • Module 2 • 15 min

Les Bases Techniques du Web

HTML, CSS, JS et comment le navigateur affiche une page

1) C'est quoi une page web ? (vulgarisation)

Une page web est composée de plusieurs éléments qui travaillent ensemble. Chacun a un rôle précis et un impact sur la performance :

  • HTML — Le squelette

    C'est la structure de ta page : les titres, paragraphes, images, liens... C'est aussi ce que Google lit en premier pour comprendre ton contenu.

  • CSS — L'apparence

    Les couleurs, les polices, la mise en page. Un CSS mal optimisé peut vite devenir lourd et ralentir l'affichage.

  • JavaScript — Les interactions

    Menus déroulants, animations, formulaires dynamiques. C'est souvent le plus gros coupable des problèmes de performance.

  • Les ressources — Images, vidéos, polices

    Elles représentent 50 à 70% du poids total d'une page. C'est là qu'on peut gagner le plus facilement !

Les 3 langages d'une page web
HTML Les traits de structure (murs, toit)
CSS Les couleurs et le remplissage
JavaScript La lumière qui s'anime

HTML

La Structure

Les murs, le toit, les fondations de ta page

<h1> <p> <img> <a>

CSS

La Décoration

La peinture, les meubles, le style visuel

Couleurs Polices Tailles Espacement

JavaScript

L'Électricité

L'éclairage, les appareils, tout ce qui bouge

Clics Formulaires Menus Animations

2) Comment le navigateur affiche une page ?

Quand tu tapes une URL, plusieurs étapes s'enchaînent :

  1. Tu tapes une URL
  2. Résolution DNS : trouver l'adresse du serveur
  3. Connexion au serveur
  4. Le serveur envoie le HTML
  5. Le navigateur lit le HTML et demande les autres fichiers (CSS, JS, images)
  6. Rendu visuel : parsing > rendering > painting
💡

Le "chemin critique de rendu" désigne tout ce qui bloque l'affichage initial. Moins il y a d'éléments bloquants, plus la page s'affiche vite.

Les 6 étapes d'une requête web
1

URL tapée

Vous tapez www.example.com

0ms
2

Requête DNS

example.com → 93.184.216.34

20-120ms
3

Connexion

TCP + TLS (HTTPS)

50-200ms
4

Requête HTTP

GET / HTTP/1.1

20-50ms
5

Téléchargement

HTML, CSS, JS, images...

100-500ms
6

Rendu

Parsing + Paint

100-300ms

Temps total typique

300ms - 1.5s Connexion rapide (fibre)
1s - 3s Connexion moyenne (4G)
3s - 10s+ Connexion lente (3G)

3) Notions de base réseau

Pour comprendre la performance web, tu dois maîtriser quelques concepts clés :

  • Requête HTTP : Une demande du navigateur au serveur. Chaque fichier nécessite une requête, donc plus tu as de fichiers, plus tu as de requêtes.
  • Latence : Le temps de trajet aller-retour entre le navigateur et le serveur. Plus le serveur est loin géographiquement, plus la latence est élevée.
  • Bande passante : La "taille du tuyau", c'est-à-dire le débit maximum que ta connexion peut supporter.
  • Waterfall : La cascade qui montre l'ordre de téléchargement des fichiers. Certains se chargent en parallèle, d'autres attendent leur tour. Outil essentiel pour comprendre les ralentissements.
  • Front-end vs Back-end : Le front-end c'est ce qui se passe dans le navigateur, le back-end c'est ce qui se passe sur le serveur. Les problèmes de performance peuvent venir des deux côtés.
Waterfall : la cascade de chargement
Nom
Type
Taille
Temps
Durée
index.html
document
12 KB
180ms
styles.css
stylesheet
45 KB
95ms
app.bundle.js
script
156 KB
280ms
logo.svg
image
8 KB
45ms
hero-image.webp
image
89 KB
320ms
Inter-Regular.woff2
font
24 KB
150ms
analytics.js
script
32 KB
120ms
0ms 100ms 200ms 300ms 400ms 500ms 600ms 700ms
TTFB (attente serveur)
HTML
CSS
JavaScript
Images
Fonts

Chargement séquentiel

Le HTML doit arriver en premier, puis CSS et JS peuvent charger

Ressources bloquantes

CSS et JS bloquent le rendu tant qu'ils ne sont pas chargés

Chargement parallèle

Les navigateurs chargent 6 fichiers en parallèle par domaine

4) Notions de poids et temps

Deux unités de mesure essentielles à connaître :

  • Poids : Se mesure en Ko (kilooctets) ou Mo (mégaoctets). Une page web moyenne pèse entre 2 et 3 Mo, mais les sites optimisés font bien moins.
  • Temps : Se mesure en secondes ou millisecondes (ms). Rappel : 1 seconde = 1000 ms. Chaque milliseconde compte !
Objectif : Une page doit être interactive en moins de 3 secondes pour offrir une bonne expérience.
Poids des fichiers et temps de chargement

Le Poids des Fichiers

1 KB
Un petit texte
10 KB
Page HTML simple
50 KB
Fichier CSS
100 KB
Script JS moyen
500 KB
Image JPEG
1 MB
Image HD non optimisée
5 MB
Vidéo courte

Conversion

1 KB = 1 024 octets

1 MB = 1 024 KB = ~1 million d'octets

Le Temps de Chargement

100 ms
Instantané
1 seconde
Rapide
2.5 secondes
Acceptable
4 secondes
Lent
5+ secondes
Très lent - Abandon

Perception utilisateur

< 100ms Réponse instantanée
< 1s Reste concentré
1-3s Attention diminue
> 7s 53% abandonnent

Conversion

1 seconde = 1 000 millisecondes (ms)

Une Page Web Moyenne (2025)

2.5 MB Poids moyen d'une page
70 Requêtes HTTP moyennes
~50% Du poids = Images
3.8s Temps moyen (mobile)

Répartition moyenne du poids par type de ressource

Images 46%
JS 22%
CSS
Video
Autre

Source: HTTP Archive (Web Almanac 2025) - Données médianes desktop

Objectif Poids

< 1 MB Idéalement < 500 KB sur mobile

Objectif Temps

< 3 sec Page interactive en moins de 3s

Objectif Requêtes

< 50 Moins = chargement plus rapide
Question 1/4

Quel langage constitue le 'squelette' d'une page web ?

HTML (HyperText Markup Language) est la structure de base de toute page web. C'est ce que Google lit en premier.