Varje gång du navigerar till en ny webbsida, oavsett om du skriver facebook.com manuellt i adressfältet eller klickar på en referensartikel som du har bokmärkt i din webbläsare, upplever du sidladdningshastighet i aktion.
Ibland händer det på ett ögonblick, och andra gånger drar processen fram till den punkt du börjar klicka på “uppdatera” i hopp om att få sidan att visas snabbare. Så, som marknadsförare, hur garanterar du att din webbplats inte hamnar i kategorin “otåligt uppdatera, sedan studsa”?
Jag önskar att det fanns ett enklare svar, men sidprestanda är faktiskt en ganska komplex best. De flesta förstår att ju större sidstorleken är, desto längre tid tar det att ladda, men det är mycket mer.
Vad är sidladdningshastighet?
Sidladdningshastighet är den tid det i genomsnitt tar för en sida att laddas helt från det att webbadressen skrivs in i en webbläsare till att webbsidan visas helt.
Sidans laddningshastighet är viktig eftersom den bidrar till användarupplevelsen. Alla förväntar sig att internet ska vara mer eller mindre omedelbart. Om ditt innehåll tar för lång tid att ladda, ökar du risken för att webbplatsbesökare lämnar din webbplats till förmån för en annan som laddas snabbare.
Vi ser en direkt korrelation mellan avvisningsfrekvens och sidladdningshastighet. Tumregeln är att din sida ska laddas på tre sekunder; två sekunder är idealiskt, men om din webbsida tar mer än tre sekunder att ladda behöver du en bra anledning till det.
Till exempel finns det några upplevelsewebbplatser vars hela poängen är att skapa en rik upplevelse som kan ta längre tid, i vilket fall de kommer att ha en belastningsindikator för att hålla besökarna informerade om sidans framsteg.
En normal marknadsföringswebbplats bör dock inte ta så lång tid, och att hålla din mobilwebbplats inom den tidsramen på 2–3 sekunder är ännu viktigare på grund av lägre bandbredd och mindre tålamod hos publiken.
Dessutom tar Google hänsyn till sidladdningshastigheten i rankningen, så det bör beaktas i din SEO-strategi.
Även om sidladdningshastigheten inte är första prioritet i ett planeringsskede för en webbplats – se till att gränssnittet rymmer innehållet det innehåller och tillgodoser alla behov hos din köparpersonas kommer först – efter att du har skapat ett gränssnitt som presenterar allt innehåll du behöver på ett sätt som dina köpare vill konsumera det, då kan du titta på hur du kan optimera din sidhastighet.
4 saker att tänka på för optimering av sidhastighet
1. Sidstorlek
Sidstorlek är den totala nedladdningsstorleken i MB av en sida och förmodligen den främsta faktorn New Breed tar hänsyn till när de undersöker dålig sidprestanda. Vanligtvis är bilder och videor de viktigaste bidragen till stora sidor.
För att lösa det, föreslår jag att du kör varje enskild bild du lägger på en webbplats genom verktyget TinyPNG. Enligt min erfarenhet och testning är det den bästa bildkomprimeringsalgoritmen som finns, vilket exemplifieras av bilderna nedan.
(500×500 Photoshop Spara som JPG med kvalitet “10” = 92KB)
(500×500 TinyPNG JPG = 35KB)
Som du kan se är det ingen märkbar minskning av visuell kvalitet, men filen är 61% mindre!
För video föreslår vi att du använder Adobe Media Encoder eller Handbrake, men båda kräver viss expertis för att balansera komprimering och kvalitet.
2. Hosting (serversvarstid/CDN/genomströmning)
Effekten värd har på sidans laddningshastighet är oberoende av koden eller tillgångarna på en webbsida och bestäms av den faktiska värdinfrastrukturen för en given webbplats. Precis som hur en gammal dator kan ta tre minuter att starta när en ny modell bara tar en minut, kan samma kod ha olika laddningshastigheter beroende på hur och var den är värd.
Serverns svarstid är fördröjningen mellan begäran (att trycka på “enter” efter att ha skrivit in URL:en i platsfältet) och när servern sänder den första byten med data. Om du navigerar till en webbplats och webbläsaren är helt tom – det vill säga ingenting alls har laddats – är det en indikation på dålig serversvarstid.
När sidan börjar dyka upp kommer CDN och Throughput in i spelet.
Content Delivery Network (CDN) är hur din webbplats resurser (bilder, skript, etc.) skickas från webbservern de är värd på genom routingpunkter över hela världen för att nå slutanvändaren.
Om du befinner dig geografiskt nära webbservern (om du till exempel bor i Vermont och webbservern är i Vermont), kommer sidan att överföras till din dator med några få hopp eller routingpunkter. Men om webbservern är i Vermont och du bor i Sydafrika, måste innehållet hoppa över fler routingpunkter innan det kan nå dig.
Det tredje elementet i detta är Throughput, som ser till att bandbredden förblir bred när anslutningen väl upprättats så att data tas emot med en jämn hastighet. Om detta inte händer kan en sida börja laddas snabbt och sedan fördröjas när den slutar.
3. HTTP-förfrågningar
Hypertext Transfer Protocol (HTTP)-förfrågningar består av antalet individuella tillgångar som en webbplats behöver ladda. En sida är inte en enda fil. Varje enskild bild, skript, stilmall etc. är en egen fil och därför en separat förfrågan till en webbserver. Du kan ha uppemot 100 laddningsbegäranden mellan alla dessa element.
En lång sida med många moduler kommer vanligtvis att behöva fler förfrågningar än en kort och enkel sida. Men vår tumregel är att försöka att inte överstiga 100 anslutningar och skjuta för runt 70 om det alls är möjligt.
Den primära taktiken för att minska dessa siffror är att kombinera JavaScript och CSS när det är möjligt, undersöka hur många modultyper och bilder som behövs på en enda sida och överväga exakt vilka marknadsföringsskript från tredje part som behövs (annonsspårning, analys, chatt, värmekartläggning, etc).
4. Ladda sekvens
Lastsekvens är den ordning i vilken HTTP-förfrågningar görs. Denna sekvens bestäms av ordningen på din kod i din dokumentobjektmodell (DOM), som i fallet med en webbplats är HTML-uppmärkning.
Du måste börja med din CSS, för annars kommer innehållet att visas i svartvitt, oformaterat och sedan ändras när din design laddas. Börjar med CSS gör sakta ner laddningsprocessen, men att inte ladda den först kommer att ha en skadlig effekt på användarupplevelsen.
Efter CSS bör du ladda resten av HTML och innehåll och avsluta med JavaScript.
För att optimera din laddningshastighet kan du också skjuta upp laddningen av vissa element som bilder, så att de inte laddas helt förrän användaren behöver dem. Du kanske märker att detta händer när du läser en lång artikel och bilderna ser suddiga ut när du först scrollar ner till dem, men de kommer i fokus när de är tydligt i din siktlinje.
Lägg dessutom ditt JavaScript i sidfoten. JavaScript påverkar vanligtvis de andra elementen på sidan, så att annat innehåll måste finnas först ändå. Dessutom, om ditt JavaScript är högre på din sida, kommer det att skapa problem med “renderingsblockering”, vilket innebär att webbläsaren måste ladda den helt innan den kan gå vidare till resten av dokumentet.
Om du av någon anledning behöver ladda ditt JavaScript tidigare på sidan, ladda det asynkront, så att resten av dokumentet fortsätter att laddas medan JavaScriptet är klart.
För att ge dig en känsla av hur det går för din webbplats (och även hur det går för dina konkurrenter) föreslår vi följande verktyg:
Takeaway
Förutom att tänka på ditt innehåll, design och konverteringsstrategi är det också viktigt att tänka på hur snabbt sidan laddas.
Enligt Kissmetrics förväntar sig ungefär 47 % av webbplatsanvändarna att en webbplats ska laddas på två sekunder eller mindre, och svindlande 40 % av användarna kommer att studsa om det tar mer än tre sekunder. Detta är något motsägelsefullt till det faktum att Pingdom fann att den genomsnittliga laddningstiden för de miljontals tester som utfördes på deras plattform var 2018 var 3,21 sekunder.
Oavsett vilket bör du fotografera för en sidladdningstid på två sekunder eller mindre eftersom sidladdningshastigheten har en effekt på användarupplevelsen (särskilt på mobiler där bandbredden vanligtvis är lägre) och påverkar din SEO-rankning.
