Sök Logga in

Webbanalys på Varberg kommuns webbplats

Marcus Österberg 2016-01-26 11 minuters läsning Webbanalys Webbprestanda Google Analytics

Detta gräv är gjort i samarbete med Varberg kommuns webbstrateg Mattias Skoog, han har nämligen hjälpt mig med lite exporter från deras webbstatistik. Varbergs 1000 mest populära sidor hade under 2015 knappt 2 miljoner sidvisningar totalt. Startsidan stod för nästan 300 000 av dessa och den tusende mest populära sidan hade 219 sidvisningar.

Mattias berättade innan jag började med mina webbanalys-verktyg att de är på gång med en redesign av sin webbplats. Så för att vara lite hjälpsam så tänkte jag vinkla denna rapport om webbanalys mot just nollmätning av befintlig webbplats och vilka siffror de borde våga ha i en prestandabudget.

Poängen med nollmätning och en prestandabudget vid nybygge?

Nollmätning är bra för att veta vilken nivå ens nuvarande webbplats har. Samtidigt är det något man kan lämna över till sina utvecklare, kanske kan det bidra till att sporra dem till att göra ett ännu bättre jobb med nästa webbplats?

En högst personlig anekdot på den fronten är att Västra Götalandsregionens webbutvecklare nu, efter att vi etablerat vår prestandabudget, börjat läxa upp mig på webbprestanda, lära mig nya grejer, utmana de mål vi har och förklara på vilket sätt vi kan höja ribban över tid.

Det man har att vinna på att börja med att analysera de mest populära sidorna på webbplatsen är att förbättringar man kan göra på de sidorna har stor inverkan på användarnas upplevelse av webbplatsen. När man känner att man gjort tillräckligt med de populäraste sidorna kan man börja jobba sig bakåt och kolla de värsta avvikelserna bland alla sidor.

Dokumentera din prestandabudget (eller knyck en kopia av VGR) - NU, för böfvelen!

När man som Varbergs kommun står inför att bygga en ny webbplats är min oförbehållsamma rekommendation att sätta upp en prestandabudget. Det går ut på att dokumentera sin ambition. Det är saker högt som lågt. Lite mer ingående än de klassiska kraven om vilken är som är den äldsta versionen av webbläsare man orkar stödja, vilken skärmstorlek, att det ska vara tillgängligt.

Arbetssättet med en prestandabudget är något jag som webbanalytiker är mitt inne i på VGR. Jag, och mina webbiga kollegor, inser emellanåt vilken speciell sits vi har som en jätteorganisation att kunna ha individer som fokuserar på enskilda ämnen många andra inte har möjlighet till (läs att hos VGR kan man få nörda ner sig - ordentligt). Vi försöker ofta skapa extra nytta för varje skattekrona genom att släppa resultatet av vårt arbete öppet och försöker kommunicera med andra organisationer så att de kan dra nytta av vad vi gör.

"Orka göra en egen prestandabudget *suck*"

VGR:s prestandabudget är inget undantag - den är öppen, publikt tillgänglig, förvaltas löpande (av mig, Marcus), versionshanteras och är formellt beslutad av VGR:s kommunikationsdirektör oktober 2015. Du hittar prestandabudgeten som en bilaga i Västra Götalandsregionens stilguide.

Du kan hålla koll utan att ha en webbanalytiker till hands!

Google ger förslag på bättre Pagespeed-betyg

Du som har Google Analytics kanske inte sett det ännu, men det finns en vy under Beteende -> Webbplatshastighet som heter Hastighetsförslag. Där får man lite data på de vanligaste sidorna. Tyvärr kan man inte sortera listan efter lägst Pagespeed-betyg, förhoppningsvis kommer det. Men för husbehov kommer du väldigt långt med detta (och i en snar framtid släpper jag min nya tjänst inom webbprestanda - webanalytics.help - som kommer bevaka din sajt åt dig).

Alla har nytta av en snabbare webbplats

