Daha Fazla CSS Dağıtarak Site Performansını İyileştirmek

Modern ön uç çalışmalarında, en hızlı sayfanın en az şeyi dağıttığını söyleyen içgüdüsel bir kural vardır: daha az JavaScript, daha az yazı tipi, daha az istek. Bu nedenle GitHub'ın mühendislik ekibi, daha fazla CSS dağıtarak site performansını iyileştirmek hakkında yazdığında, bu bir çelişki gibi okundu. Yavaş ve JavaScript ağırlıklı bir arayüz için çözüm, uygulamadaki stilleri soymak değildi. Bunun yerine, daha fazlasını düz, statik, önbelleğe alınabilir stil sayfaları olarak geri koymak ve yalnızca tarayıcıda stil oluşturmak için var olan JavaScript'i silmekti.

Ayrım, makalenin tamamını oluşturuyor. "Daha fazla CSS" dağıtmak, kritik yolunuzu şişiren daha büyük bir stil sayfası anlamına gelmez. Stil oluşturmayı çalışma zamanından derleme zamanına taşımak ve ardından tarayıcının gerçekten mükemmel olduğu şeyi yapmasına izin vermek anlamına gelir: bir stil sayfasını bir kez ayrıştırmak, önbelleğe almak ve her gezinmede yeniden kullanmak.

Çalışma Zamanı Stilinin Gizli Maliyeti

CSS-in-JS kütüphaneleri gerçek sorunları çözdü. Bileşen yazarlarına kapsam belirleme, birlikte konumlandırma ve bir adlandırma kuralı icat etmeden stillere prop enterpolasyonu yapma yeteneği verdiler. Ödünleşim mimariydi: derleme zamanı sorununu tarayıcıya taşıdılar.

Stil oluşturma JavaScript işidir

Çalışma zamanı CSS-in-JS kütüphanesi kullanan her sunucu tarafından oluşturulmuş sayfa, tarayıcıdan aynı işi iki kez yapmasını ister. Sunucu, stilleri <style> etiketlerine serileştirir, ardından istemci kütüphanesi uyanır, bileşen ağacında dolaşır, sınıf adlarını yeniden hash'ler ve sonucu uzlaştırır. Bu iş, hızlandırmaya çalıştığınız düzen ve boyama adımlarıyla rekabet ederek ana iş parçacığında gerçekleşir.

// Runtime CSS-in-JS: this stylesheet does not exist until hydration runs
const Button = styled.button`
  background: ${(p) => (p.primary ? "#1f883d" : "transparent")};
  border: 1px solid #d0d7de;
  padding: 6px 16px;
  border-radius: 6px;
  font: inherit;
`;

Aynı bileşenin derleme zamanı stil sayfası olarak ifade edilmesi, hem çalışma zamanı bağımlılığını hem de serileştirme işini ortadan kaldırır:

/* button.module.css, parsed once, cached forever */
.button {
  padding: 6px 16px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font: inherit;
  background: transparent;
}
.buttonPrimary {
  background: #1f883d;
  color: #ffffff;
}

import styles from "./button.module.css";

export function Button({ primary, ...props }) {
  const className = primary
    ? `${styles.button} ${styles.buttonPrimary}`
    : styles.button;

  return <button className={className} {...props} />;
}

Burada yeni olan hiçbir şey yok. Hafife alınması kolay olan şey, olgun bir CSS-in-JS yığınının sessizce ne kadar yer kapladığıdır: kütüphanenin kendisi, prop enterpolasyon yardımcı programları, tema sağlayıcısı, serileştirici ve her paket kendi kopyasına bağımlı olduğunda büyüyen yinelenen çerçeve kodu.

Doğrudan kritik işleme yolu üzerinde yer alır

Bir <link rel="stylesheet"> işlemeyi engeller, ancak bunu bir kez yapar ve tarayıcı HTML akışı hala gelirken dosyayı ayrıştırabilir. Çalışma zamanı CSS'i farklı çalışır: tarayıcı, JavaScript indirilip, ayrıştırılıp, derlenip ve yürütülene kadar bileşen stillerini oluşturmaya bile başlayamaz. Orta seviye bir telefonda bu, tek bir düğmenin arka plan rengini almasından önce bir saniye veya daha fazla ana iş parçacığı çalışması anlamına gelir.

Önbelleğinizi parçalar

Oluşturulan sınıf adları, bileşen kaynağı her değiştiğinde değişir, bu da stil sayfasının neredeyse her dağıtımda geçersiz hale geldiği anlamına gelir. Bunu düzinelerce rota düzeyindeki pakete bölün ve bir panelde sağlıklı görünen ancak tekrar ziyaretlerde nadiren tetiklenen bir önbellek isabet oranı elde edersiniz. Buna karşılık, içerik hash'li statik bir stil sayfası Cache-Control: public, max-age=31536000, immutable ile sunulabilir ve etkili bir şekilde asla iki kez indirilmez.

