Så byggde Martin Filipsson en snygg sajt som bara väger 11,7 KB
När många webbplatser blir långsamma börjar arbetet med att optimera bilder, installera cachelösningar, minska JavaScript och försöka få ett redan tungt bygge att gå lite snabbare. När Martin Filipsson byggde Fotbollsresa.com valde han motsatt väg. Hastigheten fick vara ett krav redan när sajten ritades. Resultatet är en webbplats med en tydlig grafisk identitet som samtidigt är extremt liten. När sajten testades med Pingdom vägde startsidan 11,7 KB, krävde fem requests och laddades på 263 millisekunder. Det intressanta är inte bara siffrorna. Fotbollsresa.com ser inte ut som en teknisk demosida byggd för att få höga poäng i ett prestandatest. Den har stora rubriker, hårda kontraster, ett tydligt rutnät och ett formspråk som hämtar inspiration från matchbiljetter, resultattavlor och informationsskyltar på arenor.
Martin beskriver den viktigaste principen som ganska enkel: om målet är en snabb webbplats är det bättre att låta det påverka designen från början än att försöka reparera prestandan när allt redan är byggt. Det innebar bland annat att Fotbollsresa.com inte byggdes runt stora hero-bilder, videobakgrunder, animationer eller färdiga komponentbibliotek. Sajten använder nästan inga bilder alls för sitt visuella uttryck. I stället gör typografin, linjerna, ytorna och layouten jobbet.
”Det vanliga är att man först designar allt man vill ha och sedan börjar plocka bort saker när PageSpeed blir dåligt. Vi gjorde tvärtom. Frågan från början var hur mycket design vi kunde skapa med sådant som webbläsaren redan är väldigt bra på.”
En stor siffra kan skapa lika mycket karaktär som en bild. En kraftig svart linje kan dela upp innehållet bättre än ytterligare en grafisk komponent. Matcherna kan presenteras som biljetter och resultatrader utan att webbläsaren behöver ladda en enda bildfil. När man tar bort bilder och effekter måste typografin och layouten börja bära designen, och enligt Martin var det snarare en fördel än en begränsning.
”När man tar bort bilder och effekter måste typografin och layouten börja bära designen. Det gjorde faktiskt sajten mer distinkt, inte mindre.”
Fotbollsresa.com handlar om att hitta fotbollsmatcher och resa till dem, och därför behövde sajten inte låna ett generiskt designspråk från en modern SaaS-tjänst. Martin tittade i stället på miljön runt själva fotbollen: resultattavlor, biljetter, programblad, nummer på läktarsektioner, informationsskyltar på stationer och listor över kommande matcher. Det blev utgångspunkten för designen. Startsidan möter besökaren med det stora budskapet ”Hitta en match. Åk dit.” Matcher presenteras i hårda rader och tydliga block. Svart, vitt och rött står för nästan hela paletten. Informationen är central och dekorationen växer fram ur hur den presenteras.
”Vi försökte aldrig göra en vanlig webbplats och sedan skala bort den. Vi försökte hitta ett uttryck där frånvaron av tunga element kändes naturlig.”
Att sajten är liten betyder samtidigt inte att den är statisk i betydelsen handskrivna HTML-sidor som aldrig förändras. Bakom Fotbollsresa.com finns PHP, MariaDB och importer som hämtar matcher, resultat, historik och aktuella reseerbjudanden. Den informationen används sedan för att generera färdiga HTML-sidor. När en besökare öppnar exempelvis sidan för Arsenal mot Liverpool behöver servern därför inte starta ett CMS, göra ett antal databasfrågor, exekvera plugins och bygga sidan i realtid. Allt det arbetet har redan gjorts. Besökaren får den färdiga HTML-filen.
”Vi flyttade komplexiteten bort från sidvisningen. Systemet får gärna göra mycket arbete när informationen hämtas och sidan genereras. När besökaren kommer ska så lite som möjligt behöva hända.”
Fotbollsresa.com har 20 Premier League-lag och 380 permanenta kombinationer av hemma- och bortalag. /arsenal-liverpool/ betyder alltid Arsenal hemma mot Liverpool, men vad som visas på adressen kan förändras. Finns det en kommande match visas den. När matchen är spelad kan sidan i stället visa det senaste resultatet och historiska möten. När lagen möts igen uppdateras samma sida. Det skapar något som kan låta motsägelsefullt: en datadriven webbplats som i praktiken levererar statiska dokument till besökaren.
För många webbprojekt är WordPress ett naturligt val, men här valdes en annan arkitektur eftersom webbplatsens uppgift är ovanligt tydlig. Det finns ett begränsat antal sidtyper, informationen är strukturerad och huvuddelen av innehållet går att generera automatiskt. Därför fanns det heller ingen större anledning att låta varje besök gå genom ett komplett CMS. Samma resonemang gäller JavaScript. Sajten behöver JavaScript för ett fåtal funktioner, bland annat statistik och samtyckeshantering, men menyer, matchinformation, priser, historik och navigation kräver inget frontend-framework. Det mesta är helt vanlig HTML och CSS.
”WordPress är bra när du behöver det WordPress är bra på. Men om du redan vet exakt vilka sidor som ska finnas och kan generera dem i förväg blir det svårt att motivera hela den kedjan för varje sidvisning.”
När Fotbollsresa.com till slut kördes genom Pingdom blev resultatet en startsida på 11,7 KB, fem requests och en uppmätt laddtid på 263 millisekunder. Det är siffror som sticker ut i en tid när en enda bild på en startsida utan problem kan väga hundratals kilobyte. Ändå fick sajten inte 100 av 100 i Pingdom. Betyget blev 94, bland annat eftersom verktyget ville se ytterligare inställningar för komprimering och cache headers. För Martin illustrerar det något viktigt med prestandaarbete: det är lätt att börja optimera för verktyget i stället för för användaren.
”Om hela sidan väger 11,7 KB måste man fråga sig vad man faktiskt vinner på att lägga till mer konfiguration bara för att flytta en siffra från 94 till 100.”
Prestandatester är värdefulla, men de behöver sättas i ett sammanhang. En rekommendation som är viktig på en webbplats som skickar flera megabyte vid varje sidvisning kan vara nästan betydelselös på en sida som redan är mindre än en normal JPEG. Det blev extra tydligt när projektet under en period inte gick att testa alls i vare sig Google PageSpeed Insights eller Pingdom, trots att sajten laddades utan problem i vanliga webbläsare och kunde hämtas av Google Search Console. Den första misstanken var naturligtvis att något i webbplatsen blockerade testerna, men problemet visade sig ligga i DNS-konfigurationen. Domänen hade både IPv4- och IPv6-adresser, men IPv6-vägen fungerade inte korrekt för vissa externa tjänster. När AAAA-posten togs bort kunde Pingdom omedelbart läsa sajten och rapporterade 263 millisekunders laddtid.
”Det var ett ganska bra exempel på varför man måste mäta rätt sak. Vi hade kunnat börja ändra kod på en sajt som redan var extremt snabb, när problemet egentligen låg innan besökaren ens kom fram till webbservern.”
Det kanske mest intressanta med Fotbollsresa.com är därför inte hur många kilobyte startsidan väger, utan hur lite gräns det egentligen behöver finnas mellan design och prestanda. Vi pratar ofta om laddtid som en teknisk fråga som utvecklarna får ta hand om när designen är färdig, men användaren upplever inte tekniken och designen separat. Klickar du på Arsenal mot Liverpool och nästa sida visas nästan omedelbart påverkar det hur tjänsten känns. Den blir rapp, enkel och direkt. På en webbplats som handlar om matcher, datum, resultat och resor passar det dessutom uttrycket. Snabbheten blir en del av identiteten.
Martin tror därför inte att lärdomen från Fotbollsresa.com är att alla webbplatser ska se likadana ut eller sluta använda bilder. Lärdomen är snarare att varje tekniskt element bör behöva förtjäna sin plats. En bild kan vara helt rätt. JavaScript kan vara helt rätt. Ett CMS kan vara helt rätt. Men om allt läggs till som standard och kostnaden diskuteras först efteråt blir resultatet lätt en tung webbplats som sedan måste optimeras tillbaka till en rimlig nivå.
”Vi har blivit vana vid att lägga till allt som standard och fundera på kostnaden senare. Börjar man i andra änden upptäcker man hur otroligt mycket man faktiskt kan göra med HTML, CSS och en tydlig idé.”
Fotbollsresa.com visar att en extremt snabb webbplats inte behöver vara en tom webbplats. Tvärtom kan begränsningen bli en del av det som ger designen dess karaktär. När varje linje, bokstav och yta måste göra ett jobb blir det svårare att gömma sig bakom effekter, men också lättare att bygga något som känns både tydligt, eget och omedelbart.