Webbutveckling | Rekommenderad | iGoMoon Utbildar | Webbyrå

[Mini-Guide]: Så gör du för att förbättra din hemsidas hastighet

Av Carl Alin | 03.10.17

Lästid: 18 minuter
‹ Tillbaka till listningen

Varje gång du surfar på webben möts du av en (förhoppningsvis) polerad och trevlig yta, men bakom denna gömmer det sig en hel värld av kod och processer, likt isberget som gömmer sig under ytan.

Som marknadsförare kanske du helst arbetar med ytan, det som besökaren möts direkt av, och det kan vara svårt att se nyttan med det bakomliggande maskineriet för just ditt arbete. Men vi lovar - även du som marknadsförare måste ha åtminstone en grundläggande förståelse för utvecklarnas arbete för att kunna utföra ditt eget jobb på ett bra sätt. 


Efter att ha läst det här inlägget kommer du förmodligen ha en skräckslagen uppfattning om hur mycket du inte visste som händer bakom kulisserna, men som dock är så viktigt att veta för att förbättra din hemsida!

 

Redan koll på laddningstid för din hemsida? Ladda ner vår guide: "10 steg att följa när du ska lansera en ny hemsida" och lär dig fler smarta tips


Nu ska vi förklara varför.
 För det första är den data och de nyckeltal som marknadsförare använder sig av ett direkt resultat (och begränsat) av hemsidans kod, även om den berättar om funktionen i det gränssnitt som besökaren möts av. Till exempel så påverkas laddningstiden av en webbsida av mängden HTTP-requests som finns och som kommuniceras mellan en server och en browser. Följdaktligen påverkar det här besökarens användarupplevelse, bounce rate och andra nyckeltal som marknadsföraren vill ha koll på.

 

Så vad är en HTTP-request?* Hur påverkar den användarupplevelsen, och vad kan du som marknadsförare göra för att få företagets webbplats att fungera snabbare?

I det här inlägget kommer jag att gå igenom alla dessa frågor och besvara dem en i taget. Efter att ha läst den här artikeln kommer du kunna förklara för dina medarbetare vad HTTP-requests är (välkommen till rollen som kontorets IT-avdelning) och dessutom kunna ta några konkreta steg mot en snabbare och behagligare webbplats för ditt företag.

*HTTP står för "Hypertext Transfer Protocol", vilket betyder att en webbrowser skickar en förfrågan av en fil och att servern sedan skickar/överför filen till browsern.

 

hubspot-development-with-igomoon.jpg 

Vad är en "HTTP-request"?

Varje gång någon besöker en webbplats så händer följande: Besökarens webbläsare (Chrome, Safari, Firefox - eller Explorer, för den riktigt vågade surfaren) signalerar till servern som hostar webbplatsen som besökaren försöker nå. Browsern kommunicerar sedan att servern ska skicka över alla filer och allt innehåll som finns på webbplatsen, till exempel bilder, video och texter.

 

När en server mottar en HTTP-request från en besökares browser, skickar den över de filer som besökarens browser efterfrågar. Efter detta läser besökarens browser in webbsidan och den kan sedan visas i all sin skönhet.

 

Nu till problemet: En browser behöver göra separata HTTP-requests för varje enskild fil på din webbplats. Om det är så att din webbplats inte har många filer tar det inte lång tid att skicka en request och ladda in innehållet på hemsidan. Men de flesta större webbplatser har många filer. Ett särskilt ofta förekommande problem är att en sida har för stora och högupplösta* bilder, vilket leder till väldigt långa laddningstider.

 

Ofta laddar företag upp bilder som är alldeles för stora för sitt ändamål, i vår erfarenhet har man helt enkelt fått foton från en fotograf eller formgivare, och laddar sedan upp dem i originalupplösning, vilket inte sällan kan vara upp till tio gånger större än vad som egentligen behövs.

