Kritik kaynak sırası

HTML kursu · Uzman · Ders 14/39

<head> içindeki kaynak sıralamasını ve preload kullanırsın.

Kritik kaynak sırası

Sayfanın hızla yüklenmesi için head bölümünde üç <link> tekniği kullanılır:

rel="preconnect": bir origin'e erken TCP/TLS bağlantısı açar.
rel="dns-prefetch": yalnızca DNS çözümünü önceden yapar.
rel="preload": kritik bir kaynağı (örnek LCP görseli) erken yükler.

Bunlar, tarayıcının daha sonra istek yapacağı kaynakları önceden hazırlar; LCP süresini düşürür.

rel değerlerini doğru sırala

Bu projede CDN origin'i https://cdn.hizlihaber.com. Head bölümüne üç <link> ekleyeceksin:

preconnect — CDN'ye erken bağlantı.
dns-prefetch — yedek DNS çözümü (eski tarayıcılar için).
preload as="image" — LCP görseli /kapak/ana-haber-960.webp.

preconnect ve dns-prefetch aynı origin'e işaret edebilir; preload ise belirli bir dosyaya işaret eder ve as özniteliğiyle kaynak tipini belirtir.

Uygulama Head'e kritik kaynakları, body'ye header ekle

Önceki dersin boş iskeletini al. <head>'e üç <link> ekle: rel="preconnect" ve rel="dns-prefetch" (href https://cdn.hizlihaber.com), rel="preload" as="image" (href https://cdn.hizlihaber.com/kapak/ana-haber-960.webp). <body>'ye bir <header> ekle; içine h1 (içeriği Hızlı Haber) ve p (içeriği Türkiye'nin hızlı haber kaynağı) koy.

Örnek çözümü göster

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hızlı Haber - Ana sayfa</title>
    <link rel="preconnect" href="https://cdn.hizlihaber.com">
    <link rel="dns-prefetch" href="https://cdn.hizlihaber.com">
    <link rel="preload" as="image" href="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp">
  </head>
  <body>
    <header>
      <h1>Hızlı Haber</h1>
      <p>Türkiye'nin hızlı haber kaynağı</p>
    </header>
  </body>
</html>

Kendini test et

Hangi rel değeri yalnızca DNS çözümünü önceden yapar, bağlantı kurmaz?
- rel="preload"
- rel="preconnect"
- rel="dns-prefetch"
- rel="stylesheet"
Cevabı göster

rel="dns-prefetch" — Doğru. dns-prefetch yalnızca DNS çözümünü önceden yapar; TCP/TLS bağlantısı kurmaz.

preload bağlantısını tamamla

<link rel="____" as="image" href="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp">

Cevabı göster

<link rel="preload" as="image" href="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp">

rel değerini rolüyle eşleştir

preconnect

Erken TCP/TLS bağlantısı
dns-prefetch

DNS çözümünü önceden yap
preload

Kritik kaynağı erken yükle
stylesheet

CSS dosyasını yükle

Kendin dene

index.html

Uzman bölümündeki tüm dersler

Kritik kaynak sırası