Trelleborgs webbplats för en återkommande invånare

Webbprestanda: Give credit where credit is due

Snart kan jag börja luta mig tillbaka när det gäller att trumma upp intresset för webbprestanda. På jobbet lanserade vi för en vecka sedan ett nytt gränssnitt för vår sökmotor där vi överträffar Googles måttstock kring prestanda. 86 av 100 möjliga i betyg enligt Google Pagespeed är det lägsta jag hittat - så onekligen har våra konsulter fått till det. Eller som Google säger det själva:

"The PageSpeed Score ranges from 0 to 100 points. A higher score is better and a score of 85 or above indicates that the page is performing well."
- Google, about pagespeed insights

Som om inte det var nog så hörde min förläggare av sig idag och ville meddela att han hittat ett Wordpress-plugin som automatiskt kollar prestandan åt en. Kolla in Google Pagespeed for Wordpress, jag gör själv en utvärdering just nu av gratisversionen. Så allt fler tecken finns på att min kamp och tjat sedan 2010 kan behöva en ny vinkel, det gillar jag. Och inte minst kan min bok om webbanalys få lite uppmärksamhet med redigering för att bli klar i år.

Prestation och prestanda för Trelleborgs webbplats

Får väl medge det direkt, Trelleborg har lite av en särställning i min webbiga värld. Dels för att Susanne Nilsson är mer känd i branschen som Infomastern, i bestämd form, och då inte bara på Twitter utan i ett flertal dialoger även på min arbetsplats. Som i "Hur har de, ehh, du vet hon 'Infomastern' i kommunen söderut, valt att göra det här med X?". Så på något sätt har Trelleborg gjort intryck på mina kollegor, eller åtminstone har Susanne det, hon som inte bara är infomaster i Trelleborgs kommun utan rent utav med hela webbsverige.

En annan anledning till att Trelleborg är speciellt för min del är att de agerade lite av ett skyltfönster för god praxis på webben på min förra arbetsplats, Netrelations, åtminstone vad jag strävade efter då som webbkonsult. Så på något vis har Trelleborg fungerat som en av de platser jag fortfarande kollar in nu några år senare för inspiration kring min egen rådgivning för vad vi i Västra Götalandsregionen borde göra.

Statistik enligt Googles Pagespeed Insights API

För att först mangla igenom lite siffror och statistik. Jag har kollat igenom ett flertal faktorer på 1248 undersidor av webbplatsen trelleborg.se, och dessa siffor beskriver en genomsnittlig sida:

• 1,3 Mb Javascript-filer (okomprimerat)
• 0,4 Mb CSS-filer (okomprimerat)
• 120 Kb HTML-filer, alltså själva innehållet och dess struktur
• 105 Kb bilder
• 7 Kb i förfrågan, inkluderar cookies
• 5 Kb i övriga data vilket oftast är "ovanliga filer" som webfontar
• 50 filer per sidvisning (hoppsan Kerstin!)
• 40 statiska filer per sidvisning
• 22 Javascript-filer/resurser
• 14.5 olika domäner/värdar
• 5.2 CSS-filer

Det man kan plocka några poänger på här är främst att det verkligen är onödigt många Javascript- och CSS-filer. Det är visserligen lätt att hamna på dessa siffror efter att man bytt leverantör och det gått några år sedan sajten byggdes. Men jag tror inte att de personerna (som jag känner) som ursprungligen byggde webbplatsen skulle orsakat detta - det går liksom inte att skylla på kunden när man har 22 Javascript-filer...

Däremot är det nog delvis beställaren som inte kunde hålla igen kring de 14,5 olika domänerna/värdarna. I detta ingår alla tredjeparter, att man överlåter uppläsning till Readspeaker, översättning till Google Translate etc. Det är inte nödvändigt att de ska blandas in i varje sidvisning men på de webbplatser jag inspekterat de senaste åren tycks det vara lätt hänt.

Felsida 404

Oväntat nog så fick jag inte ett endaste felmeddelande på dessa drygt tusentalet undersidor. Och ja, jag har verifierat att deras webbplats kastar korrekta Error 404 om man anropar en felaktig adress. Även 404-sidan är exemplariskt utfomad.