*En bilds upplösning berättar hur många pixlar den består av i höjd- och sidled, som exempel är en ikon kanske 32x32 pixlar stor, medan din skrivbordsbakgrund på en 27"-dator är 2560x1440 pixlar stor. Detta är kanske den enskilt viktigaste faktorn i en bilds filstorlek och därmed laddningstid. Vi pratar mer om detta senare i texten.

Hur HTTP-requests påverkar användarupplevelsen

Vid det här laget är det ingen chock att ju fler filer som finns på din webbplats, desto fler HTTP-requests kommer behöva göras från besökarens browser. Och ju fler HTTP-requests, desto längre tid tar det att ladda in din webbplats. Dessutom kommer stora filer att ta ännu längre tid att ladda in.

 

En lång laddningstid kan störa och vara en väldigt frustrerande upplevelse för dina besökare. Särskilt drabbade blir de besökare som surfar in på din webbplats via mobilen, eftersom all data måste laddas på webbsidan innan sidan börjar synas i browsern i mobilen (det korta förklaringen till "varför?" är: "det bara är så"). Däremot kan du se delar av webbsidan, oavsett om requests har behandlats, när du surfar på en dator, men då mobilen tar över mer och mer som den dominerande plattformen blir detta viktigare och viktigare att tänka på. "Det funkar ju på datorn iallafall" är inte längre en giltig ursäkt.

 

Forskning som har undersökt detta närmre visar att laddningstiden på en webbsida, oavsett plattform, tydligt påverkar besökarnas beteende. Enligt KISSmetrics så säger 47 % av konsumenter att de förväntar sig att en webbsida laddas in på två sekunder eller mindre. Samtidigt menar 40 % att de skulle lämna en webbplats om det tog mer än tre sekunder att ladda in. 

 

Ett sätt att förhålla sig till detta och ha något slags mål att sträva efter, är att en sida på en webbplats ska innehålla som mest 10-30 filer. För de mest toppresterande webbplatserna är detta givetvis svårt och generellt krävs det ett dedikerat team med utvecklare för att lyckas med just detta. Enligt HTTP Archive (som anses var den mest legitima källan i sammanhanget - och som Google sponsrar) så är den genomsnittliga mängden requests 100+ per webbsida. 

 

I en mätning som gjordes av HTTP Archive 15 juli 2017 hade exempelvis 69 % av top 100 (Google, Youtube & Facebook etc) webbplatserna i världen ett genomsnitt på mer än 25 requests per webbsida. Det är med andra ord inte bara små företag som behöver arbeta med detta - även jättarna är skyldiga och behöver ta ett kliv framåt i utvecklingen.

 

Dessutom: Ju större företag, desto större ekonomiskt svinn när besökare lämnar hemsidan på grund av orimliga laddningstider. Så känner du någon på Nike, be dem ringa oss. Eller åtminstone läsa den här artikeln. 

 

graf-genomsnitt-requests.png

Källa: HTTP Archive

 

Så gör du för att få din hemsida att ladda in snabbare

 

1) Titta på hur många HTTP-requests din webbplats gör i dagsläget

Nu när du vet vad HTTP-requests är för något är det dags att gräva där du står. Med hjälp av Google Chrome's Network panel är det enkelt för vem som helst att kolla upp hur många HTTP-requests som en webbplats gör. Det är ett intressant sätt att se vad som "gömmer sig under ytan" och vad som eventuellt kan göra att laddningstiden blir lång.

 

I grund och botten visar panelen dig alla de filer som en browser måste bearbeta och föra in för att kunna ladda in webbsidan - dessutom visar den en tidslinje över när det här händer. Till exempel kan API:et (Application Programming Interface) berätta för dig exakt när en request för en bild startades och när den slutligen laddades in i browsern.

 

För att kunna se Nätverkspanelen (Network Panel) för en given webbsida så öppnar du en webbplats i Google Chrome. I huvudmenyn på toppen av din skärm går du till View > Developer > Developer Tools.

 

Chrome-developer-tools.png

 

