Website
Kodyl.tv
Fem film og tre 3D-modeller på forsiden. 346 millisekunder til første billede.
Besøg kodyl.tv- 346ms
- Til det største billede er tegnet. Googles grænse for god er 2.500.
- 0,00
- Intet på siden hopper på plads undervejs. Bedst mulige score.
- 171ms
- Fra klik til svar fra serveren, leveret fra cachen tættest på.
- 50/50
- Tjek bestået hos Google Lighthouse. Ingen fejlet.
Opgaven
Kodyl er et reklamebureau i Horsens, i drift siden 2011. De laver reklamefilm, dokumentar, portræt, promo og grafik for blandt andre DR, Viaplay, FC Midtjylland og Jack & Jones.
Deres arbejde er levende billeder, så deres side skal vise levende billeder. Det er den svære del. En forside, der åbner med film og 3D, er som regel også en forside, der er langsom, og et produktionsselskab bliver bedømt på det første, man ser.
- Film på forsiden
- De fem film vejer knap 50 MB tilsammen. Omkring tyve gange, hvad en almindelig hjemmeside fylder i alt.
- 3D, der ikke står i vejen
- En 3D-motor er 330 KB kode, før der overhovedet er en model at vise med den.
- To sprog, tre byer
- Dansk og engelsk, med Horsens, Aarhus og København som marked, uden at de to versioner tager placeringer fra hinanden på Google.
- En side under lærredet
- 3D er usynligt for en skærmlæser og for en søgemaskine. Der skal stadig være en side at læse.
Løsningen
Siden er bygget fra bunden i Next.js og gjort færdig på forhånd, så der ikke bliver regnet noget ud, mens nogen venter. Den bærende beslutning er ikke, hvad der er på siden, men hvornår det bliver hentet.
Alt det tunge ligger uden for den kritiske sti. Det, der skal bruges for at tegne det første billede, er en HTML-side, et stylesheet og to skrifter. Resten kommer bagefter, mens der allerede er noget at se på.
- 3D ud af første indlæsning
- Three.js ligger i en pakke på 330 KB, som ikke står i den side, serveren leverer. Browseren tegner hele forsiden færdig, før den overhovedet spørger efter 3D-koden. Det er den ene beslutning, der gør en 3D-side hurtig.
- Modellerne pakket sammen
- Kamera, klaptræ og fjernsyn er Draco-komprimerede og pakkes ud i browseren. Fjernsynet vejer 13 KB.
- Film på objektlager
- Film og modeller ligger på Cloudflare R2 og serveres i stykker, så browseren streamer den bid, den skal bruge nu, i stedet for at hente hele filen først.
- En læsbar side bag 3D'en
- Forsidens overskrift og brødtekst findes som rigtig, skjult HTML bag scenen. Skærmlæseren og Google får en fuldt formuleret side; øjet får filmen.
- To sprog, ét domæne
- Dansk på forsiden, engelsk på /en, bundet sammen begge veje og erklæret i sitemappet. Google får at vide, at det er samme side på to sprog, i stedet for at gætte.
- Ingen database
- Indholdet er fire ydelser og en kundeliste, som skifter sjældent. Et redigeringssystem ville have tilføjet en database og en fast månedlig regning for at løse et problem, Kodyl ikke har.
Bygget af
Valgt til den ene opgave: at vise tungt indhold på en let side.
- Next.js og React
- Selve siden, bygget færdig på forhånd og serveret fra cachen tættest på den, der kigger.
- Three.js og React Three Fiber
- 3D-scenen, med sammenpakkede modeller og efterbehandling.
- GSAP og ScrollTrigger
- Det, der bevæger sig, og det, der er bundet til scrollen.
- Lenis
- Den bløde scroll, resten af bevægelsen læser fra.
- Tailwind CSS
- Al styling i ét ark på 33,5 KB.
- Cloudflare R2
- Objektlager til film og 3D. Sender video i stykker frem for i ét.
- Vercel
- Hosting og udrulning. Farten bliver målt i drift, så et fald bliver opdaget her og ikke af en kunde.
- Struktureret data
- Adresse, CVR, ydelser og dækning i maskinlæsbar form, så søgemaskinerne kan læse virksomheden og ikke bare siden.
Forløbet
Design, kode og drift lå samme sted. På et projekt som dette er det ikke en pris-pointe, men en teknisk en: beslutningen om at skubbe 3D-motoren ud af første indlæsning er lige dele design og kode, og den slags overlever sjældent en aflevering mellem to leverandører.
Arbejdet blev leveret løbende på et rigtigt link frem for i en præsentation. Så foregår gennemgangen i en browser på en telefon, og ikke i et dokument, der viser noget andet end det, der bliver bygget.
Hvad det betyder
- Ingen når at klikke væk
- 346 ms er hurtigere end de fleste sider uden så meget som ét billede på. Den, der klikker ind fra et opslag eller en annonce, ser Kodyls arbejde i stedet for en hvid skærm.
- Siden kan bære sit eget indhold
- Kodyl kan lægge film på forsiden uden først at spørge, om det gør siden langsom. Det er den frihed, et produktionsselskab har brug for.
- Tilgængelig nok til et udbud
- For offentlige og halvoffentlige kunder er tilgængelighed et krav og ikke en bonus. DR står allerede på kundelisten.
- Synlig for maskinerne
- Søgemaskiner og AI-svar kan læse, hvad Kodyl laver, hvor de ligger, og hvad de tilbyder, fordi det står skrevet til dem og ikke kun til øjet.
Tallene er målt på den kørende side den 1. september 2026: farten med et performance-spor i Chrome, scorerne med Google Lighthouse på mobil. Det er tal fra laboratoriet og ikke fra et helt års besøgende, men de er målt og ikke påstået.