SiteVision-priset Guldhanden - hur står sig de nominerade inom offentlig sektor?

Varje år delar SiteVision ut priset Guldhanden inom några olika kategorier till de bästa webbplatserna som använder SiteVision som CMS. Här följer ett test av hur de står sig kring webbprestanda med Google Pagespeed.

Om webbplatsen Sitevision

Totalbetyg:: 3.97 av 5
Webbstandard:: 4.37 av 5
Tillgänglighet:: 4.83 av 5
Hastighet:: 3.80 av 5

Se alla testdetaljer för Sitevision

SiteVision säljer ett av de större webbpubliceringssystemen (CMS) på den svenska marknaden. Företaget SiteVision utmärker sig genom att ha många kommuner som sina kunder. Varje år delar SiteVision ut priset Guldhanden inom några olika kategorier till de bästa webbplatserna som använder SiteVision som CMS.

Så här skriver företaget SiteVision om sitt pris Guldhanden:

“Det prestigefyllda priset Guldhanden har sedan 2011 delats ut årligen till webbplatser och intranät byggda i SiteVision. Priset som hyllar lösningar som sticker ut, som bäst uppfyller sitt syfte och möter sin målgrupp delas ut vid SiteVisiondagarn”

2018 års finalister inom kategorin offentlig sektor

Årets nominerade är:

Hur går testet till?

Nedan är en beskrivning över hur hur vi testade webbplatsernas prestanda och användbarhet.

För de tre översta av de nominerade testade vi hundra undersidor vardera. Tyresö kommun fick 69 webbsidor, vilka vi valt via tjänsten HackerTarget.com för att få listor på länkar från en webbplats. Anledningen till det är att Tyresö kommun inte anger att de har någon sitemap i sin robots.txt, så redan där hade vissa webbstandardtalibaner (likt undertecknad) nog gett dem en inledande minuspoäng.

Testet körs i två olika omgångar på samtliga av de utvalda webbsidorna på respektive nominerad webbplats. Först mot Google Pagespeed API version 2 och sedan mot version 4.

Version 2 används för att vaska fram hur bra webbplatserna är på några användbarhetskriterier, exempelvis om knappar är av sådan storlek att det är lätt att träffa dem och om texten är läsbar. Testet ger oss också ett övergripande betyg på webbplatsernas användbarhet.

Det test som körs med hjälp av version 4 ligger sedan till grund för allt som har med webbprestanda att göra. Förra årets prestandatester kördes med Pagespeed API 2.0 och därför kan inte resultaten jämföras fullt ut mellan 2017 och 2018 - den undersökningen finns att ladda ner på Smashwords.

Resultatet för webbplatsernas prestanda och användbarhet

Även om man ska vara försiktig med genomsnittsvärden ger genomsnitt en bra bild av hur en vanlig sidvisning ter sig på de testade webbplatserna.

Av de 40 mer långsamma sidorna återfinns 39 st hos Riksrevisionen. Riksrevisionen har med andra ord en del att ta tag i jämfört med de andra. Dock har Försvarshögskolan tagit jumboplatsen med en sida med hastighetsbetyget 46 av 100 i betyg, på en sida som kräver inloggning (www.fhs.se/webdav/files/Bibliotek/Om%20biblioteket/Primo_sep_17_18.html) som kanske borde använt ett vanligt inloggningsformulär istället.

De fem snabbaste webbsidorna

När man tittar på de fem snabbaste webbsidorna är alla fyra nominerade webbplatser representerade. Försvarshögskolan ligger på första och andra plats med betyg 96 respektive 95 av 100. Tätt därefter ligger Riksrevisionen med 94 av 100. På fjärde plats kommer Tyresö kommun med 82 och sedan Länsstyrelserna med 80. Även om det är en relativ stor skillnad mellan tredje och de följande platserna så bedömer vi det som godkända resultat.

Den genomsnittliga finalistens webbsida

