Shopify Core Web Vitals optimallaşdırılması, e-ticarət ödəniş və səbət səhifələrində yükləmə sürətini, interaktivliyi və vizual sabitliyi yaxşılaşdırmaq üçün texniki təcrübədir. Satıcılar buna üçüncü tərəf skriptlərinin icrasını azaltmaq, Shopify Content Delivery Network vasitəsilə şəkil çatdırılmasını optimallaşdırmaq və dinamik məzmunun yaratdığı layout dəyişikliklərini minimuma endirmək yolu ilə nail olurlar. Bu tədbirlər yüksək axtarış motoru reytinqlərini qorumaq və müştəri səyahətinin son mərhələlərində dönüşüm nisbətlərini artırmaq üçün vacib olan sürətli və etibarlı istifadəçi təcrübəsini təmin edir.
Shopify səbət sürətinə nə təsir edir?
Səbət səhifəsi çox vaxt Shopify mağazasının ən dinamik hissəsidir. O, tez-tez endirimləri, çatdırılma qiymətlərini və inventar səviyyələrini real vaxt rejimində hesablamaq üçün mürəkkəb Liquid məntiqinə əsaslanır. İstifadəçi bir məhsul əlavə etdikdə, mövzu çox vaxt səbət çekmecesini və ya xüsusi səbət səhifəsini tam yeniləmədən yeniləmək üçün bir neçə JavaScript funksiyasını icra etməlidir. Mövzu kodu səmərəli olmadıqda bu proses ləngiyə bilər.
Həddindən artıq Liquid dövrləri yavaş server cavab müddətlərinin ümumi səbəbidir. Məsələn, səbət səhifəsi əlaqəli məhsulları təklif etmək üçün böyük bir kolleksiyadakı hər bir məhsulu dövr edirsə, server HTML yaratmaq üçün daha çox vaxt sərf edir. Bu gecikmə İlk Bayta qədər Vaxtı (TTFB) artırır və bu da digər bütün yükləmə mərhələlərini geri çəkir. Yavaş backend digər performans göstəricilərində yüksək nəticələr əldə etməyi qeyri-mümkün edir.
Server sorğunu emal etmək üçün çox vaxt sərf etdikdə, CSS və skriptlərin yüklənməsi də daxil olmaqla, bütün hadisələr zənciri gecikir.
Google Search Central
Məhsulla zəngin səbət səhifələrində Largest Contentful Paint niyə gecikir?
Largest Contentful Paint (LCP) ekrandakı ən böyük görünən elementin renderi başa çatdıqda ölçülür. Səbət səhifəsində bu, adətən səbətdəki ilk məhsulun şəkli və ya böyük bir reklam banneridir. Bu şəkillər optimallaşdırılmadıqda, LCP balı zərər görəcək və axtarış motorlarına səhifənin istifadəçi üçün yavaş olduğunu bildirəcək.
Bir çox Shopify mövzuları standart olaraq bütün şəkillərə lazy loading tətbiq edir. Bu, uzun məhsul səhifələri üçün yaxşı olsa da, LCP elementləri üçün zərərlidir. Ekranın yuxarı hissəsində görünən şəkillər yüksək prioritetlə yüklənməlidir. Bundan əlavə, yüklənməsi uzun vaxt aparan xüsusi şriftlərin istifadəsi mətn əsaslı LCP elementlərinin renderini gecikdirə bilər ki, bu da zəif istifadəçi təcrübəsinə səbəb olur.
- Səbətdəki ilk məhsul şəkli üçün fetchpriority=’high’ atributundan istifadə edin.
- Şəkillərin Shopify-ın avtomatik filtrləri vasitəsilə WebP və ya AVIF kimi müasir formatlarda təqdim olunduğundan əmin olun.
- Yükləmə prosesi zamanı ölçünün dəyişməməsi üçün dəqiq en və hündürlük atributlarını təyin edin.
- Şəkil gəlməzdən əvvəl layoutun hazır olduğundan əmin olmaq üçün əsas CSS faylını əvvəlcədən yükləyin (preload).
Ödəniş düymələri üçün Interaction to Next Paint (INP) idarə edilməsi
Interaction to Next Paint (INP) səhifənin istifadəçi girişlərinə ümumi cavabdehliyini qiymətləndirən bir göstəricidir. Shopify mağazasında ən kritik qarşılıqlı əlaqələr istifadəçi ‘Səbəti Yenilə’ və ya ‘Ödənişə Keç’ düyməsini kliklədikdə baş verir. Brauzer ağır JavaScript tapşırıqlarını yerinə yetirməklə məşğuldursa, bu kliklər ləng və ya cavabsız hiss olunacaq.
Uzun tapşırıqlar yaxşı INP balının əsas düşmənidir. Bunlar əsas axını 50 millisaniyədən çox məşğul edən skriptlərdir. Tipik bir Shopify mühitində bu tapşırıqlar çox vaxt izləmə pikselləri, loyallıq proqramı vidjetləri və ya mürəkkəb çatdırılma kalkulyatorları tərəfindən tetiklenir. Bu skriptlər işlədikdə, brauzer düymənin klikləndiyini göstərmək üçün ekranı yeniləyə bilmir.
Xarici kitabxanalar, izləmə skriptləri və ya kütləvi çərçivə hidratasiya rutinləri bu kritik pəncərədə prosessoru məşğul edərsə, səhifə müvəqqəti olaraq donur.
Google Search Central
Alien Road Shopify Core Web Vitals optimallaşdırılmasını necə tətbiq edir
Alien Road-da biz müştərilərimiz üçün performansı yaxşılaşdırmaq üçün sistemli bir prosesi izləyirik. Biz Shopify mövzusunun liquid fayllarının və quraşdırılmış proqramların hərtərəfli auditi ilə başlayırıq. Tipik bir işdə, biz tez-tez səbət səhifəsində yüklənən JavaScript-in 30%-ə qədərinin silinmiş, lakin ‘zombi’ kodu kimi qalan proqramlardan gəldiyini görürük. Səhifə çəkisini yüngülləşdirmək üçün bu qalıqları əl ilə silirik.
Məsələn, moda məhsulları satan bir Shopify mağazası üçün biz səbət çekmecesinin açılma animasiyasının ağır bir marketinq avtomatlaşdırma skripti tərəfindən bloklandığını müəyyən edə bilərik. Komandamız gecikməyə səbəb olan xüsusi Uzun Tapşırığı tapmaq üçün Chrome DevTools-dan istifadə edir. Daha sonra biz bu vacib olmayan skriptləri gecikdirilmiş yükləmə ardıcıllığına keçiririk və onların yalnız istifadəçi əsas qarşılıqlı əlaqəsini bitirdikdən sonra icra olunmasını təmin edirik. Bu texniki düzəliş marketinq məlumatlarını itirmədən INP balını əhəmiyyətli dərəcədə yaxşılaşdırır.
Biz həmçinin Cart AJAX API üçün xüsusi kod tətbiq edirik. Miqdar dəyişdikdə bütün səhifəni yeniləmək əvəzinə, yalnız xüsusi mətn elementlərini yeniləyirik. Bu, ötürülən məlumat miqdarını azaldır və layout dəyişikliklərinin qarşısını alır, müştəri üçün möhkəm və sabit bir interfeys yaradır.
Ödəniş prosesində Cumulative Layout Shift-i necə azaltmaq olar?
Cumulative Layout Shift (CLS) səhifənin vizual sabitliyini ölçür. Shopify-da CLS problemləri çox vaxt çatdırılma qiymətləri, endirim mesajları və ya ‘Bununla birlikdə alın’ tövsiyələri kimi dinamik elementlər ilkin boyadan sonra layouta daxil olduqda baş verir. Bu, ‘Ödəniş’ düyməsinin qəfil hərəkət etməsinə səbəb olur ki, bu da təsadüfi kliklərə və ya ümumi narazılığa səbəb ola bilər.
Bunu həll etmək üçün tərtibatçılar CSS min-height xüsusiyyətlərindən istifadə edərək bu elementlər üçün yer ayırmalıdırlar. Bundan əlavə, layout dəyişiklikləri çox vaxt veb şriftlər yükləndikdə və sistem şriftlərini əvəz etdikdə baş verir, bu da mətn bloklarının ölçüsünü dəyişməsinə səbəb olur. ‘font-display: swap’ xüsusiyyətindən istifadə etmək və fallback şriftinin göstəricilərini uyğunlaşdırmaq bu effekti azalda bilər. Layoutu sabit saxlamaq alışın son mərhələlərində etibar yaratmaq üçün əsas amildir.
Üçüncü tərəf proqramlarının şişməsi Shopify performansına necə təsir edir?
Shopify mağazasına əlavə edilən hər bir proqram adətən öz skript etiketini mövzuya daxil edir. Bu proqramlar rəylər və ya çarpaz satış kimi dəyərli xüsusiyyətlər təqdim etsə də, onlar çox vaxt öz aktivlərini ödəniş də daxil olmaqla hər bir səhifədə yükləyirlər. Bu, bant genişliyi üçün rəqabət aparan şəbəkə sorğularının böyük bir yığılmasını yaradır.
Bunu idarə etmək üçün marketoloqlar proqram siyahılarını mütəmadi olaraq yoxlamalıdırlar. Əgər bir proqram yalnız məhsul səhifəsində lazımdırsa, onun skriptinin səbət və ya ödəniş səhifələrində yüklənməsinə icazə verilməməlidir. Bir çox müasir Shopify mövzuları skriptləri xüsusi şablonlarla məhdudlaşdırmaq üçün istifadə edilə bilən şərti yükləməyə imkan verir. Bu yanaşma ödəniş mühitini təmiz və sürətli saxlayır.
- Performance tabından istifadə edərək icrası 50ms-dən çox vaxt aparan skriptləri müəyyən edin.
- Birdən çox izləmə pikselini vahid teq meneceri konteynerində birləşdirin.
- Mümkün olduqda ağır proqramları yüngül Liquid kodu alternativləri ilə əvəz edin.
- Mobil alış-veriş təcrübəsi üçün vacib olmayan proqram xüsusiyyətlərini söndürün.
İlk Bayta qədər Vaxt (TTFB) üçün texniki strategiyalar
Shopify hostinq platforması olsa da, tərtibatçıların hələ də backend performansı üzərində müəyyən nəzarəti var. Səbət şablonunda mürəkkəb Liquid filtrlərinin və iç-içə dövrlərin sayını azaltmaq daha sürətli HTML generasiyasına səbəb ola bilər. Bunu yaxşılaşdırmaq üçün tərtibatçılar bütün aktivlərin düzgün URL filtrlərindən istifadə edərək çağırılmasını təmin etməklə Shopify Content Delivery Network-dən istifadə edə bilərlər.
Yüksək TTFB çox vaxt şişmiş mövzunun əlamətidir. Bəzi hallarda, səhifə yüklənərkən xarici API-lərdən məlumat alan xüsusi kod əhəmiyyətli gecikmələrə səbəb ola bilər. Belə məlumatları əsas səhifə məzmunu brauzerə çatdırıldıqdan sonra asinxron şəkildə əldə etmək daha yaxşıdır. Bu, istifadəçinin səbət məzmununu mümkün qədər tez görməsini təmin edir.
Performans auditinizə bu həftə başlayın
Daha yaxşı performansa doğru ilk addım ölçmədir. Shopify mağazanızı şəxsi brauzer pəncərəsində açın və səbət səhifənizin izini qeyd etmək üçün Chrome DevTools Lighthouse və ya Performance panelindən istifadə edin. ‘Uzun Tapşırıqlar’ bölməsində qırmızı bayraqları axtarın və hansı skriptlərin əsas axını blokladığını müəyyən edin. Dar boğazların ətraflı siyahısına sahib olduqdan sonra, istifadə olunmamış proqramları silərək və mövzunuzun şəkil yükləmə məntiqini optimallaşdıraraq təmizləmə prosesinə başlaya bilərsiniz. Daimi monitorinq yeni yeniləmələrin zaman keçdikcə təcrübəni pisləşdirməməsini təmin edir.