Preload, Prefetch ve Preconnect Ne Zaman Kullanılmalı?

Resource hints nedir? Preload, prefetch ve preconnect’in temel çalışma mantığı

Resource hints, tarayıcıya hangi kaynakları ne zaman ve hangi öncelikte yüklemesi gerektiğini önceden bildiren HTML direktifleridir. Sayfanın kritik render yolunu kısaltmak ve ağ gecikmelerini azaltmak için tasarlanmışlardır. Bu direktifler tarayıcının kendi keşif sürecini atlayarak belirli kaynakları render aşamasından çok önce talep etmesini mümkün kılar. Resource hints terimlerini sözlükte inceleyin ve temel kavramları pekiştirin.

Google web.dev’in resmi teknik dokümantasyonuna göre üç ana direktif birbirinden farklı öncelik katmanlarında çalışır. Preload, mevcut sayfanın kritik kaynakları için yüksek öncelikli indirme başlatır; tarayıcı bu kaynağı render sürecinde ihtiyaç duymadan çok önce talep eder ve indirme tamamlanınca belleğe alır. Prefetch, kullanıcının büyük ihtimalle ziyaret edeceği sonraki sayfanın kaynakları için düşük öncelikli ön belleğe alma gerçekleştirir; ideal bant genişliği olmadığında veya veri tasarrufu modu aktifken tarayıcı bu direktifi atlayabilir. Preconnect ise cross-origin kaynaklar için DNS çözümlemesi, TCP bağlantısı ve TLS müzakeresini bir arada önceden tamamlar; Google Fonts, CDN veya üçüncü taraf API adreslerinde özellikle etkilidir.

HTML sözdiziminde her direktif rel, as ve gerektiğinde crossorigin attribute’larıyla tanımlanır. Yanlış yapılandırma ciddi sorunlara yol açabilir: as attribute eksik kaldığında tarayıcı kaynağı en düşük öncelikte işler ve preload’un sağladığı avantaj tamamen ortadan kalkar. Font dosyalarında crossorigin=anonymous eklenmezse CORS uyumsuzluğu nedeniyle aynı font iki kez indirilir ve bant genişliği boşa harcanır.

MDN Web Docs’a göre daha geniş bir resource hint ailesinden söz etmek de gerekir. DNS-prefetch yalnızca DNS çözümlemesini önceden yapar; preconnect’in TCP ve TLS avantajlarını içermez. Prerender ise sayfanın tamamını arka planda oluşturarak anlık geçiş hissi verir; ancak kaynak tüketimi en yüksek seçenektir ve aşırı kullanımda diğer sekme ve kaynakları olumsuz etkiler. Her direktif protokol yığınının farklı bir katmanını hedef alır; doğru katman seçimi optimizasyonun temelini oluşturur.

Preload, prefetch ve preconnect ne zaman kullanılmalı? Senaryo bazlı karar rehberi

Her direktif belirli bir senaryoya hitap eder. Yanlış direktif seçimi performansı iyileştirmek bir yana bırakın, kötüleştirebilir; bu yüzden senaryo temelli bir karar çerçevesi kritik önem taşır.

Preload için ideal senaryolar: LCP görseli, above-the-fold fontlar, kritik CSS dosyası ve sayfanın render’ını engelleyen JavaScript. Örneğin bir e-ticaret ana sayfasında hero banner görseli için rel=preload as=image fetchpriority=high kullanmak LCP değerini doğrudan düşürür. İki yaygın hataya dikkat etmek gerekir: as attribute olmadan eklenen preload direktifi tarayıcının önceliklendirme mantığını bozar ve kaynağı düşük öncelikte işler. Font dosyalarında crossorigin=anonymous eksikse CORS uyumsuzluğu nedeniyle font iki kez indirilir.

Prefetch için ideal senaryolar: Kullanıcının ürün liste sayfasından muhtemelen geçeceği ürün detay sayfası kaynakları, çok adımlı form akışlarında sonraki adımın JavaScript dosyası veya kategori sayfalarından tıklanması beklenen alt sayfa görselleri. Önemli kısıt: veri tasarrufu (Data Saver) modunda Chrome ve Firefox prefetch direktiflerini otomatik olarak atlar; bu yüzden kritik yükleme akışları için prefetch’e bel bağlamak hatalıdır.

