Bir sayfayı doğru şekilde biçimlendirmek için yeterli CSS yüklemek ile bu CSS'yi hızlı işleme için yeterince hafif tutmak arasındaki gerilim, klasik bir ön uç ikilemidir. Yıllar boyunca, baskın en iyi uygulama "yalnızca kritik olanı satır içine al, gerisini ertele" idi. Bu model genellikle, <head> içine enjekte edilen, sayfanın üst kısmındaki stillerin küçük, elle ayarlanmış bir anlık görüntüsü olan Kritik CSS oluşturmak anlamına geliyordu; ana stil sayfası ise eşzamansız olarak yükleniyordu. GitHub'ın mühendislik ekibi bu modele yakından baktı ve mantığa aykırı bir soru sordu: Ya daha az değil, daha fazla CSS gönderirsek, ancak bunu eşzamanlı işlemeyi mümkün kılan bir stratejiyle yüklersek?
Bu yazı, GitHub'ın site performansı revizyonunun arkasındaki teknik mimariyi ayrıştırıyor; bu değişim, işlemeyi engelleyen stil sayfalarını azalttı, JavaScript paketlerini küçülttü ve küresel ölçekte gerçek kullanıcı metriklerini iyileştirdi. Karmaşık tasarım sistemleri, bileşen kitaplıkları ve yavaş Temel Web Verileri ile boğuşan ön uç geliştiriciler için GitHub'ın tercihli CSS yükleme modeli, eski "önce satır içi" dogmasına güçlü bir alternatif sunuyor.
"Daha Az CSS" Neden GitHub İçin İşe Yaramaz Oldu
GitHub'ın arayüzü, depolar, sorunlar, çekme istekleri, eylemler ve kod inceleme araçlarından oluşan geniş bir ekosistemdir. Her sayfa yüzlerce farklı bileşeni işleyebilir, ancak bunların hepsi sayfanın üst kısmında hemen görünmez. Geleneksel yaklaşım olan Kritik CSS çıkarma, birkaç sorun noktası yarattı:
- Bakım yükü: Her bileşen değişikliği, Kritik CSS kümesinin yeniden kalibre edilmesini gerektiriyordu. Bir tasarım sistemi ince ayarı genellikle kritik yol anlık görüntüsünü bozuyordu.
- Biçimlendirilmemiş içerik parlaması (FOUC): Eşzamansız stil sayfası yüklenirken kullanıcılar, ilkel, satır içi stillendirilmiş düzenlerden tamamen tasarlanmış sayfaya sarsıcı bir geçiş görüyordu.
- JavaScript bağımlılığı: Ertelenen stil sayfaları genellikle yüklenen stilleri değiştirmek için JavaScript'e güvenir ve görsel işlemeyi komut dosyası yürütmeye bağlar.
- Derleme karmaşıklığı: Araç zincirlerinin, işlenmiş HTML'yi ayrıştırması, sayfanın üst kısmındaki öğeler için seçiciler çıkarması ve bunları derleme zamanında enjekte etmesi gerekiyordu; bu kırılgan bir işlem hattıydı.
GitHub'ın verileri, satır içi Kritik modelin tasarım sistemi hızlarına ayak uyduramadığını gösterdi. Bununla birlikte, tek bir dev stil sayfası sunan tamamen saf yükleme, En Büyük İçerikli Boyama'yı (LCP) mahvederdi. Mühendislik ekibinin üçüncü bir yola ihtiyacı vardı.
Temel Yenilik: CSS Katmanları ile Tercihli Yükleme
GitHub, tercihli yüklemeadı verilen bir konsept uyguladı. CSS'yi, görsel ihtiyaç olasılığına ve zamanlamasına göre öncelik bantlarına ayırır:
1.Temel Temel Öğeler: Sıfırlamalar, tipografi, boşluk belirteçleri, herhangi bir görsel işleme için hemen gerekli. 2. Genel Bileşenler: Gezinme, alt bilgi, kenar çubuğu, neredeyse her sayfada görünür ancak ilk yüklemede genellikle ekran dışındadır. 3. Sayfaya Özel Stiller: Görev listeleri, kod farkı vurgulamaları, eylem günlükleri, belirli bir rota için çok önemlidir ancak başka bir yerde tamamen gereksizdir.
| Loading Strategy | Initial Bytes | Render Blocking | FOUC Risk |
|---|---|---|---|
| Traditional Critical + Async | ~10-15 KB inline | Partial (inline only) | High |
| One Massive Bundle | ~200+ KB | Full block | None |
| GitHub Preferential Loading | ~30-50 KB primitives | Stratified | Very Low |
Ekip, bir sayfanın gerçekten hangi CSS modül gruplarına ihtiyacı olduğunu belirleyen bir sunucu tarafı mekanizması oluşturdu. CSS'yi ikili bir kritik/kritik olmayan ayrımına bölmek yerine, eşzamanlı bir <link> olarak küçük bir temel temel öğe stil sayfası gönderirler ve görsel durumu çözmek için JavaScript'e güvenmeden paralel olarak ek CSS katmanları akışı sağlarlar.
CSS Basamak Katmanları Bu Stratejiyi Nasıl Mümkün Kılıyor
Önemli bir etkinleştirici, CSS @layer at-kuralıdır. GitHub, stillerini açık katmanlar halinde yapılandırdı:
/* Core layer: minimal primitives */
@layer core {
:root { /* design tokens */ }
body { font-family: var(--font-stack); }
.container { max-width: 1280px; }
}
/* Global layer: navigation and chrome */
@layer global {
.AppHeader { /* ... */ }
.SideNav { /* ... */ }
}
/* Component layer: page-specific elements */
@layer components {
.diff-view { /* ... */ }
.issue-timeline { /* ... */ }
}
Kararlı, yüksek öncelikli stilleri daha düşük katmanlara koyarak ve bileşen katmanını eşzamansız olarak akışa alarak, CSS katmanlama, özgüllük savaşlarını önler ve geç yüklenen stillerin yanlışlıkla öncekileri geçersiz kılmamasını sağlar. Tarayıcı, sayfanın geri kalanı akarken, düzeni sıfırdan yeniden hesaplamadan core ve global katmanlarını hemen işleyebilir.
Katmanlı Stil Sayfaları ile Eşzamanlı İşleme
<link rel="preload"> gibi araçlarla geleneksel eşzamansız CSS yükleme, JavaScript çalışana kadar stil sayfası uygulamasını erteler. GitHub, <link rel="stylesheet"> akışı ile birleştirilmiş media sorguları ve onload püf noktaları kullanarak bu JS bağlantısını tamamen ortadan kaldırdı.
İşte yükleme modellerinin basitleştirilmiş bir versiyonu:
<!-- Synchronous core: paints immediately -->
<link rel="stylesheet" href="/css-dist/core-layer.css">
<!-- Print media trick: browser fetches, applies onload via media=all -->
<link rel="stylesheet"
href="/css-dist/global-layer.css"
media="print"
onload="this.media='all'">
<!-- Streamed from server: non-blocking, browser starts parsing early -->
<link rel="stylesheet"
href="/css-dist/components-layer.css"
media="(min-width: 0px)">
İlk etiket, tek bir gidiş-dönüşte ulaşacak kadar küçük olan minimum temel katman için standart bir işleme engelleme isteğidir. İkincisi, genel katmanı işlemeyi engellemeden getirmek için print medya hilesini kullanır ve yüklendikten sonra all'e geçer. Üçüncü etiket, her zaman doğru olarak değerlendirilen bir medya sorgusu kullanarak bileşen stillerini ister; tarayıcı bunu düşük öncelikle getirir ancak baytlar gelir gelmez uygular. Kritik olarak, nihai görsel durumu çözmek için bunların hiçbiri JavaScript gerektirmez; onload işleyicisi, aşamalı bir geliştirme geri dönüşüdür.
"JavaScript kontrollü bir işleme modelinden bildirimsel bir CSS akış modeline geçtik. Tarayıcı, görsel hazırlığın orkestratörü haline geldi, JS paketlerimiz değil." - GitHub Mühendisliği
Derleme Zamanı Karmaşıklığından Çalışma Zamanı Zekasına
GitHub'ın eski Kritik CSS işlem hattı şöyle görünüyordu:
- Sunucu, bir bileşen ağacını HTML'ye işler.
- Bir işlem sonrası adımı, DOM'da gezinir ve görünür her seçiciyi tam stil sayfasıyla eşleştirir.
- Eşleşen kurallar çıkarılır, satır içine alınır ve CSS'nin geri kalanı ertelenir.
- Çalışma zamanında JavaScript, ertelenen stil sayfasını değiştirir ve genellikle yeniden akışa neden olur.
Her adım gecikme ve değişkenlik ekliyordu. Yeni model, zekayı sunucu tarafı şablon motorunakaydırır. Bir rota işlendiğinde, CSS bağımlılıklarını modüler katman içe aktarmaları olarak bildirir:
// On the server, for the pull-request view
const cssDeps = [
{ layer: 'core', path: 'core-layer.css' },
{ layer: 'global', path: 'global-layer.css', priority: 'low' },
{ layer: 'components', path: 'diff-views.css', priority: 'low' }
];
Sunucu bu etiketleri doğrudan HTML <head> içine akışa alır. Derleme zamanında çıkarma yok, çalışma zamanında DOM'da gezinme yok. Sonuç: geliştirme ve üretimde aynı şekilde çalışan daha öngörülebilir, hata ayıklanabilir bir yükleme sırası.
JavaScript Kırılganlığı Olmadan Aşamalı Geliştirme
CSS dağıtımını JavaScript'ten ayırmanın en büyük kazanımlarından biri dayanıklılıktır. Bir JS paketi bir hata veya ağ sorunu nedeniyle ayrıştırılamazsa, satır içi Kritik model kullanıcıyı yarı stillendirilmiş bir sayfayla bırakır. GitHub'ın katmanlı CSS katmanlarıyla tarayıcı, JS durumundan bağımsız olarak akışa alınan <link> etiketlerinden kural kümelerini uygulamaya devam eder. Bu, ağ koşullarının büyük ölçüde değiştiği küresel kitleler için özellikle önemlidir.
Gerçek Dünya Metrikleri: Kullanıcılar İçin Ne Değişti
GitHub'ın performans ekibi, tercihli CSS yüklemeyi dağıtmadan önce ve sonra toplu Gerçek Kullanıcı İzleme (RUM) verilerini paylaştı. İyileştirmeler, boyama merkezli metrikler etrafında yoğunlaştı:-İlk İçerikli Boyama (FCP): Yavaş bağlantılı kullanıcılar için 300ms azaltıldı, çünkü temel katman gereksiz renk ve düzen tanımlarını hariç tutuyor.
- En Büyük İçerikli Boyama (LCP): 75. yüzdelik dilimde %15 iyileştirildi, bu daha erken düzen kararlılığı sayesinde oldu. Basamak katmanları, başlıklar veya kahraman bölümleri için kapsayıcı bloğun, alt bileşenler akışa gelmeden önce boyanmasını sağlıyor.
- Kümülatif Düzen Kayması (CLS): Neredeyse sıfır bozulma. Temel tipografi ve boşluk belirteçleri senkron temel katmanda bulunduğundan, ek stiller geldiğinde metin ve kaplar asla yeniden akışa uğramıyor.
Kendi CSS Yükleme Stratejiniz İçin Bunun Anlamı
GitHub'ın deseni tescilli bir kara kutu değil. Herhangi bir büyük ölçekli web uygulaması, birkaç mimari değişiklikle tercihli yüklemeyi benimseyebilir:
1. CSS'inizi Öncelik Bantlarına Göre Denetleyin
Tarayıcı Geliştirici Araçları kapsam panellerini kullanın, ancak sonuçları sayfa yerine katmana göre dilimleyin. Hangi stiller gerçekten evrensel? Hangileri kalıcı arayüze ait? Hangileri rota-spesifik? Buna hızlıca cevap veremiyorsanız, tasarım sisteminizin muhtemelen katman hijyenine ihtiyacı vardır.2. Özgüllük Kontrolü için Basamak Katmanlarını Benimseyin
@layer reset, tokens, utilities, components;
Katman sıranızı bir kez bildirin. Akışa alınan bileşen stillerini components katmanına yerleştirin, böylece ne zaman gelirlerse gelsinler temel belirteçleri asla geçersiz kılamazlar.
3. CSS Yükleme Bildirimlerini Sunucu Şablonuna Taşıyın
Monolitik bir stil sayfası veya Webpack parça haritası yerine, her rotanın CSS bağımlılıklarını bildirmesine izin verin. React Sunucu Bileşenleri ile Next.js veya kısmi hidrasyon ile Astro gibi çerçeveler bu modele doğal olarak uyar.4. Yalnızca Bayt Boyutunu Değil, Boyama Metriklerini Ölçün
JavaScript uygulaması gerektiren daha küçük bir stil sayfası, biraz daha büyük, bildirimsel olarak yüklenen bir stil sayfasından daha kötü FCP'ye neden olabilir. Web Vitals ile profil oluşturun ve onload olaylarından sonra yeniden düzenlemelere dikkat edin.Katmanlı CSS Yükleme Ne Zaman Kullanılmamalı
Hiçbir teknik evrensel değildir. Basamak katmanlarıyla tercihli yükleme, küçük, statik sitelerin ihtiyaç duymadığı mimari karmaşıklık ekler. Tüm stil sayfanız 10KB'ın altındaysa, senkron olarak yükleyin. Minimal etkileşimli bir dokümantasyon sitesi oluşturuyorsanız, "Critical" (Addy Osmani tarafından) gibi araçlarla Kritik CSS oluşturmak yeterlidir.
Bu desen şu durumlarda parlar:
- Tasarım sisteminiz 15.000+ satır CSS içeriyorsa.
- Birden fazla ekip aynı sayfaya bileşen katkısında bulunuyorsa.
- Küresel kitle, değişken ağlarda sağlam performans gerektiriyorsa.
- Zaten sunucu tarafından render ediyor ve
<head>etiketi sırasını kontrol edebiliyorsanız.
DivMagic ve CSS İş Akışı Devrimi
GitHub'ın yaklaşımı daha geniş bir değişimi vurguluyor: ön uç geliştiricileri CSS dağıtımı üzerinde kontrolü yeniden ele alıyor. Ancak, canlı uygulamalardan yüksek kaliteli CSS'i anlamak ve çıkarmak genellikle zaman alıcı bir manuel süreç olmaya devam ediyor. Bir rakibin veya referans sitenin katmanlarını nasıl yapılandırdığını analiz ederken, geliştiriciler genellikle tarayıcı Geliştirici Araçlarına, manuel kopyala-yapıştıra ve sıkıcı temizliğe başvuruyor.
DivMagic bu hesaplamayı değiştiriyor. Geliştiriciler için özel olarak oluşturulmuş bir tarayıcı uzantısı olarak DivMagic, herhangi bir web sitesinden herhangi bir UI öğesini yakalar ve düzeni, tipografiyi ve tasarım belirteçlerini koruyarak temiz, yeniden kullanılabilir CSS ve HTML'e dönüştürür. Tercihli yükleme stratejilerini benimseyen ekipler için DivMagic, araştırma ve prototip oluşturma aşamasını hızlandırır. GitHub veya diğer performans liderlerinin CSS katmanlarını nasıl organize ettiğini manuel olarak incelemek yerine, bir bileşeni yakalayabilir, kod tabanınıza bırakabilir ve katmanını ve özgüllük seçimlerini hemen anlayabilirsiniz.
"En hızlı CSS, sıfırdan yazmak zorunda olmadığınız CSS'dir. DivMagic, geliştiricilerin çıkarma yerine mimariye odaklanmasını sağlar."
İster @layer yönergeleriyle bir tasarım sistemi oluşturun, ister performans darboğazları için eski bir kod tabanını denetleyin, DivMagic ilham ile uygulama arasındaki boşluğu doldurur.
Sonuç: Daha Fazla CSS, Daha İyi Performans
GitHub'ın mühendislik blog yazısı, yerleşik en iyi uygulamaları sorgulama konusunda bir başyapıttır. %38 daha fazla CSS göndererek ancak bunu basamak katmanları ve bildirimsel yükleme ile katmanlayarak ekip, render engellemeyi azalttı, JavaScript bağımlılıklarını kesti ve gerçek kullanıcı boyama metriklerini ölçülebilir şekilde iyileştirdi. Ön uç geliştiricileri için ders "CSS ücretsizdir" değil, tarayıcının render ardışık düzeninin bildirimsel, akışa alınan varlıklar için optimize edildiğidir. Platformun işini yapmasına izin verdiğimizde, hızdan ödün vermeden daha zengin UI'ler göndeririz.
Kendi projelerinde tercihli yüklemeyi keşfetmeye hazır geliştiriciler için küçük başlayın: evrensel tasarım belirteçlerinizi belirleyin, bunları senkron bir temel katmana yerleştirin ve gerisini akışa alın. Ve görsel referanstan üretime hazır CSS'e daha hızlı geçmeniz gerektiğinde, DivMagic gibi araçlar, çıkarmaya daha az zaman harcamanızı ve performans mühendisliğine daha fazla odaklanmanızı sağlar.
