İlk İçerkli Boyama (FCP), modern web performansında kritik bir metriktir. Navigasyondan itibaren ekranda ilk metin veya görüntünün oluşturulmasına kadar geçen süreyi ölçer. Geliştiriciler genellikle Toplam Engelleme Süresi (TBT) veya En Büyük İçerkli Boyama (LCP) üzerine odaklansa da, FCP'nin optimize edilmesi kullanıcıların sayfayı ilk milisaniyeden itibaren hızlı yüklendiğini hissetmesini sağlar.
Kritik oluşturma yolu (CRP), tarayıcının HTML, CSS ve JavaScript'i ekrandaki piksellere dönüştürmek için geçtiği adımlar dizisidir. Bu yolu anlayarak, tarayıcının boyama işlemine başlamadan önce kaynakları beklediği darboğazları belirleyebiliriz. Bu yazı, kaynak ipuçları ve önyükleme stratejilerinin render engelleme süresini nasıl önemli ölçüde azaltabileceğini inceliyor.
Render Engellemeyi Anlamak
Varsayılan olarak tarayıcı, harici betikleri indirir ve yürütür; bu işlem genellikle HTML ayrışmasını duraklatır. Benzer şekilde, CSS dosyaları yüklenip ayrıştırılana kadar oluşturmayı engeller. Bu senkronizasyon, FCP'de önemli bir gecikmeye neden olabilir. Bunu azaltmak için kritik kaynakları önceliklendirmeli ve kritik olmayanları ertelemeli veya asenkron çalıştırmalıyız.
Önyükleme Uygulama
Önyükleme, tarayıcıya sayfa yükleme sürecinin erken aşamalarında kaynakları, genellikle HTML ayrıştırıcısı kaynak tanımına ulaşmadan önce, önceden getirmesini söyler. Bu işlem özellikle yazı tipleri, anahtar görüntüler veya ilk görünüm için gerekli olan JavaScript için faydalıdır.
<link> öğesini rel="preload" özniteliği ile kullanın. Tarayıcının istek önceliğini optimize etmesine yardımcı olması için içeriğin türünü tanımlayan as özniteliğini belirtin.
<head>
<link rel="preload" href="kritik-yazi-tipi.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-gorsel.jpg" as="image">
</head>Bir yazı tipini önyüklerken her zaman crossorigin özniteliğini ekleyin. Yazı tipleri farklı bir MIME türü ve köken bağlamında sunulur; bu öznitelik olmadan tarayıcı önyüklenen kaynağı reddedebilir veya doğru şekilde uygulamakta başarısız olabilir.
DNS Ön Aramasından Yararlanma
Sayfanız farklı etki alanlarında barındırılan üçüncü taraf kaynaklarına bağlıysa, tarayıcının bağlanmadan önce DNS adresini çözmesi gerekir. DNS çözümü, özellikle yavaş ağlarda gecikmeye neden olur. Tarayıcıya bu çözümü arka planda gerçekleştirmesi gerektiğini ima edebilirsiniz.
Tarayıcının erken aşamada çözmesi gereken etki alanlarını belirtmek için dns-prefetch ilişkisini kullanın. Bu işlem hafiftir ve bant genişliği üzerinde minimum etkiye sahiptir.
<head>
<link rel="dns-prefetch" href="https://cdn.ornek.com">
<link rel="dns-prefetch" href="https://analitik.ornek.com">
</head>Daha Hızlı Bağlantılar İçin Preconnect Kullanımı
DNS ön araması yalnızca adresi çözerken, preconnect bir adım daha ileri gider. Hedef kökene erken bir bağlantı başlatır; bu süreç DNS çözümünü, TCP el sıkışmasını ve isteğe bağlı olarak TLS müzakere sürecini içerir. Bu, sonraki istekler için gecikmeyi önemli ölçüde azaltır.
Analitik betikleri, ödeme ağ geçitleri veya ilk oluşturma veya anlık etkileşim için gerekli olan anahtar API'ler gibi kritik üçüncü taraf kaynakları için preconnect kullanın.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://api.hizmetiniz.com">
</head>preconnect'un dns-prefetch'a kıyasla daha fazla kaynak tükettiğini unutmayın. Yalnızca kısa süre içinde bir istek geleceğinden emin olduğunuz kökenler için kullanın. Aşırı kullanımı, mobil cihazlarda bant genişliğini ve pil ömrünü boşa harcayabilir.
Stratejik Uygulama
Tüm kaynaklar önyüklenmemeli veya önceden bağlanmamalıdır. Tarayıcının etki alanı başına eşzamanlı bağlantılar için bir sınırı vardır ve agresif ipuçlandırma, kritik CSS veya HTML ayrıştırma kaynaklarını aç bırakabilir. İlk görünüm için gerekli olan kaynakları önceliklendirin. İpuçlarının FCP üzerinde en yüksek etkiye sahip olacağı fırsatları belirlemek için Lighthouse veya WebPageTest gibi araçları kullanın.
Sonuç
Kritik oluşturma yolunu ustaca yönetmek, İlk İçerkli Boyamayı optimize etmek için esastır. Önyükleme, dns-prefetch ve preconnect gibi kaynak ipuçlarını stratejik olarak kullanarak tarayıcının gerekli kaynakları daha erken getirmesini sağlayabilir, bekleme sürelerini azaltabilir ve kullanıcı algısını iyileştirebilirsiniz. Sonuçlarınızı ölçmeyi ve en iyi performansı sağlamak için gerçek kullanıcı verilerine dayalı olarak stratejinizi ayarlamayı unutmayın.