Hidrasyon sırasında işi ikiye katlar

Sunucu tarafından enjekte edilen ve istemci tarafından oluşturulan stiller arasındaki hidrasyon uyumsuzlukları, klasik bir titreme kaynağıdır. Tarayıcı bir dizi kuralı boyar, ardından istemci kütüphanesi bunları etkileşim sırasında değiştirerek bir stil yeniden hesaplamasına ve bazen bir düzen kaymasına neden olur. Derleme zamanında hesaplanan statik sınıf adları her iki tarafta da aynıdır, bu nedenle ilk boyama aynı zamanda son boyamadır.

GitHub Gerçekte Neyi Değiştirdi

Geçiş, tek bir yeniden düzenlemeden ziyade beş mimari hamle olarak anlaşılmalıdır. Hiçbiri bir bileşen modelini terk etmeyi gerektirmez ve hiçbiri tam bir yeniden yazım gerektirmez.

Tasarım tokenları CSS özel özellikleri haline geldi

Renk, boşluk, yarıçap ve tipografi ölçekleri, özel özellikler olarak global bir :root bloğuna taşındı. Bileşenler, bir JavaScript tema nesnesini içe aktarmak yerine var(--color-bg-default) referans alır. Statik CSS'in çoğu durumda dinamik stillerin yerini alacak kadar ifade gücüne sahip olmasını sağlayan şey budur ve sıfır JavaScript ile çalışma zamanı temalandırmayı (karanlık mod, yüksek kontrast) mümkün kılar.

Bileşen stilleri önceden derlendi

Her bileşen, derleme zamanında oluşturulan ve bir hash veya modül kuralına göre kapsamı belirlenmiş gerçek bir stil sayfasına kavuştu. Çıktı, herhangi bir tarayıcının ayrıştırma hızında ayrıştırabileceği sıradan CSS'dir.

Kritik CSS, belge başlığına satır içi olarak eklendi

Yalnızca ilk görüntü alanı için gereken kurallar HTML'e satır içi olarak eklenir. Bu genellikle 8-14 KB sıkıştırılmış boyutundadır ve ilk boyamanın, görünür sayfayı şekillendiren stil sayfası için asla bir ağ gidiş-dönüşü beklemediği anlamına gelir.

<head>
  <!-- Critical: exactly what the first viewport needs, nothing more -->
  <style>
    /* reset + tokens + header + hero + above-the-fold grid */
  </style>

  <!-- Everything else: one hashed, immutable, long-cached file -->
  <link
    rel="stylesheet"
    href="/assets/app.8f3a1c2d.css"
    media="print"
    onload="this.media='all'"
  />
  <noscript>
    <link rel="stylesheet" href="/assets/app.8f3a1c2d.css" />
  </noscript>
</head>

Sunucu tarafından oluşturulan işaretleme, nihai sınıf adlarını taşır

Sınıf adları derleme zamanında var olduğu için, sunucunun döndürdüğü HTML zaten stillendirilmiştir. İkinci bir geçiş, uzlaştırma adımı veya yavaş bağlantılarda stillendirilmemiş içerik parlaması yoktur.

Basamak katmanları, özgüllük hack'lerinin yerini aldı

Paylaşılan bir tasarım sistemi, öngörülebilir basamak sırasına bağlıdır. Katman sırasını bir kez, baştan bildirmek, geçersiz kılmaları belirleyici hale getirir ve !important veya giderek daha derin seçicilere başvurma eğilimini ortadan kaldırır.

@layer reset, tokens, base, components, utilities;

@layer components {
  .card {
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-2);
    padding: var(--space-4);
  }
}

@layer utilities {
  .mt-4 { margin-top: var(--space-4); }
}

Sayılar: Daha Fazla CSS Dağıttığınızda Ne Değişir?

Stil oluşturmayı derleme zamanına taşımak, yalnızca hacmi değil, dağıttığınız şeyin şeklini de değiştirir. Geriye kalan baytlar ucuzdur: iyi sıkışırlar, her rota arasında paylaşılırlar ve bir yıl boyunca önbellekte tutulurlar.

Mimari getiri aynı anda dört yerde kendini gösterir: indirilecek daha az JavaScript, ilk boyamadan önce daha az ana iş parçacığı çalışması, gezinmeler arasında paylaşılan önbelleğe alınabilir bir stil sayfası ve sunucu ile istemcide aynı işaretleme.

