Kritik CSS ve Görüntülemeyi Engelleme
Ekranın ilk görünümündeki kritik CSS'yi satır içine ekleyin ve kritik olmayan stilleri erteleyerek görüntülemenin engellenmesini ortadan kaldırın.
Kritik CSS ve Görüntülemeyi Engelleme, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Tarayıcı Nasıl Oluşturur?
Tarayıcı, HTML'yi DOM'a, CSS'yi CSSOM'a ayrıştırır; bunları bir oluşturma ağacında birleştirir, yerleşimi hesaplar ve ardından boyama yapar. CSS, CSSOM tamamlanana kadar oluşturmayı engeller; kritik yoldaki her CSS baytı ilk boyamayı geciktirir.
Kritik CSS Nedir?
Kritik CSS, ekranın ilk görünümündeki içeriği oluşturmak için gereken en küçük stil kümesidir. Bunu <head> içindeki <style> etiketlerine satır içinde eklemek, ilk görünüm için oluşturmayı engelleyen stil sayfası isteğini ortadan kaldırır.
Oluşturmayı Engelleyen Kaynaklar
Head bölümündeki herhangi bir <link rel="stylesheet"> oluşturmayı engeller. async/defer olmayan komut dosyaları da HTML ayrıştırmasını engeller. Oluşturmayı engelleyen kaynakları azaltmak, En Büyük İçerik Boyaması (LCP) ve İlk İçerik Boyamasını (FCP) doğrudan iyileştirir.
Kritik CSS'yi Çıkarma
critical (npm), Penthouse ve Puppeteer tabanlı çıkarıcılar, bir sayfayı belirli görünüm alanı boyutlarında oluşturur ve görünür öğelere uygulanan stilleri yakalar. Çıktı satır içine eklenir; tam stil dosyası eşzamansız olarak yüklenir.
Kritik Olmayan CSS'yi Eşzamansız Yükleme
Tam stil dosyasını engellemeden yüklemek için media="print" ile birlikte bir onload değişimi kullanın veya rel="preload" + as="style" + onload="this.rel='stylesheet'" kalıbını uygulayın.
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Yükleme İpuçları Olarak Medya Sorguları
Eşleşmeyen bir medya sorgusuyla (ör. media="print") yüklenen CSS dosyaları düşük öncelikle indirilir ve oluşturmayı engellemez. Bu, stil sayfalarını kritik yolu engellemeden yüklemek için kullanılan klasik yöntemdir.
HTTP/2 ve CSS Bölme
HTTP/2 çoklama kullanıldığında, CSS'yi çok sayıda küçük dosyaya bölmek HTTP/1'e göre daha az ek yük oluşturur. Her sayfanın stillerini içeren tek bir yekpare paket yerine, her rota için gereken CSS'yi (home.css, checkout.css) yükleyin.
CSS ve Ön Yükleme Scanner
Tarayıcının ön yükleme tarayıcısı, stil sayfası <link> etiketlerini erkenden bulur ve HTML ayrıştırıcısı bu etiketlere ulaşmadan önce indirmeyi başlatır. Stil sayfalarının <head> içinde, body içinde olmadığından emin olun; böylece ön yükleme tarayıcısı onları erkenden bulabilir.
Oluşturmayı Engelleme Etkisini Ölçme
Chrome DevTools Ağ paneli, şelale görünümünde kaynak engelleme süresini gösterir. Lighthouse, kaynak başına tasarruflarla birlikte "Oluşturmayı engelleyen kaynakları ortadan kaldırın" raporunu sunar. WebPageTest, film şeridi görünümünde renderBlockingResources değerini gösterir.
Sunucu Taraflı Kritik CSS
Next.js ve Astro gibi çerçeveler, SSR sırasında kritik CSS'yi otomatik olarak satır içine ekler. Sunucu, ilk HTML için hangi stillerin geçerli olduğunu belirler ve bunları satır içine ekler; istemci tarafında bir çıkarma adımı gerekmez.
Pratik Dengelemeler
Gereğinden fazla CSS'yi satır içine eklemek HTML boyutunu artırır, TTFB'yi yavaşlatır ve önbellek verimliliğini azaltır (HTML, CSS dosyaları kadar uzun süre önbelleğe alınmaz). Satır içine eklenen kritik CSS'yi ilk TCP tıkanıklık penceresine sığması için 14KB veya daha az olacak şekilde hedefleyin.
Bilgi Kontrolü
Oluşturmayı engelleyen bir stil sayfası, İlk İçerik Boyamasını neden geciktirir?
Özet
Kritik CSS, ekranın ilk görünümündeki stilleri satır içine ekleyerek oluşturma engellerinden kaynaklanan gecikmeleri ortadan kaldırır. Kalan CSS'yi preload veya medya sorgusu yöntemlerini kullanarak eşzamansız biçimde yükleyin. Etkiyi Lighthouse ve DevTools ile ölçün ve en iyi performans için kritik CSS yükünü 14KB'nin altında tutmayı hedefleyin.
Sıkça Sorulan Sorular
“Kritik CSS ve Görüntülemeyi Engelleme” dersi ücretsiz mi?
Evet — “Kritik CSS ve Görüntülemeyi Engelleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Kritik CSS ve Görüntülemeyi Engelleme” dersinde ne öğreneceğim?
Ekranın ilk görünümündeki kritik CSS'yi satır içine ekleyin ve kritik olmayan stilleri erteleyerek görüntülemenin engellenmesini ortadan kaldırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Kritik CSS ve Görüntülemeyi Engelleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Kritik CSS ve Görüntülemeyi Engelleme
- Yerleşim, Boyama ve Birleştirme: Görüntüleme İşlem Hattı
- will-change ve Katman Yükseltme
- CSS Kapsamı ve Kullanılmayan Stiller