# Mobiliosios el. prekybos optimizavimas: Core Web Vitals, atsiskaitymas ir konkretūs pataisymai, didinantys konversiją

> 70-85 % el. prekybos srauto yra mobilusis. Dešimt konkrečių sričių (Web Vitals, palietimo taikiniai, formų automatinis užpildymas, Apple Pay, nykščio zonos), kurios sumažina mobiliojo ir stalinio kompiuterio konversijos skirtumą, su tikrais įrankiais ir orientyrais.

Ryan Badger - 2025 m. gegužės 1 d. - 8 min. skaitymo

## Kodėl mobilusis yra visas žaidimas

70-80 % jūsų el. prekybos srauto yra mobilusis. Daugumai vartotojų kategorijų jis artėja prie 85 %. Stalinio kompiuterio konversija paprastai yra 2-3 kartus didesnė nei mobiliojo, o tai daugiau pasako ne apie tai, kad stalinis kompiuteris geresnis, o apie tai, kad dauguma parduotuvių mobilioje versijoje yra sugedusios.

Gerai optimizuota mobilioji patirtis gali uždaryti skirtumą, o dažnai ir apversti jį: kai kurie DTC prekės ženklai dabar mobiliajame konvertuoja tiek pat ar daugiau nei stalinio kompiuterio. Skirtumas yra konkretus, išmatuojamas ir daugiausia susijęs su higiena, o ne naujovėmis.

Šis straipsnis aptaria, kas iš tikrųjų didina mobiliąją konversiją, su orientyrais, įrankiais ir konkrečiais dalykais pataisyti. Ne „kurkite pirmiausia mobiliesiems“. Konkrečios patikros, duodančios sudėtinį pagerėjimą.

## 1. Core Web Vitals ir kodėl „Google“ jų stebi

„Google“ naudoja Core Web Vitals kaip reitingavimo signalą ir patirties kokybės pakaitalą. Be SEO aspekto, šios metrikos yra tvirti konversijos prognozuotojai.

### LCP (Largest Contentful Paint)

Laikas, kol atvaizduojamas didžiausias elementas virš lenkimo (dažniausiai pagrindinis paveikslėlis ar H1). Tikslas: mažiau nei 2,5 sekundės mobiliajame 4G.

Dažniausios blogo LCP priežastys:

- Pagrindinis paveikslėlis nesuspaustas arba per didelis
- Žiniatinklio šrifto įkėlimas blokuoja atvaizdavimą
- Trečiųjų šalių skriptų įterpimas (pokalbių valdikliai, analitika, A/B testų įrankiai) `<head>` dalyje

### INP (Interaction to Next Paint)

Laikas nuo vartotojo sąveikos (palietimo) iki kito vizualaus atnaujinimo. Tikslas: mažiau nei 200 ms.

Dažniausios blogo INP priežastys:

- JavaScript sunkūs puslapiai (React/Vue parduotuvės be kodo skaidymo)
- Analitikos ar pokalbių skriptai, paleidžiami sinchroniškai sąveikos metu
- Palietimo vėlavimas senesnėse mobiliosiose naršyklėse

### CLS (Cumulative Layout Shift)

Dalykai šokinėja puslapyje jam kraunantis. Tikslas: mažiau nei 0,1.

Dažniausios priežastys:

- Paveikslėliai be width/height atributų
- Reklamos ar trečiųjų šalių įterpimai, kraunami po turinio
- Šriftai kraunasi ir keičia teksto dydį

### Kaip patikrinti