Hastigheten på de nästan fyrahundra undersökta sidorna är bra (75 av 100). Resultatet går inte att jämföra med förra året eftersom vi använt annan version av Pagespeed i år, men om du ändå försöker så tycks den nya versionen av Pagespeed ge en hel del högre betyg.

För dig som utformat webbplatser tidigare så är nedanstående lista förhoppningsvis självförklarande. För dig som behöver förtydligande om respektive begrepp kan du hitta det närmare i Google Pagespeeds dokumentation.

Alla mätvärden från Google Pagespeed kan förklaras kort så här:

numberResources - Antalet HTTP-resurser som laddas in av webbsidan.
numberHosts - Antalet unika värdar som refereras av webbsidan.
totalRequestBytes - Totalstorleken för alla HTTP-förfrågningar, inklusive cookies.
numberStaticResources - Antalet statiska (och troligen cachningsbara) resurser på webbsidan.
htmlResponseBytes - HTML-dokumentets storlek mätt i okomprimerade bytes, inkluderar eventuella iframes.
textResponseBytes - Antalet bytes (okomprimerat) för textresurser annat än de som har eget mätvärde. Dvs inte HTML, CSS eller skript.
overTheWireResponseBytes - Mängden data i bytes som förs över vid en sidvisning. En standardkomprimering med Gzip används för att uppskatta mängden.
cssResponseBytes - Mängden okomprimerade bytes för att skicka alla CSS-resurser.
imageResponseBytes - Mängden dataför alla bildresurser, mätt i bytes.
javascriptResponseBytes - Mängd data för alla Javascript-resurser på sidan, mätt i okomprimerade bytes.
otherResponseBytes - Mängd data för andra typer av resurser på webbsidan.
numberJsResources - Antalet Javascript.
numberCssResources - Antalet CSS-filer.
numTotalRoundTrips - Antalet följdfrågor till webbservern för att ladda ner en komplett sida.
numRenderBlockingRoundTrips - Antalet följdfrågor för att ladda in de resurser/filer som blockerar sidvisningen rent visuellt.

Statistik om de nominerade webbplatsernas genomsnittliga webbsida:

javascriptResponseBytes: 1 686 513 bytes (okomprimerat)
overTheWireResponseBytes: 933 643 bytes
cssResponseBytes: 752 272 bytes (okomprimerat)
imageResponseBytes: 312 951 bytes
htmlResponseBytes: 107 849 bytes (okomprimerat)
textResponseBytes: 90 438 bytes (okomprimerat)
otherResponseBytes: 51 292
totalRequestBytes: 7 136 bytes för själva HTTP-frågan, inklusive cookies
numberResources: 65 st
numberStaticResources: 47 st
numTotalRoundTrips: 21 st
numberJsResources: 19 st Javascript-filer
numberCssResources: 13 st CSS-filer
numberHosts: 10 st värdar inblandade i en sidvisning
numRenderBlockingRoundTrips: 6 gånger måste webbläsaren hämta nytt material innan webbsidan visar upp sig

Reflektioner kring den framtagna statistiken

Till att börja med kan vi konstatera att 1,7 Mb Javascript är orimligt mycket. Det är 60 % mer än den genomsnittliga webbsidan inom offentlig sektor 2017. Man måste fråga sig till vilken nytta för användaren. CSS-filerna är dubbelt så stora som i offentlig sektor ett år tidigare.

Även antalet Javascript- och CSS-filer är fler på de nominerade webbplatserna jämfört med den genomsnittliga webbplatsen inom offentlig sektor året innan. För CSS-filer är siffran nästan dubbelt så hög. Det kan på ett ogynnsamt mobilnät innebära några extra sekunder att vänta, enbart för CSS-filerna, vilket skulle betyda att man överskrider praxis på under två sekunder för hela sidvisningen.

