Anatomie du chargement d’une page
Parcourez ce qui se passe réellement entre la saisie d’une URL et l’affichage d’une page entièrement interactive, afin de comprendre où les performances sont gagnées ou perdues.
Anatomie du chargement d’une page est une leçon Web Performance Optimization & Lighthouse gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Performance Optimization & Lighthouse, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
From URL to Pixels
A page load runs a fixed sequence: DNS, TCP/TLS handshake, request, response, parse, render, interactivity. Each step adds latency — and shows you where to optimize.
DNS Resolution
First the browser resolves a hostname to an IP via DNS. A cold lookup can cost 20-120ms; caching and dns-prefetch cut it down.
<link rel="dns-prefetch" href="https://cdn.example.com">Connection Setup
Next come the TCP and TLS handshakes — round trips that hurt on high-latency networks. preconnect warms the connection in advance.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Time To First Byte (TTFB)
TTFB measures the wait until the response's first byte arrives. It captures network latency plus server time, and delays everything after it.
Parsing the HTML
As bytes arrive, the browser parses HTML into the DOM tree. It also finds linked CSS and JS, which can pause parsing (render-blocking).
Building the Render Tree
The browser merges the DOM with the CSSOM into a render tree, then runs layout (geometry) and paint (pixels) to put content on screen.
First Contentful Paint
First Contentful Paint (FCP) is the first moment the user sees any text or image — the earliest real signal the page is loading.
JavaScript Execution
Scripts must be parsed, compiled, and run on the main thread. Heavy JavaScript blocks rendering and input, dragging down interactivity.
Reaching Interactivity
The page is truly usable only when the main thread is free for clicks. Time to Interactive and Total Blocking Time capture this final stage.
Inspecting the Timeline
DevTools' Performance panel and the PerformanceNavigationTiming API expose every phase — DNS, connection, TTFB, paint — for precise measurement.
const nav = performance.getEntriesByType('navigation')[0];
console.log('TTFB:', nav.responseStart);
console.log('DOM done:', nav.domContentLoadedEventEnd);Where to Optimize
Optimize by layer: prefetch and CDN for network, caching to cut TTFB, fewer render-blocking assets, and smaller, deferred JavaScript.
Quick Check
Which metric measures the delay until the first byte of the server response arrives?
Recap
You traced a load from DNS through connection, TTFB, parsing, render tree, FCP, JS, and interactivity. Each phase shows where to reclaim seconds.
Questions Fréquemment Posées
La leçon « Anatomie du chargement d’une page » est-elle gratuite ?
Oui — le texte complet de « Anatomie du chargement d’une page » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Performance Optimization & Lighthouse, passe à CoddyKit PRO. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Anatomie du chargement d’une page » ?
Parcourez ce qui se passe réellement entre la saisie d’une URL et l’affichage d’une page entièrement interactive, afin de comprendre où les performances sont gagnées ou perdues. Tu pratiques Web Performance Optimization & Lighthouse avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Performance Optimization & Lighthouse ?
Aucune expérience préalable n'est requise. Web Performance Optimization & Lighthouse sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Anatomie du chargement d’une page » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Performance Optimization & Lighthouse ?
Oui. Chaque leçon Web Performance Optimization & Lighthouse inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Qu’est-ce que la performance web ?
- Pourquoi les performances sont importantes
- Indicateurs clés de performance
- Anatomie du chargement d’une page