Det finns organisationer som kollat upp vad en ganska liten skillnad i hastighet på webben gör för skillnad, se nedan lista. Du som vill efterforska kan alltid klicka på länkarna och nörda ner dig ordentligt.

Om du möter motstånd kring att webbprestanda är viktigt tycker jag att du skriver ut lämplig rapport ovan, lämnar över till berörd person för att sedan bjuda på grodbakelse för att med huvudet på sned lyssna på varför alla ovanstående företag har fel, eller så förbeställer du min kommande bok om webbanalys med fokus på användarens behov :P

Statistik för varberg.se av idag

Med Mattias hjälp har jag kommit över de 1000 mest besökta sidorna på varberg.se - dessa har körts mot Googles webbanalys-verktyg Pagespeed. Totalt har vi fångat in 30 802 kvalitetsindikatorer för dessa sidor.

Ladda ner en CSV-export med Varbergs data från databasen med webbprestanda - webbanalys-varberg.csv.zip (550 Kb) ›

Ska man börja med de övergripande betygen så:

  • Användbarhet 93.3 av 100 från en mobil synvinkel.
  • Google Pagespeed 52.2 av 100 möjliga från en mobilanvändares synvinkel.

Dessa betyg är på inget sätt dåliga, exempelvis är de bättre än landstingens gemensamma webbplats 1177 Vårdguiden som har 50,7 av 100 i snitt på nuvarande webbplats. 1177.se brukar vinna priser för sin webbplats med jämna mellanrum, så lite av ett kännetecken för välbyggd ved kan man nog anse att de är.

Så här ser en genomsnittlig sida ut på varberg.se:

  • 1,5 Mb Javascript (okomprimerat, för den noggranne)
  • 0,7 Mb CSS, alltså stilmallar vilket är det som styr utseende (okomprimerat)
  • 0,3 Mb bilder.
  • 0,27 Mb med HTML-kod, vilket innebär innehåll och dess struktur (okomprimerat).
  • 0,01 Mb med cookies och övrigt
  • 84 st filer, ska man se strikt på detta så kan varje fil bidra med över en sekund onödig blockering av webbsidan innan den kan visas
  • 74 st "statiska" filer, det betyder filer som kommer ha samma innehåll imorgon som idag och borde ingå i ett strategiskt tänkt kring återanvändning hos återkommande besökare.
  • 25 st Javascript-filer, där egentligen ett fåtal skulle räcka och varje fil kan bidra med runt en sekunds onödig väntan om användaren befinner sig på en riktigt seg uppkoppling.
  • 19 st CSS-filer - se ovan om seg uppkoppling
  • 10 st olika webbtjänster inblandade, vilket i många fall bidrar till snabbare uppkoppling så länge som man är kvar på 90-talets version av protokollet HTTP. Går man över till HTTP/2 förändras praxis radikalt på denna punkt, men till förmån för de andra uppdelningarna på flera olika filer.

87 av 1000 sidor fanns inte kvar nu inom ett år, eller om de nu hade problem att visa upp sig. Det tyder på att man kan behöva jobba mer med sin URL-strategi, eller se över varför man slänger 404-fel bland de tusen mest inarbetade adresserna.

Googles Pagespeed-API, som jag använt för att göra denna webbanalys åt Varberg kommun, listar också vilken förbättringspotential man har. Detta viktas efter vilken effekt det skulle ha enligt Googles måttstock, någon som med största sannolikhet påverkar sökmotoroptimeringen på Google och andra sökmotorer som värdesätter välbyggda webbplatser. Det man på nuvarande webbplats för Varbergs kommun redan briljerar inom är enligt Google Pagespeed:

  • Inga som helst onödiga hänvisningar av landningssidor.
  • Inte behov a webbläsartillägg som Adobe Flash eller Microsoft Silverlight.
  • Webbserverns svarstid - relativt betyg 0.003
  • Se till att innehåll får plats på skärmen (även liten skärm) - 0.03

