Stil dosyalarını önceden yüklemenin ne zaman mantıklı olduğu (ve olmadığı)

Stil Dosyalarını Önceden Yüklemenin Ne Zaman Mantıklı Olduğu (ve Olmadığı)

Düzenli olarak önceden yüklenmiş stil dosyalarıyla ve bunları çevreleyen birçok yanlış bilgiyle karşılaşıyorum. Bir kaynağı önceden yüklemek (genellikle) onun önceliğini ve indirilmek üzere planlandığı zamanı değiştirir. Ancak, günlük olarak karşılaştığım birçok optimizasyon stratejisi gibi, stil dosyalarını önceden yüklemek çoğu zaman pek mantıklı değildir. Bu makalede, stil dosyalarını önceden yüklemenin ne zaman mantıklı olduğunu ve ne zaman en iyi tercih olmayabileceğini inceleyeceğim.

Stil dosyalarını önceden yükleme fikri:

Değerlendirmelere geçmeden önce, stil dosyalarını önceden yükleme kavramını kısaca hatırlayalım. Stil dosyaları render engelleyicidir. Bu, stil dosyaları indirilirken sayfanın tarayıcı tarafından oluşturulmayacağı ve ziyaretçinin yalnızca boş bir ekran göreceği anlamına gelir. 

Bir stil dosyasının indirilme süresini en aza indirmek için geliştiriciler bazen stil dosyalarını önceden yüklemeye başvururlar. Önceden yükleme, kritik kaynakların önceden getirilmesini içerir ve bunların gerçekten ihtiyaç duyulduğunda yüklenmesiyle ilişkili gecikmeyi en aza indirir. Bu genellikle rel="preload" özniteliğine sahip <link> etiketi kullanılarak gerçekleştirilir.

Durum 1: Stil dosyasını tanımlamadan hemen önce önceden yüklemek.

Bazen geliştiriciler, tüm hevesleriyle, CSS etkisini en aza indirmek için gerçek CSS tanımından hemen önce HTML'de yeniden yüklemeye çalışırlar. Bu şuna benzer:

<link rel="preload" as="style" href="style.css">
<link rel="stylesheet" href="style.css">

Bu hiç mantıklı değildir ve en iyi ihtimalle sayfayı yavaşlatmazsınız! Bir tarayıcı HTML'yi okuyacak ve sayfadaki tüm kritik kaynakları, çoğunlukla bulduğu sırayla yüklemeye başlayacaktır. Bu, preload satırını kaldırsanız bile tarayıcının stil dosyasını yine bulacağı ve ne olursa olsun indirmeye başlayacağı anlamına gelir. Sadece fazladan bir satır eklediniz, hepsi bu! Ama daha da kötüleşiyor. Önceden yüklenmiş stil dosyaları, normal stil dosyalarından daha düşük öncelik alır. Yani en kötü durumda sayfanızı gerçekten yavaşlatabilirsiniz!

3 önceden yüklenmiş stil dosyası

3 normal stil dosyası

Durum 2: Bir link header ile stil dosyasını önceden yüklemek.

Bu fikir ilginçtir. Bir stil dosyasını önceden yüklemek için sunucu link header'ını kullanabiliriz. Bu şuna benzer:

Buradaki fikir, tarayıcının HTML'yi ayrıştırmaya başlamadan önce stil dosyasını kuyruğa almasını sağlamaktır. Bu oldukça iyi bir fikirdir ve bunu düşünen geliştiricinin zihninin nasıl çalıştığını beğeniyorum! Ancak ne yazık ki gerçek hayatta bundan çok az fayda göreceksiniz. Birkaç mikrosaniyeden bahsediyoruz. Bunlar oldukça hayal kırıklığı yaratan sonuçlar ama endişelenmeyin. Bu adımı gerçek iyileştirmeler yapmak için kullanabiliriz!

Durum 3: Stil dosyaları için 103 early hints

Bu, size gerçekten bazı Core Web Vitals sonuçları getirecek tek fikirdir! Stil dosyaları için early hints göndermek, First Contentful Paint ve Largest Contentful Paint gibi metrikleri iyileştirecektir.