En hızlı stil sayfası, tarayıcının bir kez ayrıştırdığı, bir yıl boyunca önbelleğe aldığı ve bir daha asla oluşturmak zorunda kalmadığıdır.

Pratik Bir Geçiş Oyun Kitabı

Aynı mantığı uygulamak için GitHub'ın kod tabanına ihtiyacınız yok. Geçiş aşamalıdır ve her adım bağımsız olarak dağıtılabilir.

1. Çalışma zamanında gerçekte neyin işlendiğini envanterleyin

DevTools'u açın, bir sayfa yükleyin ve document.styleSheets sayısını sayın. Hash'lenmiş sınıf adlarına sahip düzinelerce enjekte edilmiş <style> etiketi bulursanız, hedefinizi bulmuşsunuz demektir. Performans paneliyle çapraz referans yapın: DOMContentLoaded ile ilk içerikli boyama arasında uzun görevler arayın.

2. Katlanma çizgisinin üstündeki CSS'i ayıklayın

Mümkün olan en küçük satır içi blokla başlayın. Güvenilir bir buluşsal yöntem, sıfırlamayı, tokenları ve ilk iki görüntü alanı yüksekliği tarafından kullanılan kuralları satır içi yapmaktır. Katlanma çizgisinin altındaki her şey ertelenmiş stil sayfasından yüklenir.

3. Çalışma zamanı bileşenlerini statik sınıflara dönüştürün

Bileşen bileşen çalışın, en yüksek trafiğe sahip olanlardan başlayın. Prop odaklı varyantlar, ya değiştirici sınıflar haline gelir ya da bir sarmalayıcı üzerinde ayarlanan özel özellikler haline gelir. Çağrı sitelerinin değişmemesi için bileşen API'sini aynı tutun.

// Genuinely dynamic values still belong in an inline style, not a generated sheet
<div
  className={styles.progressBar}
  style={{ "--progress": `${percent}%` }}
  role="progressbar"
  aria-valuenow={percent}
/>

.progressBar {
  width: var(--progress, 0%);
  transition: width 200ms ease-out;
}

Bu desen, tüm geçişin işgücüdür: stilin yapısı statik ve önbelleğe alınabilirken, değer dinamik kalır ve güncellenmesi hiçbir maliyet gerektirmez.

4. Katman sırasını erkenden belirleyin

Bir özgüllük sorununuz olmadan önce, giriş stil sayfanızın en üstünde @layer sırasını bildirin, sonra değil. Eski bir basamağa katmanları sonradan eklemek, onlarla başlamaktan çok daha zahmetlidir.

5. Dosya adlarını hash'leyin ve değişmez bir şekilde önbelleğe alınİçerik karması artı immutable, "daha fazla CSS"yi "ücretsiz CSS"ye dönüştüren şeydir. Bir oturumdaki ikinci sayfa görüntülemesi, sitedeki her stil kuralı için HTTP önbelleğine isabet etmelidir.

6. Gerçekten dinamik stillendirmeyi dinamik tutun

Dönüşüm, kaydırma konumu ve ölçüm tabanlı değerler satır içi stillere, requestAnimationFrame veya Web Animasyonları API'sine aittir. CSS özel özelliklerinin zaten çözdüğü bir sorunu çözmek için bir çalışma zamanı stil motorunu yeniden tanıtmayın.

İyileştirmeyi Nasıl Ölçeriz

Aynı üç şeyi öncesinde ve sonrasında ölçün: boyama zamanlaması, ana iş parçacığı uzun görevleri ve stil sayfası sayısı. Küçük bir PerformanceObserver betiği, bir izleme bağımlılığı eklemeden size üçünü de verir.

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, Math.round(entry.startTime));
  }
}).observe({ type: "paint", buffered: true });

new PerformanceObserver((list) => {
  const long = list.getEntries().filter((e) => e.duration > 50);
  console.log(`${long.length} long tasks after load`);
}).observe({ type: "longtask", buffered: true });

console.log("stylesheets:", document.styleSheets.length);

En büyük hareketi, tekrarlanan ziyaretlerde ve kısıtlanmış mobil profillerde, ortadan kaldırılan JavaScript ayrıştırma maliyetinin baskın olduğu ilk boyamaya kadar geçen sürede bekleyin. En büyük içerikli boyama, sürümden sürüme daha kademeli olarak iyileşme eğilimindedir.

Kaçınılması Gereken Tuzaklar

Yaklaşım risksiz değildir ve çoğu başarısızlık, onu çok agresif uygulamaktan kaynaklanır.

