Speedly

Hastigheds optimering af Shopify

Mens jeg koncentrerer mig mest om WordPress har jeg også været med til at hastighedsoptimering en del Shopify shops, og tænkte jeg ville prøve at dele noget af min erfaring.

1. Test hastigheden af din side

Inden du går i gang med at optimerer din side er det måske fint nok lige at vide hvor du står. Derfor vil jeg anbefale at bruge disse 3 tools til at teste:

Pagespeed Insights

https://developers.google.com/speed/pagespeed/insights/

Dette tool giver et godt oversigtsbillede af om der nogle iøjnefaldende ting der skal kigges på. En god indikation er at hvis den generelle score som du ser i toppen er under 50 på mobil, så er der helt sikkert ting der kan gøres.

GTmetrix

https://gtmetrix.com/

GTmetrix er lidt mere kompleks, men giver igen en masse indikationer af hvad der kan gøres.

WebPageTest

https://webpagetest.org/

Er toolet jeg bruger til at sammenligne før og efter når jeg laver noget. Du skal lige have en gratis konto først, men når du så går ind under test history, kan du vælge nogle af de kørsler du har haft og sammenlign dem med hinanden. Det er også her du kan lave de her videoer du måske jeg har bruge i forbindelse med mine Løvens hule indlæg

2. Komprimere Billeder

Shopify har godt nok introduceret WebP, så mange af dine besøgende får sikkert nogle fint komprimeret billeder, men alle besøg fra Internet Explorer og Safari på apple ser ikke disse billeder.

Derfor anbefale jeg altid at man lige gå ind og komprimerer billede så meget man nu engang kan uden det gå ud over den kvalitet man forventer, og her er squoosh.app min absolut favorit.

3. Lazyload af billeder

En af de store synder jeg tit ser på en Shopify store er billerne, især hvis din shop har mange produkter og du viser dem på nogle arkiv sider, og der er desværre en del themes der ikke tager højde for hvor mange billeder der skal loades.

Derfor er det altid godt at få lagt lazyload på samtlige billeder, til dette bruger jeg typisk Lazysizes, som jo godt nok loader en ekstra javascript fil, men det er det værd.

Alternativt kan du også tilføje loading="lazy" til alle dine billede tags og så kan nyere chrome faktisk selv finde ud af at lazyload

4. Srcset på billeder

Efter vi har fået styr på lazyload skal vi også sørge for at Shopify theme bruger de korrekte størrelse på billederne, og her anbefaler jeg at implementere srcset på billede tagget, læs mere her: Responsive Images

Shopify gør det faktisk utrolig nemt at sørge for man får lige den størrelse man har brug for, så er der ingen undskyldninger, se mere om hvordan man gør det i Liquid here: Manipulate Images

5. Apps

Gennemgå alle dine apps og se om du stadig bruger dem, for mange af dem loader javascript og css filer af sig selv.

Det er også en god ide lige at kigge f.eks. på din  theme.liquid og se om du selv har fået tilføjet noget herind du ikke bruger mere. Det kunne være:

  • Hotjar
  • Sleeknote
  • Clerk.io


** Alle sammen gode apps

6. Google Fonts

Hvis du gør brug af Google fonts så se om du kan finde der hvor den bliver loaded og sørg for at der er tilføjet &display=swap til url'en. Noget du kan læse lidt mere om her: Google Fonts Display Parameter

En ekstra bemærkning her er også at prøve at reducerer antal af fonte du bruger, da fonte faktisk er lidt af en kilobyte sluger, og måske endda prøve at finde nogle system fonte frem for eksterne fonte

7. Defer Javascript

Mens meget af det Javascript der bliver loaded på din side sikker bliver det fordi du har tilføjet dem som en app, så er der sikkert også noget tilbage du måske selv har tilføjet eller noget der kommer igennem themes.

Prøv at tilføje defer til selv tagget f.eks. <script src="gtag.js" defer>. Dette er noget du bliver nødt til at lege lidt mere, for det kan give nogle problemer med at nogle filer er afhængig af andet kode enten i html'en eller fra andre filer.

Vil du vide mere omkring dette kan du læse denne artikel: Efficiently load third-party JavaScript

Google Tag Manager kan faktisk også være et fint alternativ her til de javascript koder du selv har tilføjet, da du inde i Google Tag Manager kan sætte disse ting til at loade efter "Dom Ready", se f.eks. her: The easiest CRO you can do is via Google Tag Manager

8. Minify Javascript/CSS

Dette kræver lidt mere teknisk arbejde, men hvis din theme udvikler ikke allerede har minified det javascript og css der loades, kan det også godt give et par mine kilobyte der skal loades hver gang, hvilket kan have en lille betydning på mobile netværk.

Et fint tool til opgave er denne: https://www.minifier.org/

9. AMP

Dette er ikke noget jeg selv har erfaring med, men det ser ikke ud til at vi slipper af med AMP, og derfor er det måske værd at kigge på, dog har jeg læst om mange blandet følelser og resultater hvad angår AMP.

Der findes et nogle apps ind i app store som kan hjælpe med dette, og du kan læse mere om AMP her: https://amp.dev/

10. Slider

Igen er dette et emne med en masser følelser, men hvis du kan undgå at bruge slider, så gør det, da de tit tager længere tid for brugerne og loade, og det er tid de kan nå at blive utålmodige.

11. Theme

Dette burde måske have været i toppen, men mange har jo allerede valgt et tema og er derfor ikke klar til at skifte. Men meget af der hvor det går galt på mange shops er fordi de har valgt et tema som slet ikke har taget hensyn til at siden også skal loade hurtigt på f.eks. en mobil.

Derfor er det en god ide at teste theme først, og lige smide den ind i de 3 tools nævnt oppe i først afsnit og se om der er nogle åbenlyse ting der ikke er godt nok, og måske test nogle forskellige theme op imod hinanden.



Skal vi hastighed optimere din side, gå til bestilling, eller læs lidt mere i vores FAQ
Speedly er en service drevet af Primux ApS. Copyright © 2020 Primux ApS | Handelsbetingelser | Privatlivspolitik