's Picture

Så byggde vi nya Expressen.se snabbare än någonsin – del 1

Postad av Simon Hjälmefjord

För några veckor sedan rullade vi ut en ny version av Expressen.se till alla våra besökare. Den nya versionen är en total omgörning av vår huvudsajt för samtliga kanaler. Den här är det första i en serie bloggposter om varför och hur vi byggt nya Expressen.se.

Normalt sett försöker vi undvika stora projekt och omgörningar för att i stället arbeta med inkrementella eller iterativa förbättringar och validerat lärande. Så har vi till stor del jobbat de senaste 4+ åren när vi gradvis har byggt om våra sajter och migrerat från ett stort CMS som gjorde allt, till mindre, nischade verktyg och applikationer.

Att jobba med gradvisa förbättringar, av ett verktyg, en kanal eller en innehållstyp i taget har fungerat bra för oss och inneburit att vi kontinuerligt levererat värde till redaktion, affär och våra besökare.

Samtidigt har detta arbetssätt lett till att vår sajt och dess kodbas har blivit fragmenterad. När vi gradvis har byggt om sajten genom att exempelvis bygga en egen version för surfplattor har andra kanaler halkat efter. När vi fräschat upp artikelsidor har ettor och andra innehållstyper inte alltid hängt med.

Under 2016 och 2017 gjorde vi en rad viktiga systembyten. Till exempel bytte vi både annons- och analyssystem. Dessa byten gick bra på befintliga versioner av sajten, men eftersom vi då var fokuserade på att börja använda de nya systemen var det inte alltid så att vi gjorde implementationerna på bästa möjliga sätt.
Framför allt kunde vi se stor potential att optimera sajtens prestanda genom nya lösningar för annonsladdning. I höstas gick vi också över till HTTPS som gjorde det möjligt för oss att använda en rad moderna webbtekniker. Med andra ord hade vi ett bra slagläge för att bygga en riktigt snabb och bra sajt.

Detta slagläge hade troligtvis kunnat utnyttjats även om vi hade gjort gradvisa förbättringar. Men de flesta av oss i teamet var överens om att det bästa sättet troligen var ta ett totalt omtag om sajten. Börja bygg webb som om det vore 2018, och inte 1998.

Detta kan låta dramatiskt och som ett monsterprojekt men vi hade ett antal faktorer som talade för att det inte behövde bli så:

  • Vi hade sedan tidigare byggt upp en arkitektur med många mindre tjänster vilket innebär att själva sajten kan fokusera på att skapa en så bra användarupplevelse som möjligt snarare än att hantera affärslogik eller baka om data från bakomliggande system. Mer udda innehållstyper och tjänster hanteras också av andra system än det som renderar www.expressen.se.

  • För knappt fem år sedan började vi bygga upp en ny utvecklingsavdelning på Expressen. Nu, fem år senare, har vi ett antal väl sammansvetsade team. Inte minst i vårt sajtteam har vi utvecklare, UX:are, produktägare och analytiker som alla har en mycket god förståelse för hur man bygger nyhetssajter. Många av oss har också varit med i våra tidigare omgörningar av sajten de senaste fem åren där vi rört oss från .NET till Node.js-baserade sajter.

Det här innebär att ett till synes stort projekt som att bygga om hela sajten ändå kan gå snabbt och effektivt eftersom att vi i stor utsträckning vet vad som behöver göras, vilka ramar vi har att förhålla oss till och ett väldigt nära samarbete med våra stakeholders på redaktion och affär.
Produkten blir bättre om vi gör den tillsammans med alla som påverkar produkten. Från innehåll och teknik till annonser.

Snabbare än någonsin

I den nya versionen har vi lagt stor vikt vid att få sajten att ladda så snabbt som möjligt. Prestanda är ledordet. Snabbhet kan betyda många olika saker, så vi behövde fokusera på det vi tror ger mest för våra användare: Minska tiden från att du börjar ladda sidan tills att den går att använda. Och resultaten har varit... häpnadsväckande:

Mätning av first meaningful paint
Mätning av first meaningful paint

I tabellen ser vi antalet millisekunder till first meaningful paint i Googles Lighthouse-mätning för vår mobilsajt. Här har vi kapat tiden för både våra startsidor och artikelsidor. För desktop och tablet ser vi liknande skillnader mellan gamla och nya sajten.

Förutom det har vi optimerat sajten på andra sätt, från att bilderna nu har bättre färgkvalité till att både video och annonser laddar snabbare.

I kommande bloggposter kommer vi från sajtteamet att berätta mer om hur vi byggde sajten. Om hur vi trimmade bort massor med laddningstid genom att hantera fonter på nyskapande sätt. Om hur vi byggt med de utvecklingsmässiga fördelarna av en responsiv sajt utan att få dess prestandamässiga nackdelar. Om hur vi tänkt kring design och UX. Stay tuned!

PS. Missa inte vår nästa bloggpost, följ oss på Twitter!

Till startsidan