Är det viktigt att webbsidan laddar snabbt?

Det kosta svaret är ”ja”. Det långa svaret är ”ja, verkligen, i högsta grad”. Här förklarar vi på Defiso varför snabba sidor är viktigt, och hur du åstadkommer det.

Det finns flera skäl att optimera dina webbsidor för snabb laddning. Det äldsta skälet har med användarupplevelsen att göra.

Fånga läsaren snabbt

Ett gammalt credo på webben säger att du har 2-3 sekunder på dig att övertyga en läsare om värdet av din text, innan han eller hon drar vidare till konkurrenterna.

Även om den sanna tiden varierar, är det ingen tvekan om att webbanvändare är otåliga varelser, och om du vill behålla dem, måste du leverera det de söker efter snabbt.

Förutom tålamodet påverkar laddningstiden även besökarens förtroende för sajten. Om man upplever att en sajt är trög och seg, börjar varningsflaggorna fladdra. För varje flagga som signalerar, minskar sannolikheten att just den besökaren kommer att genomföra ett köp på din sajt (eller beställa ditt nyhetsbrev, läsa dina recensioner osv).

Långa laddningstider minskar alltså sidans konvertering, oavsett vilken sorts konvertering det rör sig om.

Google belönar snabba sidor

Men laddningstiden påverkar även webbsidans rakning i Googles sökresultat. I och med att mobila sökningar har kommit ikapp och gått om sökningar från datorer, har Google också börjat premiera snabba sidor i sin rankning.

Rankningen påverkas dessutom av användarupplevelsen, som Google mäter, och som vi såg ovan påverkas användarupplevelsen av laddningstiden.

För att summera, laddningstiderna påverkar både rankning och effektiviteten för dina webbsidor. Hur gör man då för att skapa snabba webbsidor?

Så gör du webbsidor som laddar snabbt

Det finns några åtgärder som snabbt kan göra dina sidor betydligt snabbare att ladda.

Förminska bilderna

Den åtgärd som oftast ger enskilt störst effekt snabbast är att dra ner storleken på bilderna.

Det finns två sätt att minska filstorleken för en digital bild:

  • Dra ner bildens upplösning
  • Använd ett komprimerat bildformat, som Jpeg.

Kom ihåg att extra upplösning är bortkastad. Om bilden aldrig kommer att visas med en större bredd än 600 pixlar, då bör den vara 600 pixlar bred. Varken mer eller mindre. Om den är bredare, görs den ändå om till en mindre bild innan den visas för besökarna. Den extra filstorleken för den oanvända upplösningen gör ingen nytta.

Försök hålla bildernas filstorlek under 100 kB. Idag har digitala foton ofta en upplösning på minst 3000 x 1000 pixlar. Det ger filstorlekar på mer än 1 MB, ibland mycket mer. Så stora bilder blir en boja runt foten för din webbsida.

Summan av text och kod på en webbsida är oftast inte större än kanske 10 kB. Att då haka på ett antal bilder med filstorlekar på 1 MB per styck ökar sidans storlek drastiskt – och därmed även laddningstiden.

TIPS: Lägg aldrig upp bilder med full upplösning på dina webbsidor.

Små bilder är extra viktigt nu när allt fler surfar mobilt. Dels har besökarna ofta långsammare uppkoppling, dels är deras bildskärm mindre, med följd att bilder visas med ännu lägre upplösning.

Ladda det viktiga först

Användarens upplevelse av sidan bestäms till största delen av det innehåll som är viktigt för användaren. Genom att ladda detta först, ger du besökaren en upplevelse av en snabb sida, även om andra delar av sidan dröjer en stund.

Det gör du genom att lägga det viktigaste överst i Html-koden. Det betyder inte att det måste ligga överst på den slutliga sidan. Placeringen på sidan styr du med formatmallar.

När det viktiga innehållet väl är på plats, till exempel texten i en artikel, och användaren kan börja läsa, spelar det mindre roll om andra rutor och ytor på sidan fylls på med innehåll i ett lägre tempo. Framförallt de ytor som befinner sig utom synhåll nedanför kanten på bildskärmen (below the fold).

Ett tips kan vara att ändå ladda element för sökning och navigering före innehållet, av praktiska skäl och för att inte sidan ska ge ett trasigt intryck. De bitarna tar ändå oftast mycket kort tid att ladda, medan innehållet potentiellt kan ta lite längre tid.

Även bilder kan du gärna ladda senare. De tar ofta längre tid att ladda, på grund av sin filstorlek. Det upplevs inte heller som särskilt störande om bilderna dyker upp efter hand. Kom bara ihåg att sätta attributen för bredd och höjd redan från början, så att inte hela sidan måste renderas om när bilden väl har laddats.

Var sparsam med JavaScript

Programkod som måste exekveras innan sidan visas är en stor potentiell tidstjuv.

Lite kod behöver inte vara något problem, men stora sjok av kod med komplexa beräkningar eller många anrop, kan skjuta till betydande laddningstid.

Om du bedömer att en viss kod ändå är nödvändig, lägg den längre ner i Html-koden så att det viktigaste på sidan har laddats innan exekveringen av koden inleds.

Använd formatmallar

När du bygger upp din sida med hjälp av formatmallar minskar mängden data som måste överföras till användarens webbläsare. Det gör att sidan laddar snabbare. Genom att styra sidans uppbyggnad med formatmallar kan du också låta det viktigaste innehållet laddas först, så att sidan snabbare blir redo att ”konsumeras”.

AMP

Googles nya Html-standard, AMP (accelerated mobile pages), är avsedd att bidra till snabbare mobila webbsidor. Du kan läsa mer om AMP här.