öka-hastighet-webbplats

Är er webbplats snabb? 6 enkla tips som hjälper!

Publicerat av

Inom sju sekunder har vi redan fastställt 11 bedömningar om en annan människa vid första mötet. Det är egentligen inget annorlunda när det kommer till webben. Varje dag strömmar miljontals besökare in och ut från webbplatser, alla med sina egna bedömningar om webbplatsen dem precis besökt. Är det en snygg design? Är texten på sidan välskriven? En av dem absolut viktigaste bedömningarna som besökaren gör är att bedöma hastigheten på er webbplats. En webbplats som tar flera sekunder för att ladda in är katastrof ur ett användarperspektiv. Det kan till och med leda till att användaren lämnar webbplatsen innan den hunnit ladda klart.

Att en webbplats tar lång tid att ladda in kan bero på en rad olika faktorer. Själva innehållet på sidan är nästan alltid en bidragande faktor. Det är lätt hänt att bygga snygga sidor med stora bilder och annan grafik, men det blir ett problem när hastigheten dras ner så pass mycket att användare lämnar innan allt det fina hunnit ladda in.

I denna artikeln tänker jag lista och gå igenom olika problem som kan dra ner hastigheten på er webbplats – samt hur ni bäst löser dessa. En bra start är att gå in på Googles egna verktyg PageSpeed Insights. Verktyget analyserar er webbplats och ger rekommendationer för hur ni kan förbättra er hastighet. Det ska dock tilläggas att poängen ni får av Google inte alltid är så illa som det ser ut, och ni ska inte ta åt er 100% av bedömningen. Det viktigaste är att när ni själva går in på webbplatsen tycker att sidan laddas in hyfsat fort och inte drabbar er upplevelse. OBS! När ni testar detta så gör det genom inkognito-flik.

I listan på åtgärder som Google ger er finns det några enkla fixar, och dessa tänker jag att ni ska få hjälp med!

1. Optimera bilder

Vi går rakt in på exemplet jag tog upp i början. Bilder är i grund och botten en mix av små pixlar, varje pixel har en färg och tillsammans utgör dem hela bilden. Om vi zoomar in på vår logga så ser vi pixlarna som bygger upp loggan.

Antal pixlar är en av anledningarna till varför filstorleken på en bild kan vara stor. Andra anledningar kan vara antal färger och filtyp. Bilder i filtypen .jpg är till exempel mindre detaljerade och oftast mindre i filstorlek jämfört med en .png-bild 

Lösning: Om ni använder WordPress så finns det färdiga plugin som hjälper er identifiera och optimera bilder åt er. Smush är ett populärt plugin som gör jobbet väldigt enkelt.

Smush: https://wordpress.org/plugins/wp-smushit/

Har ni inte lyxen att kunna installera Smush så finns det en annan lösning som kräver lite mer jobb. Då får ni själva optimera bild för bild med ett verktyg som ligger online. Sedan ladda upp dessa och ersätta befintliga bilder på er webbplats.

Verktyget hittar ni här: https://imagecompressor.com/

2. Lazy Loading

När användare laddar in en webbplats så brukar allt innehåll på webbplatsen laddas in direkt, utan någon baktanke.

När någon går in på vår webbplats så är det t.ex. följande som syns vid första anblick. Men även det som finns längre ner på sidan, som inte är synligt för stunden, har laddats in. 

Det kan hända att det ligger en jättestor och högkvalitativ bild längre ner på sidan som kräver mycket för att ladda in – och i sin tur göra att webbplatsen tar lång tid att ladda. 

Med Lazy Loading prioriteras innehållet som är synligt i användarens fönster. Det betyder att oavsett om det ligger stora bilder längre ner på sidan så påverkas inte användaren utav det. När innehållet som är synligt i fönstret laddat klart fortsätter webbläsaren att ladda in det som ligger längre ner, t.ex. stor bild!

Även för Lazy Loading så finns det färdiga plugins som gör detta möjligt. För WordPress är följande plugin populärt: 

