Web sayfanızdaki render-blocking (sayfa yüklemesini engelleyen) JavaScript ve CSS kaynaklarını tespit edin. Senkron scriptler ve stil dosyaları sayfa performansını olumsuz etkiler.
Render-blocking kaynaklar, tarayıcının sayfayı görüntülemeden önce indirip işlemesi gereken JavaScript ve CSS dosyalarıdır. Bu kaynaklar sayfanın ilk boyama süresini (First Contentful Paint) geciktirir ve kullanıcı deneyimini olumsuz etkiler.
Bu araç, sayfanızın <head> bölümünü analiz ederek senkron yüklenen scriptleri, render-blocking stil dosyalarını ve büyük satır içi scriptleri tespit eder. Böylece hangi kaynakların optimize edilmesi gerektiğini hızlıca görebilirsiniz.
Kontrol etmek istediğiniz sayfanın URL'sini girin.
"Tara" butonuna tıklayın ve sayfanın analiz edilmesini bekleyin.
Sonuçlarda render-blocking kaynakları ve türlerini inceleyin, önerilere göre optimize edin.
Render-blocking kaynak nedir?
Tarayıcı bir sayfayı yüklerken <head> bölümündeki senkron JavaScript ve CSS dosyalarını önce indirip çalıştırır. Bu süre boyunca sayfa boş kalır. Bu dosyalara "render-blocking" kaynaklar denir çünkü sayfanın görüntülenmesini engellerler.
async ve defer farkı nedir?
async özniteliği, scriptin paralel olarak indirilip hazır olduğunda hemen çalıştırılmasını sağlar; çalışma sırası garanti değildir. defer ise scriptin paralel indirilip HTML ayrıştırması tamamlandıktan sonra, sırasıyla çalıştırılmasını sağlar. Her iki yöntem de render-blocking davranışını ortadan kaldırır.
CSS render-blocking nasıl önlenir?
Kritik CSS'i sayfa içinde satır içi olarak ekleyebilir, geri kalan CSS dosyalarını media="print" ve onload ile erteleyebilirsiniz. Ayrıca yalnızca ekranın üst kısmında görünen içerik için gereken stilleri (critical CSS) ayırarak sayfa ilk boyamasını hızlandırabilirsiniz.