Hyvä nedir? Magento 2 mağaza sahipleri için sade bir rehber

Bir Magento 2 mağazanız varsa, muhtemelen birileri size “Hyvä’ya geçin” demiştir. Ajanslar ondan bahsediyor, geliştiriciler onu seviyor, hız raporları da sürekli onu işaret ediyor.

Bu rehberde Hyvä'nın aslında ne olduğunu, ona geçtiğinizde neyin değiştiğini ve neyin değişmediğini anlatıyoruz. Yazı yalnızca geliştiriciler için değil, mağaza sahipleri ve yöneticileri için hazırlandı.

Tek paragrafta Hyvä

Magento 2 iki parçadan oluşur. Arka uç (backend) ürünlerinizi, fiyatlarınızı, müşterilerinizi, siparişlerinizi ve entegrasyonlarınızı tutar. Ön yüz (frontend) ise bu verileri müşterinin tarayıcısında sayfalara dönüştüren mağaza vitrinidir.

Magento, kurulumla birlikte Luma adlı bir ön yüz temasıyla gelir. Hyvä ise Luma'nın yerini alan alternatif bir ön yüz temasıdır.

Magento’nun arka ucuna hiç dokunmaz ve mağaza ön yüzünü çok daha küçük, daha modern bir araç setiyle yeniden kurar.

Hyvä neyin yerini alıyor?

Luma yıllar önce tasarlandı ve o dönemin ön yüz teknolojisini taşıyor. Tipik bir Luma sayfası, alışverişçi herhangi bir işlem yapabilmeden önce uzun bir JavaScript ve stil dosyası zincirini yükler.

Hyvä bu yapıyı kaldırır ve yerine çok daha hafif iki araç koyar.

Tailwind CSS, yalnızca şablonlarınızın gerçekten kullandığı stilleri oluşturur. Alpine.js ise bir menünün açılması ya da ürün görselinin değişmesi gibi küçük davranışları doğrudan sayfa şablonuna ekler.

Ne aynı kalıyor?

Birçok mağaza sahibini şaşırtan kısım burası: Hyvä'ya geçmek bir platform değişikliği projesi değildir.

• Ürünleriniz, kategorileriniz, özellikleriniz ve fiyatlarınız olduğu yerde kalır.
• Müşterileriniz, siparişleriniz ve sipariş geçmişiniz olduğu yerde kalır.
• ERP, PIM, pazaryeri ve muhasebe entegrasyonlarınız aynı Magento arka ucuyla çalışmaya devam eder.
• URL'leriniz birebir aynı kalabilir; bu da SEO açısından önemlidir.
• Ekibiniz her gün aynı Magento yönetim panelini kullanmaya devam eder.

Değişen şey, mağaza ön yüzünün nasıl oluşturulduğu ve alışverişçiye ne kadar hızlı ulaştığıdır.

Mağazalar neden Hyvä'ya geçiyor?

Asıl neden yük. Bir Hyvä sayfası, tarayıcıdan bir Luma sayfasına göre çok daha az kod indirmesini ve çalıştırmasını ister.

Aynı sunucu ve aynı katalogla yaptığımız kendi testimizde temiz Hyvä sayfaları, Luma sayfalarından yaklaşık dört kat daha hafifti. Ayrıca çok daha az istek yaptılar ve kabaca 18 ila 20 kat daha az JavaScript yüklediler.

Rakamların tamamını ve test yöntemimizi şu yazımızda bulabilirsiniz: Hyvä ve Luma karşılaştırması.

Daha az kodun pratikte üç faydası vardır:

• Mobil alışverişçiler. Orta seviye ve eski telefonlar, laboratuvar testi iyi görünse bile yarım megabaytlık JavaScript'i işlemekte zorlanır.
• Core Web Vitals. Tarayıcının işi azaldığında LCP ve INP gibi metrikleri yeşil bölgede tutmak kolaylaşır.
• Geliştirme hızı. Tailwind sınıfları kullanan sade şablonları değiştirmek, kat kat LESS geçersiz kılmaları (override) ve Knockout şablonlarıyla uğraşmaktan çok daha hızlıdır.

9 ülkeye satış yapan Alman bir müşterimizin gerçek mağazasında, Hyvä geliştirmemiz mobil Lighthouse puanını ürün sayfasında 72'den 94'e, kategori sayfasında 88'den 95'e çıkardı. Bu rakamlar, test ortamındaki (staging) sürüm üzerinde yaptığımız kendi ölçümlerimizdir.

Hyvä neyi çözmez?

Hyvä ön yüzü hafifletir. Ancak yavaş bir sunucuyu hızlandıramaz.

Hosting'iniz yetersizse, tam sayfa önbelleğiniz (full-page cache) yanlış yapılandırılmışsa ya da görselleriniz birkaç megabayt boyutundaysa, bu sorunlar hangi temayı kullanırsanız kullanın devam eder. Çok sayıda üçüncü taraf kod çalıştıran ağır bir etiket yöneticisi (tag manager) de bir Hyvä mağazasını yavaşlatır.

