Sayfa Hızı için React ve Vue Framework'lerinden Çıkarılacak Dersler

Günümüzde sürekli sayfa hızı peşinde koşarken gün sonunda sürekli aynı noktya gelip duruyoruz. Ürün, pazarlama ve growth birimleri ne kadar teknoloji ekiplerini motive etmeye çalışsa da pek çoğu refaktoring gerektirdiği için site performansını iyileştirecek görevler askıda kalıyor, yapılsa da tam sonuç elde edilemiyor. BU kısır döngü içinde akıl açacak bazı bakış açılarına ihtiyacımız olduğunu düşünerek gerçek performans için ne yapılması gerektiğinin üstünde biraz kafa yormak faydalı olacaktır. Mesela React.js ve Vue.js ya da SSR(server side rendering) bazlı uzantıları olan Next.js ve Nuxt.js yapılarının diğer tüm platform yapılarından daha hızlı olmasından çıkarılacak dersler neler olabilir? MB'lerce jQuery ve CSS dosyalarıyla ilgili optimizasyon yapmanın zamanı gelmedi mi? Web performanstan bir haber front-end developer'lara kurban verilen koca koca şirketler ne zaman uyanacak? Hadi bu sorulara madde madde cevap bulalım.

Next.js ve Nuxt.js altyapılı siteler neden hızlı?

React ve Vue altyapısının günlük dille SEO'ya uyumlu yapıları olan Next ve Nuxt platformları günümüzde hız performansı için en öne çıkan yapılar. Peki bu platformlar neden bu kadar hızlı?

React.js ve Vue.js altyapıları komponent bazlı framework'ler oldukları için her bir sayfanın aşağıdaki gibi bileşenlerine ayırarak sayfaları alt bileşenler şeklinde ele alıyorlar.

Burası çokomelli olduğu için gerçek bir örnekle ele alalım: Örneğin e-ticarette bir listeleme sayfasını ele alalım. Bu listeleme sayfasının aşağıdaki gibi alt bileşenleri olduğunu düşünebiliriz:

• Header
• Listeleme
  • Listeleme giriş bilgileri
    • Sayfa başlığı
    • Breadcrumb
    • Ürün sayısı
  • Filtre
    • Kategori filtresi
    • Fiyat filtresi
    • ..
  • Sıralama
  • Ürün kartları
    • Ürün fotoğrafı
    • Ürün bilgileri
      • Ürün ismi
      • Ürün fiyatı
        • Üstü çizili fiyat
        • Satış fiyatı
        • İndirim oranı
      • Kampanya bilgisi
  • Sayfalama
  • Kategori içeriği
• Footer

Nuxt.js ile komponent bazlı yazılım yapılırken yukarıda yazdığımız her bir bileşen ayrı bir sayfada kodlanıyor ve master sayfaya dahil ediliyor. Örneğin UrunFotografi.js isimli dosyayı ele alalım. Ürün fotoğrafları fonksiyonunda ne olacaksa(carousel fotoğraf kaydırma, responsive fotoğraf gösterme vb..) bu bileşenin içinde js kodlarını yazılıyor. Aynı şekilde sadece bu bileşende kullanılacak CSS dosyaları da bu dosyaya ekleniyor.  Yani her kompenent'in ihtiyaç duyduğu dosyalar eğer komponent kullanılıyorsa çalıştırılıyor.

Peki şu anda geniş çoğunlukla web platformlarında bu süreç nasıl gerçekleşiyor: Bir script.js dosyasına üyelikten, filtreye, sepet sayfalarından, menüye tüm sayfalarda çalışan farklı kodlar yükleniyor. Aynen çuval misali. Sonra ne mi oluyor? 3 MB js dosyasına sahip, 1.5 MB css dosyasına sahip siteler ortaya çıkıyor. Asıl problem bu dosyaların boyutları da değildir, ortalama bir Android mobil cihazın işlemcisini(CPU) düşündüğünüzde binlerce satır kodu milisaniyeler içinde çalıştırmasını bekleyemezsiniz. Sadece ihtiyacınız olan kodları çalıştırarak aslında performans kazancı sağlayabiliyorsunuz.

Oluşturmayı engelleyen kaynakları ortadan nasıl kadırırız?

Bugün en çok ziyaret edilen 1 milyon sitenin %32'si Font Awesome font kütüphanesini kullanıyor. Bu font kütüphanesinin ortalama yükü 250 KB civarındadır. Asenkron yükleme flick efektten dolayı çok tercih edilmeyen bu kütüphaneyi düşünürsek; bir sayfanın mobil ya da masaüstünde açılır açılmaz ilk ekranda kaç adet font görünüyor? 50 farklı platformda yaptığımız kısa bir araştırmada ortalama 3.4 adet ikon kullanıldığını(en fazla kullanılan; sepet, kullanıcı, menü, bildirim) görüyoruz.  Yani onca yükü asenkron yüklemememizin sebebi sadece 4 adet ikonu problemsiz yüklemek için tüm kütüphaneleri yüklüyoruz.

Peki gelişmiş JS frameworkleri bunu nasıl yönetir? İlgili bileşende hangi ikonu kullanacaksanız SVG formatında import ederek kullandığınız için herhangi bir font ya da CSS yükünü çuvala doldurmuyorsunuz.

Bootstrap vs React JS kullanımın bize söyledikleri

Bootstrap JS kütüphanesinin pazar payı dünya çapındaki tüm sitelerde %26 oranındadır.  Buna karşılık %4'e yakın React kullanımı vardır. Bootstrap projelerde çoğunlukla hızlı geliştirme yapmak için kullanılan çok esnek, esnek olduğu kadar kolay kullanım sağlamasından dolayı çok tutulan kütüphanedir. Fakat her güzelliğin bir bedeli vardır. Bu esneklik için çok genel JS fonksiyonları, çok geniş kod kapsamları, muhtemelen hiç kullanmayacağınız özelliklerin fonksiyonlarını da projenizde barındırıyorsunuz demektir.

Peki tam bu noktada bir soru soralım: En tepedeki 10 bin siteden, 1000 siteye giderken kullanımdaki %100'ün üzerindeki artış sizce neyi işaret ediyor? En iyilerin daha iyi olmak için detayları avantajlarına çevirdiklerini görmemiz gerekiyor.

Özet olarak; Next, Nuxt, Angular, React, Vue vb.. teknolojilerle sitelerimizi yeniden yazalım değil. Bu teknolojiler hızlılık için temelde neyi doğru yaptığını anlayıp kendi web uygulamalarımızda bu doğruları uygulamak.