Ne anlama gelir?
Kaynak ipuçları, tarayıcıya "bunu birazdan kullanacağım, şimdiden hazırlan" demenin yoludur. Doğru kullanıldığında yükleme sırasındaki bekleme sürelerini kısaltır.
Dört temel direktif
| Direktif | Ne yapar | Kullanım örneği |
|---|---|---|
preconnect | Başka bir alan adına bağlantıyı önceden kurar | Yazı tipi veya CDN sunucusu |
dns-prefetch | Yalnızca DNS çözümlemesini yapar | Daha hafif alternatif |
preload | Kaynağı öncelikli indirir | LCP görseli, kritik yazı tipi |
prefetch | Muhtemelen sonra gerekecek kaynağı düşük öncelikle indirir | Sonraki sayfanın kaynakları |
En değerli kullanım: LCP görseli
<link rel="preload" as="image" href="kapak.webp">İlk ekrandaki büyük görselin önceden yüklenmesi, LCP üzerinde ölçülebilir iyileşme sağlar. Bu, en yüksek getirili kaynak ipucu kullanımıdır.
Yazı tipi optimizasyonu
<link rel="preconnect" href="https://yazitipi-sunucusu.com" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="ana-yazitipi.woff2" crossorigin>Yazı tipleri geç yüklendiğinde metin görünmez veya sonradan değişir; bu hem deneyimi bozar hem CLS üretir.
Aşırı kullanım zararlıdır
Her şeyi preload etmek, önceliklendirmeyi anlamsız kılar:
- Bant genişliği kritik kaynaklardan çalınır
- Tarayıcının kendi önceliklendirmesi bozulur
- Performans kötüleşebilir
Kural: Yalnızca gerçekten kritik ve geç keşfedilen kaynaklar için kullanın. Genellikle 2-4 adet yeterlidir.
Doğrulama
Tarayıcı geliştirici araçlarında konsol, kullanılmayan preload kaynakları için uyarı verir. Bu uyarılar, gereksiz direktifleri temizlemek için iyi bir başlangıçtır.
Ne anlama gelir?
Kaynak ipuçları (resource hints), tarayıcıya "birazdan bu kaynağı isteyeceğim, şimdiden hazırlan" demenin yollarıdır. preconnect, dns-prefetch, preload ve prefetch bunların başlıcalarıdır. Bu ipuçları, kritik kaynakların (font, hero görseli, üçüncü taraf bağlantılar) beklenmeden hazır olmasını sağlayarak sayfanın algılanan yükleme hızını iyileştirir.
Başlıca kaynak ipuçları
- preconnect: Bir alan adıyla bağlantıyı önceden kurar
- dns-prefetch: DNS çözümlemesini erken yapar
- preload: Kritik bir kaynağı (font, hero görsel) öne alır
- prefetch: Sonraki sayfada gerekecek kaynağı hazırlar
Ölçülü kullanım şart
Kaynak ipuçları güçlüdür ama her şeyi "preload" etmek fayda değil, tıkanıklık yaratır. Çünkü çok sayıda kaynağı öne almak, tarayıcının önceliklerini karıştırır ve gerçekten kritik olanların gecikmesine yol açabilir. Doğru yaklaşım, yalnızca ilk görünüm için gerçekten kritik olan az sayıda kaynağa (örneğin ana font ve hero görseli, önemli üçüncü taraf bağlantılar) ipucu vermektir.
Gerçek örnek
Bir site, üçüncü taraf bir fontu geç yüklediği için metinde gecikme yaşıyordu. Kritik fonta preload ve font sağlayıcısına preconnect eklendiğinde, font çok daha erken hazır oldu ve metin gecikmeden göründü.
Özet
Kaynak ipuçları (preconnect, dns-prefetch, preload, prefetch), tarayıcıya kritik kaynakları önceden hazırlatan yönergelerdir. Algılanan yükleme hızını iyileştirir; ancak ölçülü kullanılmalı, yalnızca gerçekten kritik az sayıda kaynağa uygulanmalıdır.