103 early hint header'ları gerçek HTML yanıtından önce gönderilir. Bu, HTML'yi indirirken tarayıcının stil dosyalarını da paralel olarak indirmeye başlayabileceği anlamına gelir.  En iyi senaryo, HTML indirmeyi bitirdiğinde stil dosyalarının da indirilmiş olmasıdır. Bu, bu stil dosyalarından kaynaklanan sıfır render engelleme süresi olduğu anlamına gelir. Ve bu, yavaş ağlarda gerçekleşebilir ve gerçekleşir! Daha hızlı ağlarda etkisi daha az belirgindir ancak 103 early resource hints kullanmak neredeyse tüm durumlarda hâlâ daha hızlıdır!

Bir 103 early hint yanıtı, bir preload link header'ına çok benzer. 103 early hints kullanmak için web sunucunuzu veya CDN'nizi yapılandırmanız gerekecektir.  

HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style

CloudFlare gibi bazı CDN'ler, basitçe bir link preload header ayarlayarak (fikir 2'de açıklandığı gibi) 103 early hint tetiklemenize izin verir.

Durum 4: Asenkron CSS elde etmek için stil dosyalarını önceden yüklemek

CSS'yi render engelleyici olmaktan çıkarmanın bilinen bir yöntemi, stil dosyasını önceden yükleyip yüklendikten sonra sayfaya eklemektir. Fikir basittir ve şöyle görünür:

<link 
   rel="preload" 
   href="style.css" 
   as="style"

Normal preload kodu <link rel="preload" as="style" href="style.css"> temel alınmış ve bir onload olay dinleyicisi onload="this.onload=null;this.rel='stylesheet'" eklenmiştir, bu da bağlantıyı son haline <link rel="stylesheet" href="style.css"> dönüştürür.

Bu da mantıklı olan başka bir fikirdir. Bir stil dosyası render engelleyici değilse, tarayıcı stil dosyasını durdurup beklemeden sayfayı ayrıştırmaya ve oluşturmaya devam edebilir. Ancak dikkatli olun!

• Görünür viewport'taki CSS'yi asenkron yapmayın. Bu muhtemelen bir Cumulative Layout Shift'e neden olacak ve bu da kötü bir UX'e yol açacaktır.
• Ödünleşimi değerlendirin. Asenkron CSS muhtemelen sayfanın farklı bölümlerinin yeniden oluşturulmasına neden olacaktır. Bu, Interaction to Next Paint gibi metrikleri etkileyecektir. 

Durum 5: Stil dosyalarını önceden önbelleğe almak

Nadiren, sonraki sayfa görüntülemeleri için önbellek dosyalarını önceden ısıtmaya çalışan şık çözümler görüyorum. Ve bu çözümlerin yapıldığı hevesi alkışlasam da, lütfen bunu YAPMAYIN!

Fikir basittir: ana sayfada, isterseniz, başka bir sayfanın stillerini önceden önbelleğe alabilirsiniz. Diyelim ki ürün sayfası. Sayfa yüklendikten sonraki bir noktada, stil dosyalarını tarayıcı önbelleğine eklemek için önceden yüklersiniz.

function preloadStylesheet(url) {
    var link = document.createElement('link');
    link.rel = 'preload';
    link.href = url;
    link.as = 'style';
    document.head.appendChild(link);
}

window.addEventListener('load', function () {
    preloadStylesheet('cart.css');
    preloadStylesheet('shop.css');
});

İlk bakışta bu o kadar da kötü görünmüyor. Herhangi bir ürün sayfasında cart.css ve shop.css artık mevcut ve render'ı engellemeyecektir. Bunu yapmamanız için birkaç neden var!

1.  Daha iyi yollar var, örneğin speculative prerendering veya bir service worker kullanmak.
2. Muhtemelen kaynakları israf edeceksiniz ve ödünleşim buna değmeyecektir! Kabul edelim: kaynakları önceden yüklemek kolay olsaydı, tarayıcılar bunda daha iyi olurdu. 
3. Bu tür çözümlerin bakımı zordur ve muhtemelen gelecekte bir noktada sorunlara neden olacaktır.
4. Tüm stil dosyalarını önceden yüklemeniz gerekecektir, sadece birkaçını değil. Çünkü tüm stil dosyaları render engelleyicidir ve paralel olarak indirildiğinden sadece 1 stil dosyası, birden fazla stil dosyasıyla aynı etkiye sahip olabilir.