Bu yüzden her zaman önce tabloya bütün olarak bakıyoruz. Bu alandaki Magento 2 hız optimizasyonu çalışmalarımız da çoğu zaman temadan değil, sunucudan ve kodlardan başlar.

Laboratuvar puanları konusunda da dürüst olmak gerekir. Hızlı bir sunucuda, CDN arkasında çalışan temiz bir Luma mağazası da Lighthouse'ta iyi puan alabilir. Asıl fark, sayfa ağırlığında ve gerçek alışverişçilerin gerçek telefonlarda mağazayı nasıl deneyimlediğinde ortaya çıkar.

Dikkat edilmesi gereken nokta: eklentiler

Çoğu Magento 2 mağazası çok sayıda üçüncü taraf eklenti kullanır. Bunların birçoğu, Luma için RequireJS, KnockoutJS ya da jQuery ile yazılmış kendi ön yüz kodunu içerir.

Hyvä bu yapıyı kaldırdığı için bu tür ön yüz kodları Hyvä'da olduğu gibi çalışmaz. Eklentinin arka uç kısmı çalışmaya devam eder; ilgilenilmesi gereken, mağaza ön yüzündeki kısmıdır.

Popüler eklentilerin çoğu için Hyvä uyumluluk modülü zaten mevcuttur. Diğerlerinde ön yüzün uyarlanması ya da eklentinin daha iyi bir alternatifle değiştirilmesi gerekir.

Bu yüzden her ciddi Hyvä projesi bir eklenti incelemesiyle başlar. Bunu adım adım nasıl yapacağınızı Hyvä geçiş kontrol listesi yazımızda anlatıyoruz.

Ödeme sayfası seçenekleri

Ödeme sayfası ayrı bir karar gerektirir. Luma’nın standart ödeme sayfası KnockoutJS ile yapılmıştır; yani eski altyapıya aittir.

Bir Hyvä mağazasında birkaç farklı yol vardır:

• Magewire üzerine kurulu resmi ödeme sayfası çözümü Hyvä Checkout.
• Mağazanın geri kalanı Hyvä ile çalışırken, Hyvä’nın yedek (fallback) yaklaşımıyla yalnızca o sayfa için Luma’da kalan bir ödeme sayfası.
• Sepet büyüklüğünüze ve pazarlarınıza göre tasarlanan özel bir ödeme sayfası.

Hyvä Checkout projeleri geliştiriyoruz; ayrıca her biri özel bir sipariş onay sayfasıyla gelen 2 adımlı, 3 adımlı ve tek sayfalık kendi ödeme sayfası şablonlarımızı da sunuyoruz. Hepsini şu sayfada karşılaştırabilirsiniz: Hyvä ödeme sayfası seçenekleri.

Hyvä mağazanız için doğru seçim mi?

Hyvä genellikle şu durumlarda çok uygun bir seçimdir:

• Mağazanız Magento 2'de çalışıyor ve Magento'da kalmayı planlıyorsunuz.
• Trafiğinizin büyük bölümü mobilden geliyor.
• Mevcut temanızı değiştirmek zor ve zaman alıyor.
• Zaten bir tasarım yenilemesi planlıyorsunuz.

Ön yüz kodu ağır olan çok sayıda eklentiye ya da Hyvä'ya hazır entegrasyonu olmayan bir ödeme yöntemine bağlıysanız daha fazla planlama gerekir.

Bu durumların hiçbiri engel değildir. Yalnızca eklenti incelemesinin önce yapılması ve planı onun belirlemesi gerektiği anlamına gelir.

SSS

Hyvä, Magento'nun yeni bir sürümü mü?

Hayır. Hyvä, Magento 2 için bir ön yüz temasıdır. Magento sürümünüz, yönetim paneliniz ve verileriniz aynı kalır.

Hyvä'ya geçtiğimde tasarımım değişir mi?

Yalnızca siz isterseniz. Mevcut tasarımınız Hyvä'da birebir yeniden oluşturulabilir, yenilenebilir ya da tamamen yeni bir özel tasarımla değiştirilebilir.

Google sıralamalarımı kaybeder miyim?

Geçiş doğru planlanırsa hayır. URL'ler aynı kalabilir; yayına almadan önce oluşturulan sayfalar ve yapılandırılmış veriler (structured data) eski mağazayla karşılaştırılmalıdır.

Hyvä'nın kendi mağazanız için ne anlama geleceğini merak ediyor musunuz? Hyvä mağazalarını nasıl planladığımızı, geliştirdiğimizi ve bakımını nasıl yaptığımızı şu sayfada görebilirsiniz: Hyvä tema geliştirme sayfamıza bakın.