Hyvä ve Luma karşılaştırması: 4 kat daha hafif sayfalar, 18 kat daha az JavaScript

Hyvä ve Luma karşılaştırmalarının çoğu, yeni kurulmuş bir Hyvä mağazasını eski ve yoğun şekilde özelleştirilmiş bir Luma mağazasıyla kıyaslar. Bu, Hyvä'yı çok iyi gösterir; ancak ön yüzün tek başına neyi değiştirdiğini söylemez.

Biz adil bir test istedik. Bu yüzden iki ön yüzü aynı sunucuya, aynı katalogla kurduk ve aynı sayfaları ölçtük.

Nasıl test ettik?

Kurulumu bilerek sade tuttuk; böylece tek değişken tema oldu.

• Hyvä 1.5.2 ile temiz bir Magento 2.4.9 kurulumu, Magento’nun kendi Luma temasıyla karşılaştırıldı.
• İkisi için de aynı sunucu, aynı katalog ve aynı yapılandırma.
• Üç sayfa türü: ana sayfa, kategori ve ürün.
• Lighthouse 13; her sayfa için 3 mobil ölçümün medyanı ve 1 masaüstü ölçüm.

Lighthouse'u komut satırından, headless Chrome ile ve normal bir tarayıcı kullanıcı aracısıyla (user agent) çalıştırdık. nginx yapılandırmamız bot kullanıcı aracılarını engelliyor; engellenen bir test 403 sayfası döndürür ve sahte, anlamsız bir puan üretir.

Ayrıca her ölçüm serisinden önce önbelleği temizleyip yeniden ısıttık ve CDN arkasındaki gerçek URL'leri test ettik. Yöntemin tamamını şu yazımızda bulabilirsiniz: Hyvä hızını Lighthouse ile nasıl test ediyoruz?.

Sonuçlar

Kısacası Hyvä sayfaları yaklaşık dört kat daha hafifti. Yaklaşık 13 ila 18 kat daha az istek yaptılar. Yaklaşık 18 ila 20 kat daha az JavaScript yüklediler. Mobil LCP yaklaşık daha hızlıydı.

Ağırlık nereden geliyor?

Farkın büyük kısmı JavaScript ve dosya sayısından kaynaklanıyor.

Bir Luma sayfası önce RequireJS'i yükler; RequireJS de ardından jQuery, KnockoutJS, jQuery UI widget'ları ve uzun bir küçük modül listesini yükler. Paketlemezseniz her modül ayrı bir istek demektir; Luma'da paketlemeyi (bundling) doğru kurmak ise bilinen bir baş ağrısıdır.

Bir Hyvä sayfası ise Alpine.js'i ve doğrudan şablonlara yazılmış, sayfaya özel az miktarda kodu yükler. Stiller, yalnızca temanın gerçekten kullandığı sınıfları içeren tek bir Tailwind CSS dosyasından gelir.

İstek sayısının 250'nin üzerinden 20'nin altına düşmesinin nedeni budur. JavaScript'in yaklaşık yarım megabayttan 26 KB civarına inmesinin nedeni de budur.

İki yapıyı yan yana karşılaştırdığımız yazı: Alpine.js ve Tailwind, RequireJS ve Knockout'un yerini nasıl alıyor?.

Dürüst olmak gerekirse: Luma da iyi puan aldı

Lighthouse satırına tekrar bakın. Temiz bir Luma teması mobilde 88 ile 99 arasında puan aldı.

Bu bir hata değil. Canlı modda (production mode), hızlı bir sunucuda, Cloudflare arkasında çalışan ve üzerine hiçbir şey kurulmamış temiz bir Luma mağazası, laboratuvar testinde iyi puan alabilir.

Gerçek Luma mağazaları ise nadiren böyledir. Eklentiler, takip kodları, canlı sohbet ve yorum widget'ları çalıştırırlar; her biri zaten ağır olan temelin üzerine daha fazla JavaScript ekler.

Dolayısıyla asıl çıkarılacak sonuç, Hyvä'nın daha yüksek puan alması değil. Asıl sonuç, Hyvä'nın çok daha hafif bir temelden başlaması ve gerçek bir mağazanın ihtiyaç duyduğu her şeye yer bırakması.

Laboratuvar puanları farkı neden olduğundan küçük gösterir?

Lighthouse, yavaşlatılmış bir bağlantıdaki orta seviye bir telefonu simüle eder. İyi ve tekrarlanabilir bir araçtır; ama yine de hızlı bir bilgisayarda yapılan bir simülasyondur.

