Tips för att höja din pagespeed

10 tips för bättre Pagespeed

• Utvärdera script från ”tredjepart”

  Applikationer och script från tredje part har ofta en negativ påverkan på prestanda, den upplevda hastigheten och resultatet i olika testverktyg som Lighthouse. Det är därför viktigt att utvärdera tredjeparts-lösningar och balansera behovet och nyttan mot prestanda och sidhastighet.

• Var skeptisk till lösningar som adderar innehåll

  Det finns applikationer som själva adderar olika typer av innehåll på en sajt. När detta innehåll adderas finns det en risk för ändringar i din befintliga layout och design. Den här typen av innehåll kan potentiellt påverka CLS (Cumulutive Layout Shift) som är ett mått på hur stabil designen är på en webbplats.

• Bilder för användarvänlig responsivitet

  I Askås CMS-verktyg Askås Content Editor (ACE) skalas bilderna automatiskt till den storlek de ska visas i. Det finns även möjlighet att ladda upp olika bilder för desktop och mobil i en och samma bildwidget och detta arbetssätt har flera fördelar. Du kan anpassa innehållet så att det passar den skärmstorlek som mottagaren av bilden använder.

  En mobilbild kräver ofta ett kortare budskap, extra tydliga CTA-knappar och begränsat med text. Bildstorleken och bildoptimeringen är också särskilt viktigt när det gäller mobil för att motverka tung bildinladdning. I ACE finns det även möjlighet att skapa olika helt olika sektioner för visning i desktop respektive mobil. Detta rekommenderas INTE som ett generellt arbetssätt. Med separata sektioner blir innehållet dubblerat och detta påverkar prestandan negativt.

• Använd lazyload i rätt läge

  I ACE är det enkelt att aktivera eller inaktivera lazyload på en bild via den bildwidget som används i ACE. Lazyload bör användas på bilder som inte är synliga ”above the fold”. Bilder med lazyload laddas in först när de blir synliga för användaren och därmed påskyndas den initiala inladdningen av sidan.

• Använd EJ lazyload på bilder som ska synas direkt

  Lazyload är effektivt om det används strategiskt och på rätt sätt. Att av misstag eller medvetet aktivera lazyload på en bild som ska synas direkt för användaren får flera negativa effekter. Laddningen av bilden fördröjs med en negativ upplevelse för användaren. Dessutom kan LCP - Largest Contentful Paint påverkas negativt och i förlängningen ge sämre resultat i Core Web Vitals. I Askås kan du ange om en bild ska lazyloadas eller inte i bildwidgeten i Askås Content Editor.

• Anpassa och komprimera bilder för webb

  Anpassa bildernas upplösning och komprimering efter användningsscenariot. Försök dra ned på filstorleken så mycket som möjligt samtidigt som bildkvaliteten bevaras på en nivå som är tillfredsställande för betraktaren. Ett generellt råd när det gäller komprimering av bilder är att försöka hitta en balans mellan bildkvalitet och filstorlek. Det handlar helt enkelt om att hålla filstorleken så liten som möjligt utan att bilden tappar för mycket detaljer och kvalitet. Det finns flera olika program och tjänster för att komprimera bilder.

  
  Exempel på kostnadsfria online-tjänster

  TinyPNG/TinyJPG, Kraken.io, Compressor.io, Optimizilla, Squoosh

• Använd rätt bildformat

  Vi rekommenderar att ni använder jpg som format när ni laddar upp bilder. Dels så är jpg ett bra bildformat när det gäller komprimering jämfört med exempelvis png. Bilder som laddas upp i jpg-format omvandlas dessutom till formatet webP med automatik. Syftet med konverteringen till webP är att ytterligare komprimera den uppladdade bilden. De flesta moderna webbläsare stöder i dag webP-formatet, vilket gör det enkelt för webbutvecklare att implementera det utan att oroa sig för bakåtkompatibilitet.

• Ha rätt antal produkter på en kategorisida

  Att direkt ladda in och visa ett onödigt stort antal produkter på en kategorisida är en tydlig prestandabov. Försök att hitta en nivå där prestanda, inladdningstid och användarvänlighet balanseras mot varandra. Har du ett onödigt stort antal produkter påverkas laddningstiden negativt och har du väldigt få synliga produkter kan det få till följd att det ändå tar för lång tid för en användare att hitta en specifik produkt. Testa dig fram.

• Använd hosting-tjänster för video

  Det finns många fördelar med att använda en hosting-tjänst för att infoga video jämfört med att ladda upp den på servern. En dedikerad videotjänst förhindrar prestandaproblem, långa laddningstider av webbsidan och problem med buffring för användarna.

• Testning och Uppföljning

  Askås kan erbjuda Profilering & Analys – en ”besiktning” av din e-handel. Besiktningen och den ingående analysen ger tydliga indikationer gällande hastighet och prestanda och kan användas som beslutsunderlag för optimeringar och åtgärder. Dessutom rekommenderar vi att du själv håller koll på din sajts välmående. Googles verktyg Lighthouse och Pagespeed Insights är några exempel på verktyg som snabbt ger indikationer på laddningstider, övergripande prestanda och tillgänglighet med mera. 
  
  OBS. Om du är intresserad av en Profilering med efterföljande besiktningsprotokoll ombeds du kontakta din kundansvariga säljare på Askås.