Hur mår svenska partiers webbsidor? (del 1)

12 September 2018


Jag har en hemlighet! En månad innan riksdagsvalet började jag mäta och analysera några av Sveriges partiers webbsidor för att se hur bra vi är i Sverige på att bygga bra webb. Spännande va? Jag valde ut några partier, testade deras startsida och den sida som sammanfattar deras politik. De testades timme efter timme för att se hur dom mår, hur snabba dom är och hur dom är byggda. Jag använde sitespeed.io för att mäta och analysera sidorna (men du skulle kunna göra samma sak med ett det andra öppna källkodsmätverktyget WebPageTest eller ett kommersiellt verktyg som du får betala pengar för och får ut mindre information).

I tre delar kommer jag berätta vad jag hittat och vad jag gjort och hur det står till med webbhantverket i Sverige. Idag blir det en överblick av vad jag gjort och några djupdykningar.

Varför?

Jag vill veta hur bra är vi på webb egentligen i Sverige. Det viktigaste tillfället för våra politiska partier är valet och därför borde dom se till att satsa på att bygga de bästa, mest tillgängliga och snabbaste webbsidorna. Därför tänkte jag kolla hur det står till. Och som de flesta vet är politik och snabba hemsidor inget nytt: Barack Obamas team fick mycket uppmärksamhet om hur dom tweakade och byggde hans kampanjsida.

Mätningarna - vad har jag gjort (egentligen)

På en server har jag kört Firefox och Chrome och testat 2 sidor var för vissa utvalda partier. Den har testat samma sida fem gånger på rad och tagit medianen av körningarna för att få bort ojämnheter i mätningarna. Jag har simulerat olika nätverk (kabel och 3g) för att på så sätt vara säker på att internet inte varierar sig mellan testerna. Jag har också testat mobila varianterna av sidorna med hjälp av Chrome i mobilemuleringsläge. Och sen har jag skickat alla mätvärden till Graphite och visar det med hjälp av Grafana. Alla verktyg är öppen källkod och gratis att använda. Servern som jag kört testerna på har kostat mig $40 för en månad. Vill du göra något likadant själv kan du kolla in detta.

Jag har fokuserat på visuella mätetal genom att spela in en video av skärmen som visar hur sidan laddas. Sen analyseras videon med hjälp av ett verktyg som heter Visual Metrics. Jag har valt att titta på när något först ritas på skärmen (första visuella förändring) och Speed Index. Speed Index är ett mätetal som berättar hur snabbt det visuella är klart på skärmen för en användare. Ju lägre Speed Index desto bättre (och snabbare sida). Om två sidor blir klara samtidigt får den sida som först börjas ritas ut det lägsta talet.

Jag har testat följande sidor (och dessa mobila variant):

Okej nu kör vi!

Startsidan på dator - första förändring

Låt oss kolla hur det ser ut dom senaste trettio dagarna - hur snabbt visas nånting på skärmen när vi surfar från en dator på partiernas startsidor? I den här grafen har jag använt Chrome för att mäta sidan. Till höger kan du se vilka partiers sidor som testats. Klicka på bilden om du vill ha den större.

Den långsammaste i rummet.

Ajdå! Som du ser har moderaterna.se haft riktiga problem. Ibland har det tagit flera minuter för en sida att ladda! Kolla in den här videon så får du se. Det sabbar grafen så vi inte ens kan se hur dom andra har fungerat. Och det har definitivt påverkat användare som surfat på sidan. Jag måste kolla på det här och undersöka varför.

Djupdykning - vad beror det på och vad kunde moderaterna.se gjort för att undvika detta?

Vi ser att vid några tillfällen har startsidan för moderaterna varit så slö att den har varit oanvändbar. Vad beror det här på? Jo jag börjar med att kolla vad som laddas ner från webbsidan. För att se det kollar vi på vattenfallet som visar hur alla delar av en webbsida (bilder, stylesheet, JavaScript) laddas ner. Moderaternas vattenfall ser ut såhär:

Det gröna sträcket till höger visar när nått första gången ritas på skärmen.

Ajdå det är en stor lucka på flera minuter där ingenting händer. Går dock inte att se vad som sker. Kan det vara så att moderatarenas sida är så pajj att den sabbar verktyget? :)

Vi vet att vi har värsta väntetiden, vad är nästa steg? Kan det vara så att det ligger nått JavaScript och äter CPU och gör så att webbläsaren inte frågar om nästa resurs? Testar man i Chrome kan man i de flesta verktyg få ut Chromes egna trace log som talar om vad Chrome spenderar sin tid. Låt oss kolla på det:

Hmm ser inte ut som vi får veta nått där heller. Sista saken vi kan göra är att ta trace-loggen, dra och droppa den i Chrome performance-konsol och kolla hur allt ser ut där:

Djupdykning i Chromes tracelog