Förenklat betyg enligt Googles synsätt

Men om man nu vill ha en förenklad bild av Trelleborgs webbplats, ja, då ligger de bättre till än någon annan webbplats jag inspekterat så här långt. De har nämligen ett genomsnittligt användbarhetsbetyg om 98.65 och prestandabetyg om 73 av 100 möjliga enligt Google Pagespeed. Då dessutom mätt enligt de klart mer påfrestande mobila inställningarna.

Att de inte har full pott på användbarhet beror nästan enbart på att Google klagar på att länkar/knappar är placerade för nära inpå varandra, risken för att en mobilanvändare duttar på fel sak existerar.

Följer man SEO-praxis för sidtitlar?

Kort svar, JA! Genomsnittlig längd på sidtitlarna är 44,6 tecken och det är inom det spann som gäller just nu för hur långa titlar bör vara för att nå ut. Jag har dessutom kollat in de längsta titlarna och kan konstatera att även de följer god praxis då de inom de första 30 tecknen hyggligt väl beskriver vad respektive sida handlar om. Ovanligt bra presterat på detta mätvärde!

Vad är förbättringspotentialen, prestandamässigt?

Ett sätt att försöka komma över ett fynd kring hur man bättrar på sin webbplats är att kolla på bred front vad som kan förbättras. Går man enligt Googles måttstock får man fram nedan viktade siffror för Trelleborgs webbplats. Störst förbättringspotential överst:

1. Aktiverade GZip-komprimering - 12.9
2. Akta sig för renderingsblockerande CSS och Javascript - 10.3
3. Utnyttja cache i webbläsaren - 9.8
4. Optimera bilder för webben - 3.1
5. Minifiera Javascript - 0.9
6. Svarstider på servern - 0.8
7. Se till att träffytor - 0.4
8. Innehåll passar in i viewport - 0.2
9. Minifiera HTML - 0,09
10. Fokusera på synligt innehåll - 0.01
11. Minifiera CSS ≈ 0.0
12. Läsbar textstorlek = 0
13. Responsiv viewport  = 0
14. Undvik att kräva plugin till webbläsare = 0
15. Undvik hänvisningar från landningssidor = 0

En kommentar till dessa siffor är att det relativa betyget brukar börja på drygt 40, dessutom är det nog första gången som inte punkt två kommit först. Så på något vis har man byggt klokt utifrån detta sätt att se på saken, och verkligen inte på samma sätt som någon annan webbplats jag utvärderat.

Ändock, första punkten är en skitsak att fixa och i sammanhanget ger det stor nytta. Det kan också vara värt att kolla ifall man enkelt kan lösa tredje punkten. För en kommande redesign är det bara att sträva mot ett lika bra resultat som man har idag, men det är alltid värt att sätta upp en prestandabudget och då hålla hårt i antalet filer och tredjeparter som används.

Men, för en återkommande kommuninvånare i Trelleborg dårå?!

Ja, då gör man bäst i att kolla med exempelvis webpagetest.org (se test av trelleborg.se), där man kan ställa in att kolla med så kallad RUM (Real User Monitoring) från Stockholm, med en representativ uppkoppling om "snabb 3G" för att få bra koll på ganska verkliga förhållanden.

Det som händer är att webbplatsens första sidladdning är på drygt 11 sekunder på en mobil 3G-uppkoppling. För att sätta det i ett perspektiv så är det strax över den prestandabudget jag själv skrev för min egen arbetsplats i detta användningsfall. Det man behöver komma ihåg är dock att nästa sidvisning faktiskt görs på 4,3 sekunder och det är ganska representativt för ett återbesök på en liknande sida inom samma webbplats inom den period man kan räkna med att de flesta filerna på webbplatsen är oförändrade.

Cache-strategi?

Denna post fokuserar på att ge dig argument till varför det inte nödvändigtvis bara är första sidvisningen på en webbplats som spelar roll. Kollar man exempelvis på hur ett återbesök på Trelleborgs startsida kommer man endast hämta hem 8 st filer, istället för 47 st som på första sidvisningen. Du som varit på någon av mina föreläsningar kommer kanske ihåg mitt exempel om att i svampskogen där jag plockar kantareller mest hela sommaren är det ofta 1,2 sekunders svarstid per fil som ska laddas ner (så kallad TTFB - time to first byte). Det skulle vid första sidvisning på Trelleborgs startsida ge hela en minuts väntan utöver tiden det tar att ta emot filernas egentliga innehåll.