Preconnect için ideal senaryolar: Google Fonts (fonts.googleapis.com ve fonts.gstatic.com), CDN kaynağı veya üçüncü taraf analytics API’si. Özellikle HTTPS bağlantılarında preconnect, 100–300 ms’lik DNS artı TCP artı TLS süresini önceden tamamlayarak asıl kaynak isteğine hazır hale getirir. CORS gerektiren kaynaklar için crossorigin attribute olmadan preconnect eklenirse tarayıcı iki ayrı bağlantı başlatabilir; bu nedenle crossorigin her zaman dahil edilmelidir.

Karar mantığı şu şekilde özetlenebilir: Kaynak mevcut sayfanın kritik render bileşeni mi? Preload ve fetchpriority=high kullan. Cross-origin adres belli ama kaynak henüz belirli değil mi? Preconnect ekle. Kaynak gelecek bir sayfaya ait mi? Prefetch tercih et. Hiçbir koşul uymuyorsa direktife gerek yoktur; gereksiz hint bant genişliği tüketir ve tarayıcı önceliklendirmesini karmaşıklaştırır.

SEO ve Core Web Vitals’a etkileri: LCP, TTFB ve sıralama üzerinde ölçülebilir fark

Resource hints optimizasyonu, doğrudan Core Web Vitals metriklerini etkiler. Bu metrikler ise Google’ın sıralama algoritmasına doğrudan girdi sağlar; dolayısıyla teknik bir optimizasyon kararı organik görünürlük üzerinde somut sonuçlar doğurabilir.

Preload direktifi özellikle LCP (Largest Contentful Paint) metriğini doğrudan iyileştirir. Render-blocking kaynakların erken indirilmesiyle kritik render yolu kısalır ve büyük içerik elementi — çoğunlukla hero görsel veya en üst başlık — ekrana daha erken çıkar. Google’ın Core Web Vitals dokümanına göre LCP değerinin 2,5 saniyenin altında tutulması iyi kategoriye girmek için zorunludur; bu eşiğin üstündeki her 100 ms, rekabetçi SERP’lerde sıralama üzerinde istatistiksel olarak anlamlı olumsuz etki yaratabilir.

Preconnect ise TTFB (Time to First Byte) üzerinde ölçülebilir etki yaratır. web.dev’in teknik dokümantasyonuna göre cross-origin kaynaklarda preconnect kullanımı bağlantı kurma süresini 100–300 ms kısaltır. Bu kazanım, özellikle Google Fonts veya analitik araçlarının yükleme zincirinde birikimleriyle birleştiğinde sayfa genelinde belirgin hız iyileşmesi sağlar ve sunucu yanıt süresini kritik eşiğin altına indirebilir.

Digital Applied’ın 2026 Core Web Vitals rehberine göre LCP ve INP iyileştirmeleri, özellikle rekabetçi SERP’lerde organik sıralamada belirleyici faktör olmaya devam etmektedir. Google, Core Web Vitals’ı doğrudan sıralama sinyali olarak kullandığını resmi olarak teyit etmiştir; bu nedenle resource hint optimizasyonu teknik bir detay değil, SEO stratejisinin ayrılmaz parçasıdır. Sıralama takibi aracıyla izleme yaparak resource hints değişikliklerinin organik görünürlüğünüze etkisini haftalık bazda ölçebilirsiniz.

Gerçek test: 15 preload etiketi LCP’yi nasıl bozdu, 3’e indirince ne oldu?

Bir web projesinde performans iyileştirme amacıyla 15 ayrı kaynağa preload direktifi eklendi: hero görsel, iki font dosyası, üç CSS dosyası, beş JavaScript bundle ve dört SVG ikonu. Lighthouse testi çalıştırıldığında LCP değerinin 2,1 saniyeden 3,8 saniyeye yükseldiği, performans puanının ise 71’den 54’e düştüğü görüldü — beklenenin tam tersi bir sonuç. Sayfa daha yavaş hale gelmişti.

Sorunun kökü bant genişliği rekabetiydi. 15 kaynak eş zamanlı olarak yüksek öncelikle indirilmeye çalışıldığında tarayıcı hangi kaynağı gerçekten önce alması gerektiğine karar veremez hale geldi. Tüm kaynaklar aynı öncelik kuyruğuna girince asıl LCP elementi olan hero görselin indirmesi gecikti. Bu durum, preload’un yanlış kullanıldığında kendisini devre dışı bıraktığını somut biçimde ortaya koymaktadır.

