Shopify zmogljivost in mobilna izkušnja
Hitra trgovina se ne zaračunava samo hitreje. Hitreje se odziva na namere strank.
Cilj ni doseči izoliran popoln rezultat, temveč izboljšati nalaganje, odzivnost in stabilnost dejansko uporabljenih strani.Začnite z merjenjem, identificirajte odgovorno osebo, nato popravite glede na vpliv na poslovanje.
Ne zamenjujte Shopify s tem, kar je bilo dodano Shopify
Platforma zagotavlja gostovanje, CDN in več optimizacij. Upočasnitve pogosto izhajajo iz teme, aplikacij, marketinških skriptov, medijev in prilagoditev.
Ena sama partitura ne pove celotne zgodbe
Primerjajte dejanske uporabniške podatke, več vrst strani in laboratorijske teste Hitra domača stran ne nadomesti počasnega lista izdelkov.
Tri dimenzije, na katere morate biti pozorni
Meri, ko je vidna glavna vsebina na voljo, pogosto velika slika ali naslov.
Opazuje hitrost odziva po interakcijah: meni, variante, filtri, košara ali gumbi.
Meri nepričakovane premike vsebine med nalaganjem.
Shopify združi te meritve v svoja spletna poročila o uspešnosti iz resničnih podatkov, ko je na voljo zadostna količina.
Diagnostična metoda v 6 korakih
Izberite pomembne strani
Preizkusite vsaj dobrodošlico, večjo zbirko, reprezentativen list izdelkov, košarico in uredniško stran.
Začnite z mobilnim
Povezave, procesorji in velikosti zaslona naredijo težave bolj vidne.Uporabite pravi telefon, ki dopolnjuje orodja.
Preberite Shopify poročila
Opazujte osnovne spletne vitalne elemente, prizadete vrste strani in dogodke, ki ustrezajo namestitvi ali spremembi.
Primerjaj z PageSpeed Insights
Laboratorijsko testiranje pomaga odkriti vire za blokiranje, težke slike, skripte in pretirano delo brskalnika.
Izolirajte vzrok
Preizkusite kopijo teme, začasno onemogočite blok aplikacije ali skript, nato pa primerjajte pred in po.
Meri po objavi
Dejanski podatki potrebujejo čas, da odražajo spremembe. Dokumentirajte datum in spremljajte tudi pretvorbo.
Stroškovno najučinkovitejše optimizacije
Revizijske aplikacije
Odstranite funkcije brez zadostne vrednosti in preverite skripte, ki ostanejo po odstranitvi.
Osvetlite glavno sliko
Postrezite v primerni velikosti, ohranite uporabno kakovost in se izogibajte zakasnitvi slike, ki predstavlja glavno vsebino.
Uporabite odzivne slike
Brskalnik bi moral prenesti zaslonom prijazno različico namesto ogromne namizne datoteke na mobilni telefon.
Zmanjšajte JavaScript
Ko je mogoče, dajte prednost HTML in CSS. Naložite funkcije samo na strani, ki jih potrebujejo.
Odložite nebistvene skripte
Vsi klepeti, pregledi, zemljevidi, videoposnetki in marketinška orodja ne smejo blokirati prvega prikaza.
Mojstrske pisave
Omejite družine in maščobe, vnaprej naložite samo bistvene datoteke ali razmislite o sistemski pisavi.
Dimenzije rezerve
Nastavite širino in višino slik, videoposnetkov in pripomočkov, da se izognete skokom vsebine.
Veslajte velike zbirke
Ne nalagajte na stotine izdelkov hkrati, ko je dovolj paginacija ali nadzorovano nalaganje.
Očistite sledenje trženju
Odstranite neuporabljene oznake in preverite vrednost vsakega naloženega orodja prek upravitelja oznak.
Prednost glede na vpliv
| Akcija | Običajna prioriteta | Zakaj |
|---|---|---|
| Izbrišite težko in nekoristno aplikacijo | Visoko | Lahko zmanjša JavaScript, poizvedbe in delo brskalnika na več straneh |
| Optimizirajte mobilnega junaka | Visoko | Največji vidni element pogosto vpliva na zaznano obremenitev |
| Zakasni video pod vodno črto | Visoko | Izogibajte se takojšnjemu nalaganju nevidnih medijev |
| Omeji pisave in maščobe | Povprečje | Zmanjša prenose in pospeši prikaz besedila |
| Očistite ponovljeno kodo tekočine | Povprečje | Lahko izboljša čas upodabljanja na kompleksnih modelih |
| Pridobite nekaj kilobajtov na majhni ikoni | Šibek | Omejen vpliv, če glavni skripti in mediji ostanejo težki |
Slike: nastavitve, ki so resnično pomembne
Narediti
- Uporabite filtre za slike Shopify z več širinami
- Vnesite dimenzije za rezervacijo prostora
- Leno nalaganje medijev pod zaslonom
- Gostite vire na Shopify CDN
- Preizkusite mobilno obrezovanje
Izogibati
- Pošljite isto sliko 3000 px na vse zaslone
- Brez razloga naložite zakasnjeno obremenitev na glavni vizualni element
- Uporabite več težkih drsnikov
- Naložite samodejni video v visoki ločljivosti
- Pomnožite nevidne slike v vrtiljakih
Aplikacije in skripti tretjih oseb: odločite se po vrednosti
Identificirajte funkcijo
Kaj pravzaprav proizvaja: prodajo, zaupanje, podporo, podatke ali preprosto dekoracijo?
Izmerite obseg
Ali se skript naloži na vse strani, ko je uporaben samo na izdelku ali košarici?
Iskanje izvorne funkcije
Tema ali Shopify morda že ponuja lažjo rešitev.
Preskus pred/po
Primerjajte kopijo teme z blokom in brez njega, nato pa preverite, ali podatki in prodaja ostajajo pravilni.
Čisto izbriši
Po odstranitvi preverite, ali so delčki kode, oznake in datoteke, ki bi lahko ostale aktivne.
Dokument
Ohranite lastnika, namen in datum revizije vsakega zunanjega skripta.
Tehnične optimizacije teme
Progresivni JavaScript
Bistvene funkcije, kot sta odkrivanje in nakup izdelka, morajo ostati robustne. Uporabite JavaScript za izboljšanje, ne pa za odvisnost celotne strani.
Skripte, ki ne blokirajo
Prilagojeni atributi in pogojno nalaganje preprečujejo, da bi datoteke odložile začetno gradnjo strani.
Učinkovita tekočina
Izogibajte se ponavljajočim se zapletenim izračunom v zankah in analizirajte počasne odseke z orodji Shopify.
Ciljni CSS
Zmanjšajte splošne odvisnosti in se izognite nalaganju slogov komponent, ki manjkajo na strani.
Kritični viri
Na prvem zaslonu vnaprej naložite samo bistvene vire Preveč prednaloži ustvari novo konkurenco.
Nadzorna orodja
Theme Check lahko opazi velike pakete, oddaljene vire, blokira JavaScript in nekatere odvisnosti CSS.
Česa ne storiti
Za vsako ceno si prizadevajte za oceno 100
Ne odstranite donosne funkcije za nekaj točk Primerjajte tehnične stroške in komercialno vrednost.
Optimizirajte samo sprejem
Obiskovalci pogosto pridejo neposredno na list izdelka, zbirko ali predmet.
Namestite aplikacijo za hitrost brez diagnostike
Dodatna plast ne popravi vedno vzroka in lahko doda JavaScript.
Leno naložite vso vsebino
Hitro se mora pojaviti prvi pomemben vizualni.Leno nakladanje je še posebej uporabno pod vidnim območjem.
Odstranite bistveno sledenje
Ohranite orodja, potrebna za naročila, dodelitev in skladnost, nato optimizirajte njihovo nalaganje.
Uredi aktivno temo brez kopiranja
Delajte na dvojniku, preizkusite tečaje in obdržite obnovljivo različico.
7-dnevni akcijski načrt
Pogosta vprašanja
Na katero oceno PageSpeed morate ciljati?
Ni enotnega rezultata, ki bi zagotavljal dobro izkušnjo. Predvsem si prizadevajte izboljšati meritve, pomembne strani in resnične podatke, ne da bi odstranili uporabne funkcije.
Je Shopify naravno počasen?
Shopify zagotavlja optimizirano infrastrukturo in CDN. Končna zmogljivost je močno odvisna od dodane teme, medijev, aplikacij in skriptov.
Ali vse aplikacije upočasnjujejo trgovino?
Ne. Njihov vpliv se razlikuje glede na njihovo kodo, nalaganje strani in funkcijo. Ocenite vsakega posebej.
Ali moram vse slike stisniti ročno?
Shopify izvaja transformacije in streže slike prek svojega CDN-ja, vendar morate vedno zahtevati ustrezne dimenzije in se izogibati nepotrebno velikim izvornim datotekam.
Koliko časa preden boste videli izboljšanje?
Laboratorijski testi se odzovejo takoj, medtem ko poročila, ki temeljijo na dejanskih uporabnikih, zahtevajo nadaljnje obiske in lahko pokažejo zamik.
Dobra optimizacija odstrani zavore, ne da bi odstranila vrednost
Naredite svojo trgovino Shopify hitrejšo, stabilnejšo in prijetnejšo na mobilnih napravah
Pred kakršnimi koli spremembami preglejte svojo temo, aplikacije, skripte in medije.
