Kaynak ipuçları: preload ve preconnect.
Kaynak ipuçları, tarayıcıya hangi kaynakların erken gerekeceğini ya da hangi sunuculara bağlanacağını önceden bildiren yönergelerdir.
Tarayıcı bir sayfayı yüklerken kaynakları keşfettiği sırayla ister ve keşif, belgeyi ayrıştırdıkça ilerler. Bazı kaynaklar bu zincirin çok gerisinde keşfedilir — bir stil dosyasının içinde referans verilen yazı tipi, ancak stil indirilip ayrıştırıldıktan sonra bilinir. Kaynak ipuçları bu gecikmeyi kısaltmak için var.
Ama her ipucu bir öncelik iddiasıdır ve öncelik göreli bir kavramdır. Her şeye öncelik vermek, hiçbir şeye öncelik vermemekle aynı sonucu verir — üstelik gerçekten öncelikli olan kaynak, diğerleriyle bant genişliği için yarışmaya başlar.
Dört ipucu, dört farklı iş
- Önceden bağlan — belirtilen sunucuya bağlantı önceden kurulur. Alan adı çözümlemesi, el sıkışma ve güvenlik anlaşması peşinen halledilir.
- Alan adını önceden çöz — yalnız çözümleme yapılır, bağlantı kurulmaz. Daha ucuz ama daha az kazanç.
- Önceden yükle — belirtilen kaynak yüksek öncelikle indirilir ama hemen çalıştırılmaz. Keşif gecikmesini kapatır.
- Önden getir — kullanıcının SONRAKİ sayfada ihtiyaç duyacağı kaynak, boşta indirilir. Farklı bir amaç: gezinme hızı.
İlk ikisi bağlantı maliyeti içindir ve yalnız harici alan adlarına anlamlıdır. Kendi sunucunuza bağlantı zaten kuruludur; ona önceden bağlanmak hiçbir şey kazandırmaz. Bu, en sık yapılan gereksiz ipucudur.
Üçüncüsü en güçlü ve en tehlikeli olanı. Doğru kaynağa uygulandığında LCP'yi ölçülebilir biçimde düşürür; yanlış kaynağa ya da fazla sayıda kaynağa uygulandığında gerçek öncelikliyi yavaşlatır.
Kaç tane, hangileri
Pratik kural: bir sayfada önceden yüklenecek kaynak sayısı genelde bir ya da ikidir. Adaylar bellidir — LCP görseli, ya da metin LCP öğesiyse kritik yazı tipi.
Bu sitede yazı tipleri kendi alan adından sunuluyor, dolayısıyla harici bağlantı ipucuna gerek yok; içerik güvenlik politikası zaten harici kaynak isteğini engelliyor. Kaynak ipuçları listesi bu yüzden kısa ve her kalemin bir gerekçesi var.
Bir de ölçüm kuralı: ipucu eklendikten sonra etkisi ÖLÇÜLMELİDİR. İpuçları sezgisel olarak doğru görünür ve sezgi burada sık yanılır — bir önceden yükleme, LCP'yi düşürmek yerine yükseltebilir çünkü başka bir kaynağı geciktirmiştir. Öncesi ve sonrası ölçülmeden eklenen bir ipucu, bir tahmin olarak kalır.
Kaynak ipucu sezgiyle eklenmez; öncesi ve sonrası ölçülür.
Öncelik belirtimi
Daha yeni bir araç, kaynağın önceliğini doğrudan bildirmeye izin veriyor: bir görsele yüksek öncelik verilebiliyor ya da bir betiğin önceliği düşürülebiliyor. Bu, önceden yükleme ipucundan daha hafif bir müdahale çünkü ek bir istek üretmiyor, yalnız sıralamayı değiştiriyor.
En yaygın kullanımı hero görselidir: görsel etiketine yüksek öncelik verildiğinde tarayıcı onu diğer görsellerden önce indirir ve LCP kısalır. Ters yönde de kullanılabilir — görünür alan dışındaki bir görselin önceliği düşürülerek bant genişliği kritik kaynaklara bırakılır.
Bu sitede hero görselleri yüksek öncelikle ve tembel yükleme olmadan sunuluyor; vitrin görselleri ise tembel ve normal öncelikte. Ayrım, LCP öğesinin hangisi olduğuna dair ölçüme dayanıyor — tahmine değil.
Önden getirme ve gezinme
Dördüncü ipucu diğerlerinden farklı bir amaca hizmet ediyor: mevcut sayfayı hızlandırmıyor, SONRAKİ sayfayı hazırlıyor. Kullanıcının büyük olasılıkla gideceği sayfanın kaynakları, tarayıcı boştayken düşük öncelikle indiriliyor.
Doğru kullanıldığında etkisi çarpıcı: kullanıcı bağlantıya tıkladığında sayfa neredeyse anında geliyor çünkü zaten indirilmiş. Yanlış kullanıldığında ise saf israf — kullanıcının hiç gitmediği sayfalar için bant genişliği harcanıyor.
Hangi sayfanın önden getirileceğine karar vermenin birkaç yolu var. En basiti sabit bir liste: ana sayfadan en çok gidilen iki sayfa. Daha akıllısı, kullanıcı bir bağlantının üzerine geldiğinde ya da ona doğru kaydırdığında getirmek — niyet sinyali beklemek.
Ölçülü bir uyarı: mobil kullanıcılar için önden getirme, ölçülü veri paketlerinde gerçek bir maliyet üretebilir. Tarayıcılar veri tasarrufu tercihini bildiriyor ve o tercih açıkken önden getirme yapılmamalı — bu, kullanıcının açıkça ifade ettiği bir isteğe saygıdır.
Denetim ve temizlik
Kaynak ipuçları zamanla birikiyor ve kimse temizlemiyor. Bir sağlayıcı değiştirilir ama ona bağlanma ipucu kalır; bir görsel yenilenir ama eski adresi hâlâ önceden yükleniyordur. Sonuç, hiçbir işe yaramayan ama bant genişliği tüketen isteklerdir.
Tarayıcı konsolu bu durumda uyarı veriyor: önceden yüklenen ama kullanılmayan bir kaynak için açık bir mesaj çıkıyor. Bu uyarıyı görmezden gelmemek, temizliğin en kolay yolu.
- Kullanılmayan önceden yükleme — konsol uyarısı verir; kaldırılmalı.
- Kendi alan adına bağlanma ipucu — gereksiz; bağlantı zaten kurulu.
- Çok sayıda önceden yükleme — öncelik anlamını kaybeder; ikiyi geçmemeli.
- Eski sağlayıcıya bağlanma — sağlayıcı değiştiyse ipucu da değişmeli.
- Veri tasarrufu tercihi — açıkken önden getirme yapılmamalı.
Bu liste bir denetim adımına dönüştürülebilir ve dönüştürülmelidir: sayfadaki ipuçları çıkarılır, her birinin gerekçesi sorulur ve gerekçesi olmayan kaldırılır. Yılda bir kez yapılan bu temizlik, çoğu sitede birkaç gereksiz istek kapatıyor.
Kapanışta bir öncelik sırası: kaynak ipuçları, performans çalışmasının ilk adımı değil son adımıdır. Büyük bir betik yükünü ya da optimize edilmemiş bir hero görselini ipuçlarıyla telafi etmek mümkün değil — ipucu yalnız keşif sırasını değiştirir, kaynağın kendi maliyetini değiştirmez. Önce kaynak küçültülür, sonra sırası ayarlanır.
Pratik kontrol listesi
Bu sayfanın anlattıklarını bir denetim adımına çevirmek gerekirse, kaynak ipuçlarını için bakılacaklar şunlar. Liste kısa tutuldu çünkü uzun listeler yürünmüyor; altı madde bir oturumda tamamlanabilir.
- Kaç önceden yükleme var — ikiyi geçiyorsa fazla.
- Her birinin gerekçesi ne — gerekçesi olmayan kaldırılır.
- Konsol uyarı veriyor mu — kullanılmayan önceden yükleme uyarı üretir.
- Kendi alan adına bağlanma ipucu var mı — gereksiz.
- Eski bir sağlayıcıya işaret eden ipucu kaldı mı?
- Veri tasarrufu tercihi dikkate alınıyor mu?
Bu liste yılda bir kez yürünmeli. İpuçları birikiyor ve kimse temizlemiyor; sonuç, hiçbir işe yaramayan ama bant genişliği tüketen istekler.