Render-Blocking Kaynakları

Sayfa görüntülemesini engelleyen kaynaklar, bir tarayıcının herhangi bir içeriği görüntüleyebilmesi için indirmesi ve işlemesi gereken dosyalardır. Bunlar çoğunlukla belge başlığında referans verilen stil sayfaları ve ayrıştırma sırasında karşılaşılan eşzamanlı komut dosyalarıdır ve bir sayfanın içeriğinin gerektirdiğinden daha uzun sürede görüntülenmesinin en yaygın nedenidir.

Stil sayfalarının engelleme yapmasının haklı bir sebebi var. Stiller kullanılabilir hale gelmeden önce içeriğin çizilmesi, stil verilmemiş içeriğin anlık olarak görünmesine ve ardından rahatsız edici bir yeniden düzenlemeye neden olur; bu nedenle tarayıcılar bekler. Sorun stil sayfalarının engelleme yapması değil, sitelerin genellikle ilk görünümün gerektirdiğinden çok daha fazla stil yüklemesidir; bunlar arasında sayfanın daha aşağısındaki bileşenler, diğer şablonlar ve ziyaretçinin asla kullanmayacağı özellikler için stiller bulunur ve bunların tümü herhangi bir şey gösterilmeden önce gelmelidir.

Komut dosyaları bloke olur çünkü ayrıştırma sırasında karşılaşılan bir komut dosyası belgeyi değiştirebilir, bu nedenle ayrıştırıcı komut dosyası yürütülene kadar durur. Çoğu komut dosyasının bu davranışa ihtiyacı yoktur: analiz, sohbet araçları, kişiselleştirme araçları ve çoğu uygulama kodu, belge ayrıştırıldıktan sonra doğruluk kaybı olmadan çalıştırılabilir. `defer` özniteliğini eklemek, ayrıştırmanın devam etmesini ve komut dosyalarının daha sonra sırayla yürütülmesini sağlar; `async` ise komut dosyalarını sıralama garantisi olmadan gelir gelmez yürütür.

Stil sayfaları için standart çözüm, ilk görüntüleme alanı için gerekli stilleri geri kalanından ayırmaktır. Kritik kısım doğrudan belgeye eklenir, bu nedenle herhangi bir istek gerekmez ve geri kalan kısım engelleme yapmayacak şekilde yüklenir. Bu etkilidir ancak derleme karmaşıklığını artırır, çünkü stiller değiştiğinde kritik kümenin yeniden oluşturulması gerekir ve eski kritik CSS görünür hatalara neden olur.

Üçüncü taraf kaynaklar genellikle en büyük katkıyı sağlayan ve kontrol edilmesi en zor olanlardır. Etiket yöneticileri, onay platformları, yazı tipi sağlayıcıları, sohbet araçları ve test çerçeveleri genellikle belge başlığına engelleme davranışı ile eklenir ve her biri ayrı bir kaynağa bağlantı gerektirir. Toplam gecikme önemli ölçüdedir ve her biri haklı bir nedenle farklı bir ekip tarafından eklendiğinden, toplamdan kimse sorumlu değildir. Toplam maliyeti denetlemek ve bunu talep eden fonksiyona atfetmek, ödünleşmeyi görünür hale getirir.

Yazı tipleri, sayfa yapısını değil, metin oluşturmayı engelledikleri için özel bir işlem gerektirir. Görüntüleme stratejisine bağlı olarak, bir yazı tipi indirilirken metin görünmez olabilir; bu da tamamen yüklenmiş olan içeriğin kasıtlı olarak saklanması anlamına gelir. Yedek metni hemen görüntüleyen ve yazı tipi geldiğinde değiştiren bir strateji seçmek ve sayfanın üst kısmında kullanılan yazı tiplerini önceden yüklemek, sayfanın teknik olarak oluşturulduğu ancak boş göründüğü durumu önler.

Gerçek maliyeti ölçmek dikkat gerektirir, çünkü engelleyici bir kaynağın kaldırılması her zaman tahmin edilen tasarrufu sağlamaz. Kaynaklar paralel olarak indirilir, bu nedenle birini ortadan kaldırmak, diğerinin kısıtlayıcı hale gelmesine neden olabilir ve gözlemlenen iyileşme genellikle bireysel tahminlerin toplamından daha küçüktür. Tahmin edilen toplam değerlere güvenmek yerine, her değişiklikten sonra ölçüm yaparak doğrulamak, beklentilerin doğru kalmasını sağlar.

Engellemenin gerçekte ne olduğunu belirlemek, engelleme kaynaklarını raporlayan ve her birinin ele alınmasından elde edilecek tasarrufu tahmin eden standart araçlarla oldukça kolaydır. Tahminler kesin olmaktan ziyade gösterge niteliğinde olarak değerlendirilmelidir, çünkü bir engelleme kaynağının kaldırılması genellikle gerçek kısıtlamanın başka bir kaynak olduğunu ortaya çıkarır ve iyileştirmelerin rapordan varsayılmak yerine ölçümle doğrulanması en iyisidir.

Çünkü söz konusu kaynaklar genellikle zaman içinde çeşitli ekipler tarafından eklenir, bu nedenle iyileştirme, mühendislik kadar yönetişimi de gerektirir. Uygulamada denetim ve önceliklendirme şu alanlarda gerçekleşir: web performansı Çalışma sırasında, yapı değişiklikleri şu şekilde uygulanır: ürün geliştirmeAyrıca, hangi üçüncü taraf araçların engelleme maliyetini haklı çıkardığına dair kararlar, bunları talep eden ekiplerle anlaşmayı gerektirir; bu da çoğu site için şu anlama gelir: dijital pazarlama departmanı.