Comprendre le fonctionnement du Web : du clic à la page affichée

Quand on commence en développement web, il est essentiel de comprendre ce qu’il se passe réellement lorsqu’un utilisateur clique sur un lien ou entre une URL dans son navigateur. Ce processus, repose sur plusieurs technologies fondamentales que tout développeur web doit connaître.

1. Qu’est-ce qu’un site web ?

Un site web est une collection de fichiers (HTML, CSS, JS, images, etc.) stockés sur un serveur web, accessible via une adresse (URL). Le navigateur web sert de pont entre l’utilisateur et ces fichiers.

2. Le chemin d’un clic : que se passe-t-il étape par étape ?

Voici un résumé étape par étape de ce qui se passe lorsqu’un utilisateur visite une URL comme https://example.com :

Étape 1 – Résolution DNS

Le navigateur doit d’abord traduire l’URL en adresse IP (ex. 93.184.216.34). Pour cela, il interroge un serveur DNS (Domain Name System).

Étape 2 – Connexion au serveur

Une fois l’IP obtenue, le navigateur ouvre une connexion TCP au serveur via le port 443 (HTTPS). Cette connexion est sécurisée via le protocole TLS.

« HTTPS chiffre la communication pour éviter les écoutes, les vols de données ou les falsifications. »

Étape 3 – Envoi de la requête HTTP

Le navigateur envoie une requête HTTP GET pour demander le contenu de la page.

Étape 4 – Réponse du serveur

Le serveur répond avec :

Un code HTTP (ex. 200 OK, 404 Not Found)
Des en-têtes HTTP
Et le contenu HTML

Exemple de réponse :

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

3. Le rôle du HTML, CSS et JavaScript

Une fois la réponse reçue :

Le HTML structure le contenu.
Le CSS applique le style.
Le JavaScript rend la page interactive.

Le navigateur construit un DOM (Document Object Model) à partir du HTML, applique le CSS via le render tree, puis exécute le JS.

4. Chargement des ressources

Le HTML peut référencer d’autres ressources : images, polices, scripts, etc.

Le navigateur :

Lance des requêtes supplémentaires pour les télécharger.
Les affiche ou les exécute selon leur type.

Tout cela se passe en parallèle, mais avec des règles de priorités pour optimiser l’expérience utilisateur.

5. Exemple concret

Prenons l’exemple suivant :

Vous tapez https://yanis-sadeg.fr dans votre navigateur.
Le DNS résout le nom de domaine.
Le navigateur ouvre une connexion HTTPS.
Une requête est envoyée.
Le serveur de yanis-sadeg.fr renvoie du HTML.
Le navigateur télécharge les images, les CSS et le JS.
La page s’affiche progressivement.

6. Outils pour observer ce processus

Inspecteur réseau (DevTools)

Ouvre ton navigateur (Chrome, Firefox, etc.), fais clic droit > « Inspecter » > « Réseau » :

Tu peux voir chaque requête (type, taille, temps de chargement).
Idéal pour comprendre ce qui ralentit une page.

Sources

Conclusion

Le développement web ne se limite pas à écrire du HTML ou du CSS. Comprendre l’envers du décor, c’est-à-dire le fonctionnement du Web, permet de mieux concevoir, optimiser et sécuriser ses applications. C’est une base que tout bon développeur doit maîtriser avant de se lancer plus loin.

Blog