Web Performance Optimization & Lighthouse · Ders

Sayfa Yüklemesinin Anatomisi

Bir URL yazmanızla tamamen etkileşimli bir sayfa görmeniz arasında gerçekte neler olduğunu adım adım inceleyerek performansın nerede kazanılıp kaybedildiğini anlayın.

Sayfa Yüklemesinin Anatomisi, CoddyKit'te ücretsiz bir Web Performance Optimization & Lighthouse dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Performance Optimization & Lighthouse öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Performance Optimization & Lighthouse kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Sayfa Yüklemesinin Anatomisi” dersi ücretsiz mi?

Evet — “Sayfa Yüklemesinin Anatomisi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Performance Optimization & Lighthouse kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Performance Optimization & Lighthouse kursu toplamda 4 dersten oluşur.

“Sayfa Yüklemesinin Anatomisi” dersinde ne öğreneceğim?

Bir URL yazmanızla tamamen etkileşimli bir sayfa görmeniz arasında gerçekte neler olduğunu adım adım inceleyerek performansın nerede kazanılıp kaybedildiğini anlayın. Web Performance Optimization & Lighthouse ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Web Performance Optimization & Lighthouse öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Web Performance Optimization & Lighthouse, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Sayfa Yüklemesinin Anatomisi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Web Performance Optimization & Lighthouse dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Web Performance Optimization & Lighthouse dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Web Performance Optimization & Lighthouse Sayfasına Dön