Web Performance Optimization & Lighthouse · Урок

Анатомия загрузки страницы

«Анатомия загрузки страницы» — бесплатный урок Web Performance Optimization & Lighthouse на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Performance Optimization & Lighthouse, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Performance Optimization & Lighthouse содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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.

Часто задаваемые вопросы

Урок «Анатомия загрузки страницы» бесплатный?

Да — полный текст урока «Анатомия загрузки страницы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Performance Optimization & Lighthouse, подпишись на CoddyKit PRO. Курс Web Performance Optimization & Lighthouse содержит 4 уроков всего.

Чему я научусь в уроке «Анатомия загрузки страницы»?

Разберите, что происходит между вводом URL-адреса и появлением полностью интерактивной страницы, чтобы понять, на каких этапах производительность повышается или теряется. Ты практикуешь Web Performance Optimization & Lighthouse с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Web Performance Optimization & Lighthouse?

Предыдущий опыт не требуется. Web Performance Optimization & Lighthouse на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Анатомия загрузки страницы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Web Performance Optimization & Lighthouse?

Да. Каждый урок Web Performance Optimization & Lighthouse включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Web Performance Optimization & Lighthouse