Anatomia ładowania strony
Prześledź, co naprawdę dzieje się między wpisaniem adresu URL a wyświetleniem w pełni interaktywnej strony, aby zrozumieć, gdzie zyskuje się lub traci wydajność.
Anatomia ładowania strony to bezpłatna lekcja Web Performance Optimization & Lighthouse na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Performance Optimization & Lighthouse, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się Web Performance Optimization & Lighthouse dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Anatomia ładowania strony” jest bezpłatna?
Tak — pełny tekst „Anatomia ładowania strony” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Performance Optimization & Lighthouse, przejdź na CoddyKit PRO. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.
Co nauczysz się w „Anatomia ładowania strony”?
Prześledź, co naprawdę dzieje się między wpisaniem adresu URL a wyświetleniem w pełni interaktywnej strony, aby zrozumieć, gdzie zyskuje się lub traci wydajność. Ćwiczysz Web Performance Optimization & Lighthouse z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Performance Optimization & Lighthouse?
Nie wymagamy żadnego doświadczenia. Web Performance Optimization & Lighthouse w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Anatomia ładowania strony”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Performance Optimization & Lighthouse?
Tak. Każda lekcja Web Performance Optimization & Lighthouse zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest wydajność aplikacji internetowych?
- Dlaczego wydajność ma znaczenie
- Najważniejsze wskaźniki wydajności
- Anatomia ładowania strony