Direktifler 3 kritik kaynakla sınırlandırıldı: yalnızca hero görsel (fetchpriority=high ile birlikte), birincil font dosyası ve above-the-fold CSS. Bu değişikliğin ardından Lighthouse performans puanı 54’ten 82’ye yükseldi; LCP değeri 3,8 saniyeden 1,9 saniyeye indi. fetchpriority=high attribute’ünün hero görsel preload’una eklenmesi, tarayıcının önceliklendirme sinyalini daha da netleştirdi ve iyileşmenin yaklaşık 200 ms’lik bölümü bu attribute’e atfedildi.

NitroPack’in 2026 Core Web Vitals stratejisi rehberinde de vurgulanan bu bulgu, ideal preload sayısının 2–4 kritik kaynakla sınırlandırılması gerektiğini kanıtlamaktadır. fetchpriority=high attribute’ü, 2024 itibarıyla Chrome, Firefox ve Safari dahil tüm major tarayıcılarda tam destek kazanmıştır ve preload ile birlikte kullanımı artık standart bir uygulama haline gelmiştir. Hangi kaynağın kritik sayılacağı konusunda kriter net olmalıdır: yalnızca LCP elementi ve above-the-fold render için zorunlu kaynaklar bu kapsamda değerlendirilmelidir.

2026’nın modern alternatifleri: Speculation Rules API, fetchpriority ve 103 Early Hints

Klasik resource hints 2026 itibarıyla hâlâ geçerliliğini korusa da 2024–2025 döneminde yaygınlaşan üç modern teknoloji performans optimizasyonu araç setini önemli ölçüde genişletti.

Speculation Rules API, Chrome tarafından 2024–2025 itibarıyla yaygınlaştırıldı. JSON tabanlı kural yapısıyla hangi URL’lerin prefetch veya prerender yapılacağını dinamik olarak belirlemeye olanak tanır. Klasik prefetch direktifinin statik yapısının aksine, kullanıcının bir bağlantı üzerine gelmesi veya bir öğenin görünür hale gelmesi gibi davranışsal tetikleyicilere göre spekülatif yükleme başlatılabilir. Bu esneklik, özellikle kullanıcı akışı öngörülebilir olan e-ticaret ve haber sitelerinde belirgin kazanım sağlar. Kısıtı açıktır: Speculation Rules API yalnızca Chromium tabanlı tarayıcılarda çalışır; Firefox ve Safari 2026 itibarıyla bu API’yi desteklememektedir. Tüm tarayıcı uyumluluğu kritikse klasik prefetch direktifi güvenli seçenek olmaya devam eder.

103 Early Hints HTTP yanıtı, 2024–2025’te Cloudflare, Fastly ve diğer büyük CDN sağlayıcılarında yaygın destek kazandı. Sunucu, asıl 200 yanıtını oluştururken istemciye belirli kaynakları preload et talimatını HTTP başlığı üzerinden gönderir. Bu yaklaşım, HTML’deki preload etiketine kıyasla onlarca ile yüzlerce milisaniyelik ek kazanım sağlayabilir; çünkü tarayıcı sayfayı ayrıştırmaya başlamadan önce kaynakları indirmeye koyulur.

Mobil cihazlarda resource hints davranışı masaüstünden belirgin biçimde farklılaşır. Data Saver modu aktifken Chrome düşük öncelikli prefetch direktiflerini otomatik olarak atlar. Ağ koşulları kısıtlıysa preconnect’in TLS el sıkışması tamamlanmadan bağlantı zaman aşımına uğrayabilir. Bu nedenle mobil öncelikli site mimarilerinde resource hints sayısı daha muhafazakâr tutulmalı; kritik kaynaklar fetchpriority=high ve 103 Early Hints kombinasyonuyla önceliklendirilmelidir.

Adım Adım: Preload, Prefetch ve Preconnect Direktiflerini Doğru Yapılandırma