Använder du Safari? Gå då via Developer > Show/Connect Web Inspector

Safari-developer.png

 

Har du inte aktiverat developer view? Lugn. Det gör du enkelt genom att gå till Safari > Preferences > Advanced > Show Develop menu in menu bar

Safari-advanced-settings.png

 

Nätverkspanelen kommer öppnas i din browser. Eftersom att den spelar in all aktivitet när DevTools är öppen, kommer panelen vara tom när du först öppnar den. Uppdatera därför sidan du befinner dig på för att se aktiviteten som laddas in på nytt eller vänta på att någon aktivtet sker på webbsidan. 

 

Här nedan kommer en överblick och förklaring över vad du ser i Googles nätverkspanel:

 

Google-network-panel.png

källa: Google

1) Kontroll. Använd dessa funktioner för att kontrolla hur Nätverkspanelen ser ut och fungerar.

2) Filter. Använd dessa funktioner för att kontrollera vilka resurser som syns i den så kallade Requests Table (4). Tips: Håll ner Cmd (Mac) eller Ctrl (Windows/Linux) och tryck sedan filter för att välja flera filer samtidigt.

3) Överblick. Grafen visar en tidslinje över när resurser inhämtades. Om du skulle se flera sträck som ligger vertikalt på varandra, betyder detta att dessa resurser inhämtades samtidigt.

4) Requests Tabell. Den här tabellen listar varje resurs som har inhämtats. Den här rutan är automatiskt inställd att lista resurser i kronologisk ordning, med de första resurserna högst upp. Om du klickar på ett namn av en resurs kan du läsa mer information. Tips: Högerklicka på någon av tabellens rubriker utom Timeline för att addera eller ta bort kolumner av information.

5) Summering. Den här rutan ger dig det totala antalet requests, mängden data som har överförts och dess laddningstid. 

 

2) Ta bort onödiga bilder

Vid det här laget borde du ha en uppfattning om vilka filer som tar lång tid att ladda på din webbplats. Det här inkluderar bildfiler. Det enklaste sättet att reducera antalet filer är att ta bort onödiga bilder, och/eller att se till att de du har inte är onödigt högupplösta*.

Bilder är en värdefull tillgång på en webbsida för att göra den visuellt mer attraktiv för dina besökare. Har du och andra sidan bilder på dina webbsidor som inte skapar något värde så är det bättre att du undviker att använda dem överhuvudtaget - och då allra helst om de är riktigt stora (läs filstorlek). Läs det här inlägget om du vill veta mer om foto för webb.

*En bilds upplösning berättar hur många pixlar den består av i höjd- och sidled, som exempel är en ikon kanske 32x32 pixlar stor, medan din skrivbordsbakgrund på en 27"-dator är 2560x1440 pixlar stor. Detta är kanske den enskilt viktigaste faktorn i en bilds filstorlek och därmed laddningstid. Du läste det här för fem minuter sen lite högre upp, men det är värt att läsa igen.

3) Komprimera filstorleken för dina bilder

När du har bestämt dig för vilka bilder du ska behålla och använda är det viktigt att du väljer bilder som är i rätt upplösning och som är komprimerade i filstorleken. Det underlättar och reducerar tiden det tar för servern att behandla HTTP-requests, vilket förkortar laddningstiden.

 

För att komprimera filer rekommenderar jag att använda Photoshops sparalternativ “save for web” som automatiskt komprimerar dina bilder men som inte påverkar bildkvaliteten.

 

Använder du inte Photoshop så fungerar TinyPNG galant och likaså compressor.io som båda är gratisverktyg (och DÄR nådde vi punkten där antalet verktyg är fler än antalet rimliga ursäkter att inte komprimera).

 

4) Utvärdera vilka delar av din webbplats som påverkar laddningstiden.