BINGO! Här ser vi att det är en förfrågan som tagit 2 minuter. Moderaternas sida har försökt ladda en stilmall (CSS) till font awesome som i vissa fall inte kunnat ladda. Är det här ett problem som bara händer i Chrome? Antagligen inte, låt oss kolla på hur det ser ut i Firefox.

Fortfarande slöast i rummet

Jepp problemet finns där med. Låt oss bara verifiera i vattenfallet för Firefox:

Vattenfall i Firefox

Jo nu ser vi ju att den filen förfrågas och aldrig kommer ner. Problemet är såhär: Sidan laddar ett CSS från en tredjepartsleverantör. CSS blockerar rendreringen så att ingenting kan visas på skärmen förrän den är nerladdad eller timear ut. Puh såhär får man ej göra! Din sida får aldrig ladda resurser som blockerar din rendrering (CSS och synkront JavaScript) från en tredjepartsleverantör! ALDRIG! För det som kan hända är det som händer här: nämligen att den leverantörenhar pronlem och det påverkar när dina användare ser sidan. Istället se till att ladda ner filen och servera den från din egna server. Inom god praxis kallar man det här SPOF (single point of failure) och började diskuteras 2010.

Nu till den spännande frågan: Har moderaterna märkt detta? Man kan mäta en sida på två sätt: antingen genom syntetisk testning som jag gjort här (man kör en webbläsare på en server och testar nu och då) eller så kan man mäta från riktiga användare (RUM) med hjälp av ett litet JavaScript som ringer hem och berättar att sidan har laddat klart.

Vad jag ser kör moderaterna bara med Google Analytics (GA) som RUM-verktyg. Det verktyget har visst stöd för att rapportera hastighet (dock använder den medelvärdet istället för medianen så det är ej optimalt) men vad jag kan se i Firefox och Chrome så har det fungerat såhär: GA i Firefox ringer hem första gången innan det problematiska CSS har laddat men ej igen (Firefox missar då problemet). Chrome skickar information till GA efter att laddningen av CSS:n har avbrutits dvs efter 2 min. Frågan är då är det någon användare som verkligen har väntat i två minuter på att sidan har laddat klart, så att GA har kunnat rapportera detta? Antagligen inte. Jag misstänker att dom ej har sett detta. Därför ska du alltid se till att du mäter både med RUM och syntetisk testning.

Tillbaka till resten av sidorna

Om vi då tar bort moderaterna hur ser då resten av partiernas startsidor ut:

Alla utom moderaterna.

Socialdemokraterna.se ligger alltid högst, det är ett dåligt tecken. Fem-sex sekunder till att först rita nått på skärmen jämfört med dom snabbaste som ligger runt en sekund. Nånting går att optimera där.

I Firefox ser det ut såhär:

Där ser vi att CSS:n som behövs för att rendrera sidan laddar sent och långsamt. Även första requesten med HTML:n är seg. Också prioriterar Firefox att ladda ner Google Tag Managern (GTM) tidigt fast den ska laddas som async (och då inte behövs för rendreringen). Kollar vi i Chrome ser det ut såhär:

Där ser vi att Chrome hanterar GTM bättre men både HTML och CSS:n är slöa att ladda ner. Webbläsaren connectar fint men får sen vänta på att servern leverar datat. Är servern överbelastad? Jag tror det. Dom kör med Cloudflare (CDN) som front för att snabba upp men jag skulle gissa på att dom inte har sett till att sidan har cachat tillräckligt bra på fronten. Vi kan också se att dom använder New Relic för att mäta hur snabba sidorna är. Tyvärr verkar dom bara mäta men inte göra nått åt problemet. Kom ihåg: Första steget är att mäta, steg två är att agera på värdena du får fram.

kristdemokraterna.se var riktigt snabb dagarna före valet men har också haft lite väl höga toppar. Kolla här hur det har sett ut i Firefox ibland:

Vi kan se där att bara ladda ner HTML:n har tagit över fyra sekunder, servern har inte pushat nånting så webbläsaren kan börja ladda ner andra resurser tidigare. Jag kan inte se att dom använt nån form av CDN så dom har nog haft problem med serverprestanda. Det hjälper inte att bara tro på saker man måste göra också: Mät och utvärdera.

vansterpartiet.se har varit snabb rakt igenom. Vad kan det bero på? Det intressanta med deras sida är att den kunde varit ännu snabbare om den följt mer webbens goda praxis! Dom laddar synkrona JavaScript i head som är ett stort NEJNEJ. Men sidan är ändå snabb: HTML:n leveras i första klass (bra cachat och sen serverat av Cloudflare), det som behövs för att rendrera sidan kommer snabbt ner till webbläsaren.

Startsidan på dator - Speed Index

Kommer du ihåg vad Speed Index var? Det mäter hur snabbt det visualla på skärmen är klart och ju snabbare nått blir klart, desto lägre siffra. Ett lågt Speed Index betyder att användaren snabbt kan läsa och ta till sig informationen på sidan.