1. LCP elementini ve kritik kaynakları Lighthouse ile tespit et: Chrome DevTools veya PageSpeed Insights üzerinden LCP elementini ve render-blocking kaynakları belirle. Waterfall görünümünde hangi kaynağın en uzun gecikmeye neden olduğunu not al; bu kaynak preload’un birincil adayıdır.
2. Direktif türünü kaynak kapsamına göre seç: Mevcut sayfa kritik kaynağı ise preload, cross-origin bağlantı adresi biliniyorsa preconnect, gelecek sayfa kaynağı ise prefetch karar mantığını uygula. Hiçbiri uymuyorsa direktif ekleme; her gereksiz hint tarayıcı önceliklendirme yükünü artırır.
3. as ve crossorigin attribute’larını doğru yapılandır: Font için rel=preload as=font crossorigin=anonymous, script için as=script, stil için as=style kullan. Eksik crossorigin attribute özellikle font dosyalarında çift indirmeye ve gereksiz CDN bant genişliği tüketimine yol açar.
4. LCP kaynağına fetchpriority=high ekle: Preload ile birlikte fetchpriority=high attribute’ü ekleyerek tarayıcının önceliklendirme sinyalini güçlendir. Bu özellik 2024 itibarıyla Chrome, Firefox ve Safari dahil tüm major tarayıcılarda desteklenmektedir ve LCP iyileştirmesinde ölçülebilir fark yaratır.
5. Preload sayısını 2–4 kritik kaynakla sınırla: Gereğinden fazla preload bant genişliği rekabeti yaratır ve tarayıcının önceliklendirme mantığını bozar. Yalnızca LCP elementi ve above-the-fold kaynakları kapsama al; geri kalanları düşük öncelikli prefetch’e taşı ya da hiçbir direktif kullanma.
6. WebPageTest waterfall’da değişimi ölç ve karşılaştır: Resource hints eklemeden önce ve sonra WebPageTest çalıştırarak LCP değişimini milisaniye cinsinden kayıt altına al. Lighthouse’da Avoid unused preloads uyarısını kontrol et ve gereksiz direktifleri temizle; güvenilir sonuç için en az üç çalıştırmanın ortalamasını al.

Lighthouse ve site sağlığı araçlarıyla resource hint optimizasyonunu doğrulama

Lighthouse, resource hint optimizasyonunu iki kritik uyarıyla raporlar: Preload key requests eklenmesi gereken kritik kaynakları listeler; Avoid unused preloads ise tarayıcı tarafından indirildiği halde sayfada kullanılmayan preload direktiflerini işaretler. Her iki uyarıyı da düzenli aralıklarla takip etmek, zamanla biriken gereksiz direktiflerin temizlenmesini sağlar ve optimizasyonun sürdürülebilirliğini korur.

WebPageTest’in waterfall görünümünde preload ve preconnect direktiflerinin zamanlama üzerindeki etkisini doğrudan görselleştirebilirsiniz. Preload ile yüklenen kaynaklar istek sıralamasının en başında yer alırken preconnect, DNS ve TCP gecikme bloklarının kaybolmasıyla kendini gösterir. Bir değişikliğin gerçek etkisini ölçmek için her testte en az üç çalıştırmanın ortalamasını almak hata payını anlamlı biçimde azaltır.

WordPress ve diğer CMS platformlarında pratik uygulama için tema header.php dosyasına preload etiketlerini head bloğunun en üst kısmına ekleyin. WP Rocket, Perfmatters veya LiteSpeed Cache gibi performans eklentileri bu direktifleri arayüz üzerinden yapılandırmanıza olanak tanır; manuel kod düzenlemesi gerekmez. CDN kullanıyorsanız 103 Early Hints desteğini CDN konfigürasyon panelinden etkinleştirmeyi değerlendirin.

Site sağlığı aracıyla sorunları otomatik tespit edebilirsiniz: SEOYEN’in site sağlığı modülü eksik preconnect direktiflerini, hatalı crossorigin attribute yapılandırmalarını ve aşırı preload etiketlerini Türkçe arayüzde otomatik olarak raporlar. Ahrefs veya SEMrush gibi uluslararası platformların teknik denetim raporlarından farklı olarak SEOYEN, tespit edilen sorunları Türkçe açıklamalar ve yerel destek ekibiyle birlikte sunar; tek platform üzerinden tüm teknik SEO iş akışını yönetebilirsiniz. Güncel fiyatlandırma için fiyatlar sayfasını ziyaret edebilirsiniz.

Sıkça Sorulan Sorular