Om man bortser från antalet filer är det overTheWireResponseBytes som är mest intressant. Det anger hur mycket data som överförs på en genomsnittlig sidvisning. Det är en blandning av komprimerat och okomprimerat material och anger en uppskattning av den faktiska mängden.

Även numRenderBlockingRoundTrips är intressant och handlar om hur många gånger webbplatsen och webbläsaren behöver köra “ett skepp kommer lastat med kod” innan webbsidan kan visa upp sig. Om man inte kör HTTP/2 och användaren sitter på ett trögt 3G-nät kan detta innebära att laddtiden räknas i minuter istället för hundradelar av sekunder.

Nu över till förbättringspotentialen. Dessa kriterier finns i Google Pagespeed:

Avoid Landing Page Redirects - Regel för om webbsidan har mer än en hänvisning innan den slutliga destinationsadressen.
Enable Compression - Regel för om webbsidan skickar material okomprimerat som skulle kunna komprimeras med Gzip.
Improve server response time - Regel för om webbsidans svarstid är mer än 0,2 sekunder.
Leverage browser caching - Regel för om webbsidan skickar resurser som saknar cache headers eller om resurserna har kort förväntad livslängd.
Minify resources - Regel för om webbsidan skickar resurser som behöver minskas genom en teknik kallad minifiering.
Optimize images - Regel för om webbsidan har bilder som kan minska filstorleken utan att märkbart försämra den visuella kvaliteten.
Optimize CSS Delivery - Regel för om webbsidan h/r extern CSS som blockerar renderingen, vilket skjuter upp time to first render.
Prioritize visible content - Regel för om webbsidan kräver ytterligare hämtningar för att visa upp innehållet above the fold, alltså det som är omedelbart synligt utan att skrolla.
Remove render-blocking JavaScript - Regel för om webbsidan använder externa Javascript som blockerar delar av above the fold att visa upp sig.

Förbättringspotentialen är följande (störst är först):

MinimizeRenderBlockingResources: 22
PrioritizeVisibleContent: 4
LeverageBrowserCaching: 1
OptimizeImages: 1
AvoidLandingPageRedirects: 0
EnableGzipCompression: 0
MainResourceServerResponseTime: 0
MinifyCss: 0
MinifyHTML: 0
MinifyJavaScript: 0

Den i särklass största svagheten kring prestanda på dessa webbplatser tycks vara MinimizeRenderBlockingResources. Det har man gemensamt med praktiskt taget hela webben idag. Det är ett resultat av att många har haft svårt att bygga snabba webbplatser och samtidigt vara responsiva. En responsiv webbplats måste dock inte vara långsam.

Om en webbplats upplevs långsam kan ett första steg vara att se över mätvärdet First Meaningful Paint. Det är ett kvantitativt mätvärde som man kan jobba med för att förstå varför en webbplats responstid upplevs som långsam, vilket är mer kvalitativt/subjektivt.

Det är troligen bara LeverageBrowserCaching som kan vara enkel att ordna till, om än med en relativt låg viktning. Så länge det inte handlar om skript för webbanalys kan man med gott samvete sätta att varje fil på webbplatsen ska ha minst en månad förväntad livslängd.

Positivt är att de nominerade webbplatserna tycks ha fått till en bra bildoptimering (OptimizeImages). När den relativa potentialen anges till en etta är troligtvis inte prestanda en anledning att undersöka om man kan bättra sig.

Hur är det med användbarheten?

86,3 av 100 var genomsnittet i 2017 års undersökning av alla inom offentlig sektor. Bland de nominerade till SiteVisions Guldhanden 2018 är genomsnittet häpnadsväckande 100 av 100 möjliga för användbarhet. I fallet med användbarhet är det samma version av testet som körts 2017 och 2018.

Saker inom användbarhet som är vanliga att inte lyckas med är bland annat att innehållet inte får plats på en mobilskärm, att knappar och länkar är för små för att träffas eller att textstorleken är för liten. Detta var dock inget nämnvärt problem för den genomsnittliga webbsidan som vi undersökt.