Men, frågan är om användarnas besöksmönster stämmer med ovan pessimistiska antagande. Låt säga att någon återkommer dag efter dag till kommunens webbplats. Då kommer det istället handla om 8 * 1,2 sekunder, det är ju inte riktigt lika illa ens för undertecknad som närking i glesbygd, bland svamp.

Vill du själv kontrollera om en fil låg i cachen vid ett återbesök, ja då kan du antingen ha full koll via Google Chromes inbyggda utvecklarverktyg som i bilden ovan, eller så kollar du in den mer teoretiska cachen via exempelvis Yahoos YSlow som tillägg i Firefox. I Chrome så kan du kolla vilka filer som har status 304, det betyder att de inte ändrats sedan ditt senaste besök.

Visst ska man kämpa för att ge ett bra första intryck, prestandamässigt. Men även om man kan bättra sig på den fronten så kanske man gör rätt bra ifrån sig på den andra, tredje och fjärde sidvisningen, eller nästa dag, eller vecka. För den återkommande besökaren av denna webbplats finns ovanligt lite att klanka ner på, det är nästan inte lönt att komma med förslag.

Vad kan Trelleborg möjligen göra bättre till nästa version?

Det många i offentlig sektor har det jobbigt med just nu i största allmänhet, tror jag, är hur man ska betrakta personlig integritet och vad tusan "teknikneutral lagstiftning" innebär när det gäller det som populärt kallas för cookie-lagen. Trelleborg gör som majoriteten av Sveriges kommuner och kör med Google Analytics för webbanalys, dessutom anropas Google Translate vid typ varenda sidvisning. Och så Readspeaker.com för att erbjuda uppläsning av sidan. Dessa grejer är på inget sätt ovanliga för en kommunsajt av idag.

Allt som allt så används hela åtta stycken externa parter för somliga sidvisningar. Bland annat Siteimprove, Google Analytics, Google Translate, Adobe Typekit, Facebook, Twitter, Google+ och Linkedin används på många sidor. Här kommer den svåra avvägningen in om önskan att användarna delar innehållet i sociala medier men att inte låta en driva tredjeparter lyssna in på potentiellt känsliga undersidor. Bryr man sig inte om besökarnas integritet kan man lika gärna låta bli dessa externa beroenden eftersom de gör webbplatsen långsammare, bryr man sig inte om det bör man känna till att dessa dela-knappar inte tycks fungera.

Det är lite oklart vad man idag kan läsa mellan raderna om PTS uttalande för hur vi i offentlig sektor ska se på cookies och tredjeparters möjlighet till spårning. Nyteknik intervjuade nyligen Jeanette Kronwall, jurist på Post- och Telestyrelsen:

– Det ska alltså finnas en rätt att vägra kakor, men om man inte kan så krävs ett samtycke på förhand, säger Jeanette Kronwall.

PTS anser samtidigt att alla webbplatser måste ha meddelanden om vilka kakor som används och varför och av vem. Det ska också finnas en länk till mer fulltäckande information om kakanvändningen.
- Nyteknik.se, 28 januari 2016

Att fixa redan nu?

Som alltid begår redaktörer (och man själv) misstag. Värst bland de sidor jag kollat in var en med en bild på 3,2 Mb. Sånt händer. Precis som med allt annat redaktionellt arbete så kan man börja fixa det som är allra värst först. För enkelhetens skull så har jag nedan plockat fram de 25 värsta undersidorna. Min rekommendation är att vara realistisk och lägga en timme per månad för att fixa de värsta sidorna man har (förutsatt att dessa sidor inte är oviktiga).

Mer om prestandaoptimering

• För dig som vill leka med datakällan bakom denna analys så finns den att ladda ner som CSV-fil.
• Läs boken Webbstrategi för alla, där finns ett kapitel om prestandaoptimering