Har ni inte möjlighet att installera plugins så behöver ni hjälp av en webbutvecklare som manuellt programmerar in funktionen på er webbplats.

3. Cache

För dem flesta webbplatser återkommer en del besökare ofta. Istället för att låta användaren ladda in allt på nytt varje gång den besöker er webbplats så kan ni använda er av caching. Caching går ut på att besökaren sparar en kopia på er webbplats i sin webbläsare. Nästa gång besökaren går in på er webbplats så finns redan delar av innehållet nedladdat och sparat, detta gör att webbplatsen laddas in fortare och ökar i sin tur besökarens upplevelse.

Återigen finns det plugins att välja på för wordpress. Vi rekommenderar följande plugin:

Annars rekommenderar vi att ni tar kontakt med en webbutvecklare som kan hjälpa er med frågan.

4. Minifiera Javascript och CSS-filer

Er webbplats är uppbyggd på filer med kod. Det går att se dessa filer med kod som ett textdokument. Att minifiera dessa filer går ut på att ta bort alla mellanslag och radbrytningar. All text i filen blir kompakt vilket i sin tur minskar filens storlek, och gör det lättare för besökarna att ladda in er webbplats.

Exempel, följande kodsnutt gör färgen röd på viss text och placerar den i mitten på en webbplats.

p {
color: red;
text-align: center;
}

Om vi minifierar denna kodsnutten så ser den ut såhär efteråt:

p{color:red;text-align:center}

Även för detta fungerar W3 Total Cache

5. Se över om externa resurser

Rätt ofta så finns det innehåll på en webbplats som hämtas in från en annan webbplats/en annan server. T.ex. kan en av bilderna på en webbplats hämtas från en extern server. Om denna externa server är långsam tar tid på sig att skicka bilden till er – så är det i slutändan er webbplats hastighet som drabbas. Det kan därför vara bra att se över om det finns några externa resurser som slöar ner er webbplats. 

I PageSpeed Insights så kan ni få en lista på resurser som kräver mycket, men ett annat sätt att se dessa är genom att manuellt och in och kolla. Detta kräver lite med teknisk kunskap, men är kul att göra!

1. Gå in på er webbplats

2. Högerklicka och välj inspektera

3. Högst upp i menyn går du till fliken “Network”

4. Uppdatera sidan medans det fönstret är öppet

Det som visas är alla resurser som laddas in i samband med att någon besöker webbplatsen Det går att se filstorleken på resurserna samt hur lång tid det tog att ladda in dem. Till höger syns en vattenfalls-visualisering av tiden, vilket gör att det enkelt går att se vilka resurser som tagit lång tid. 

Vi rekommenderar att ni själva kollar igenom detta på er webbplats och se om det finns någon resurs som sticker ut!

6. Response-time

Ett sista steg är att se över om eran server har bra “response-time”. Ligger er webbplats på en webbhost som är slö så drabbas er hastighet. I så fall kan det vara bra att ta upp kontakten med dem som hostar eran webbplats, alternativt byta till en annan host. I 99% av fallen är webbhosten snabb och har bra responstid. Responstiden är givetvis beroende på var i världen besökaren befinner sig. Det viktiga för svenska företag är oftast att besökare från Europa har bra responstid. För att uppnå detta bör eran webbhost ha en server som ligger i just Europa. Att ha en webbplats som är riktad till svenska befolkningen, men att ha den liggandes på en server placerad i USA är inte optimalt. 

Ni kan se hur eran responstid ser ut för dem olika kontinenterna med hjälp av bitcatcha.com

Det absolut viktigaste är att eran responstid för London och Tyskland är låg. Om den är under 300ms är det OK, helst bör den ligga under 200ms.

Detta var en kort genomgång i hur ni kan jobba med hastigheten på er webbplats. Har ni frågor, eller känner att ni behöver hands-on hjälp med att förbättra er webbplats hastighet – så är det bara att höra av er till mig!

Dela gärna!