Man kan dock argumentera för att långsamma sidor har en brist när det gäller användbarhet. Men egentligen är det tillgänglighet man pratar om när något är så pass långsamt att människor (både med och utan kognitiv funktionsnedsättning) inte kan bibehålla fokus under den tiden de måste vänta.

Hur gick det för finalisterna?

Försvarshögskolan

Försvarshögskolan har fullt betyg i genomsnitt när det gäller användbarhet. Det visar att man inte har några systematiska problem med storlek på text, att klickbara element är för tätt placerade eller att text är svår att läsa på en mobil enhet.

Mindre bra är att man har 65 av 100 i webbprestanda enligt Google Pagespeed. Försvarshögskolan ligger 10 procentenheter under genomsnittet för de fyra webbplatserna. Det kan ha flera orsaker, men vi kan konstatera att Försvarshögskolan har 3,4 Mb med Javascript till skillnad från 1,7 Mb i genomsnitt för de fyra nominerade och det kan vara en orsak till det lägre resultatet.

overTheWireResponseBytes är 1,5 Mb, vilket kan ställa till med problem för de användare som åker tåg eller buss i glesbygd där man ofta har antingen Edge eller 3G. Ytterligare komplicerande faktor i dessa områden är att mobiloperatörer har börjat lägga ner sina 3G-nät för att istället behålla 4G och det extremt långsamma 2G-nätet. Men det är inte alltid 4G-täckningen finns ens längsmed tågrälsen.

Data om den genomsnittliga sidvisningen på Försvarshögskolan:

javascriptResponseBytes: 3 379 786
overTheWireResponseBytes: 1 495 919
cssResponseBytes: 984 508
otherResponseBytes: 237 231
imageResponseBytes: 139 241
htmlResponseBytes: 37 989
totalRequestBytes: 10 399
textResponseBytes: 134
SPEED: 65
numberResources: 59 st
numberStaticResources: 39 st
numberJsResources: 27 st
numTotalRoundTrips: 14 st
numberHosts: 11 st
numberCssResources: 10 st
numRenderBlockingRoundTrips: 8 st

Relativ potential hos Försvarshögskolan:

MinimizeRenderBlockingResources: 34
LeverageBrowserCaching: 1

Länsstyrelserna

Länsstyrelsens domän består av en webbplats per län, och de sidor som utvärderats kommer från en handfull olika län.

Data om den genomsnittliga sidvisningen på Länsstyrelserna:

javascriptResponseBytes: 1 686 513
overTheWireResponseBytes: 933 643
cssResponseBytes: 752 272
imageResponseBytes: 312 951
htmlResponseBytes: 107 849
textResponseBytes: 90 438
otherResponseBytes: 51 292
totalRequestBytes : 7 136
SPEED: 75
numberResources: 65
numberStaticResources: 47
numTotalRoundTrips: 21
numberJsResources: 19
numberCssResources: 13
numberHosts: 10
numRenderBlockingRoundTrips: 6

Relativ potential hos Länsstyrelserna:

MinimizeRenderBlockingResources: 48
OptimizeImages: 17
PrioritizeVisibleContent: 8
LeverageBrowserCaching: 7

Länsstyrelsen har 7 i LeverageBrowserCaching vilket skulle kunna förbättras för att öka på hastigheten på sidan. Att bättra på sin browser-caching är ofta relativt enkelt och skulle gagna webbplatsen betydligt. Vidare så är det nog enklare att styra upp bildhanteringen än att ordna med MinimizeRenderBlockingResources, eftersom man då mer eller mindre måste bygga om hela webbplatsen.

Riksrevisionen

Att ha 62 av 100 i hastighet är ett förhållandevis lågt resultat. Tidigare har Google satt siffran 80 av 100 som ett bra och eftersträvansvärt resultat. Den siffran är dock borta, men om man jämför med de andra nominerade till Guldhanden eller med förra årets resultat är det en underprestation. Då ska man komma ihåg att med årets testmetod är genomsnittsbetyget högre jämfört med föregående testmetod.

