Många av oss bor i tätorter där man har tillgång till bra trådad uppkoppling till nätet, som fiber och ADSL, men också ett mobilnät som fungerar bra överlag. Så ligger det inte alltid till ute i glesbygden och vårt land består till oerhört stor andel av just glesbygd.
Vill du ha en bra service via internet när du står i svampskogen och funderar på om det du hittat är en champinjon eller en vit flugsvamp? Ofta är det en acceptabel mottagning men ditt problem är istället två helt andra saker, nämligen först och främst att någon annan inte optimerat sitt material för sparsam användning av besökarnas internetuppkoppling. Det är inte helt ovanligt att man på en trög internetuppkoppling otåligt väntar på utsmyckningsbilder som inte tillför något annat än onödig väntan och irritation. Förstås är det mycket bättre att låta bli att skicka material som inte behövs.
Det andra problemet är alla de tekniska detaljerna man som stadsbo så sällan råkar ut för att man struntar i dem. Störst bekymmer är förstås tyngre material som bilder som skickas i allt för hög bildkvalitet, efter det är det allt för vanligt att text-filer skickas okomprimerat vilket ofta gör dem minst dubbelt så sega att tanka hem.
Det är förstås inte bara i svampskogen du kan råka ut för en fullständigt usel upplevelse av webben. Bara under våren har jag själv haft plågsamt seg uppkoppling bland annat vid Chalmers tekniska högskola i centrala Göteborg under en konferens, på tåget mellan Åmål och Göteborg samt vid sommarstugan vid en mindre ort utanför Åmål.
Tänk på att många bor året runt i glesbygd där du har din sommarstuga, eller vid samma mobilmast som konferensanläggningar eller i evenemangsområdet där en festival hålls.
Tre olika exempel på uppkoppling jag haft enligt Bredbandskollen:
- Hemma i centrala Göteborg på 4G-modem: 29,1 Mbit/sekund ner, 27,3 Mbit/sekund upp och 0,036 sekunder i svarstid.
- På konferens på Lindholmen i Göteborg: 0,013 Mbit/sekund ner, 0,43 Mbit/sekund upp och 0,345 sekunder i svarstid.
- Sommarstugan i en by i Dalsland: 0,19 Mbit/sekund ner, 0,33 Mbit/sekund upp och 2,25 sekunder i svarstid.
Börja med att kolla din webbplats svarstid
För att sätta dessa siffror i relation till något verklig och påtagligt. Börja titta på svarstiden, det är den som talar om hur lång tid det tar innan något skickas över huvud taget. Svarstiden gäller för varje fil som ska laddas ner och är det som gör att upplevelsen känns trög och utan snabb respons. I bästa fall är besökarens webbläsare och uppkoppling i ett sådant skick att den kan ta emot flera filer samtidigt, annars får du multiplicera svarstiden med antalet filer du skickar till besökaren (kolla antalet filer på en sida med YSlow exempelvis).
Hur bra nedladdning stödjer din webbplats?
Efter svarstiden är det nedladdningshastigheten du ska bekymra dig för. Det är den som avgör i vilken hastighet material kan skickas när väl överföringen satt igång. Så länge som det inte är video eller annat tungt material det handlar om är allt över 2 Mbit/sekund alldeles utmärkt.
Oroa dig inte för besökarens uppladdningshastighet - oftast
Uppladdningshastigheten är sällan ett problem i webbsammanhang, åtminstone inte för besökaren av en webbplats (servern däremot…). Det skickas visserligen lite information till webbservrarna när man surfar runt men där är det egentligen svarstiden som är den största flaskhalsen. Endast om besökaren ska skicka större informationsmängder till servern kan uppladdningshastigheten bli ett problem, det kan vara ett problem både på besökarens sida men också att din server inte kan ta emot data tillräckligt snabbt.
Om din webbplats inte ska vara en i mängden bland de med usel prestanda finns det några ganska enkla grejer du kan se till att de blir gjorda.
Optimera bilder för sämre uppkoppling
Du vill slå samman alla små ikon-bilder för att ha så få anrop som möjligt till webbplatsen. Det är vad som kallas CSS Sprites och går ut på att man har en stor bildkarta (med många bilder i en och samma bild) och med hjälp av CSS visas bara den valda bilden. Vinsten med CSS Sprites är att alla småbilder som används lite här och var bara laddas ner en enda gång vilket sparar in väntetid.
Välj bildformat och spara för webben i Photoshop
Den antagligen avgörande skillnaden för hur tung en bild blir att ta emot för en besökare hänger på beslut tagna i bildbehandlingsprogram som Photoshop. Först och främst är det viktigt att kontrollera att du valt rätt format, i dagsläget är det PNG eller JPG som gäller för stillbilder.
När du ska spara en bild väljer du funktionen spara för webben (redan här har du decimerat storleken), sedan kollar du formatvalen PNG eller JPG. Du kommer märka att bilder med få färger, som logotyper och informationsgrafik, ofta blir mindre stora som PNG–8 och att fotografier är mindre/finare som JPG.
Om det är en PNG–8 kan du välja hur många nyanser av färgerna du vill ha och genom att minska antalet nyanser minskas filstorleken. PNG–24 är PNG-motsvarigheten till JPG-bilder, alltså fotografier och bilder med miljontals färgnyanser.
Väljer du JPG kan du välja grov optimeringsgrad direkt, någonstans mellan medium och high brukar det bästa resultatet ligga när jag jobbar med fotografier. Det du kommer märka, eller åtminstone ska vara uppmärksam på, är att stora fält med en enda färg inte blir så snyggt om du är för hårdhänt med att sänka bildkvaliteten. Detsamma gäller med bilder på människor och särskilt ytor med hud, vi är väldigt känsliga för överoptimerade bilder då folk tycks se sjuka ut. Så ha lite extra marginal på bildkvaliteten om det än porträtt och liknande.
Efterbehandling av bilder
Photoshop-handhavandet ovan utgår från vad ögat kan se, det vill säga så kallad förstörande komprimering. Efter den kan man oftast med magi utföra en del icke-förstörande komprimering.
Ett exempel på det är programmet ImageOptim till Mac OS X. Det trollar oftast bort minst 5 % av filstorleken och inte sällan upp till 30-40 %. Jag har dessvärre inte hittat något motsvarande till Windows ännu, men kan absolut rekommendera webbtjänster Smush.it som inte ens behöver installeras på datorn.
Ta ett kvartsamtal med din webbutvecklare…
Om du nu inte själv kodat din webbplats kan du tillsammans med en webbutvecklare diskutera vad det är lönt att ge sig på för att förbättra din webbplats. Som underlag till diskussionen kan du köra Google PageSpeed Insights på ett antal av dina sidor. PageSpeed Insights hittar du här (och betyget på min arbetsgivares webbplats) och jämför din sajt med andras webbplatser.
Det finns mängder med tänkbara lösningar, vissa mer kreativa än andra. En del knep är så pass kreativa att de försämrar tillgängligheten för alla med särskilda behov så det är ett rättesnöre att beakta även här - förstås!
Bland vanliga knep och best practice för bättre prestanda finner du bland annat:
- Javascript-ramverk för att mäta uppkopplingen hastighet och vid behov skicka bantade bilder.
- I ditt webbpubliceringsverktyg markera vad som är utsmyckningsbilder och inte skicka dem till dem med seg uppkoppling (ofta, men inte alltid, mobila enheter).
- Att se till att textfiler skickas i ett komprimerat och minimerat format, det vill säga utan onödiga mellanslag och packat för snabb överföring.
- Minska antalet filer en webbsida är beroende av. Det är allt för vanligt att lata webbutvecklare struntat i att slå samman stilmallarna innan publicering, eller att man som besökare tvingas ladda hem massor med Javascript-filer. Se vad som är bäst för besökaren - inte utvecklaren!
- Se till att filer har en förväntad livslängd, annars vet inte webbläsaren om den ska ladda ner oförändrade filer vid ett återbesök dagen därpå.
För dig som vill och vågar fixa lite själv finns tips för Wordpress och ASP.NET här.
Boken Webbstrategi för alla tar upp en hel del om webbprestanda. Inte bara det som går under frontend-utveckling som exemplifieras ovan utan även en del kring databaser och arkitekturella frågor - skrivet på ett sätt som de flesta lär förstå.