Snabbare kartladdning och ny meny

Laddtiden för kartan har förbättrats rejält — First Contentful Paint gick från 2,4 till 1,0 sekunder. Här är vad som ändrades.

Leaflet flyttade hem

Kartbiblioteket Leaflet laddades tidigare från unpkg.com, ett publikt CDN. Det innebar att webbläsaren först behövde göra en DNS-uppslagning, sedan TLS-handskakning, och till sist ladda ner filerna — allt innan kartan kunde börja renderas.

Nu servas Leaflets CSS och JavaScript direkt från samma server som resten av sidan. Det eliminerar hela den externa rundturen.

Geodata på diet

Spårsträckningarna för tunnelbana, pendeltåg och spårväg lagras som GeoJSON. Koordinaterna hade 14 decimalers precision — långt mer än vad som behövs. Sex decimaler (≈1 meters precision) räcker gott för en karta.

Resultatet: tunnelbanans spårfil krympte från 353 KB till 97 KB, en minskning på 72%. Totalt sparades flera hundra kilobyte nätverkstrafik.

Stationerna fick en egen fil

Drygt 240 stationer med namn och koordinater var tidigare hårdkodade direkt i HTML-filen och tog upp 62% av sidans storlek. Nu ligger de i en separat JSON-fil som laddas asynkront. HTML-filen krympte från 74 KB till 61 KB, och stationerna laddas i bakgrunden utan att blockera kartan.

Smartare laddningsordning

Leaflets CSS laddas nu icke-renderingsblockerande — sidan börjar renderas direkt och kartans stilmallar appliceras när de är klara. De centrala kartrutorna preloadas också, så de finns i cache redan innan kartan skapas.

Ny meny

Den gamla titelraden och lagerpanelen har ersatts av en kompakt toolbar med glasmorfism-design. På desktop syns lagerknapparna (T-bana, Pendeltåg, Spårväg, Båtar, Bussar) som klickbara chips direkt i verktygsfältet. På mobil finns en hamburgermeny.