Varsayılan olarak CSS, oluşturma engelleme kaynağı olarak değerlendirilir. Bu, CSSOM oluşturulana kadar tarayıcının işlenen içeriği oluşturmayacağı anlamına gelir. CSS'nizi sade tuttuğunuzdan, mümkün olduğunca hızlı yayınladığınızdan ve oluşturma engelini kaldırmak için medya türleri ile sorguları kullandığınızdan emin olun.
Oluşturma ağacı yapısında, kritik oluşturma yolunun oluşturma ağacını oluşturmak için hem DOM hem de CSSOM'yi gerektirdiğini gördük. Bu durum, performans üzerinde önemli bir etki yaratır: Hem HTML hem de CSS, oluşturma işlemini engelleyen kaynaklardır. DOM olmadan oluşturulacak hiçbir şey olmayacağından, HTML'nin kodu nettir, ancak CSS gereksinimi daha az belirgin olabilir. CSS'de oluşturmayı engellemeden tipik bir sayfayı oluşturmaya çalışırsak ne olur?
Özet
- Varsayılan olarak CSS, oluşturma engelleyici bir kaynak olarak değerlendirilir.
- Medya türleri ve medya sorguları, bazı CSS kaynaklarını oluşturulmayan engelleme olarak işaretlememize olanak tanır.
- Tarayıcı, engelleme yapan veya engellemeyen davranışa bakılmaksızın tüm CSS kaynaklarını indirir.
Yukarıdaki örnekte, CSS ile ve CSS olmadan NYTimes web sitesinin gösterildiği, CSS kullanılabilir olana kadar oluşturmanın neden engellendiği gösterilmektedir. CSS olmadan sayfa nispeten kullanılamaz durumda olur. Sağdaki deneyim genellikle "Stilsiz İçeriğin Flash'ı" (FOUC) olarak adlandırılır. Tarayıcı, hem DOM hem de CSSOM'yi içerene kadar oluşturmayı engeller.
CSS, oluşturmayı engelleyen bir kaynaktır. İlk oluşturma süresini optimize etmek için raporu mümkün olan en kısa sürede ve müşteriye iletin.
Ancak, yalnızca belirli koşullarda kullanılan bazı CSS stilleri varsa (örneğin, sayfa yazdırılırken veya büyük bir monitöre yansıtılıyorsa) ne olur? Bu kaynaklarda oluşturmayı engellemek zorunda olmasak güzel olurdu.
CSS "medya türleri" ve "medya sorguları", şu kullanım alanlarını ele almamıza olanak tanır:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Medya sorgusu, bir medya türünden ve belirli medya özelliklerinin koşullarını kontrol eden sıfır veya daha fazla ifadeden oluşur. Örneğin, ilk stil sayfası bildirimimiz bir medya türü veya sorgu sağlamaz. Bu nedenle her durumda geçerlidir. Yani, her zaman oluşturma engelleme şeklinde olur. Diğer yandan, ikinci stil sayfası bildirimi yalnızca içerik yazdırılırken geçerlidir. Düzeni yeniden düzenlemek, yazı tiplerini değiştirmek ve benzeri işlemler yapmak isteyebilirsiniz. Dolayısıyla, bu stil sayfası bildiriminin, sayfa ilk yüklendiğinde sayfanın oluşturulmasını engellemesine gerek yoktur. Son olarak, son stil sayfası bildirimi, tarayıcı tarafından yürütülen bir "medya sorgusu" sağlar: Koşullar eşleşirse tarayıcı, stil sayfası indirilip işlenene kadar oluşturmayı engeller.
Medya sorguları kullanarak, sunumumuzu görüntülü ve basılı yayınlar gibi belirli kullanım örneklerinin yanı sıra ekran yönü değişiklikleri, yeniden boyutlandırma etkinlikleri gibi dinamik koşullara göre uyarlayabiliriz. Stil sayfası öğelerinizi tanımlarken medya türüne ve sorgulara özellikle dikkat edin. Bunlar, kritik oluşturma yolu performansını büyük ölçüde etkiler.
Birkaç uygulamalı örneği inceleyelim:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- İlk bildirim, oluşturma engellemedir ve tüm koşullarla eşleşir.
- İkinci bildirim de oluşturma engellemedir: Varsayılan tür "all" olduğundan herhangi bir tür belirtmezseniz dolaylı olarak "all" (tümü) olarak ayarlanır. Dolayısıyla, birinci ve ikinci beyanlar aslında eşdeğerdir.
- Üçüncü bildirim, sayfa yüklendiğinde değerlendirilen dinamik medya sorgusuna sahiptir. Sayfa yüklenirken cihazın yönüne bağlı olarak, portrait.css, oluşturmayı engelliyor olabilir veya olmayabilir.
- Son bildirim yalnızca sayfa yazdırılırken uygulanır. Bu nedenle, sayfa tarayıcıya ilk yüklendiğinde oluşturulmasını engellemez.
Son olarak, "oluşturma engelleme"nin yalnızca, tarayıcının söz konusu kaynakta sayfanın ilk oluşturma işlemini bekletmesi gerekip gerekmediğini ifade ettiğini unutmayın. Her iki durumda da tarayıcı, engellemeyen kaynaklar için daha düşük önceliğe sahip olsa da CSS öğesini indirmeye devam eder.