Gerçek, giriş seviyesi bir telefonda yarım megabaytlık JavaScript'in indirilmesi, ayrıştırılması ve yavaş bir işlemci tarafından çalıştırılması gerekir. Bu iş ana iş parçacığını (main thread) meşgul eder ve her dokunuşa verilen yanıtı geciktirir.

INP (Interaction to Next Paint) tam da burada zarar görür. “Sepete ekle” düğmesine dokunup bekleyen bir müşteri, laboratuvar skoru iyi görünse bile farkı hisseder.

Yaklaşık 26 KB JavaScript ile bir Hyvä sayfasının işlemesi gereken yük çok daha azdır. Magento 2 için Core Web Vitals kontrol listemiz LCP ve INP için diğer iyileştirme alanlarını ele alıyor.

Gerçek bir mağaza için bu ne anlama geliyor?

Temiz bir kurulumda yapılan karşılaştırma bir başlangıç noktasıdır, bir vaat değil. Sizin rakamlarınız eklentilerinize, görsellerinize, scriptlerinize ve sunucunuza bağlıdır.

Gerçek projelerde gördüklerimiz şunlar:

• Bir müşterimizin, 9 ülkeye satış yapan Alman bir mağazanın, mobil Lighthouse ürün sayfası puanı Hyvä'ya geçişten sonra 72'den 94'e çıktı. Kategori sayfası 88'den 95'e yükseldi. Bunlar test ortamı (staging) sürümünde yaptığımız ölçümler.
• Gerçek ürün görselleri, iki mağaza görünümü ve uluslararası ödeme sayfası olan kendi Hyvä demo mağazamızda mobilde ana sayfada 96, kategoride 90 ve ürün sayfalarında 92 ölçtük. Masaüstünde sonuçlar 100, 100 ve 98 oldu.

Demo mağaza rakamları temiz karşılaştırmadan düşük, çünkü gerçek içerik taşıyor. Bu normal ve her mağazayı neden tek tek ölçtüğümüzün de tam olarak nedeni.

Bu rakamları nasıl kullanmalısınız?

Geçişi değerlendiriyorsanız canlı Luma mağazanızı bir firmanın Hyvä demosuyla karşılaştırmayın. Aynı koşullardaki kurulumları karşılaştırın.

1. Mevcut ana sayfa, kategori ve ürün sayfalarınızı tutarlı bir yöntemle ölçün.
2. Eklentilerinizi ve üçüncü taraf scriptlerinizi listeleyin; kazancın ne kadarını koruyacağınızı bunlar belirler.
3. Sunucu ve önbellek yapınızı kontrol edin; çünkü Hyvä yavaş bir arka ucu (backend) düzeltemez.
4. Ancak bundan sonra Hyvä'nın mağazanızda neyi değiştireceğini tahmin edin.

Bir Hyvä mağazası kurduğumuzda, yayına alındığı anda ana sayfa, kategori ve ürün sayfaları için mobilde en az 89 Lighthouse Performance puanını taahhüt ediyoruz. Bu taahhüt, Hyvä için optimize edilmiş bir sunucuda ve proje planında kararlaştırılan görseller ve scriptlerle geçerlidir.

SSS

Neden gerçek bir mağaza yerine temiz bir Luma kurulumunu test ettiniz?

Temiz bir kurulum, ön yüzün tek başına etkisini ayırmamızı sağlar. Gerçek mağazalar bunun üzerine eklentiler ve scriptler ekler; bu da genellikle farkı daha da açar.

Hyvä Lighthouse'ta her zaman daha yüksek puan alır mı?

Her zaman büyük bir farkla değil. Daha büyük ve daha güvenilir fark; sayfa ağırlığı, istek sayısı ve JavaScript miktarındadır. Bunlar gerçek alışverişçileri, laboratuvar puanının gösterdiğinden daha fazla etkiler.

daha hızlı LCP fark edilir mi?

Evet, özellikle mobilde. Testimizde mobil LCP, Luma'da yaklaşık 2,3–2,5 saniyeden Hyvä'da yaklaşık 1,5–1,6 saniyeye indi.

Aynı karşılaştırmayı kendi mağazanız için mi istiyorsunuz? Göz atın: Luma ve Hyvä karşılaştırması ve Hyvä'ya geçişi nasıl planladığımızı görmek için Hyvä tema geliştirme sayfamıza bakın.