𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗕𝘂𝘁 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄? 𝗜𝘁'𝘀 𝗜𝗡𝗣
Lighthouse raporunuz yeşil görünüyor. LCP iyi. CLS iyi. Sayfa hızlı yükleniyor.
Sonra gerçek dünya skorlarınız düşüyor. Nedenini bilmiyorsunuz.
Sorun muhtemelen INP. Interaction to Next Paint, Mart 2024'te FID'nin yerini aldı. FID sadece ilk gecikmeyi ölçüyordu. INP, bir kullanıcı sayfanızda kaldığı sürece her etkileşimi ölçer. En yavaş olanı raporlar.
INP bir yükleme metriği değildir. Bir yanıt verme (responsiveness) metriğidir. Tek bir soruyu yanıtlar: Tıkladığınızda veya bir şey yazdığınızda, ekranın değişmesi ne kadar sürüyor?
Google şu aralıkları kullanır:
- 200ms veya daha azı iyidir.
- 500ms üzeri kötüdür.
Bir site bir saniyede yüklenebilir ama yine de başarısız sayılabilir. Hızlı yüklenmek ve hızlı yanıt vermek farklı işlerdir.
Lighthouse araçları genellikle INP'yi gözden kaçırır. Lighthouse butonlarınıza tıklamaz. Bir tahmin sunar. Yeşil bir laboratuvar raporuna ve kırmızı bir saha (field) skoruna sahip olabilirsiniz.
Gerçek rakamı görmek için bu kodu kullanın:
import { onINP } from 'web-vitals'; onINP(function (metric) { console.log('INP', metric.value, metric.entries); });
Bu, yavaş etkileşimi ve ilgili öğeyi günlüğe kaydeder.
INP sorunları, ana iş parçacığı (main thread) meşgul olduğu için oluşur. Bir JavaScript görevi bitene kadar tarayıcı yanıtı çizemez (paint edemez).
Yaygın nedenler:
- Her tıklamada çalışan ağır event handler'lar.
- Sohbet widget'ları veya analitik araçları gibi üçüncü taraf script'ler.
- Sürekli DOM okuma ve yazma işlemlerinden kaynaklanan layout thrashing.
- Framework hydration görevleri.
Uzun görevleri parçalara ayırarak bunu düzeltebilirsiniz. Adımlar arasında tarayıcıya nefes aldırın:
async function onClick() { doUrgentPart(); await yieldToMain(); doExpensivePart(); }
Yavaş iş başlamadan önce tarayıcının kullanıcı arayüzünü (UI) çizmesine izin vermek için yieldToMain kullanın.
Diğer düzeltmeler:
- Hemen ihtiyaç duyulmayan script'leri erteleyin (defer).
- Üçüncü taraf widget'ları denetleyin.
- Maliyetli handler'ları debounce edin.
- DOM okuma ve yazma işlemlerinizi gruplandırın (batch).
Gerçek skorlarınız düşükse LCP'ye bakıp durmayı bırakın. Bunun yerine etkileşimlerinizi ölçün.
Kaynak: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn