Aylık milyonlarca kullanıcıya sahip Hangikredi'de (hangikredi.com) seo metriklerimizi nasıl iyileştiriyoruz?. Yüksek trafikli bir web siteniz olduğunda, SEO ve performans öncelikli olduğu için günlük olarak Lighthouse metriklerini iyileştirmeye odaklanırsınız. Haliyle "websitesini çalışır hale getirmek" yerine, “yüksek performanslı ve seo metriklerine uyumlu bir şekilde iş yapmak” önemli hale geliyor. Bu makalede, Interaction to Next Paint (INP) nedir ve web sitenizde nasıl daha iyi bir skor elde edebilirsiniz konularından bahsedeceğim. Ayrıca, projelerimizden birinde INP skorunu %30 oranında iyileştirmemize yardımcı olan bir kod refaktörü paylaşacağım. Hadi başlayalım!
Google’ın Core Web Vitals Güncellemesi: FID’den INP’ye Geçiş #
Google, Core Web Vitals'ı güncelleyerek First Input Delay (FID) metriğini INP ile değiştirdi.
FID, bir web sitesinin kullanıcının ilk etkileşimine ne kadar hızlı yanıt verdiğini ölçer. Örneğin, bir web sitesini açtığınızda bir düğmeye tıkladığınızda, web sitesi bu ilk tıklamaya ne kadar hızlı yanıt veriyor? Ancak, bu metrik ilk etkileşim sonrası kullanıcı deneyimini tamamen göz ardı ediyor, bu yüzden yetersiz kalıyordu.
Interaction to Next Paint (INP) Nedir? #
INP, web sitenizin kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ölçer. Web siteniz ne kadar hızlı tepki verirse, o kadar yüksek puan alırsınız.
INP; tıklamalar, dokunmalar ve klavye girişleri gibi tüm etkileşimleri izler. Temel olarak, bir kullanıcının bir giriş yaptığı andan itibaren sayfanın görsel olarak değişiklik yapması için geçen süreyi ölçer.
Ancak, INP’nin en büyük zorluğu kullanıcılarınızın en kötü etkileşim sürelerine göre ölçülmesidir. Yani sadece ortalama değil, en kötü kullanıcı deneyimi de skorunuzu belirler.
INP Skorlarını Nasıl İzleyebilirsiniz? #
INP’yi izlemek için gerçek kullanıcı verilerine ihtiyacınız vardır çünkü kendi geliştirme testleriniz web sitenizin en kötü etkileşim sürelerini göstermeyebilir.
Bu yüzden New Relic veya DebugBear’in INP aracı gibi izleme araçlarını kullanabilirsiniz.
INP Skoru Nasıl İyileştirilir? #
1. Main Threadde Uzun Tasklardan Kaçının #
JavaScript tek iş parçacıklı (single-threaded) bir dildir. Eğer büyük bir script dosyası yüklüyorsanız, main threadi bloke ediyorsunuz demektir.
Özellikle React 18 öncesinde, tüm JavaScript yüklenene kadar beklemeniz gerekiyordu ve bu süre boyunca sayfa tamamen etkileşime kapalı oluyordu.
Aşağıdaki kod örneğini inceleyelim:
Yukarıdaki kodda, React'in hidrasyon aşamasına (React bu aşamada HTML'inize Javascript ile etkileşim kazandırır) geçmeden önce tüm üç bileşenin yüklenmesi gerekir, böylece kullanıcılar sayfanızla etkileşime geçmeye başlayabilir. React 18 ile birlikte seçici hidrasyon (selective hydration) kullanıma sunuldu. Bu özellik, hangi bileşenlerin öncelikli olarak etkileşim kazanacağını belirlemenizi sağlar ve artık tüm JavaScript'in yüklenmesini beklemek zorunda kalmadan sayfanın bu üç bölümünü hydrate edebilirsiniz. Suspense boundary kullanarak hidrasyonu ana iş parçacığından (main threadden) çıkarabilir ve bloklamayan bir hale getirebilirsiniz.
Aşağıdaki kodu inceleyin.
Suspense kullanımı, bileşenleri bağımsız olarak yüklememizi sağlayarak main threadi bloklamayı engelleır.
2. JavaScript’i Optimize Edin #
Büyük ve ağır script dosyalarını optimize etmek, INP skorlarını iyileştirmenin en önemli yollarından biridir.
- Kod parçalama (Code Splitting) ile bundle boyutunu küçültün.
- Yavaş çalışan fonksiyonları optimize edin.
- Gereksiz DOM manipülasyonlarından kaçının.
Aşağıdaki refactor ile birlikte, INP skorlarımızı neredeyse %30 oranında düştü.
Önceki kod:
Bu kod;
- MutationObserver kullanarak sürekli DOM değişikliklerini dinliyor.
- Her <a> elementi için manuel olarak event listener ekliyor.
- Tarayıcıya ek yük bindiriyor ve büyük hesaplamalar yapıyor.
Bunun yerine Next.js’in kendi araçlarını kullanarak daha verimli bir yaklaşım benimsedim.
Refaktör edilmiş kod:
Bu yeni kod sayesinde;
- MutationObserver ve gereksiz event listener’ları tamamen kaldırdım.
- Next.js’in kendi hook’larını kullanarak sayfa geçişlerini dinledim.
- Kod daha basit hale geldi ve tarayıcının iş yükü azaldı.
Sonuç olarak INP skoru önemli ölçüde iyileşti!
3. INP’yi İyileştirmek İçin Diğer Yöntemler #
- Animasyonlar için JavaScript yerine CSS kullanın.
- CSS, animasyonları hesaplamak için farklı bir iş parçacığı kullanır ve ana iş parçacığını bloke etmez.
- Throttle veya debounce kullanarak gereksiz hesaplamaları azaltın.
- Kullanıcı etkileşimlerini gereğinden fazla hesaplamaktan kaçının.
- Görselleri, yazı tiplerini ve üçüncü taraf script’leri lazy-load edin.
- Özellikle üçüncü taraf script’leri ertelemek (deferring) büyük fark yaratır!
İşte bu şekilde web sitelerimizde INP skorlarını iyileştirdim.
Okuduğunuz için teşekkürler!