Om man skulle börja i andra änden och kolla vilka större bekymmer som Google hittar enligt sitt Pagespeed-ramverk blir det följande, ordningen värst överst - notera viktningssiffran i slutet:

  1. Blockering av sidan visning (detta har de flesta bekymmer med) - 66.34
  2. Optimera bilder - 20.8
  3. Använd webbläsarens cache = sätt livslängd på filer som inte lär uppdateras - 11.5
  4. Positionera innehåll inom synlig yta (även tabeller :)) - 3.5
  5. Knappar och länkar med lagom avstånd - 2.7
  6. Prioritera synligt innehåll - 2.4
  7. Förminska Javascript - 0.9
  8. Förminska CSS/stilmallarna - 0.6
  9. Aktivera komprimering av textinnehåll (GZip) - 0.2
  10. Förminska HTML - 0.12
  11. Använd läsbar textstorlek - 0.12

Ovan lista använder man som inspiration till sin prestandabudget, för att se vilka mål som är rimliga, för att göra lite bättre ifrån sig än med befintlig webbplats!

Innehållsanalys - sidtitlars längd

Det första konstaterandet är att den genomsnittliga sidtiteln, alltså namnet på sidan så som den visas i webbläsarens flikar eller som klickbar text i sökresultat, endast är 32,8 tecken lång. Det kan var både bra och dåligt beroende på vad medborgarna faktiskt söker efter. Skulle man gå strikt efter en sökmotoroptimerares syn på praxis så är de udda nog egentligen för korta, man vill ha mellan 50-70 tecken för att få med så många lockande ord som möjligt. Samtidigt kanske man gör helt rätt, om rätt ord är med i dessa korta sidtitlar så har man en högre sökordsdensitet.

En resonlig prestandabudget för nästa webbplats?

Kollar jag på de siffor jag fått fram så är det inga jättesimpla fixar man kan ordna med för att få ett ännu bättre betyg på nästa webbplats. Punkt ett, ovan, är den man bör ge sig på vid nybyggnation men det är samtidigt den svåraste. Optimera bilder kanske blir lite bättre i och med att Varberg kör Sitevision och de har nu fixat vad de anser är vettig responsiv bildhantering, men det kanske tar en stund innan Google håller med om dess kvalitet.

Kanske enklast är att se till att avståndet länkar/knappar sinsemellan är bra nog på nästa design, alltså punkt fem ovan. Det handlar ändå om mobila användare och också något som gynnar de på dator som råkar ha motoriska svårigheter.

Punkt tre ovan, att använda webbläsarens cache, kanske är den billigaste prestandavinsten både på en befintlig webb och mest logisk att vara benhård kring när man gör större förändringar i designen. Det är inte svårare än att sätta förväntad livslängd till minst 30 dagar på filer man inte räknar med uppdateras snart. Om de nu råkar uppdateras snart är det bara att ge dem ett nytt namn så har man rundat problemet.

Vilken prestandabudget borde Varberg kommun ha?

Här kommer ett förslag på vad jag tror är genomförbart. Mitt förslag utgår från Västra Götalandsregionens prestandabudget, men med lite eftergifter, nämligen:

  1. Max 699kb för en sidvisning. (till att börja med, sedan sänka till 399 Kb i nästa version)
  2. Under 5 sekunder för komplett laddning av sida, mätt från gynnsam trådad uppkoppling (sedan sänka under 3 sekunder).
  3. Under 15 sekunder för komplett laddning av sida mätt på 3G-uppkoppling. (sedan sänka under 10 sekunder).
  4. Vara testade och säkrade mot WCAG 2 nivå AA. (kan anses som lagkrav enligt diskrimineringslagstiftningen 2015)
  5. Anses vara mobilvänliga enligt Googles mobilvänlighetstest.
  6. Med exempelinnehåll uppvisa minst 65 av 100 i Google Pagespeed med mobila inställningar, och minst 80 för dator. (för att snart öka till 85, och 90 av 100).
  7. Max 2 CSS-filer laddas in. (det räcker med en, men två är inte hela världen).
  8. Max 3 Javascript-filer laddas in. (mest för att inte chocka utvecklarna, det räcker med en enda, men 3 går bra)
  9. Använda SVG sprites (eller motsvarande teknik) för att minska antalet bildfiler att ladda ner.
  10. Strukturell CSS-kod inkluderas i HTML-koden enligt god prestanda-praxis för snabb initial visning av innehållet.