Data om den genomsnittliga sidvisningen hos Riksrevisionen:

overTheWireResponseBytes: 1 010 512
javascriptResponseBytes: 968 459
cssResponseBytes: 714 555
otherResponseBytes: 366 227
htmlResponseBytes: 99 601
imageResponseBytes: 67 977
totalRequestBytes: 5 082
SPEED: 62
numberResources: 40
numberStaticResources: 25
numTotalRoundTrips: 14
numberCssResources: 13
numberJsResources: 7
numRenderBlockingRoundTrips: 7
numberHosts: 5

Relativ potential hos Riksrevisionen:

MinimizeRenderBlockingResources: 38
LeverageBrowserCaching: 1

Tyresö kommun

Det är helt i sin ordning att ha 75 av 100 i hastighet som i Tyresös fall, även fast man bör sikta högre med de mest prioriterade sidorna. Samtidigt är det mindre bra att den genomsnittliga sidan är 1,9 Mb stor när den är komprimerad och klar. Att ha 2,4 Mb okomprimerad Javascript är slösaktigt och vi ställer oss frågan hur det kommer det sig att man behöver 1,4 Mb med CSS. Med tanke på detta är det bra jobbat att inte betyget dras ner mer.

Data om den genomsnittliga sidvisningen hos Tyresö kommun:

javascriptResponseBytes: 2 373 226
overTheWireResponseBytes: 1 888 225
cssResponseBytes: 1 355 302
imageResponseBytes: 873 372
otherResponseBytes: 174 640
htmlResponseBytes: 54 108
totalRequestBytes: 7 234
SPEED: 75
numberResources: 68
numberStaticResources: 61
numberJsResources: 22
numTotalRoundTrips: 21
numberCssResources: 11
numberHosts: 8
numRenderBlockingRoundTrips: 7

Om Tyresö kommun minskar antalet filer och tar bort all onödig Javascript och den CSS som troligen inte används skulle webbplatsen förmodligen närma sig 90 av 100. För att passera 90 behöver man troligtvis också jobba med sin render-blocking. 7 roundtrips är inte mycket, men som nedanstående resultat visar är det här webbplatsen har sin största förbättringspotential enligt Google Pagespeed 4.0.

Relativ potential hos Tyresö kommun:

MinimizeRenderBlockingResources: 24
LeverageBrowserCaching: 1
OptimizeImages: 1

Tyresö kommuns användbarhet

Tyresö uppnådde 99 av 100 i Usability av Google Pagespeed 2.0, vilket visserligen är bra men nog blir man nyfiken på att de andra webbplatserna fick toppbetyg. Dock ger inte Pagespeed några tips om vad som kan förbättras för att uppnå fullt betyg. Kanske är denna otydlighet i detaljer en anledning till att Google börjat erbjuda ett nyare API där man inte längre utvärderar användbarheten?

De flesta av de testade sidorna på Tyresö kommuns webbplats fick 99 i betyg, en handfull fick 100 och denna sida fick 98:

Adresslista till föreningar inom det sociala området - Tyresö kommun

När delar SiteVision ut sin utmärkelse Guldhanden?

Guldhanden delas ut under SiteVisiondagarna som arrangeras i slutet av oktober i Örebro.

I juryn sitter följande personer:

Pierre Du Rietz, Chefsanalytiker och VD för Web Service Award
Sara Rösare, Språkkonsult, Språkkonsulterna
Cecilia Hermansson, User Experience Designer på inUse
Anders Korsvall, VD SiteVision AB
Ulrika Sandberg, Customer Success Manager, SiteVision AB

Mer om SiteVision och Guldhanden samt länk till nedladdning av datakällan för testet

Tack till alla de som bidragit med korrekturläsning!