Såhär har det sett ut de senaste trettio dagarna (jag har tagit bort moderaterna.se eftersom Speed Index också lider av deras prestandaproblem och det förstör grafen):

Om vi zoomar in kan vi se att Vänsterpartiet har hela tiden haft ett väldigt lågt Speed Index och lite variation. Det är bra för det tyder på att användaren snabbt har kunnat börja läsa och ta till sig av partiets information. Liberalerna har också haft lågt index (bra) men med lite mer variation. Sen är det många som har haft höga toppar, dvs det har tagit lång tid innan allting på sidan varit färdigritat/i position. Det är dåligt, för det ger mig som användare upplevelsen att sidan inte är klar. Det blir ingen djupare analys av Speed Index siffrorna idag utan vi tar det nästa gång.

Nu har vi fokuserat hur snabbt nånting visas på partiernas hemsidor. Låt oss fortsätta med att kolla hur dom är byggda.

Startsidan på dator - hur är den byggd?

När man använder en webbrowser för att mäta hastigheten är det lätt att också kolla hur tung sidan är. Hur mycket väger en sida egentligen? Jo kolla här:

Oj! Vi ser att Kristdemokraterna toppat med 15 mb (herrugud vad tungt) och Feministiskt Initativ låg på över 10 mb precis före valet. Det spelar också roll var vikten ligger så låt oss kolla mer på det.

Hur mycket JavaScript en sida laddar är intressant för att mycket JavaScript tar tid att köra på datorn, speciellt om datorn är gammal (och ännu viktigare på mobiler).

Ensam vinnare eller snarare förlorare är moderaterna.se. Ibland har sidan bestått av 1.9 mb komprimerad JavaScript som skickad till användarens webbläsare. När läsaren sen packar upp den har det vägt 7.9 mb. Hur sätter vi detta i perspektiv? Jo, JQuery (JavaScript-biblioteket som ska underlätta utveckling i olika webbläsare) väger 272 kb uppackat. Moderaterna har laddat ner ungefär 29 stycken JQuery på sin startsida!

Vad gör koden och vad är det tänkt att den ska göra? Sjuk mängd JavaScript. När du har så här mycket JavaScript måste du fundera över vad den gör? Vad har du koden till, behövs den? Har det blivit fel nånstans?

Vi passar på och kollar hur stora bilder som har levererats. Bilder är intressant för att det är enkelt att se till att dom ej är för stora genom att tex att använda ett öppet källkodsverktyg som ImageOptim.

Här kan vi se att Liberalerna och Vänsterpartiet har haft en strategi: Skicka inte onödigt stora bilder. Smart. Resten av partierna har grym förbättringspotential här.

Antal domäner

Antal domäner är nått som ligger mig riktigt varmt om hjärtat! Ju färre domäner, desto mindre risk att du delar med dig av information till andra organisationer eller företag (utan att använndarna ger sitt medgivande). Du ska alltså aldrig ladda nått från några andra domäner än dina egna, för att det ger möjlighet till andra företag att profilera dina användare. Hur ser det ut då?

Hmm, Vänsterpartiet har flest domäner och Liberalerna minst. Det här måste jag kolla in djupare på. Vi börjar med Vänsterpartiet, vilka domäner använder dom (dvs vilka delar dom med sig av din användardata till)?

Jo, det ser ut så här: Google (fonts.googleapis.com, maps.googleapis.com, www.googletagmanager.com, fonts.gstatic.com, translate.google.com, www.google-analytics.com), Facebook/Instagram (connect.facebook.net, staticxx.facebook.com, www.facebook.com, scontent.cdninstagram.com), Cloudflare (cdnjs.cloudflare.com), Wordpress (pixel.wp.com, stats.wp.com) och diverse reklamföretag (track.adform.net, stats.g.doubleclick.net).

Dvs när du som användare surfar på Vänsterpartiets hemsida delar dom med sig av information om dig som användare till dom företagen. Känns inte som det ligger inom vänsterns ideologi.

Låt oss kolla på Liberalerna, vinnarna i tävlingen om minst antal domäner. Liberalerna ska ha första pris för dom låter användaren välja om dom ska dela med sig information eller ej: "Vi sparar ingen personlig information om dig, men vi använder så kallad tracking för att du ska kunna nås av Liberalernas annonser. Vi är liberala, så du får själv bestämma:"

Det låter nästan för bra för att vara sant! Jepp det är det. Från och till under senaste månaden har dom "råkat" inkludera resurser från code.jquery.com och www.facebook.com. Dvs om du som användare har surfat på Liberalerna och tänkt klicka i att dom inte ska spåra dig, så har Liberalerna redan delat med sig av vad du gör till Facebook. Det var helt enkelt för bra för att vara sant!

Summering

Jag tänkte spara summeringen till del 3 men jag och ni har redan sett att det finns en del att putsa på hos dom flesta partier. Vi syns snart igen!

Skrivet av: Peter Hedenskog