Preload, Prefetch, Preconnect: Resource Hints Rehberi

Preload, Prefetch, Preconnect: Resource Hints Rehberi

Resource hints, tarayıcıya gelecekte ihtiyaç duyulacak kaynaklar hakkında ipuçları vererek sayfa yükleme performansını artıran HTML mekanizmalarıdır. Doğru kullanıldığında LCP süresini yüzlerce milisaniye kısaltabilir, sayfa geçişlerini anlık hale getirebilir ve bağlantı kurulum süresini ortadan kaldırabilir. Ancak yanlış veya aşırı kullanım, bant genişliği israfına ve performans düşüşüne yol açar. Bu rehberde her bir resource hint'in çalışma prensibini, kullanım alanlarını ve best practice'lerini detaylı olarak inceleyeceğiz.

Resource Hints Genel Bakış

Beş temel resource hint mevcuttur:

Preload: Kritik Kaynakları Erken Yükle

Preload, mevcut sayfa için kesinlikle gerekli olan kaynakları tarayıcıya erkenden bildirmenizi sağlar. CSS içinde referans verilen font veya background-image gibi geç keşfedilen kaynaklar için idealdir:

<!-- Font preload - CSS parse edilmeden keşfedilir -->
<link rel="preload" href="/fonts/inter-regular.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- LCP görseli preload -->
<link rel="preload" href="/images/hero.webp"
      as="image" type="image/webp"
      fetchpriority="high">

<!-- Responsive preload: farklı ekranlar için farklı kaynak -->
<link rel="preload" href="/images/hero-mobile.webp"
      as="image" type="image/webp"
      media="(max-width: 768px)">
<link rel="preload" href="/images/hero-desktop.webp"
      as="image" type="image/webp"
      media="(min-width: 769px)">

<!-- Critical CSS dosyası -->
<link rel="preload" href="/css/critical.css" as="style">
<link rel="stylesheet" href="/css/critical.css">

<!-- JavaScript modülü -->
<link rel="modulepreload" href="/js/app.mjs">

Preconnect: Bağlantı Süresini Ortadan Kaldır

Üçüncü parti domain'lere bağlantı kurmak DNS çözümleme, TCP handshake ve TLS negotiation adımlarını gerektirir. Bu süre 200-600ms arasında olabilir. Preconnect ile bu adımları önceden tamamlayabilirsiniz:

<!-- Google Fonts için preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- CDN domain'i -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- Analytics -->
<link rel="preconnect" href="https://www.google-analytics.com">

<!-- API endpoint -->
<link rel="preconnect" href="https://api.example.com">

<!-- dns-prefetch: Preconnect'in fallback'i + daha hafif -->
<!-- Tüm tarayıcılarda desteklenir, sadece DNS çözümler -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">

<!-- İkisini birlikte kullanma pattern'i -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

Prefetch: Sonraki Sayfa İçin Hazırlık

Prefetch, kullanıcının muhtemelen ziyaret edeceği bir sonraki sayfanın kaynaklarını düşük öncelikli olarak indirir:

<!-- Sonraki sayfanın JavaScript chunk'ı -->
<link rel="prefetch" href="/js/about-page.chunk.js">

<!-- Sonraki sayfanın verisi -->
<link rel="prefetch" href="/api/products.json" as="fetch">

<!-- Sayfa tamamını prefetch (Speculation Rules API) -->
<script type="speculationrules">
{
  "prefetch": [
    {
      "where": { "href_matches": "/products/*" },
      "eagerness": "moderate"
    }
  ],
  "prerender": [
    {
      "where": { "href_matches": "/about" },
      "eagerness": "moderate"
    }
  ]
}
</script>

Programatik Resource Hint Yönetimi

JavaScript ile resource hint'leri dinamik olarak ekleyebilirsiniz. Bu, kullanıcı davranışına göre akıllı prefetch yapmanızı sağlar:

// Hover'da prefetch - kullanıcı tıklamadan önce hazırlık yap
class SmartPrefetcher {
  constructor() {
    this.prefetched = new Set();
    this.observer = null;
    this.init();
  }

  init() {
    // Viewport'a giren linkleri prefetch et
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const href = entry.target.getAttribute('href');
          this.prefetchURL(href);
        }
      });
    }, { rootMargin: '200px' });

    // Internal linkleri izle
    document.querySelectorAll('a[href^="/"]').forEach(link => {
      this.observer.observe(link);

      // Hover'da preconnect + prefetch
      link.addEventListener('mouseenter', () => {
        this.prefetchURL(link.href);
      }, { once: true });
    });
  }

  prefetchURL(url) {
    if (this.prefetched.has(url)) return;
    if (navigator.connection?.saveData) return;  // Data saver modda prefetch yapma

    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = url;
    document.head.appendChild(link);
    this.prefetched.add(url);
  }

  // Preconnect helper
  preconnect(origin) {
    const link = document.createElement('link');
    link.rel = 'preconnect';
    link.href = origin;
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
  }
}

// Sayfa yüklendikten sonra başlat
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => new SmartPrefetcher());
} else {
  setTimeout(() => new SmartPrefetcher(), 2000);
}

Fetchpriority ile Önceliklendirme

fetchpriority attribute'u ile tarayıcının kaynak indirme önceliğini doğrudan kontrol edebilirsiniz:

<!-- LCP görseli: Yüksek öncelik -->
<img src="/hero.webp" fetchpriority="high" alt="Hero">

<!-- Above-the-fold olmayan görsel: Düşük öncelik -->
<img src="/footer-logo.webp" fetchpriority="low" alt="Logo">

<!-- Kritik script -->
<script src="/js/critical.js" fetchpriority="high"></script>

<!-- Preload ile birlikte -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

Resource Hints Kontrol Listesi

• LCP görseli veya geç keşfedilen kritik kaynaklar için preload kullanın
• Üçüncü parti domain'lere (CDN, API, font servisleri) preconnect ekleyin
• Sonraki sayfa navigasyonları için prefetch kullanın
• 4-6'dan fazla domain'e preconnect yapmayın
• Kullanılmayan preload'lardan kaçının
• Data saver modda prefetch'i devre dışı bırakın
• fetchpriority ile kaynak önceliğini kontrol edin

Sonuç

Resource hints, tarayıcıya stratejik ipuçları vererek sayfa yükleme performansını önemli ölçüde artırır. Preload ile kritik kaynakları erken keşfettirin, preconnect ile bağlantı süresini ortadan kaldırın ve prefetch ile sonraki navigasyonu hızlandırın. Her hint'in amacını ve sınırlarını anlayarak kullanın; aşırı kullanım fayda yerine zarar verebilir.

Kaynaklar

• web.dev - Preload Critical Assets
• web.dev - Preconnect and dns-prefetch
• Chrome - Speculation Rules API
• MDN - Prefetch