Mobila sajter: Större, bättre men långsammare?

In Infomercial by MKSE.com Redaktion Martin Edenström3 Comments

MKSE infomercial

Mobila sajter är på snabb frammarsch i Sverige.

apica_infom1

Apica gjorde en undersökning i samband med webbdagarna 2014 om hur olika sektorer anpassade sina sajter för mobila användare. Tabellen nedan är ett resultat av en undersökning av 100 sajter i mars 2014 som visar hur många procent av företag i respektive sektor som har en mobilanpassad sajt, applikation eller ingetdera. Vissa sajter har både stöd för responsiv design och separat App, därav att summan per rad blir mer än 100 %.

apica_infom2

Tydligt är att de flesta nu har mobilanpassad/responsiv design sajter. Men att bara anpassa formatet är ingen garanti för en bra användarupplevelse.

Det finns en klar korrelation mellan mobilhastighet (3G, 4G), mobilasajters storlek och svarstid. Moderna mobilasajter blir med tiden större och mer komplexa, samtidigt så förväntar sig mobilanvändare en allt snabbare upplevelse. Det innebär ett motsattsförhållande mellan marknadskrav på innehåll, form och användarens upplevelse av sajten. En långsam sajt blir snabbt sig egen nemesis.

Det finns en rad faktorer så som nätfördröjning (latency), aktiv bandbredd och mobilens operativsystem och minne som alla kan påverka anslutningshastigheten för din presumtive mobilanvändare.

Alla dessa nät och miljöfaktorer ligger utanför webbutvecklarens påverkan. Viktig är att förstå vad du kan kontrollera och påverka! Den viktigaste enskilda åtgärden som utvecklare kontrollerar är att hålla nere storleken på sidor. Vårt mantra är därför: Designa och bygg dina webbsidor så att de inte blir för tunga. Genom att hålla mobilsajter lättviktiga, kan utvecklare hjälpa sina mobilanvändare att begränsa sin surfkostnad och få en bättre användarupplevelse oavsett nätförhållanden.

Innan vi går in på detaljer, kan det vara intressant att notera lite aktuell statistik om sidstorlek över tid för mobila webbplatser. Storleken har betydelse, vilket visas i en undersökning från WebPerformance-today:

Mellan november 2011 och maj 2014 ökade den genomsnittliga mobila webbsidans storlek från 475 KB till 740 KB, en ökning med 56 %. Även om bilderna fortfarande står för den största delen, har de procentuellt inte ökat så mycket av den totala webbplatsens storlek. Skript och stilmallar, å andra sidan, har nästintill fördubblats mellan 2011 och 2014, medan förekomsten av HTML fortfarande är mer eller mindre den samma.

apica_infom3

Två saker som står ut:

  1. Bilder fortsätter att ta upp för mycket av webbsidans storlek i onödan (62 %, för att vara exakt).
  2. Det genomsnittliga java-skriptet har vuxit storleksmässigt från 96 KB till 175 KB och är nästintill 24 % av sidans genomsnittliga storlek. En anledning till att skript börjar bli skrymmande är för att många utvecklare förlitar sig på tredje part leverantörer, vars skript inte alltid är optimerade. Scripten i sig är ett problem om dom görs av tredje part och i sig riskerar att vara en Singel Point of Failure utanför din kontroll: se blogg Apica

Genom att organisera och förminska innehåll i form av tunga bilder, tredje part skript, optimera stilmallar och använda webbanpassade typsnitt, kan utvecklare förbättra prestandan för mobilsajter avsevärt vilket kommer att uppskattas av dina användare. Hur ligger din sajt till? Första steget till förbättring är att mäta och sätt mål på svarstider och sidstorlek. Har du koll på din vattenfallsgraf?

apica_infom4

För att se hur din applikation renderar i en klassisk vattenfallsgraf och vilka komponenter som tar tid, kan du t ex använda Apicas fria testkonto för webb/mobila webbsidor Apica WPM. Sätt upp en check och se i realtid hur sidan hanteras. För en ren App måste ett webservice script spelas in medan en responsiv sida kan mätas direkt.

apica_infom5

Mer läsning:

MKSE infomercial

Kommentarer

  1. Bra och intressant! En av de viktigaste utmaningarna responsiva webbar har idag handlar om bildhantering (min personliga uppfattning). Tyvärr hanterar inte HTML5 och CSS3 laddning av bilder adaptivt eller baserat på bandbredd i sin standard. Inte heller ramverk som Bootstrap har stöd för det i sitt bibliotek (däremot Foundation) utan man måste inkludera andra lösningar. Har man sen ett CMS som inte stöder adaptiva bilder fullt ut blir det än mer komplicerat (specialkod skall skrivas även där).
    Det finns så klart lösningar på problemen (främst adaptiv bildladdning) och de flesta duktiga front-endare vet hur det skall lösas, tyvärr prioriteras det bort allt för ofta i projektbudgeten. Det är lite som med IE problematiken, det krävs lite extra utveckling för att det skall funka bra och oftast lägger man hellre mer pengar på funktioner än bra prestanda även om det väldigt ofta troligen är en felprioritering.
    Jag tror dock att de flesta leverantörer lärt sig hur det skall göras så att det kommer med i de flesta projekt utan särskilt stor ansträngning under 2015. Att inte välja responsiva lösningar skall verkligen motiveras starkt! Jag upplever ofta att man bygger app / mobilwebb baserat på väldigt svaga argument och okunskap, sen skall man vara väl medveten om att det finns tillfällen då kanske främst en app är en väl motiverad satsning. Jag har dock hittills inte sett att en separat mobilwebb är ett bra affärsbeslut (även om jag hört många säga motsatsen).

  2. Det är möjligt att cacha bilder baserat på vad respektive enhet uppger, Jag använder den metoden i min tjänst CliqTags (http://cliqtags.com). Förvisso innebär det att en och samma bild kan resultera i flera cachade bilder, men de är å andra sidan generellt mindre, och tjänsten skalar aldrig uppåt (det blir fult), så låt säga att datanyttjandet kanske fördubblas på serversidan. Bilderna skalas till maximum av höjd och bredd så att de är ”crispa” också när telefonen/tableten är i landskapsläge. Jag överväger förvisso att istället ta minimum av höjd och bredd, för att på så sätt öka prestandan mer. Tjänsten cachar också små tumnaglar som visas i menyer. Det enda direkta strulet jag har haft är att ramverket jag använder är lite dåligt på att optimalt komprimera bilder. Prestandatjänster tenderar till att kunna komprimera ytterligare.

    Detta är inget användaren (= sajtbyggaren) behöver tänka på. Det är bara att lägga upp innehåll så fixar tjänsten resten. Skulle användaren råka lägga upp kameraoriginal så löser sig det också.

    CliqTags är inte tänkt för sajter som speglar motsvarande PC-optimerade sajter (för det är responsiv design onekligen bättre, vilket vi också erbjuder på konsultbasis), utan för små och många sajter riktade till enbart mobila användare, v.g. kuponger, platsinformation, enkäter etc. Mao information som är mer dynamisk, riktad och fokuserad än vad man normalt jobbar med på en vanlig företagssajt, som i responsivt utförande lätt kan upplevas som ”förbuskad” och svårnavigerad.

  3. Pingback: 7 tips för digital marknadsföring - På kundresa i alla kanaler

Leave a Comment