instagram

Nya sydsvenskan.se är snabbare än någonsin

I veckan blev vi klara med en ny version av Sydsvenskan.se. Det är många som varit inblandade och det ligger mängder arbetstimmar bakom. Jobbet har gjorts av webbredaktionen på tidningen, annonsavdelningen, utvecklarna på FLS och tekniker på Bonnier Digital, grymt arbete alla!

Vi har fått ut en ny version för desktop, som är skalbar ner till tablet (adaptiv). Vi har även en helt ny mobilsajten som använder egna mobil-vyer. Den vanliga sajten och mobilsajten delar alltså content och är helt identiska, de har dessutom exakt samma url:er.

Massor kod är skriven och mycket tid är lagt på att optimera sidorna för att skapa bättre laddtider. Det är extra viktigt nu när så många surfar från mobilen och från sina tablets.

Man brukar säga att ca 80-90% av en webbsidas totala laddtid ligger i webbläsaren, och just där har vi försökt optimera ordentligt.

Vid en sidladdning av Sydsvenskans förstasidan har vi lyckats få ner sidvikten med 40% (från 3.5Mb till 2.1Mb) och vi har fått ner antalet requests med 59% från 460st till ca 190st. Siffrorna är ungefärliga eftersom sidans innehåll och annonser varierar från timme till timme.

En jämförelse ger följande resultat.

Old site
———————
Page size 3.5Mb
Load time 8.88s
Requests 462

New site
———————
Page size 2.1Mb
Load time 6.34s
Requests 192

Result
———————
Page size: -40%
Load time: -29%
Requests: -59%

Det finns många olika tekniker man kan använda för att skapa snabbare webbsidor. Vi är på inga sätt klara med vår optimering men detta är vad vi har arbetat med hittills för att skapa en snabbare Sydsvenskan.se.

Adaptiva bilder
Vi skapar flera olika versioner av bilderna och vi laddar in bara de som är optimala för just den enhet en användare surfar ifrån. Vi tittar först på skärmstorlek och skärmkvallitet (retina/hd) och skicka sedan ut en bild i rätt storlek och med rätt kvalitet.

Javascript i botten
Blockerande javascript i browsern är ett känt problem och vi har flyttat alla script som absolut inte måste ligga i headen. De som inte gått att flytta är laddning av annonser och mätscript. Framöver kanske vi kan ladda annonserna asynk.

Lazyloading av bilder
En tidningswebb har väldigt många bilder och det leder till lika många requests mot filservern (eller i vårt fall cdn, Akamai). Men eftersom alla inte scrollar hela sidan ner så laddar vi inte alla bilder. Istället laddar viaktuell skärmhöjd + ytterliggare två nedåt. Scrollar man sedan pre-laddas bilderna. Speciellt i en mobiltelefon sparar detta enormt många requests och minskad mängd data.

Sprites
Alla statista bilder, ikoner, loggor och liknande ligger nu i en och samma fil.

Statiska filer från flera olika domäner
För att ladda filer parallellt använder vi flera olika domäner att ladda ifrån. Detta är lite vanskligt eftersom browsers hanterar detta lite olika. Några vill att man delar ut på flera domäner, andra nöjer sig med ett fåtal, vi har valt en mellanväg.

Egen implementation av Sociala delaknappar
Facebook och Twitter är superviktiga men deras widgets i javascript är långsamma. Vill vill ha sociala widgets på Sydsvenskan men ändå inte vänta på att ladda ca 10 olika javasctipt. Lösningen blev att vi implementerade en egen aggregering av ”delningar” och att vi sedan skapade ett api för att hämta fram data, vilket räddar oss ifrån ca 10 blockerande javascriptfiler.