Web performansı artık sadece "var olması güzel" bir özellik değil; kullanıcı sadakati, arama motoru sıralamaları ve dönüşüm oranları için kritik bir faktördür. Geliştiricilerin çoğu En Büyük İçerikli Boyama (LCP) üzerine yoğunlaşırken, yeni tanıtılan Etkileşimden Sonraki Boyama (INP) metriği de etkileşimi ölçmek için aynı derecede önemlidir. Her iki metrik için de optimal puanlar elde etmek, tarayıcının kaynak yükleme ve yürütme işlemlerini nasıl ele aldığını anlamayı gerektirir. Bu yazıda, uygulamanızın hem hızlı hem de duyarlı hissettirmesini sağlamak için kaynak önceliklendirmeyi uygulama teknik stratejilerini keşfedeceğiz.
Temel Çatışmayı Anlamak
Performans optimizasyonundaki temel zorluk, LCP ve INP'nin genellikle tarayıcı kaynakları için rekabet etmesidir. LCP genellikle görseller, yazı tipleri ve ilk HTML ayrıştırma gibi ağır varlıklar tarafından yönlendirilir. INP ise ana iş parçacığının kullanıcı etkileşimlerini ne kadar hızlı işleyebildiğine bağlıdır. Kritik kaynakları agresif bir şekilde önceden yüklerseniz, LCP'yi iyileştirebilir ancak ana iş parçacığını aç bırakarak takılmalara ve düşük INP puanlarına neden olabilirsiniz. Amaç sadece şeyleri daha hızlı yüklemek değil, onları doğru zamanda ve doğru öncelikle yüklemektir.
Stratejik Kaynak İpucu Kullanımı
Kaynak ipuçları, tarayıcının istek önceliklendirmesini yönlendirmek için güçlü araçlardır. Ancak bunları düzgün kullanmak önbellek kirliliğine ve artan ağ rekabetine yol açabilir. Hangi ipuçlarını kullanacağımız konusunda stratejik olmalıyız.
Preconnect vs. Preload
preconnect, üçüncü taraf kökenlerine (yazı tipleri, analizler, CDN'ler) erken bağlantı kurmak için gereklidir. Kaynağı gerçekten indirmeden sonraki istekler için gecikmeyi azaltır. Buna karşılık, preload agresiftir ve yalnızca yukarıda görünen LCP kaynakları, birincil hero görseli veya kritik yazı tipleri gibi kaynaklar için saklanmalıdır.
<!-- Üçüncü taraf kökenleri için preconnect'i belgenin başında kullanın -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
<!-- Kritik LCP kaynakları için yalnızca preload kullanın -->
<link rel="preload" href="/images/hero.jpg" as="image" />
<link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin />crossorigin özniteliğinin önemine dikkat edin. Tarayıcılar, Çift İçerik sorunlarını önlemek ve doğru MIME türü işlemini sağlamak için çapraz kökenli kaynaklar için bunu gerektirir. Bunu atlamak, kaynağın önceden yüklenmemesine veya iki kez yüklenmesine neden olabilir.
Script Yükleme Önceliklendirmesi
JavaScript, INP bozulmasının birincil suçlusudur. Eşzamanlı veya kritik olmayan script'lerle ana iş parçacığını engellemek, etkileşim hazırlığını geciktirecektir. Bunu defer ve async kullanarak azaltabiliriz, ancak modern uygulamalar için dinamik yükleme genellikle daha üstündür.
Ana uygulama script'leriniz için type="module" kullanın. Modüller varsayılan olarak ertelenir, yani HTML ayrışmasını engellemezler. Hemen gerekli olmayan üçüncü taraf script'leri için, dinamik içe aktarma veya ana etkileşim gerçekleştikten sonra yüklemeyi düşünün.
<!-- Ana uygulama script'i: otomatik olarak ertelenir -->
<script type="module" src="/js/app.js"></script>
<!-- Kritik olmayan üçüncü taraf script'i: eşzamansız olarak yükleyin -->
<script async src="https://analytics.example.com/track.js"></script>
<!-- Kritik ilk tıklama işleyicisi: satır içi veya eşzamanlı -->
<script>
document.addEventListener('click', handleAnalytics, { once: true });
</script>Görsel Önceliklendirmesi ve Çözümlemesi
Görseller genellikle bir sayfanın bayt ağırlığını domine eder. LCP'yi optimize etmek için kritik görselin doğru fetchpriority="high" özniteliğine sahip olduğundan emin olun. Bu, tarayıcıya kuyruktaki diğer görseller yerine bu belirli görseli öncelikli olarak indirmesini söyler.
<img
src="hero.jpg"
alt="Hero Banner"
fetchpriority="high"
width="1200"
height="630"
/>Ayrıca, büyük görselleri render işlemini engelleyebilir. decoding="async" özniteliğini kullanmak, tarayıcının görseli ayrı bir iş parçacığında çözülmesine ve sayfanın geri kalanını render etmeye devam etmesine olanak tanır. Bu, ana iş parçacığının görsel işleme sırasında engellenmesini önler ve doğrudan INP'yi iyileştirir.
Sonuç
Hem LCP hem de INP için optimize etmek, kaynak yönetimine bütüncül bir yaklaşım gerektirir. Kaynak ipuçlarını seçici olarak uygulayarak, script yükleme stratejilerini yöneterek ve görsel teslimatını optimize ederek, yalnızca hızlı yüklenen değil, aynı zamanda hemen etkileşime açık deneyimler yaratabilirsiniz. Performansın tek seferlik bir düzeltme değil, izleme ve iyileştirme sürecinin devam eden bir parçası olduğunu unutmayın. Tıkanıklıkları belirlemek ve bu önceliklendirme stratejilerini iteratif olarak uygulamak için Chrome DevTools ve PageSpeed Insights gibi araçları kullanın.