Sayfa Hızı için React ve Vue Çerçevelerinden Dersler

Sürekli sayfa hızı arayışımızda, kendimizi sıklıkla aynı noktaya dönerken buluyoruz. Ürün, pazarlama ve büyüme ekiplerinin teknoloji ekiplerini motive etme çabalarına rağmen, site performansını artırabilecek görevler, yeniden düzenleme ihtiyacı nedeniyle sıklıkla ertelenir ve bunlar yapılsa bile her zaman tam sonuçlar vermez. Bu döngüde, gerçek performansa ulaşma konusunda bazı anlayışlı bakış açılarını dikkate almakta fayda var. Örneğin, React.js ve Vue.js'nin hızından veya Next.js ve Nuxt.js gibi SSR (sunucu tarafı oluşturma) uzantılarından diğer platformlara kıyasla ne gibi dersler alabiliriz? JQuery ve CSS dosyalarının MB'larını optimize etmenin zamanı gelmedi mi? Web performanslarını yanlış bilgilendirilmiş ön uç geliştiricilere feda eden büyük şirketler ne zaman uyanacak? Bu soruları tek tek ele alalım.

Next.js ve Nuxt.js Tabanlı Siteler Neden Hızlıdır?

React ve Vue üzerine kurulu SEO dostu yapılar olan Next ve Nuxt platformları hız performansıyla öne çıkıyor. Peki bu platformlar neden bu kadar hızlı?

React.js ve Vue.js aşağıda gösterildiği gibi her sayfayı alt bileşenlere ayıran bileşen tabanlı çerçevelerdir.

Bu noktayı açıklamak için gerçek dünyadan bir örnek alalım: bir e-ticaret listeleme sayfası. Bu listeleme sayfasının aşağıdaki alt bileşenlere sahip olduğu düşünülebilir:

• üstbilgi
• Liste
  • Giriş bilgilerinin listelenmesi
    • Sayfa başlığı
    • Kırıntı
    • Ürün sayısı
  • filtre
    • Kategori filtresi
    • Fiyat filtresi
    • Kendi ID’n ile mağazalarını oluştur
  • sınıflandırma
  • Ürün kartları
    • Ürün fotoğrafı
  • Ürün Detayları
    • Ürün adı
    • Ürün fiyatı
      • Üstü çizili fiyat
      • Satış ücreti
    • İndirim oranı
    • Kampanya bilgileri
  • Sayfalara numara koyma
  • Kategori içeriği
• Altbilgi

Nuxt.js ile bileşen tabanlı uygulama oluştururken bu bileşenlerin her biri ayrı ayrı kodlanarak ana sayfaya dahil edilir. Örneğin ProductPhoto.js adlı bir dosyayı düşünün. Ürün fotoğrafları için ihtiyaç duyulan işlevler ne olursa olsun (atlıkarınca, duyarlı görsel görüntüleme vb.), JS kodu bu bileşenin içine yazılır. Benzer şekilde, yalnızca bu bileşen tarafından kullanılan CSS dosyaları da buna dahil edilir. Bu, bileşen kullanıldığında yalnızca her bileşenin gerektirdiği dosyaların yürütüleceği anlamına gelir.

Bu süreç şu anda çoğu web platformunda nasıl işleniyor?

Bir script.js dosyası, üyelik, filtreler ve sepet sayfalarından tüm sayfalarda çalışan menüye kadar her şeyin kodunu içerir. Sonuç? 

Web siteleri 3 MB JS dosyası ve 1.5 MB CSS dosya. Asıl sorun sadece dosya boyutları değil, aynı zamanda ortalama bir Android mobil cihazının CPU'sunun milisaniyeler içinde binlerce satır kod yürütmesini bekleyemeyeceğiniz gerçeğidir. Yalnızca ihtiyacınız olan kodu çalıştırarak performans artışı sağlayabilirsiniz.

Oluşturmayı Engelleyen Kaynaklar Nasıl Ortadan Kaldırılır?

Bugün, en iyi 32 milyon web sitesinin %1'si, ortalama 250 KB civarında olan Font Awesome yazı tipi kitaplığını kullanıyor. Asenkron yüklemenin fiske efekti nedeniyle tercih edilmediğini düşünürsek, mobil veya masaüstünde bir sayfa açıldığında ilk ekranda kaç tane yazı tipinin göründüğünü düşünün. 50 farklı platform üzerinde yapılan kısa bir araştırma, ortalama 3.4 simgenin kullanıldığını buldu (en yaygın olarak: sepet, kullanıcı, menü, bildirim). Böylece, yalnızca dört simgeyi sorunsuz bir şekilde yüklemek için tüm kütüphaneyi yüklüyoruz.

Gelişmiş JS çerçeveleri bunu nasıl yönetir? İlgili bileşende kullanılan simgelerin yalnızca SVG formatını içe aktararak yazı tipinin veya CSS kitaplıklarının tamamını yükleme ihtiyacını ortadan kaldırır.

Bootstrap ve React JS Kullanımı Bize Ne Anlatıyor?

Bootstrap JS kütüphanesi dünya çapındaki tüm sitelerde %26 pazar payına sahipken, React kullanımı ise %4 civarındadır. Bootstrap, hızlı geliştirme olanağı sağlayan esnekliği ve kullanım kolaylığı nedeniyle popülerdir. Ancak bu esnekliğin bir bedeli vardır: genel JS işlevleri, kapsamlı kod kapsamı ve hiçbir zaman kullanamayacağınız özelliklere ilişkin işlevler projenize dahil edilir.

O halde şunu soralım: Kullanımda %100'ün üzerinde bir artış ne sağlar? ilk 10,000'den ilk 1,000'e kadar olan siteler şunları gösterir:? Bu, en iyilerin daha da iyi olabilmek için detayları kendi avantajlarına çevirdiğini gösteriyor.

Özetle, sitelerimizi aşağıdaki gibi teknolojilerle yeniden yazmak yerine Sonraki, Nuxt, Angular, React, Vuevb. için bu teknolojilerin hız açısından neleri doğru yaptığını anlamalı ve bu en iyi uygulamaları web uygulamalarımıza uygulamalıyız.