Det är inte så att man behöver vara utvecklare för att kunna jobba med en prestandabudget. Man kan mycket väl utgå från tjänster man redan har eller sådana man har råd med. Något man möjligen redan har fast behöver bli inbjuden av sina IT-kollegor är New Relic och Pingdom. De övervakar att sajter är igång, men det finns en del data där du kan ha nytta av.

Genomsnittliga svarstider från Pingdom
Exempel på hur några sajter ser ut med enkla kontroller av svarstider hos Pingdoms betaltjänst.

Vill man krydda till prestandabudgeten lite så kan man sätta ett värde som kompletterar punkt 2, nämligen vilken svarstid man vill ha. Det är lite som att mäta reaktionstiden på webbplatsen, tiden det tar att få en livssignal innan webbservern börjar skicka innehållet. Sånt kan man kolla med tjänster som Pingdom. Denna webbplats, webbstrategiforalla.se, har 0,3 sekunder och min arbetsgivares webbplatser har mellan 0,7 och hela 2,4 sekunder på nuvarande webbplatser. I denna siffra kan en stor del av en långsam webbplats gömma sig, därför kan det vara en god poäng att vara tydlig med krav - åtmintone när man bygger nytt.

Andra tips på verktyg för att få lite översikt - utan att behöva koda - är Google Analytics och Googles Search Console. Där finns tips på vilka sidor som lider av problem. I Search Console är det under Search Traffic -> Mobile Usability du hittar vilka problem som finns på sajten. För dig med Google Analytics är det under Beteende -> Webbplatshastighet -> Hastighetsförslag som du får reda på vad som kan bli bättre med populära sidor på webbplatsen.

Mattias Skoog, webbstrateg på Varbergs kommun, kommenterar

Först och främst vill jag tacka för denna intressanta och lärorika analys. Överhuvudtaget väldigt användbart och nyttigt med granskade ögon utanför den egna organisationen som sätter lite extra press och ger nya insikter. Flera delar har vi koll på/vetskap om sedan tidigare, andra ger oss uppslag till kommande diskussioner och reflektioner.

Vi har faktiskt ganska nyligen tagit våra första steg med att sätta upp mål och kvalitetsfaktorer för webbplatsens prestanda. Och jag anser att det är en mognadsprocess som behöver lite tid för att få riktigt fäste i organisationen. Att det är viktigt att allt ifrån strateger, redaktörer, tekniker men också andra medarbetare och chefer har en god förståelse för vad som gör en webbplats användbar på riktigt. Men också för att hitta arbetssätt och metoder för att ständigt kunna höja ribban och bli bättre.

Vi är mitt uppe i en redesign av varberg.se som anpassas till den nya grafiska profil som antagits. I projektet passar vi även på att föra in några specifika delar med syftet att stärka webbplatsens prestanda. Vi har exempelvis satt upp mål (och krav) utifrån Google pagespeed och för allt oftare in ordet prestanda på samma sätt som tillgänglighet och användbarhet i våra diskussioner. Och prestanda får allt större vikt i de val vi gör. Att det kommer finnas förbättringsområden även efter lansering (mars 2016) är uppenbart. Men nu har vi en bra ”nollmätning” och bra förslag till nästa nivå av vår prestandabudget. Tack.

Tack själv Mattias och Varberg! Det var en rolig bonus att kunna utgå från era tusen mest besökta sidor, det gör analysen med solid.

Efter Varberg är det nu bara Trelleborg och Malmö kvar som jag lovat att gräva runt på. Ska försöka hitta en ny infallsvinkel på de testerna, sedan fokuserar jag på att skriva färdigt boken om webbanalys. Hoppas på att den kommer ut efter sommaren.

Relaterat innehåll