Snabba upp Shopify-butiken – teman, appar och bilder

Mät en Shopify-butik rätt

Hastighetspoängen i Shopifys admin är ett grovt medelvärde som påverkas av sådant ni inte styr över. Använd den som en trend, inte som en diagnos. För en verklig bild kör du PageSpeed Insights på var och en av de fyra mallarna ovan, tittar på fältdata från riktiga svenska besökare om trafiken räcker och noterar Largest Contentful Paint och Interaction to Next Paint. Vår guide om Core Web Vitals förklarar vad varje siffra betyder. Testa alltid i mobilen, eftersom det är där den mesta butikstrafiken kommer ifrån och där tunga skript slår hårdast.

Appskript och rester

Varje app som ändrar butikens framsida lägger till kod: ett skript, en stilmall, ibland ett block HTML i temat. Moderna appar använder temaappstillägg, som Shopify tar bort rent när appen avinstalleras. Äldre appar klistrar in kod i temafilerna, och den koden ligger kvar när appen är borta, laddas fortfarande och ger ibland fel på varje sida.

1. Lista alla installerade appar och skriv vad var och en gör i butiken. Avinstallera allt som ingen kan förklara.
2. Sök i temakoden efter namnen på appar ni har tagit bort. Ta bort kvarglömda kodsnuttar och deras inkluderingar, först i en kopia av temat.
3. Leta efter appar som gör samma sak, till exempel två omdömeswidgetar eller två popup-verktyg.
4. Välj appar som använder temaappstillägg och bara laddas på de mallar där de behövs.
5. Publicera den rensade kopian och mät igen.

Temasektioner och bildspel

Teman erbjuder många sektioner och det är frestande att använda alla. En startsida med bildspel, video, tre produktkaruseller, ett Instagramflöde och en nyhetsbrevspopup laddar mycket kod innan besökaren ser något användbart. Bildspel är värst: de laddar flera stora bilder, besökaren ser sällan mer än den första och texten på de senare bilderna blir ofta oläst.

Produkt- och kollektionsbilder

Shopifys bildtjänst konverterar bilder till moderna format och skalar dem i farten, men bara om temat begär rätt storlek. Ladda upp bilder i en rimlig maxstorlek, ungefär bredden på den största visningen i temat, i stället för direkt från kameran. Kontrollera att temat använder responsiva bildtaggar, att bilder längre ner på sidan laddas när de behövs och att huvudbilden på produktsidan inte gör det. Håll samma bildformat i kollektionerna så att sidan inte hoppar medan bilderna laddas.

Typsnitt, film och tredjepart

Det sista lagret är allt som laddas från andra tjänster. Egna typsnitt i flera vikter, inbäddade videospelare, chattwidgetar, omdömesplattformar och spårningstaggar för annonser lägger var och en till anrop och arbete i webbläsaren. Håll er till en eller två typsnittsvikter, använd Shopifys typsnittsbibliotek där det går, ladda chatten först när besökaren interagerar och kör spårning via Shopifys kundhändelser i stället för taggar inklistrade i temat.

När ni inte behöver hjälp: en butik med ett aktuellt tema och en handfull välbyggda appar är oftast snabb nog, och checklistan ovan är en förmiddags arbete ni kan göra själva. När butiken är flera år gammal, har dussintals appar och produktsidorna känns tröga i mobilen ingår hastighetsarbetet i vår optimering av konvertering och kassa. Se prissidan eller boka ett samtal så går vi igenom butiken tillsammans.

Vanliga frågor