✦ Kısa tanım
Critical Rendering Path: Tarayıcının HTML, CSS ve JavaScript'i işleyerek sayfayı ekrana çizene kadar izlediği adımlar dizisidir.
Critical Rendering Path ne anlama gelir?
Tarayıcı HTML'den DOM'u, CSS'ten CSSOM'u oluşturur, ikisini birleştirip render ağacını kurar, yerleşimi hesaplar ve pikselleri çizer. Bu yolu engelleyen her kaynak ilk görüntülemeyi geciktirir.
Kritik render yolunu kısaltmak için ekranın üst kısmı için gereken CSS satır içine alınır, kritik olmayan CSS ve JS ertelenir, önemli kaynaklar preload ile erkenden istenir.
Örnek
Ana sayfanın üst kısmı için gereken 12 KB'lık CSS satır içine alınıp geri kalan stil dosyası asenkron yüklenir.
İlgili terimler
- Site Hızı & Core Web VitalsRender'ı Engelleyen KaynaklarTarayıcının sayfayı ekrana çizebilmek için indirilip işlenmesini beklediği CSS ve senkron JavaS…
- Site Hızı & Core Web VitalsFCP (First Contentful Paint)Sayfa yüklenmeye başladıktan sonra ekranda ilk metin, görsel veya SVG gibi içerik parçasının gö…
- Site Hızı & Core Web VitalsPreloadTarayıcıya sayfa için kritik olan bir kaynağı veya bağlantıyı erkenden hazırlamasını söyleyen k…
- Teknik SEOCSSHTML ile yapılandırılan içeriğin renk, yazı tipi, yerleşim ve animasyon gibi görsel sunumunu be…
Bu konuyu sitenizde birlikte ele alalım
Critical Rendering Path ve benzeri konuları markanızın hedefleriyle birlikte değerlendiriyor, uygulanabilir bir yol haritasına çeviriyoruz.
Web Sitesi Geliştirme →