F\u00f6rutom att en sajt ska vara tillg\u00e4nnglig f\u00f6r alla oavsett eventuell funktionsneds\u00e4ttning (lagkrav sedan 2015), ska g\u00e5 att drifta till en f\u00f6rsvarbar summa s\u00e5 \u00e4r det viktigt att inte sl\u00f6sa med bes\u00f6karens tid och uppm\u00e4rksamhet.<\/p>\n
\u00c4r verkligen hastighet p\u00e5 webben ett klokt m\u00e5l?<\/h2>\n
Kort svar: JA! Man kan nog f\u00f6ruts\u00e4tta att man vill n\u00e5 ut med sin webbplats, att f\u00e5 den anv\u00e4nd. Vi i offentlig sektor har ju annars sv\u00e5righeten med m\u00e5lformulering att vi oftast inte har ett ekonomiskt incitament varken p\u00e5 webben eller bortanf\u00f6r tangentborden. D\u00e4rf\u00f6r \u00e4r det lite sv\u00e5rt att s\u00e4tta ett exakt v\u00e4rde p\u00e5 varje enskilt bes\u00f6k p\u00e5 v\u00e5ra webbplatser.<\/p>\n
Det finns organisationer som kollat upp vad en ganska liten skillnad i hastighet p\u00e5 webben g\u00f6r f\u00f6r skillnad, se nedan lista. Du som vill efterforska kan alltid klicka p\u00e5 l\u00e4nkarna och n\u00f6rda ner dig ordentligt.<\/p>\n
- \n
- Google: 2% l\u00e5ngsammare = 2% f\u00e4rre s\u00f6kningar per anv\u00e4ndare<\/a><\/li>\n
- Yahoo: 400 millisekunder snabbare = 9% mer trafik<\/a><\/li>\n
- AOL: Snabbare sidor = fler sidvisningar<\/a><\/li>\n
- Amazon: 0,1 sekunder snabbare = 1% mer oms\u00e4ttning<\/a><\/li>\n
- Shopzilla: 5 sekunder snabbare = 25% fler sidvisningar, 7 till 12% mer oms\u00e4ttning<\/a><\/li>\n
- Aberdeen Groups rapport fr\u00e5n november 2008 – \u201dThe performance of web applications”: 1 sekund l\u00e5ngsammare = 11% f\u00e4rre sidvisningar, 7% f\u00e4rre konverteringar<\/a><\/li>\n
- Google har med webbprestanda<\/a> i sin rankningsalgoritm<\/li>\n<\/ul>\n
Med andra ord \u00e4r en l\u00e5ngsam webbplats mer meningsl\u00f6s j\u00e4mf\u00f6rt med om den vore snabb. Det g\u00e4ller \u00e4ven f\u00f6r oss som inte s\u00e4ljer n\u00e5got p\u00e5 webben.<\/p>\n
Som om inte det vore nog s\u00e5 har forskning utf\u00f6rts f\u00f6r att kolla vad som h\u00e4nder med en typisk anv\u00e4ndare under en interaktion<\/a> med ett datasystem. Om \u00e5terkoppling sker inom 0,1 sekund upplevs det som omedelbart. Dr\u00f6jer det mer \u00e4n en sekund b\u00f6rjar anv\u00e4ndaren uppleva att hen v\u00e4ntar och tankefl\u00f6det \u00e4r inte l\u00e4ngre helt fokuserad p\u00e5 uppgiften. Efter 10 sekunder har man tappat bort sin anv\u00e4ndare mer eller mindre fullst\u00e4ndigt.<\/p>\n
Man kan, anser jag, dra det s\u00e5 l\u00e5ngt som att en l\u00e5ngsam eller icke-optimal webbplats orsakar<\/em> en kollektiv funktionsneds\u00e4ttning p\u00e5 anv\u00e4ndarna, eller g\u00f6r en befintlig \u00e4nnu v\u00e4rre!<\/strong><\/p>\n
S\u00e5 fr\u00e5gan \u00e4r hur l\u00e5ngsam en webbplats f\u00e5r vara under s\u00e4msta t\u00e4nkbara anv\u00e4ndningsscenario? Jag drar ofta exempel fr\u00e5n n\u00e4r jag \u00e4r i svampskogen i natursk\u00f6na Dalsland, d\u00e4r man i dessa sammanhang inte uppskattar radioskugga eller d\u00e5lig t\u00e4ckning p\u00e5 4G-n\u00e4tet. Eller f\u00f6r den delen n\u00e4r jag \u00e4r mitt i smeten bland massor med andra, som p\u00e5 konferens eller festival, n\u00e4r mobiln\u00e4tet ist\u00e4llet \u00e4r \u00f6verbelastat.<\/p>\n
Hur ser mobiln\u00e4tet ut i ditt upptagningsomr\u00e5de? Kolla in bredbandskollen.se<\/a> s\u00e5 kan du f\u00e5 f\u00e4rska siffror. T\u00e4nk dock p\u00e5 att kolla efter pessimist-siffrorna, att det g\u00e5r snabbt p\u00e5 en fiberuppkoppling vet vi nog redan \ud83d\ude42<\/p>\n
Nul\u00e4ge f\u00f6r 1177.se\/Vastra-Gotaland\/<\/h2>\n
F\u00f6rst och fr\u00e4mst vill jag po\u00e4ngtera att de siffror jag gr\u00e4vt fram p\u00e5 inget s\u00e4tt \u00e4r d\u00e5liga. Jag har (p\u00e5 min fritid) sedan 2011 granskat 61 000 webbsidor p\u00e5 motsvarande s\u00e4tt, s\u00e5 jag tycker att jag har data att backa upp det p\u00e5st\u00e5endet<\/a>.<\/p>\n
Metoden f\u00f6r denna nollm\u00e4tning \u00e4r f\u00f6rst och fr\u00e4mst att jag plockat fram de tusen mest bes\u00f6kta sidorna under hela 2015 p\u00e5 V\u00e4stra G\u00f6talandsregionens del av 1177.se – detta kan man exportera fr\u00e5n webbstatistikverktyget Google Analytics som anv\u00e4nds nationellt.<\/p>\n
Steg f\u00f6r steg f\u00f6r detta finner du i bilderna nedan.<\/p>\n
\n\t\t\t \n\t\t\t\t![\"Steg](\"https:\/\/vgrblogg.se\/utveckling\/wp-content\/uploads\/sites\/3\/2016\/01\/steg-1-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tSteg 1 – Exportera adresser\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"Steg](\"https:\/\/vgrblogg.se\/utveckling\/wp-content\/uploads\/sites\/3\/2016\/01\/steg-1-1-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tSteg 1 – Exportera adresser\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"Steg](\"https:\/\/vgrblogg.se\/utveckling\/wp-content\/uploads\/sites\/3\/2016\/01\/steg-2-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tSteg 2 – \u00d6ppna exporten i kalkylprogram\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"Steg](\"https:\/\/vgrblogg.se\/utveckling\/wp-content\/uploads\/sites\/3\/2016\/01\/steg-2-1-150x150.png\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tSteg 2 – \u00d6ppna exporten i kalkylprogram\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n Sedan har jag k\u00f6rt dessa tusen webbadresser mot ett verktyg Google erbjuder, n\u00e4rmare best\u00e4mt Pagespeed<\/a>. Det g\u00e5r att anv\u00e4nda det verktyget manuellt, men jag har skrivit ett litet program som g\u00f6r det \u00e5t mig. Du som \u00e4r tekniskt lagd kan kolla in default.py p\u00e5 mitt Github-konto \u203a<\/a><\/p>\n
Pagespeed letar upp f\u00f6rb\u00e4ttringspotential fr\u00e4mst f\u00f6r att snabba upp en webbplats, men kollar ocks\u00e5 efter n\u00e5gra vanliga anv\u00e4ndbarhetsproblem. Anledningen till detta arbetss\u00e4tt \u00e4r att inte diskutera personliga anekdoter om vilken sida man har f\u00f6r sig var tr\u00f6g eller snabb. Genom att kolla massor med sidor f\u00e5r man mer trov\u00e4rdig data och kan l\u00e4ttare identifiera m\u00f6nster bland de f\u00f6rb\u00e4ttringar man kan g\u00f6ra.<\/p>\n
Statistik om en genomsnittlig sida p\u00e5 1177.se\/Vastra-Gotaland\/<\/p>\n
- \n
- 2 Mb CSS, det vill s\u00e4ga kod som styr utseendet.<\/li>\n
- 0,6 Mb Javascript, det sk\u00f6ter interaktion mellan webbplatsen och anv\u00e4ndaren.<\/li>\n
- 0,19 Mb bilder.<\/li>\n
- 0,1 Mb HTML, vilket \u00e4r sj\u00e4lva inneh\u00e5llet och dess struktur.<\/li>\n
- 98 tecken l\u00e5ng sidtitel, allts\u00e5 texten som syns i flikar i webbl\u00e4saren eller som klickbar text i s\u00f6kmotorer.<\/li>\n
- 10 st olika CSS-filer f\u00f6r att styra utseendet.<\/li>\n
- 5 st Javascript-filer.<\/li>\n
- 30 st filer allt som allt f\u00f6r en sidvisning.<\/li>\n<\/ul>\n
N\u00f6rdfakta: Dessa siffror \u00e5terspeglar okomprimerad m\u00e4ngd. Textfiler kan packas mycket effektivt, men inte bra nog f\u00f6r att problemet ska f\u00f6rsvinna. Referens till v\u00e4rdena finns hos Google Developers \u203a<\/a><\/em><\/p>\n
Vill man s\u00e4tta dessa siffror i relation till en anv\u00e4ndares upplevelse s\u00e5 kan man kolla in tj\u00e4nster som webpagetest.org<\/a>, eller lite mindre n\u00f6rdiga siffror p\u00e5 Pingdoms full page test<\/a>. En snabb f\u00f6rklaring \u00e4r att de 30 filerna som ska skickas kan f\u00f6rsena h\u00e4mtningen av sidan med en halv minut om det \u00e4r en l\u00e5ngsam mobiluppkoppling som anv\u00e4nds, minskar man antalet filer minskar just den l\u00e5ngsamheten. Inom den m\u00e5ttstocken kan jag som f\u00f6re detta webbutvecklare tycka att det \u00e4r lite slappt eller ogenomt\u00e4nkt att ha 10 st CSS-filer, det r\u00e4cker utm\u00e4rkt med en enda.<\/p>\n
![\"Sidtitel](\"https:\/\/vgrblogg.se\/utveckling\/wp-content\/uploads\/sites\/3\/2016\/01\/sidtitel-26-tecken-i-flik.png\")
<\/a><\/p>\nT\u00e4nkte inte g\u00e5 in p\u00e5 inneh\u00e5llsanalys i detta inl\u00e4gg, men notera att den genomsnittliga l\u00e4ngden p\u00e5 sidtitlarna \u00e4r 98 tecken. H\u00e4r kommer en ”ny” utmaning, n\u00e4mligen att f\u00e5 plats med sin sidtitel inom webbl\u00e4sarens flik. Som du ser p\u00e5 bilden intill f\u00e5r inte ens 30 tecken plats, d\u00e5 g\u00e4ller det att hush\u00e5lla och skriva det viktigaste f\u00f6rst. Det g\u00e4ller att man inte forts\u00e4tter att leva efter utdaterad praxis inom s\u00f6kmotoroptimering, n\u00e5got som \u00e4r l\u00e4tt h\u00e4nt d\u00e5 det st\u00e4ndigt f\u00f6r\u00e4ndras. Praxis just nu \u00e4r inom s\u00f6kmotoroptimering (SEO) \u00e4r att en sidtitel ska ha viktigaste orden s\u00e5 tidigt som m\u00f6jligt och att l\u00e4ngden ska vara mellan 50-70 tecken l\u00e5ng. H\u00e4r har man allts\u00e5 anledning till uppf\u00f6ljning med j\u00e4mna mellanrum och uppdatera sina redakt\u00f6rshandb\u00f6cker.<\/p>\n
P\u00e5 k\u00f6pet med Pagespeed f\u00e5r man ocks\u00e5 ett betyg, en siffra p\u00e5 hur bra Google anser att sidan \u00e4r. Det \u00e4r en siffra mellan 0 och 100, d\u00e4r 100 \u00e4r toppbetyget. De tusen sidorna som kollats hade i genomsnitt f\u00f6ljande betyg m\u00e4tt fr\u00e5n en mobilanv\u00e4ndares perspektiv:<\/p>\n
- \n
- 98.9 av 100 i anv\u00e4ndbarhet.<\/li>\n
- 50.7 av 100 i snabbhet f\u00f6r en mobilanv\u00e4ndare.<\/li>\n<\/ul>\n
Att inte ha toppbetyg i anv\u00e4ndbarhet p\u00e5 alla sina sidor \u00e4r f\u00f6rst\u00e5eligt. Fr\u00e5gan infinner sig dock hur l\u00e5gt man tycker det \u00e4r ok att g\u00e5? Genom att inte ha toppbetyg l\u00e4gger man krokben f\u00f6r sina anv\u00e4ndare – kanske illa nog f\u00f6r att det ska klassas som diskriminering av de med funktionsneds\u00e4ttning. Ett v\u00e4ldigt vanligt problem \u00e4ven v\u00e4lbyggda sajter har kring anv\u00e4ndbarhet \u00e4r att klickbara saker ligger f\u00f6r t\u00e4tt inp\u00e5 varandra. Det inneb\u00e4r att det kan vara sv\u00e5rt att tr\u00e4ffa r\u00e4tt sak f\u00f6r de med motoriska sv\u00e5righeter, samma sak f\u00f6r den p\u00e5 en skakig bussresa.<\/p>\n
F\u00f6r att s\u00e4tta snabbhetssiffran i perspektiv s\u00e5 har VGRs egna prestandabudget satt 85 av 100 som l\u00e4gsta acceptabla niv\u00e5 f\u00f6r v\u00e5r n\u00e4stkommande externwebb. Att sikta h\u00f6gt p\u00e5 detta omr\u00e5de \u00e4r l\u00e4ttare n\u00e4r man bygger nytt j\u00e4mf\u00f6rt med att putsa p\u00e5 en befintlig webbplats.<\/p>\n
Inte nog med detta, i samma k\u00f6rning f\u00e5r man \u00e4ven en subjektiv bed\u00f6mning om vad som \u00e4r b\u00e4st och s\u00e4mst. H\u00e4r vill man ha en s\u00e5 l\u00e5g siffra som m\u00f6jligt d\u00e5 den indikerar vad som sinkar upplevelsen. H\u00f6gst upp \u00e4r v\u00e5ra utmaningar, l\u00e4ngst ner det vi briljerar p\u00e5:<\/p>\n
- \n
- Inte blockera sidvisningen – 63<\/li>\n
- Aktivera komprimering (GZip)\u00a0 – 13<\/li>\n
- Anv\u00e4nda bufferminnet i webbl\u00e4saren – 11<\/li>\n
- Prioritera synligt inneh\u00e5ll – 9<\/li>\n
- F\u00f6rminska HTML-kod – 4<\/li>\n
- Optimera bilder – 3<\/li>\n
- L\u00e5ngsamma svarstider p\u00e5 webbservern – 2,5<\/li>\n
- F\u00f6rminska CSS-kod – 2<\/li>\n
- Se till att inneh\u00e5ll ryms p\u00e5 mobil sk\u00e4rm – 0,64<\/li>\n
- F\u00f6rminska Javascript-kod – 0,38<\/li>\n
- Tillr\u00e4ckligt stor klickyta – 0,28<\/li>\n
- Inte kr\u00e4va webbl\u00e4sartill\u00e4gg (som Adobe Flash, Microsofts Silverlight och liknande)\u00a0 – 0,02<\/li>\n
- Undvik h\u00e4nvisningar p\u00e5 landningssidor – 0<\/li>\n
- G\u00f6r sidan responsiv – 0<\/li>\n
- Anv\u00e4nd l\u00e4sbara textstorlekar – 0<\/li>\n<\/ol>\n
Ja, hur anv\u00e4nder man denna information t\u00e4nker du? B\u00f6rjar man uppifr\u00e5n kan man fundera p\u00e5 hur sv\u00e5rt det \u00e4r att lindra eller l\u00f6sa respektive problem f\u00f6r hela webbplatsen. I vissa fall \u00e4r insatsen faktiskt ganska liten, punkt tv\u00e5 och tre i ovan lista har jag sj\u00e4lv fixat p\u00e5 n\u00e5gra webbplatser p\u00e5 mindre \u00e4n en arbetsdag. Punkt ett \u00e4r d\u00e4remot v\u00e4ldigt jobbig, och antagligen dumt, att fixa p\u00e5 en befintlig webbplats. Man kan kolla om det g\u00e5r att lindra det med n\u00e5gra enkla f\u00f6rb\u00e4ttringar.<\/p>\n
S\u00e5 som jag sj\u00e4lv anv\u00e4nder datak\u00e4llan bakom listor som dessa \u00e4r att sortera fram de v\u00e4rsta syndarna och f\u00f6rs\u00f6ka \u00e5tg\u00e4rda dem. Det kan vara att man r\u00e5kat ladda upp en extremt h\u00f6guppl\u00f6st bild, ja d\u00e5 f\u00e5r man f\u00f6rminska den och ladda upp p\u00e5 nytt. H\u00e4r kommer kopplingen till webbstatistik in igen – optimera inte inneh\u00e5ll som s\u00e4llan anv\u00e4nds, b\u00f6rja med det som \u00e4r popul\u00e4rast f\u00f6r mest effekt.<\/p>\n
N\u00e4r man best\u00e4mt sig f\u00f6r att ta bort sina sista Flash-animationer blir de l\u00e4tta att hitta \u00e4ven p\u00e5 en v\u00e4ldigt stor webbplats, filtrera fram sidorna som fick d\u00e5ligt betyg p\u00e5 just den punkten.<\/p>\n
N\u00e4sta steg – en \u00e4nnu b\u00e4ttre sajt!<\/h2>\n
Vad ska man g\u00f6ra av dessa siffror? L\u00e4ttast \u00e4r att ta ett omtag n\u00e4r man v\u00e4l bygger om webbplatsen. Man kan (och b\u00f6r) s\u00e4tta upp en prestandabudget med de krav man st\u00e4ller p\u00e5 sin n\u00e4stkommande webbplats. Dels f\u00f6r att man under designprocessen inte ska bete sig sl\u00f6saktigt gentemot den prestanda anv\u00e4ndarna beh\u00f6ver men ocks\u00e5 f\u00f6r att s\u00e4tta konkreta siffror p\u00e5 det man best\u00e4ller. L\u00e4mna \u00f6ver ”bevisb\u00f6rdan” till de som utvecklar webbplatsen, l\u00e5t dem rapportera hur det som byggs lever upp till kraven med ett representativt inneh\u00e5ll.<\/p>\n
Ska man inte bygga nytt \u00e4n p\u00e5 l\u00e4nge kan man ta listan med f\u00f6rb\u00e4ttringspotential och prata med sina utvecklare. Inte s\u00e4llan finns f\u00f6rb\u00e4ttringar som b\u00e5de har en hel del p\u00e5verkan men inte tar mer \u00e4n n\u00e5gon timme att fixa f\u00f6r praktiskt taget hela webbplatsen.<\/p>\n
Att formulera sina m\u00e5l \u00e4r inte n\u00f6dv\u00e4ndigtvis enkelt. Ska man n\u00e5gonsin ha under 100 i anv\u00e4ndbarhetsbetyget? Hur l\u00e5ng tid \u00e4r ok att v\u00e4nta f\u00f6r att f\u00e5 fatt p\u00e5 en webbsida under optimala f\u00f6rh\u00e5llanden kontra el\u00e4ndiga f\u00f6rh\u00e5llanden?<\/p>\n
Inom V\u00e4stra G\u00f6talandsregionen har vi dokumenterat v\u00e5r f\u00f6rsta version av en prestandabudget f\u00f6r de webbplatser vi sj\u00e4lva ansvarar f\u00f6r. Jag, personligen, ser g\u00e4rna att arbetss\u00e4ttet med en (publikt \u00e5tkomlig) prestandabudget anv\u00e4nds \u00e4ven p\u00e5 de webbplatser vi delar med andra organisationer. Om det finns n\u00e5got jag kan hj\u00e4lpa till med \u00e4r det bara att h\u00f6ra av sig.<\/p>\n
- Yahoo: 400 millisekunder snabbare = 9% mer trafik<\/a><\/li>\n