Render Engelleyen Kaynaklar Nedir?
Kısa tanım
Render engelleyen kaynaklar, tarayıcının sayfayı ekrana ilk kez çizebilmesi için indirilip işlenmesini beklemek zorunda kaldığı dosyalardır. Tipik örnekler, sayfanın head bölümündeki harici CSS dosyaları ile async ya da defer özelliği taşımayan senkron JavaScript dosyalarıdır. Bu dosyalar geç geldiğinde kullanıcı boş ekranda bekler; ilk çizim (FCP) ve ana içeriğin görünmesi (LCP) gecikir.
Diğer adları: Render-Blocking Resources, render engelleyici kaynaklar, oluşturmayı engelleyen kaynaklar, render-blocking requests
Tarayıcı neden beklemek zorunda?
Tarayıcı HTML'i yukarıdan aşağıya ayrıştırır. Harici bir stil dosyasına rastladığında, o dosya inip CSSOM (stil ağacı) kurulmadan ilk çizimi yapmaz. Bunun mantıklı bir gerekçesi var: içeriği stilsiz gösterip birkaç yüz milisaniye sonra baştan düzenlemek (FOUC, "flash of unstyled content") kullanıcı için daha kötü bir deneyimdir. Senkron bir <script> ise daha sert davranır: betik DOM'u değiştirebileceği için tarayıcı onu indirip çalıştırana kadar HTML'in geri kalanını işlemez. Üstelik betik stil bilgisi okuyabileceğinden, kendisinden önce gelen CSS'in de inmesini bekler.
HTML'in gelmesinden ilk piksellerin çizilmesine kadar uzanan bu zincirin tamamına kritik render yolu denir. Render engelleyen her dosya bu yola bir ağ gidiş-dönüşü ve bir işleme süresi ekler. Hızlı fiber bağlantıda fark edilmeyen iki küçük dosya, zayıf bir mobil bağlantıda FCP değerine saniyeler ekleyebilir.
Hangi kaynak engeller, hangisi engellemez?
| Kaynak | Davranış |
|---|---|
<link rel="stylesheet"> (media koşulu yok ya da eşleşiyor) | Render'ı engeller |
media="print" gibi o an eşleşmeyen bir media koşuluyla yüklenen stil | İndirilir ama ilk çizimi bekletmez |
CSS içindeki @import | Engelleyici bir zincir kurar; ikinci dosya ancak birincisi okununca keşfedilir |
async ya da defer içermeyen <script src> | Hem ayrıştırmayı hem çizimi engeller |
<script defer> ve type="module" | Ayrıştırma bitince sırayla çalışır, engellemez |
<script async> | Paralel iner, hazır olduğu anda çalışır; sıralama garantisi yoktur |
| Görseller ve fontlar | İlk çizimi engellemez; ancak fontlar metnin görünmesini geciktirebilir |
Bir head bölümünü düzeltmek
Kurumsal sitelerde sık rastlanan bir başlangıç noktası:
<head>
<link rel="stylesheet" href="/css/tum-site.css">
<script src="/js/slider.js"></script>
<script src="/js/analitik.js"></script>
</head>Aynı sayfanın daha sağlıklı hâli:
<head>
<style>/* yalnızca ilk ekranın ihtiyaç duyduğu kurallar */</style>
<link rel="stylesheet" href="/css/sayfa.css">
<link rel="stylesheet" href="/css/yazdir.css" media="print">
<script src="/js/slider.js" defer></script>
<script src="/js/analitik.js" async></script>
</head>Burada üç ayrı karar var. Sitenin tamamı için yazılmış tek dev stil dosyası, şablona özel daha küçük bir dosyaya bölündü ve ilk ekranın kuralları satır içine alındı (kritik CSS). Yazdırma stilleri media koşuluyla ilk çizimin dışına çıkarıldı. Slider betiği DOM'a ve sıraya bağlı olduğu için defer, kimseye bağımlı olmayan analitik betiği ise async aldı. Geç keşfedilen ama ilk ekranda gereken bir dosya varsa (örneğin CSS içinden çağrılan bir font) preload ile tarayıcıya erkenden bildirilebilir.
Ölçerken neye bakılır?
Lighthouse ve PageSpeed Insights'taki "Render-blocking requests" bulgusu, ilk çizimi bekleten istekleri ve tahmini kazancı listeler; Chrome'un bu bulguya ait açıklaması erteleme, küçük kritik kaynakları satır içine alma ve içeriği ilk çizime yetecek kadar azaltma önerilerini sıralar. SEO Analiz Aracı da laboratuvar ölçümünde render engelleyen kaynakları ayrı bir bulgu olarak raporlar. Önceliklendirirken üç soru sorun: Dosya ilk ekran için gerçekten gerekli mi? Ne kadar büyük? Ayrı bir alan adından mı geliyor, yani ek bir bağlantı kurulumu mu gerektiriyor?
Her engelleyiciyi kaldırmak hedef değil
Ana stil dosyasını tamamen asenkron yüklemek, sayfanın önce çıplak HTML olarak görünüp sonra yerine oturmasına yol açar; bu da hem kötü bir izlenim bırakır hem de düzen kaymasını artırabilir. Çok fazla CSS'i satır içine almak HTML'i şişirir ve o kuralların tarayıcı önbelleğinden yararlanmasını engeller. Bazı A/B test araçları içeriği bilinçli olarak gizleyip bekletir; bu bir tercih olarak masaya konmalıdır. Hedef sıfır engelleyici değil, ilk ekranın yalnızca gerçekten ihtiyaç duyduğu şeyi beklemesidir.