• **Eksik kritik CSS.**İlk görüş alanı hakkında yanlış tahmin ederseniz, ertelenen sayfa geldiğinde görünür bir yeniden akış elde edersiniz. Kritik bloğu elle değil, gerçek bir işlemeden otomatik olarak oluşturun. -**Her şeyi satır içine alma.**Tam stil sayfasını her HTML yanıtına satır içine almak önbelleğe almayı bozar ve belge boyutunu şişirir. Minimumu satır içine alın, gerisini erteleyin. -**Her şeyi birleştirme içgüdüleri.**Tüm CSS'yi dev bir dosyada birleştirme yönündeki eski tavsiye HTTP/2'den öncedir. Artık rotaya göre bölmek genellikle daha iyidir, yeter ki paylaşılan temel öğeler ayrı ayrı önbelleğe alınsın. -İki sistemi karıştırmak. Çalışma zamanı CSS-in-JS ve statik stil sayfalarını çok uzun süre yan yana çalıştırmak, stil yüzeyinizi ikiye katlar ve basamak hata ayıklamayı berbat hale getirir. Bileşen dizini başına bir geçiş son tarihi belirleyin.

En yaygın teknik olmayan tuzak, bunu büyük bir yeniden yazım olarak ele almaktır. Başarılı olan ekipler, bir avuç yüksek trafikli bileşeni dönüştürür, farkı ölçer ve bu verileri bir sonraki grubu haklı çıkarmak için kullanır.

Gerçek CSS Mimarisini Tersine Mühendislik İçin DivMagic Kullanımı

Bu geçişin hafife alınan bir kısmı, olgun üretim sitelerinin stil sayfalarını gerçekte nasıl yapılandırdığını görmektir. Statik CSS'yi iyi gönderen bir siteyi incelediğinizde, bir saatlik dokümantasyon okumaktan daha fazlasını beş dakikada öğrenebilirsiniz: basamağı nasıl katmanladıkları, belirteçleri nasıl kapsamlandırdıkları, kritik ile ertelenmişi nasıl ayırdıkları ve değiştiricileri nasıl adlandırdıkları.

DivMagic tam da bu iş akışı için yapılmıştır. Öğe stillerini DevTools'tan her seferinde bir kural olarak elle kopyalamak yerine, herhangi bir sayfadaki herhangi bir UI'yi seçer ve ortaya çıkan HTML ve CSS'yi doğrudan düzenleyicinize çekersiniz, uyarlamaya hazır. Bu, iki durumda gerçekten kullanışlıdır: bir referans tasarımından bir bileşen prototiplemek ve hayran olduğunuz yüksek performanslı bir sitenin basamağını nasıl düzenlediğini inceleyerek deseni kendi tasarım sisteminizde yansıtmak.

Ayrıca yukarıdaki üçüncü adımın sıkıcı kısmını kısaltır. Bir çalışma zamanı bileşenini statik sınıflara dönüştürürken, nihai hesaplanmış stillerin dağınık satır içi stiller ve enjekte edilmiş <style> blokları yerine düzenlenebilir bir biçimde olması, transkripsiyon işinin çoğunu ortadan kaldırır.

Önemli Çıkarımlar

• Çalışma zamanı stil oluşturma, JavaScript indirmesinden sonra, doğrudan kritik işleme yolunuzda gerçekleşen ana iş parçacığı JavaScript işidir.
• Statik CSS bir kez ayrıştırılır, içerik karmalandığında bir yıl boyunca önbelleğe alınır ve her rota ve her gezinme arasında paylaşılır.
• Yalnızca ilk görüş alanının ihtiyaç duyduğu kuralları satır içine alın; gerisini engellemeyen bir <link> ve uzun bir önbellek politikasının arkasına erteleyin.
• CSS özel özellikleri artı @layer, daha önce özellik tabanlı stil enterpolasyonu gerektiren durumların büyük çoğunluğunu kapsar.
• Artımlı olarak, bileşen bileşen geçiş yapın ve ortalamalar yerine p75 boyama zamanlamasını ve uzun görevleri ölçün.

Daha fazla CSS göndermek bir gerileme gibi geliyor, ta ki önbelleğe alınmış, bir kez ayrıştırılan bir stil sayfasını, her sayfa yükünde onu yeniden oluşturan megabaytlarca JavaScript ile takas ettiğinizi fark edene kadar.

Ders, GitHub'ın çok ötesine genelleşir. Tarayıcıda çalışan her soyutlama, kullanıcı tarafından, kendi cihazında, kendi ağında, her seferinde ödenen bir maliyettir. Stil oluşturmayı derleme zamanına taşımak, bileşen odaklı bir ön uç için mevcut en yüksek kaldıraçlı takaslardan biridir; tarayıcının zaten nasıl işleyeceğini bildiği statik bir dosya gönderir ve eskiden yoluna çıkan makineyi silersiniz.