Paralel CSS indirmeleri ile web sitesi performansını iyileştirmek ister misiniz?

Bir web sitesinin sayfa yükleme süresini optimize ediyordum. Yollardan biri, CSS için birden çok HTTP isteğini birleştirilmiş bir HTTP isteğinde birleştirmektir. Ancak gözden geçirenlerden biri ilginç bir soru sordu: Birden fazla CSS dosyasının indirilmesine paralellik kazandırmak sayfa yükleme sürelerini azaltır mı?

İnternette okuduğum tek şey, HTTP isteklerinin sayısının azaltılmasının daha hızlı bir web sayfasının anahtarı olması (Google Pagespeed Insights'ın bunu açıkça belirtmemiş gibi görünmesine rağmen) bu seçeneği hiç düşünmedim 1 ).

Paralelleştirmenin performansı iyileştirmemesinin veya yalnızca çok az önemli olmasının birkaç nedeni görüyorum (daha az HTTP isteği kullanmanın avantajından daha ağır basar):

Yeni bir bağlantı kurmak pahalıdır. Birden çok bağlantı kurmak paralel olarak yapılabilirken, tarayıcılar en çok yaklaşık 4-6 bağlantı (tarayıcıya bağlı olarak) kullanır, bu nedenle CSS'nin paralel olarak indirilmesi JavaScript ve resimler gibi diğer varlıkların indirilmesini engeller.
HTTPS bağlantısı kurmak fazladan veri gerektirir. Bu kolayca birkaç KB veri olabilir okudum. Bu, gerçekten göndermek istediğimiz CSS yerine kablo üzerinden gönderilmesi gereken bazı ekstra verilerdir.
TCP Yavaş Başlatma algoritması nedeniyle, bir bağlantı üzerinden ne kadar çok veri gönderilirse, bağlantı o kadar hızlı olur. Böylece daha uzun ömürlü bağlantılar, verileri yeni bağlantılardan çok daha hızlı gönderir. Örneğin, sayfa yükleme sürelerini iyileştirmek için tek bir bağlantı kullanan SPDY protokolüne bakın.
TCP bir soyutlamadır: hala (normalde) yalnızca bir tane temel bağlantı vardır. Bu nedenle, birden çok istek kullanılırken, kablo üzerinden gönderilen veri, hızı artırmak için birden fazla bağlantıdan yararlanmayabilir.
İnternet bağlantıları özellikle mobil cihazlarda doğal olarak güvenilmezdir. Bir istek, diğerinden önemli ölçüde daha hızlı tamamlanabilir. CSS için birden fazla istek kullanılması, web sayfasının son istek tamamlanana kadar engellenmesi anlamına gelir; bu, ortalama bağlantıdan önemli ölçüde daha geç olabilir.

Peki, CSS dosyaları için HTTP isteklerini paralel hale getirmenin herhangi bir faydası var mı?

Not / güncelleme: tüm CSS dosyaları oluşturma engelleme özelliğine sahiptir. Zaten kritik yolun dışına taşınmamış olan CSS dosyaları.

css performance

— AYKE
kaynak

Statik nesneler (css, imgs, js) için tek bir cookieless alan kullanılmasını önerdikleri zanaat sitesi olarak etsy'nin kodunda bir şey gördüm. Modern tarayıcıların tek bir alandan paralel indirmelerle harika bir iş çıkardığı ortaya çıkıyor. Aynı alandaki birden fazla dosyaya gelince (10 css dosyası vs 1 büyük olanı), büyük bir dosyayı birleştirip minimize ederek sadece bir istekte bulunduğunuzu düşünüyorum. Özellikle sitenizin doğru görünmesi için tüm css'lere ihtiyaç duyacağı CSS ile.

— Frank

Bir bakıma, tarayıcılar zaten kullanılabilir olan bağlantı sayısına göre paralel olarak indirilir. Tarayıcının okuduğu HTML'yi temel alır.

— Güneş

HTML belgelerinden bağlanan CSS dosyaları, HTML ayrıştırılırken paralel indirme sırasına eklenir; asıl önemli olan, eşzamansız olmayan JavaScript bağlantılarının HTML ayrıştırıcısını engellemesidir; ^[1]

Tarayıcıyı dört dosyadan üçünü sırayla indirmeye zorlayan bir örnek (en az üç gidiş dönüş):

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

Aşağıda, 4 dosyanın tümü paralel olarak indirilecek şekilde (en az bir gidiş-dönüş) yeniden çalışılan örnek verilmiştir:

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

Başka bir not: CSS dosyaları (varsayılan olarak) ayrıştırıcı değil, render engelleme; sayfa ayrıştırılmaya devam edecek ve DOM oluşturulacak, ancak oluşturma CSSOM oluşturuluncaya kadar başlamayacak .

CSS'nizi bölmenin ana nedeni, ekranın üst kısmındaki içeriği istemciye dönüştürmek ve mümkün olan en kısa zamanda ayrıştırmak için gereken minimum kuralları elde etmektir. Kuralların geri kalanı, hemen görünmeyen şeyler için media, bağlantı etiketindeki sorgular ile zorunlu olarak oluşturulma-engelleme olarak işaretlenebilir veya eşzamansız olarak yüklenmiş JavaScript tarafından sayfaya eklenebilir.

Dolayısıyla, sadece kendi uğruna CSS indirmelerinizi paralel hale getirmenin açık bir yararı yoktur. Ancak her zaman olduğu gibi ölçün ve test edin!

Daha fazla okumak için Google'dan 'Web'in Temelleri: Performansı Optimize Etme' hakkındaki şu makaleleri öneriyorum: https://developers.google.com/web/fundamentals/performance/

[1]: Bu, bazı tarayıcıların Spekülatif Ayrıştırma özelliğini yok sayar:

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— Robert K. Bell
kaynak

Komut dosyalarınızın aynı anda indirilmesini nasıl sağlayacağınız hakkında bir başka iyi okuma: şurada: stackoverflow.com/questions/436411/…

— joshreesjones

Tüm .js dosyalarının kodun sonunda, kapanış gövdesi etiketinden hemen önce bağlanması gerektiğini, böylece hiçbir şeyi engellemediklerini belirtmek gerekir.

— Chaoley

"Yani, sadece kendi uğruna CSS indirmelerinizi paralel hale getirmenin net bir faydası yok mu?" Ben bir şekilde yukarıdaki cevap

— anlayamadım

(? ve belki önbellek optimizasyonu) @ gaurav5430 ekranın üst kısmını render süresi için optimize ötesinde, bölme css dosyaları için iyi nedenler var gibi görünmüyor

— Robert K. Bell