CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

CSS performansı nedir?

CSS kursu · Uzman · Ders 7/53

CSS'in render performansını etkileyen faktörleri öğrenirsin.

CSS performansı ne demek?

CSS sadece görsellik değil, tarayıcının sayfayı ekrana getirme sürecini de etkiler. Bu sürece render yolu (render path) denir ve dört aşamadan oluşur: Style, Layout, Paint, Composite.

Her CSS bildirimi bu aşamalardan bir veya birkaçını çalıştırır. color yalnız paint'i tetiklerken, width layout'u yeniden hesaplatır. Performanslı CSS, en az aşamayı çalıştıranı seçer.

Kritik CSS nedir?

Kritik CSS (critical CSS), sayfanın ilk ekranında görünen bölümün stilleridir. Tarayıcı, dış stil dosyasını indirip ayrıştırana kadar sayfayı boyamaz; bu süreye render-blocking denir.

Kritik stilleri <style> etiketiyle <head> içine inline verirsen, tarayıcı dış dosyayı beklemek zorunda kalmaz. Geri kalan stilleri de media özniteliğiyle erteleyebilirsin.

Uygulama Kritik CSS'i head içinde inline yaz

Aşağıdaki CSS'i tamamla. <style> etiketi aç ve içine .hero bildirimi yaz; background: #6366f1 ve color: white bildirimleri olsun. </style> kapanışını da ekle.

Örnek çözümü göster 
/* hero için kritik CSS */
<style>
  .hero {
    background: #6366f1;
    color: white;
  }
</style>

Kendini test et

  1. Hangi CSS özelliği yalnız paint aşamasını tetikler?

    .box {
  /* bu özellik yalnız paint'i çalıştırır */
  ___: #ef4444;
}
    • width
    • margin-left
    • color
    • display
    Cevabı göster

    color — Doğru. color yalnız paint aşamasını çalıştırır; layout hesaplamaz.

  2. Render yol aşamalarını anlamıyla eşle

    Style
    Seçicileri eşleştirip stilleri uygular
    Layout
    Kutu konum ve boyutunu hesaplar
    Paint
    Pikselleri ekrana çizer
    Composite
    Katmanları birleştirir

  3. Kritik CSS için hero arka planını yaz

    <style>
  .hero { background: ____; }
</style>
    Cevabı göster 
    <style>
  .hero { background: #6366f1; }
</style>

Uzman bölümündeki tüm dersler

1 CSS mimarisi

  1. BEM metodolojisi
  2. CSS örgütme
  3. Specificity yönetimi
  4. Cascade layers
  5. Modüler CSS
  6. Özet - Bileşen kütüphanesi

2 CSS performansı

  1. CSS performansı nedir?
  2. Selector performansı
  3. Layout ve paint
  4. Will-change
  5. Contain
  6. Özet - Hızlı kart listesi

3 CSS Houdini

  1. Houdini nedir?
  2. Paint API
  3. Layout API
  4. Properties ve values API
  5. Typed OM
  6. Özet - Özel arka plan deseni

4 İleri container queries

  1. Container-type derinlemesine
  2. Container-name
  3. Container query units
  4. Container-style
  5. Container bileşenleri
  6. Özet - Duyarlı widget sistemi

5 View transitions

  1. View transitions nedir?
  2. ::view-transition
  3. View-transition-name
  4. Geçiş animasyonları
  5. Cross-document transitions
  6. Özet - Geçişli galeri

6 Kaydırma tabanlı animasyonlar

  1. Scroll-driven animasyonlar
  2. Scroll function
  3. View function
  4. Timeline_ATTACHMENT
  5. Scroll-snap
  6. Özet - Kaydırma hikayesi

7 Anchor positioning

  1. Anchor positioning nedir?
  2. Anchor-name
  3. Position-anchor
  4. Anchor() fonksiyonu
  5. Position-try
  6. Özet - Açılır panel

8 CSS nesting

  1. CSS nesting nedir?
  2. & nesting selector
  3. Nested media
  4. Nested pseudo
  5. Nested compound
  6. Özet - Bileşen stili

9 Uzman finali

  1. Meydan okuma - BEM mimarisi
  2. Meydan okuma - Container sistemi
  3. Meydan okuma - View transitions
  4. Meydan okuma - Anchor panel
  5. Meydan okuma - Uzman projesi