Bir web projesinde en önemli hususlardan birisi görünüm değildir, kullanılabilirliktir. Next.js projeleri tarayıcı derleme süreçlerinden dolayı tarayıcıya çok yük bindiriyor ve kasılmalara neden oluyor. Bu durumda biz siteye “evet bu güzel bir çalışma” olarak düşünerek eklediğimiz tasarım ögesinin etkisini de doğru ölçmemiz gerekmekte.
İyi ölçülmüş eklemeler; sitelerin daha hızlı açılmasını sağlaması önemli bir avantajdır ama tek avantaj değildir. Diğer ikinci büyük avantajı ise kullanıcı deneyimine direk etki etmesidir. Kullanıcı eğer sitenize hızlı bağlanır ama gezinme sırasında sorunlu bir süreç yaşarsa bu onlarda tekrar ziyaret etmeme eğilimi oluşturur.
Next.js projelerde genellikle sayfa akışında kesilmeler fark ettik. Henüz bu durumla ilgili Pagespeed ve Chromium verilerinde her hangi bir isim veya değerlendirme olmasa da kendi testlerimizde ortalama bir telefon belirledik ve onunla bu testleri yapıyoruz.
Şimdi web siteniz kitlesi kim ve teknoloji ile ne kadar haşır neşir ise kullandığı cep telefonu modeli ve buna bağlı olarak tarayıcısının gücü değişecektir. Biz Türk SEM olarak baya araştırma yaptık ve Türkiye ortalaması telefonun Samsung A13, Note 20 civarı bir telefon olacağını keşfettik.
Tüm müşterilerimiz web sitelerinde ilk testleri A13 ve Note 20 gibi cihazlarla test ediyoruz.
Next.js ve SEO’da Kritik Bulgu
Her koşulda tüm parametrelerde Next.js, SEO çalışmaları için aşırı avantajlı. Kullanıcı ilk anda hızlı bir siteyle karşılaşıyor ve bu doğal olarak yeniden ziyareti için önemli bir neden veriyor. Fakat; abartılmış ve yanlış mantık düzeni kurulmuş animasyonlu sitelerde açılışta kazanılan durum, site gezintisinde hemen eksi değere dönüşebiliyor.
Google bunu “Long Tasks” olarak algılayacaktır. Eğer sitenizde framer-motion kullanımı doğru kurgulanmadıysa Long Tasks değerinizin yüksel olması şaşırtıcı olmaz. Sitenizi bitirdiniz ve Iphone 17 Pro Max ile test ederseniz sağlıklı bir kullanıcı deneyimi yapmış olmazsınız. En doğru yaklaşım ortalama bir cihaz bizim ulaştığımız varsayıma göre A13 veya Note 20 arasındaki güçlü cihazlar olacaktır.
Sonsuz Animasyon Hatası
Burada bahsettiğimiz durum tabi ki 2026 yılı ve 2027 yılı için geçerli olacaktır. Muhtemelen bu içeriğimiz 2028 yılında pek değerli olmayacak. Çünkü; Tailwind CSS ve Next.js bir çok iyileştirme gerçekleştiriyor ve daha da iyi olacaktır. Fakat; şu kesindir testlerinizi site ziyaretçilerinizin ortalaması hangi telefon olacağını düşünün ve o cihaza göre yapın. Sonsuz animasyonlar iyi cihazlarda bile bir süre sonra ki masaüstü web görünümlerde bile aşırı kasmalara neden olabiliyor. Eğer çok önemli bir değer katmıyorsa sonsuz animasyonu kullanmaktan kaçının. Sonsuz animasyon kullanmamanız sitenizin SEO’su için avantaj sağlayabilir.
Chrome DevTools ile “Gerçek Dünya” Testi: CPU Throttling
Üst segment bir bilgisayarda (i9 işlemci, 32GB RAM) çalışan bir Next.js projesi, gerçek bir Samsung A13 kullanıcısında “donuyor” gibi hissettirebilir. Bunun önüne geçmek için geliştirme aşamasında CPU Throttling özelliğini kullanarak cihazın gücünü yapay olarak 4 kat yavaşlatıyoruz.
Adım Adım CPU Kısıtlama:
- Geliştirici Araçlarını Açın: Test edeceğiniz sayfada
F12tuşuna basın veya sağ tıklayıp “İncele” (Inspect) deyin. - Performance Sekmesine Geçin: Üst menüden Performance sekmesine tıklayın.
- Capture Settings’e Erişin: Bu sekmedeki dişli çark ikonuna (veya “Capture settings”) tıklayın.
- CPU’yu Kısıtlayın: “CPU” açılır menüsünden “4x slowdown” seçeneğini işaretleyin.
- Not: Eğer çok daha düşük bir cihazı (giriş seviyesi Android cihazlar gibi) simüle etmek isterseniz “6x slowdown” seçeneğini de kullanabilirsiniz.
- Kayıt Alın ve Test Edin: “Record” (Daire ikon) butonuna basın ve sayfada kullanıcı gibi gezinin, butonlara tıklayın, animasyonları tetikleyin. Ardından “Stop” diyerek analizi bitirin.
Neye Bakmalısınız? (Kritik Metrik)
Bu testi yaptıktan sonra Main thread akışında kırmızı çizgiler göreceksiniz. Bunlar “Long Tasks” (Uzun Süren İşlemler) olarak adlandırılır.
- Kırmızı Çizgiler: Eğer ana akışta çok sayıda kırmızı çizgi varsa, CPU bu işlemleri işlerken “donuyor” demektir.
- Interaction to Next Paint (INP): Kullanıcı bir butona tıkladığında tarayıcının tepki vermesi arasındaki süre 200ms üzerine çıkıyorsa, A13/Note 20 kullanıcısı o siteden muhtemelen çıkacaktır.
Özet: Sadece yüklenme hızına değil, “etkileşim anındaki akıcılığa” odaklanın. 4x yavaşlatılmış bir işlemci üzerinde siteniz hala akıcı çalışıyorsa, kod yapınız ve animasyonlarınız “gerçek dünya” için optimize edilmiş demektir.