Elektron ticarət mağazanız üçün Headless-ə keçməyin müsbət və mənfi tərəfləri
“Headless” üçün axtarış edin və bu yeni yanaşma haqqında minlərlə məqalə tapacaqsınız. Müəlliflərin əksəriyyəti onun front-end inkişafı üçün təklif etdiyi azadlığı qiymətləndirir, pərəstişkarlarının böyük bir hissəsi isə onun əla istifadəçi interfeysini (UI) yüksək qiymətləndirir. Buna baxmayaraq, məhz elektron ticarət biznesləri öz onlayn mağazaları üçün Headless-i tətbiq etməkdə böyük maraq göstərirlər.
Mən əvvəllər Progressive Web Apps haqqında danışmışam, bu yanaşmanın bir hissəsidir. Oxşar konsepsiya Amazon, Flipkart və Nike kimi elektron ticarət nəhəngləri tərəfindən yüksək səviyyəli müştəri təcrübəsi təqdim etmək məqsədilə mənimsənilib.
Bu məqalə Headless veb sayt inkişafına yazılmış növbəti sevgi məktubudurmu? Müəyyən dərəcədə, bəli. Lakin mən onun elektron ticarət biznesləri üçün faydalarını və üçüncü tərəf veb sayt inkişaf agentliyi kimi ən populyar elektron ticarət platformalarından bəziləri üçün Headless-i necə tətbiq etdiyimizi müzakirə etməyə üstünlük verirəm.
Veb saytınızı və daha çoxunu optimallaşdırın
Semrush alətləri ilə
Headless Ecommerce nədir?
Əsaslar: Hər bir elektron ticarət veb saytı iki funksional hissədən ibarətdir: front-end və back-end.
Veb saytın front-end hissəsi istifadəçi ilə elektron ticarət portalı arasında vasitəçi kanal kimi çıxış edir, back-end isə məhsul detallarını və portalın bütün fəaliyyətini idarə edir. İllər ərzində populyar elektron ticarət portalları veb saytın front-end və back-end hissələrinin eyni paneldən idarə olunduğu, yəni ortaq bir platformanı paylaşdığı klassik yanaşmaya sadiq qalıblar.
Tamamilə yeni bir strategiya ilə Headless-ə keçid. Əgər Headless haqqında eşitməmisinizsə, o, əsasən veb saytın front-end və back-end hissələrini ayırmağa xidmət edir. Daha az müdaxilə ilə, veb saytın hər bir hissəsi müstəqil davranır və öz sahələrində mükəmməlləşir; portalın üzünü idarə etmək üçün UI mütəxəssisiniz və bazanı gücləndirmək üçün back-end mütəxəssisiniz olur:
Niyə onlar bu qədər fərqlidirlər?
Elektron ticarət portallarının əsas arxitekturası
Elektron ticarət arxitekturasının incəliklərinə girmədən, aşağıdakılar elektron ticarət veb saytlarının əsas fəaliyyətini və hər mərhələdəki qarşılıqlı əlaqələrini göstərmək üçün təxmini dizayn edilmiş portal strukturlarıdır.
Full Stack Arxitekturası
Full Stack arxitekturası, mobil tətbiq inkişafı bir trend halına gəldikdən bəri mobil veb ustaların istifadə etdiyi daha ənənəvi bir yanaşmadır. Tərtibatçılar, inteqrasiya olunmuş vitrin ilə birlikdə ticarət platformasının mərkəzdə olduğu tam hüquqlu bir ekosistem yaradırlar. Portal mobil və veb kimi fərdi platformaları ayrı-ayrılıqda təqdim edir. Çatdırılan nəticələr daha müstəqildir və xidmət göstərən platformaya həsr olunub.
Ticarət platforması mərkəzdə olmaqla, ticarət portalı məzmun idarəetməsi, yerinə yetirmə və məhsul məlumatları kimi back-end funksiyalarına üstünlük verir.
Full-stack elektron ticarət arxitekturası
Headless Ecommerce
Full-stack arxitekturası ilə müqayisədə, Headless elektron ticarət strukturu veb mağazanın front-end hissəsini veb saytın digər funksiyalarından aydın şəkildə ayırır. Bu arxitekturanı ümumi mərkəzləşdirilmiş sistemdən daha çox ayrı hissələr kimi vizuallaşdırmaq kömək edir. Çatdırılan nəticələr bütün platformalara ağıllı şəkildə uyğunlaşan ortaq bir front-end UI təqdim edən API-lər ilə idarə olunur.
Aydın səbəblərə görə, front-end indi ödəniş və fərdiləşdirmə kimi funksiyalara üstünlük verir, ticarət platforması isə məzmun idarəetməsi, yerinə yetirmə və məhsul idarəetməsi kimi sahələri idarə edir.
Çox texniki görünür? Bu, tək bir nöqtə ilə yekunlaşdırıla bilər: Headless elektron ticarət, omnichannel təcrübəsi.
təqdim etmək baxımından ənənəvi yanaşmalardan daha çevikdir.
Headless-ə tələbatın qəfil artması Retail Dive və BigCommerce bu yaxınlarda qlobal rəhbərlər və marketinq menecerlərinin rəqəmsal istehlakçıları cəlb etməkdə çətinliklərini əhatə edən bir sorğu
ilə heyrətamiz rəqəmlər ortaya qoydular. Hesabata görə, biznes liderlərinin 86%-i Müştəri Əldəetmə Xərclərinin (CAC) artdığını qeyd edib. Ödənişli media daha bahalı və rəqabətli hala gəldiyi üçün, hesabat orqanik trafik cəlb etmək üçün daha yaxşı yollar strategiyalaşdırmağın üstünlük verilən seçim olduğunu göstərir. İstifadəçilər demək olar ki, hər yerdən məzmun istehlak edirlər. Onlayn mövcudluq və təkmilləşdirilmiş alış-veriş təcrübəsindən kənarda, bizneslər istehlakçılara bütün cihazlarda asan alış seçimləri təqdim etməlidirlər. Bu bəyanat, amerikalıların hər birinin 13 şəbəkə cihazı vasitəsilə əlaqəli olacağını iddia edən bir Mediapost sorğusu
ilə dəstəklənir. Deməyə ehtiyac yoxdur ki, siyahıya noutbuklar, planşetlər, mobil telefonlar, səs tanıma alətləri, ağıllı saatlar, köşklər, avtomobil planşetləri və veb xidmətlərinə əlçatanlığı təmin etdiyi bilinən hər cür cihaz daxildir.
Laboratoriyamızdakı praktik hallar: Müştərilərimiz üçün Headless arxitekturasını necə inkişaf etdirdik
Fərdi elektron ticarət həlləri təklif edən bir agentlik olaraq, müştərilərimiz tez-tez bizdən yüklənməsi ildırım sürətli və istifadəçi tərəfində eyni dərəcədə intuitiv olan portallar təqdim etməyimizi istəyirlər. Və biz də headless yanaşmasını tövsiyə edirik. Aydın səbəblərə görə, bu bizdən əlavə səy tələb edir, lakin bu onlar üçün yaxşı nəticələr verir.
Headless Magento-nun tətbiqi Backend:
Magento ticarət platforması Frontend:
Angular JS Problem
həll edildi:
Yükləmə problemləri, orijinal veb saytın görünməsi 7 saniyəyə qədər çəkirdi. Bu, 7 saniyədən çox boş ekran demək idi. Magento, standart olaraq, KnockoutJS əsaslı CMS üzərində dizayn edilmiş bir frontend təklif edir. Yüksək inteqrasiya olunmuş vitrin veb mağazanı bir çox cəbhədə məhdudlaşdırırdı. Artan istifadəçi sayı mağazanın performansına mənfi təsir göstərməyə başlamışdı.
Həllimiz:
Angular JS ilə dizayn edilmiş headless şablonu ilə, backend-in vitrinə təsir etməsini süzgəcdən keçirdik. Klassik lazyload yanaşması səhifənin yüklənmə müddətini demək olar ki, yarıya endirdi.
Nəticə:
Səhifənin yüklənmə müddəti 7 saniyədən 2.8 saniyəyə qədər kəskin şəkildə azaldı.
Başqa bir Headless Magento Case StudyBackend
: Magento Commerce platformasıFrontend
: VueJS
Həll olunan problem:Səhifə naviqasiyası
, Magento-nun təcrübəsi backend performansı ilə məhdudlaşır. Onun frontend-i olduqca sərtdir və tez-tez vitrində bir hərəkət etdiyiniz zaman backend üçün bir tur etməyinizi tələb edir. Yeni bir səhifəyə klikləyirsiniz, mağaza sorğunu Magento backend-inə ötürür, məlumatları emal edir və yeni səhifəni yükləməyə icazə verir. Səhifə naviqasiyası bu prosesdə zərər görən bir şeydir.
Həllimiz:
VueJS ilə Magento-da Single Page Application qura bildik. İstifadəçi artıq Vue şablonunun özündə səhifələr arasında naviqasiya edə bilir. Sorğunun böyük bir hissəsi artıq Vue şablonunda həll olunur və Magento backend-inin yanmasının qarşısını alır.
Nəticə:
Səhifə naviqasiya müddəti dəfələrlə azalır.
Shopify Veb mağazasında Headless-in tətbiqiBackend
: Shopify Commerce platforması Frontend:
Gatsby JSUzun ödəniş sessiyaları , İstənilən elektron ticarət platformasında, o cümlədən Shopify
-da ödəniş sessiyaları adətən çox uzundur. İstifadəçilərdən ödəmə etməzdən əvvəl 4 uzun səhifəni doldurmaları istənilir. Arxa hekayə, hər səhifədən sonra, mağaza növbəti səhifəni Shopify backend-indən yenidən yükləyir, ardınca üçüncü tərəf ödəniş şlüzləri tərəfindən emal gecikməsi baş verir. Bununla belə, hər mərhələdə buferlərimiz var, bu da ödəniş bölməsini vaxt aparan və qıcıqlandırıcı edir.
Hər şeydən əvvəl, Shopify ödəniş səhifəsini fərdiləşdirmək qabiliyyətini məhdudlaşdırır və adminin məzmun üzərindəki nəzarətini məhdudlaşdırır.
Həllimiz: Gatsby JS ilə bir virtual bir səhifəlik ödəniş bölməsi
yarada bildik. Sahələri məhdudlaşdırdıq və bütün detalları tək bir səhifədə çeşidlədik.
Nəticə:
Ödəniş sessiyası müddəti dəfələrlə azaldı.
Headless o qədər də qüsursuz deyil
Artan Xərclər:
Headless ticarətin ən yaxşı tərəfi ondadır ki, veb-mağazanın əvvəlcədən müəyyən edilmiş ön tərəfi (frontend) yoxdur. Proqramçılar cihaz yönümlü məzmun təqdim etmək üçün onu sıfırdan qururlar. Ən pis tərəfi isə odur ki, bu, vaxt aparır və xərclər yüksək ola bilər.
Bununla yanaşı, marketinq komandası insanlara çatmaqda kifayət qədər effektiv olmadığı üçün daha çox xərcləməli olursunuz. Sahibkarlar müxtəlif cihazlarda eniş səhifələrini (landing pages) işə salmaq üçün İT komandasından çox asılıdırlar.
Marketinq üçün əlverişli deyil
Headless ticarət sistemi ön tərəf təqdimat qatına malik deyil. Bu o deməkdir ki:
- Məzmunu son istifadəçilərin cihazlarında öncədən görmək çətinləşir.
- Marketoloqlar ənənəvi WYSIWYG mühitində məzmun yaratmaqda çətinlik çəkirlər.
- Başqa bir şöbədən asılılıq artdığı üçün ideya formalaşdırmaq, məzmun yaratmaq və dərc etmək xeyli yavaşlayır.
Bu o deməkdir ki, Headless ticarət sonda marketoloqları məzmunun yaradılması və çatdırılması üçün İT şöbəsindən daha çox asılı vəziyyətə salaraq onları gərginləşdirəcək.
Mağaza ön tərəfində məhdud dəyişikliklər
Headless ticarət sistemi WYSIWYG mühitinə malik deyil və yalnız JS əsaslı çərçivələrlə qurulub. Bu, veb saytınızın genişlənməsi üçün kifayət qədər yer təmin etsə də, JS proqramçılarından çox asılı olmadan ön tərəfi yenidən dizayn etməyinizi də məhdudlaşdırır.
Xülasə
Aparıcı e-ticarət biznesləri headless arxitekturasını mənimsəyiblər. Hər şeydən əvvəl, bu onlara yaxşı mənada kömək edir. Headless-in üstünlükləri ilə yanaşı, mənfi tərəfləri də var. Bu, sizdən əlavə səy tələb edə bilər, lakin əldə edəcəyiniz nəticələr uzunmüddətli olacaq.