Att välja bort och komprimera bilder är ett bra första steg för att trimma fettet och reducera HTTP-requests för att förminska dina webbsidors laddningstid. Men vad kan du läsa av i Nätverkspanelen som bidrar till många requests? Till exempel kanske du upptäcker att en video eller att en integration från sociala medier lägger på en eller kanske till och med två sekunder för laddningstiden. Det här är bra att veta för här ifrån kan du och ditt team ta ställning till om det är värt att behålla detta innehåll eller inte.

 

Jag rekommenderar att använda Googles PageSpeed Insights tool som hjälper dig att analysera din webbplats innehåll och genererar tips på hur du kan förbättra den.

 

Ett alternativ till Google är att ta hjälp av Yslow som är Yahoo's motsvarighet. 

5) Hur laddar du in dina JavaScript?

För dig som inte vet är JavaScript (JS) ett programmeringsspråk som används för att skapa interaktiva effekter på webbplatser. Om din webbplats har JS installerade och det visar sig att de inte är asynchronous* (dataöverföring utan synkroniserade signaler) så behöver du be en webbutvecklare titta på detta. Det här kan vara en stor bov i dramat. 

 

Enkelt förklarat handlar det om att JS inte ska prioriteras att laddas in före element som till exempel bilder och texter. Om så är fallet kan din webbplats uppfattas som långsam och du riskerar att dina besökare lämnar den.

 

I den här artikeln kan du lära dig mer om JavaScript.

 

6) Kombinera CSS-filer tillsammans

Varje CSS-fil du använder på din webbplats ökar också antalet HTTP-requests vilket i längden påverkar laddningstiden för dina webbsidor. Ibland är detta svårt att undvika men oftast kan du faktiskt kombinera CSS-filer tillsammans. Här kan det vara bra som marknadsförare att kontakta en webbutvecklare för att koda detta (se kapitel 5 - "Saker som är supertjorviga")

Varför ska du då kombinera CSS-kod? Jo det kan finnas överallt på din webbplats och i vilka filer som helst. Anledningen till att det oftast finns många CSS-filer på en webbplats handlar om att en någon från börjar har använt flera separata filer för enkelhetens skull.

 

Klicka här om du vill lära dig mer om CSS i detalj.

 

7) Testa din site på äldre enheter och 3G/4G nätverk

Det är inte 100 % säkert att din webbplats ser likadan ut beroende på vilken browser en besökare använder. Oftast kan det finnas stora skillnader på hur exempelvis Internet Explorer och Google Chrome behandlar brytningspunkter och olika grafiska element på en webbplats. För att försäkra dig om att din webbplats upplevs på samma sätt och att laddningstiden är kort oavsett vilken browser användaren har, kan du testa din webbplats i programmet Browserstack.

 

Du kan också testa din webbplats i en mobiltelefon/surfplatta för att testa prestandan i ett 3G/4G nätverk. Om din webbplats laddar in snabbt oavsett browser eller uppkopplat nätverk, vet du att du har gjort ett bra jobb.

 

 

Hurra! Nu har du lärt dig det mest grundläggande som kan hjälpa dig som marknadsförare att bättre förstå hur du kan få din webbplats att fungera snabbare, reducera antalet HTTP-requests och hur du kan förbättra användarupplevelsen för din målgrupp på din webbplats.

 

Vill du lära dig mer om fler sätt att förbättra din webbplats?

Vi har skapat en Guide: 10 steg att följa för att lansera en ny hemsida där vi har samlat våra bästa tips kring måluppsättning, teknisk optimering och innehåll. Tryck på knappen nedan för att ladda ner den:

 

Ladda ner guiden

Av Carl Alin

Inbound Marketing Consultant

He’s our Inbound Whisperer. He listens to our clients, analyzes their needs and often finds solutions they have never thought of.
Inbound Marketing Consultant

Han är vår Inbound-viskare- Han lyssnar på våra kunder, analyserar deras behov och hittar en lösning som de inte visste fanns.

Kontakta oss.

Fyll i formuläret nedan för att komma i kontakt med oss!