Shopify-temahastighet på riktiga telefoner
Hastighetsarbete på Shopify har en förutsägbar form: team optimerar Liquid, diskuterar temat och lämnar en hero-bild i fyra gånger den storlek den renderas i och elva tredjepartsskript som laddas innan sidan målas.
Mät först, fixa sedan i den ordning som lönar sig.
Var tiden faktiskt tar vägen#
| Orsak | Typisk andel av problemet | Svårighetsgrad att fixa |
|---|---|---|
| Överdimensionerade eller ooptimerade bilder | Stor | Lätt |
| Tredjepartsskript och app-skript | Stor | Medel — politiskt, inte tekniskt |
| Webbtypsnitt | Måttlig | Lätt |
| Tunga bildspel och video-hero-sektioner | Måttlig | Lätt, om du kan vinna argumentet |
| Liquid-rendering | Liten | Medel |
Ordningen att arbeta i#
- Mät på en mellanklasstelefon med en riktig anslutning, inte på din laptop.
- Fixa bilder: korrekta dimensioner, modernt format, lazy-load allt under mitten.
- Granska skript: ta bort appar ingen använder; skjut upp allt som inte behövs för att måla.
- Skär ner hero: en bild slår en autospelade videokarusell på varje mätetal som spelar roll.
- Delmängd och förladda typsnitt, eller använd systemtypsnitt.
- Först då tittar du på temakoden.
Mät det som kunderna känner#
Largest contentful paint på produktsidan över en mobilanslutning är siffran som korrelerar med intäkter. Syntetiska poäng är användbara för att upptäcka regressioner och fruktansvärda som mål — en butik kan få bra poäng och ändå kännas långsam för en kund på ett tåg.
Registrera en baslinje före varje förändring och efter varje sådan. Utan en baslinje blir hastighetsarbete en diskussion om åsikter.
App-samtalet#
De flesta hastighetsproblem är någons favoritapp. Ta med siffror: den här appen kostar 400 ms på varje produktsida och används av två personer. Det samtalet går bättre än "sajten är långsam" och det är det som ger verkliga vinster.
Vanliga frågor
Spelar temavalet roll för hastigheten?
Mindre än bilder och skript. Ett välbyggt tema hjälper, men det kan inte springa ifrån elva tredjepartsskript.
Är en perfekt poäng värd att jaga?
Nej. Jaga produktsidans måltid på en mellanklasstelefon; det är vad kunderna upplever.
Kostar appar verkligen så mycket?
De som är vända mot butiken gör det. Mät var och en genom att inaktivera den och testa om — siffrorna avgör vanligtvis debatten.
shopify hastighetshopify sidhastighetshopify prestandashopify core web vitalsshopify tema hastighet