Nemokamai: [PageSpeed Insights](https://pagespeed.web.dev/) paleidžia Lighthouse ir praneša visus tris. Testuokite savo daugiausia pajamų atnešantį prekės puslapį, o ne pradžios puslapį. Taisykite, kas raudona, susitaikykite su gintaru, eikite toliau.

Mokamai / giliau: WebPageTest.org krioklio analizei, Chrome DevTools Performance skirtukas vietiniam profiliavimui.

## 2. Mobilusis greitis iki 3 sekundžių (tikras mobilusis, o ne sulėtintas stalinis)

Stalinio kompiuterio naršyklės „mobilusis emuliatorius“ naudoja greitą ryšį ir greitą procesorių. Tikri mobilieji telefonai naudoja lėtesnius ryšius ir lėtesnius procesorius. Skirtumas didelis.

Testuokite tikruose telefonuose per 4G. Jei jūsų puslapis užtrunka 2 sekundes Chrome mobiliajame emuliatoriuje, vidutinės klasės Android telefone per 4G tai tikriausiai 4-5 sekundės.

### Didžiausi greičio laimėjimai (pagal eilę)

1. **Paveikslėlių optimizavimas:** suspauskite iki 80 % kokybės, pakeiskite dydį iki tikrai reikalingų matmenų, pateikite WebP ar AVIF. Shoprocket tai daro automatiškai per Cloudflare
2. **Tingus turinio įkėlimas žemiau lenkimo.** Paveikslėliai, iframe, sunkūs skriptai neturėtų būti kraunami, kol nenuslenkama
3. **Atidėkite nekritinį JavaScript.** Analitika, pokalbių valdikliai, A/B testų įrankiai neturėtų blokuoti atvaizdavimo
4. **Agresyviai talpinkite statinius išteklius.** 1 metų talpykla paveikslėliams, šriftams, CSS, JS su atspaudų URL
5. **Naudokite CDN** (Cloudflare, Fastly ar savo platformos integruotą). Aptarnauja išteklius iš geografiškai artimų kraštų
6. **Sumažinkite trečiųjų šalių skriptus.** Kiekvienas pikselis ir žymė prideda ~50-200 ms; patikrinkite, kas tikrai būtina

## 3. Palietimo taikinių dydis

Apple Human Interface Guidelines nurodo bent 44×44 pikselių palietimo taikinius. Google Material nurodo 48×48. Dauguma temų „mobiliųjų“ versijų neatitinka nė vieno.

**Pataisymai:**

- Mygtukai bent 44 px aukščio su 8-12 px vidiniu tarpu
- Nuorodos naršymo juostoje bent 44 px aukščio
- Formų laukai bent 44 px aukščio (taip pat padeda prieinamumui)
- Tarpas tarp gretimų palietimo taikinių bent 8 px

Testas: atidarykite savo parduotuvę telefone. Pabandykite nykščiu paliesti kategorijų naršymą. Ar nepataikote? Tai palietimo taikinio problema.

## 4. Mobiliojo atsiskaitymo specifika

Krepšelis ir atsiskaitymas mobiliajame yra ten, kur nuteka didžioji dalis konversijos. Konkretus darbų sąrašas:

### Vieno stulpelio formos

Dviejų stulpelių formos veikia stalinėje, mobiliajame žlunga. Sudėkite kiekvieną lauką vertikaliai. Be išimčių.

### Tinkami įvesties tipai

- El. pašto laukas: `type="email"` (iškviečia el. pašto klaviatūrą su @ simboliu)
- Telefonas: `type="tel"` (skaitmenų klaviatūra)
- Pašto kodas: `type="text" inputmode="numeric"` šalims su skaitmeniniais pašto kodais
- Kredito kortelės numeris: `type="text" inputmode="numeric" autocomplete="cc-number"` (užtikrina, kad veiktų automatinis užpildymas)

Dauguma platformų tai daro teisingai iš dėžės. Verta patikrinti formą telefone; jei atsiranda ne ta klaviatūra, pataisykite.

### Automatinio užpildymo draugiškumas

Naršyklės gali automatiškai užpildyti vardą, adresą, el. paštą, telefoną, kortelės duomenis, jei formos `autocomplete` atributai teisingi. Klientas, paliečiantis automatinio užpildymo pasiūlymą, užbaigia atsiskaitymą per 3 sekundes. Be automatinio užpildymo jie rankiniu būdu renka 12+ laukų.

Standartinės autocomplete reikšmės: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Prilipęs „Į krepšelį“ prekių puslapiuose

Nuslinkite mobilų prekės puslapį 3 ekranais žemyn ir mygtukas „Į krepšelį“ pasislepia. Sprendimas: pridėkite prilipusią apatinę juostą su kaina ir „Į krepšelį“, kuri atsiranda, kai pradinis mygtukas nuslenka.

### Apple Pay + Google Pay + Link

Tai didžiausi vieni mobiliojo atsiskaitymo pagerinimai. Vieno palietimo mokėjimas be rinkimo; vietinis biometrinis autentifikavimas.

- **Apple Pay:** įjungiamas automatiškai, kai patvirtinate domeną su Stripe (Shoprocket tai tvarko)
- **Google Pay:** panašiai
- **Stripe Link:** užpildo kortelę ir adresą iš Link tarpsvetainės tapatybės

Kiekvienas mobilusis atsiskaitymas be šių praranda klientų. Įjunkite visus tris.

## 5. Formos laukų mažinimas

Kiekvienas jūsų mobiliojo atsiskaitymo laukas yra trinties taškas. Peržiūrėkite laukus:

**Dažniausiai reikalinga:**

- El. paštas
- Pristatymo adresas (vardas, gatvė, miestas, pašto kodas, šalis)
- Mokėjimo duomenys (arba Apple/Google Pay)

**Dažnai renkama per daug:**

- Telefono numeris (tik jei reikia pristatymui / siuntų vežėjams; daugeliui nereikia)
- Gimimo data (beveik niekada nereikalinga perkant)
- Įmonės pavadinimas (tik B2B)
- Naujienlaiškio registracija (iš anksto pažymėta, kur leidžia įstatymai; kitu atveju atskiras žymimasis langelis)
- „Kaip apie mus išgirdote?“ (perkelkite į apklausą po pirkimo)

Mažiau laukų = greitesnis atsiskaitymas = didesnis užbaigimas. Kiekvienas pašalintas laukas yra maždaug 5-10 % mobiliojo atsiskaitymo užbaigimo pagerėjimas, kaupiamasis.

## 6. Įskaitomas šriftas ir eilutės ilgis mobiliajame

- **Pagrindinis tekstas:** bent 16 px (iOS numatytasis ir „Google“ Material gairė)
- **Eilutės ilgis:** 45-75 simboliai
- **Eilučių tarpas:** 1,4-1,6 karto didesnis už šrifto dydį
- **Kontrastas:** bent WCAG AA (4,5:1 pagrindiniam tekstui, 3:1 dideliam tekstui)

Jei klientai prisitraukia pirštais, kad padidintų jūsų produkto aprašymą, šriftas per mažas. Jei jie turi pasukti telefoną į šoną skaityti, jūsų eilutė per plati arba šriftas per glaudus.

## 7. Naudojimas viena ranka

Dauguma mobiliųjų naudotojų telefoną naudoja viena ranka, nykščiu siekdami iš apatinio dešiniojo (ar apatinio kairiojo kairiarankiams) kampo. Svarbios sąveikos turėtų būti toje nykščio zonoje.

- Pagrindinis CTA („Į krepšelį“, „Atsiskaityti“, „Pirkti dabar“) arti apačios
- Naršymo hamburgeris viršuje kairėje ar dešinėje, nykščio pasiekiamume
- Mygtukas „Atgal“ nuspėjamas (naršyklės atgal dažniausiai lenkia individualius atgal mygtukus)

Nereikalaukite dukart paliesti sunkiai pasiekiamų sričių. Kiekvienas nykščio gimnastikos momentas praranda klientų.

## 8. Mobiliesiems pritaikytas prekės puslapis

Stalinio kompiuterio prekių puslapiai dažnai rodo viską iš karto (galerija kairėje, informacija dešinėje, aprašymas apačioje). Toks išdėstymas neperkeliamas į mobilųjį; turinį reikia išdėstyti eilės tvarka.

Veiksminga mobiliojo prekės puslapio seka:

1. Pagrindinis paveikslėlis (braukiama galerija)
2. Pavadinimas + kaina
3. Varianto pasirinkimas (dydis, spalva)
4. „Į krepšelį“ (pagrindinis CTA)
5. Pasitikėjimo signalai (įvertinimas, nemokamas siuntimas, grąžinimai)
6. Aprašymas (sutraukiamas, lenkiamas po 3 eilučių)
7. Specifikacijos / detalės (sutraukiamos)
8. Atsiliepimų santrauka su plėtimu „žiūrėti visus“
9. Susijusios prekės
10. DUK (sutraukiami)

Turinys žemiau lenkimo turėtų būti kraunamas tingiai. Mobilusis klientas pirkimo sprendimą dažnai priima pirmuosiuose 3 skyriuose; viską kraunant tas sprendimas lėtėja.

## 9. Testavimas tikruose įrenginiuose

Ne DevTools. Ne naršyklės mobiliajame emuliatoriuje. Tikri telefonai per mobiliojo ryšio tinklą.

Minimali testavimo rotacija:

- iPhone SE (mažas ekranas, senesnis įrenginys)
- iPhone 15 Pro (naujausia iOS, Safari)
- Samsung Galaxy vidutinės klasės (Android, Chrome)
- Senesnis Android per 4G (išryškina našumo problemas)

Priedas: paprašykite 3 draugų su skirtingais telefonais pabandyti ką nors nusipirkti jūsų parduotuvėje. Stebėkite juos. Su kuo jie vargsta, tai ir yra jūsų taisymų sąrašas.

## 10. Mobiliojo žudikų modelių vengimas

Dažnos klaidos, kurios sugriauna mobiliąją konversiją:

### Visą ekraną dengiantys iššokantys langai

„Užsiprenumeruokite ir gaukite 10 % nuolaidą!“ langas, dengiantis ekraną mobiliajame nusileidimo puslapyje. „Google“ baudžia už tai mobiliojoje paieškoje. Klientai užsimeta ir išeina. Naudokite registraciją puslapyje.

### Automatiškai paleidžiamas vaizdo įrašas su garsu

Eikvoja pralaidumą, erzina naudotojus, iOS dažnai vis tiek blokuoja. Automatinis paleidimas be garso priimtinas pagrindiniam vaizdo įrašui; automatinis paleidimas su garsu priešiškas naudotojui.

### Užvedimo būsenos palietimo įrenginiuose

„Užveskite, kad pamatytumėte detales“ neveikia palietimu. Jei jūsų tema vis dar turi užvedimo-atskleidimo modelių mobiliajame, jie iš esmės sugedę.

### Maži paspaudžiami „uždaryti“ mygtukai modaliniuose languose

16 pikselių X kampe nenuspaudžiamas nykščiu. Padarykite uždarymo mygtukus 44×44 arba naudokite viso pločio „Uždaryti“ mygtukus modalinių langų apačioje.

### Horizontalus slinkimas produktų tinkleliuose

Mobiliajame horizontaliai slenkamos produktų karuselės paslepia 80 % produktų žemiau lenkimo. Vertikalus tinklelis (2 stulpeliai mobiliajame) konvertuoja geriau.

## Ką Shoprocket tvarko mobiliajam

Dauguma būtinų dalykų iš dėžės:

- **Automatinis paveikslėlių optimizavimas:** dydžio keitimas + suspaudimas + WebP + tingus įkėlimas kiekvienam produkto paveikslėliui
- **Krepšelio stalčius (ne viso puslapio krepšelis)** yra numatytasis mobiliajame
- **Prilipęs mobilusis „Į krepšelį“** palaikomas temų parduotuvėse
- **Mobiliajam pritaikytas atsiskaitymas** su teisingais įvesties tipais, automatiniu užpildymu, sudėjimu į stulpelį
- **Apple Pay + Google Pay + Stripe Link** vieno palietimo mokėjimas per Stripe
- **Mobiliajam pritaikytas tiesioginio pokalbio valdiklis**
- **CDN pristatymas** per Cloudflare kiekvienam ištekliui
- **Core Web Vitals optimizuota iš dėžės** talpinamai parduotuvei

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Valdiklio įterpimo naudotojai: aplinkinio puslapio greitį ir dizainą valdote jūs. Shoprocket valdiklis kraunamas tingiai ir neblokuos jūsų puslapio atvaizdavimo, bet bendras puslapio greitis yra jūsų tvarkoma sritis.

> **Patarimas:** Kartą per ketvirtį paleiskite PageSpeed Insights savo 3 daugiausia pajamų atnešančių prekių puslapiuose mobiliajame. Užsirašykite tris Core Web Vitals rezultatus. Kitą ketvirtį palyginkite. Tendencija žemyn yra tylus konversijos žudikas; pagaukite ją kas ketvirtį, o ne po žalos.

## Trumpai

- **Mobilusis yra 70-85 % srauto.** Dauguma parduotuvių jį traktuoja kaip antraeilį; netraktuokite
- **Core Web Vitals yra trys sekami skaičiai:** LCP, INP, CLS. Žemiau 2,5 s / 200 ms / 0,1
- **Testuokite tikruose įrenginiuose per 4G,** o ne naršyklės emuliatoriuje
- **Atsiskaitymo specifika:** vieno stulpelio formos, teisingi įvesties tipai, automatinis užpildymas, Apple/Google Pay, prilipę CTA
- **Mažiau formos laukų** = didesnis užbaigimas. Peržiūrėkite, kas tikrai reikalinga
- **Palietimo taikiniai bent 44×44.** Tarpas tarp taikinių bent 8 px
- **Nykščio zona svarbi.** Pagrindiniai CTA arti apačios; hamburgeriai viršuje kairėje/dešinėje
- **Venkite mobiliojo žudikų:** visą ekraną dengiantys langai, automatinis garsas, užvedimo būsenos, maži uždarymo mygtukai

[Pradėkite nemokamą bandomąjį laikotarpį](https://app-v3.shoprocket.io/signup) ir nuo pirmos dienos gaukite automatinį paveikslėlių optimizavimą + Apple Pay + mobiliajam pritaikytą atsiskaitymą. 14 dienų, be kortelės.

---

- HTML version: https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija
- Language: Lietuvių (lt)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)