--- title: "3D-webbplatser: när de lönar sig och hur de hålls snabba" description: "När en 3D-webbplats är värd det, 3D mot video och bilder, och hur vi höll Janus Observatorys tio 3D-världar snabba och användbara utan WebGL." url: "https://dardo.studio/sv/blogg/3d-webbplatser/" language: "sv" translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"} updated: "2026-10-13T01:00:32.613Z" --- [Blogg](https://dardo.studio/sv/blogg/) # 3D-webbplatser: när de är värda det och hur du håller dem snabba När en 3D-webbplats gör nytta, när video eller bilder fungerar bättre och hur vi höll Janus Observatorys tio 3D-världar snabba, tillgängliga och användbara. Av [Nicolás Cerón](https://dardo.studio/sv/studio/) ·12 oktober 2026 ![Interiören i ett gammalt planetarium om natten: en stjärnprojektor i mässing kastar bärnstensfärgade ljuspunkter över en marinblå kupol, och en liten fasetterad karmosinröd planet svävar ovanför den.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Viktigaste punkterna - 3D är värt det när ämnet är rumsligt eller när utforskandet förklarar något som en bild inte kan; annars fungerar bilder eller video oftast bättre. - Bygg sidan så att den fungerar utan WebGL och behandla 3D-lagret som en förbättring; det håller också text och data läsbara för sökmotorer. - På Janus Observatory minskade gzip-varianter överföringen av 59 3D-modeller från 15,8 MB till 8,2 MB, med originalen kvar som reserv. - Sätt budgetar för JavaScript och modellvikt innan modelleringen börjar, och kontrollera dem vid varje release. - Begränsa pixelförhållandet, respektera reducerad rörelse, ge varje interaktion ett tangentbordsalternativ och testa på riktiga mellanklassmobiler. ## Det korta svaret En 3D-webbplats är värd det när ämnet är rumsligt eller när det förklarar något som en bild inte kan att röra sig genom det: en produkt du vill vrida på, en plats, en datamängd, en värld. Den är inte värd det när den bara dekorerar en sida som ett foto eller en kort video skulle förklara lika bra. Hur som helst har 3D-lagret en verklig kostnad i nedladdningsstorlek, batteri och tillgänglighet, så bygg sidan så att den fungerar utan det och behandla 3D som en förbättring. Guiden bygger på två av våra egna projekt: [Janus Observatory](https://dardo.studio/sv/utvalda-projekt/janus-observatory-webbdesign/), en webbläsarupplevelse med tio 3D-världar, och dardo.studio, vars startsida öppnar med en 3D-scen i realtid. ## När 3D förtjänar sin plats - **Besökaren behöver se något från mer än en vinkel:** en produkt, en byggnad, en utrustning. - **Rummet är berättelsen:** en karta, en situationsplan, en resa genom olika platser. - **Interaktion förklarar ett system** snabbare än text, som när man jämför scenarier eller utforskar data. - **Varumärkesupplevelsen är produkten:** lanseringar, utställningar och kampanjer där atmosfären spelar roll och besökarna förväntar sig att utforska. ## När det inte gör det - 3D-scenen upprepar det som en rubrik och en bild redan säger. - De flesta besökare kommer via mellanklassmobiler över mobildata och behöver snabbt ett enda faktum, som ett pris, en adress eller öppettider. - Ingen i teamet kommer att underhålla modellerna, koden och reservlösningarna efter lanseringen. ## 3D, video eller bilder? | Alternativ | Bra för | Se upp med | | ----------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | 3D i realtid med WebGL eller WebGPU | Att utforska, rotera, jämföra och reagera på input | Vikten på modeller och kod, GPU-belastning, tillgänglighetsarbete, tester i olika webbläsare | | Video | Att visa ett förlopp eller en atmosfär på samma sätt varje gång | Filstorlek, regler för autouppspelning, undertexter, ingen interaktion | | Bilder eller en kort animation | Att snabbt förklara en sak | Mindre minnesvärt; kan inte utforskas | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) fungerar i alla moderna webbläsare. [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) är nyare och snabbare för vissa uppgifter, men stödet varierar fortfarande, så planera en reservlösning. 3D-entrén på dardo.studio provar WebGPU först och faller tillbaka på WebGL 2, medan sidorna för tjänster, projekt och kontakt är vanlig HTML som aldrig väntar på en 3D-scen. ## Vad vi lärde oss av att bygga Janus Observatory Janus Observatory gör om tio publicerade scenarier för jordens framtid till en berättelse i 17 kapitel, en atlas och ett observatorium, med tio egna low poly-världar och en ledad utomjordisk astronom. Projektet körs på gratisplanen för Cloudflare Workers, som begränsar applikationens storlek. Projektets releaserapport från den 27 september 2026 dokumenterar vad som krävdes för att hålla det snabbt: - **Komprimera modellerna och behåll en reserv.** De 59 3D-modellerna levereras som gzip-varianter på totalt 8,2 MB i stället för 15,8 MB, 47,9 % mindre att ladda ner. Webbläsare som inte kan dekomprimera dem får originalfilerna. - **Avkoda utanför huvudtråden, och stäng sedan av.** Meshopt-avkodningen körs i en enda bakgrundsworker som stängs av efter fem sekunders inaktivitet. - **Sätt en JavaScript-budget och håll fast vid den.** Startsidans initiala JavaScript är 197 059 byte gzippat mot en budget på 256 000 byte, och bygget kontrollerar det. - **Se upp för anropsstormar.** En spekulativ prefetch-loop i stacken med Next.js och OpenNext gjorde 11 704 anrop i en misslyckad webbläsartrace. Lösningen var att stänga av prefetch för de länkarna, och testerna kräver nu noll spekulativa anrop. - **Lås upplösningen i stället för att jaga bildfrekvens.** Canvas-ytorna renderas med ett fast pixelförhållande på 1 till 1,5. Rapporten drog också tillbaka en tidigare siffra för bildfrekvensen som byggde på att upplösningen sänktes, så vi anger ingen. ## Bygg sidan så att den fungerar utan 3D Janus har en regel som formar allt annat: kärnupplevelsen måste fungera utan WebGL och utan AI. Alla tio scenarioposterna laddas med JavaScript avstängt, kontrollerna fungerar utan WebGL, och tangentbordsrotation, synligt fokus och reducerad rörelse byggdes in med varje funktion. Projektets [tillgänglighetssida](https://janus-observatory.nicocerond.workers.dev/accessibility) listar kontrollerna, de icke-visuella motsvarigheterna och de kända begränsningarna. Målet är [WCAG 2.2](https://www.w3.org/TR/WCAG22/) nivå AA, kontrollerat med automatiserade tester i Chromium, Firefox och WebKit. Den regeln hjälper också sökmotorer och AI-assistenter: texten, namnen och datan finns i HTML-koden, inte inuti en canvas. ## En checklista för en snabb och tillgänglig 3D-sida 1. **Skriv sidan utan 3D först.** Om HTML-versionen inte är begriplig kommer 3D inte att rädda den. 2. **Bestäm vad 3D ska förklara**, och skär bort allt som bara finns där för att imponera. 3. **Sätt budgetar** för JavaScript, modellvikt och texturstorlek innan modelleringen börjar, och kontrollera dem i bygget. 4. **Komprimera modellerna** med verktyg som [meshoptimizer](https://meshoptimizer.org/), leverera dem i formatet [glTF](https://www.khronos.org/gltf/) och behåll en okomprimerad reserv när du förlitar dig på nyare webbläsarfunktioner som [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream). 5. **Ladda scenen efter innehållet**, och först när den snart ska synas. 6. **Begränsa pixelförhållandet** så att skärmar med hög pixeltäthet inte renderar fyra gånger så många pixlar. 7. **Respektera** [**prefers-reduced-motion**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion), ge varje interaktion ett tangentbordsalternativ och placera en textmotsvarighet bredvid varje canvas. 8. **Testa på riktiga mellanklassmobiler** och i mer än en webbläsarmotor, och följ sedan [Core Web Vitals](https://web.dev/articles/vitals) efter lanseringen. ## Vad det kostar 3D lägger till tid för modellering, optimering och tester utöver design och utveckling, och reservlösningarna är en del av jobbet, inte ett tillägg. När vi lämnar offert syns det som raden ”skräddarsydd rörelse, 3D eller interaktiv data” bland kostnadsfaktorerna i vår guide om [vad en hemsida kostar i Colombia](https://dardo.studio/sv/blogg/vad-kostar-en-hemsida-colombia/). ## Så bygger Dardo 3D-webbplatser Vi designar och bygger 3D-upplevelser inom vår tjänst för [interaktiva 3D-webbplatser](https://dardo.studio/sv/tjanster/interaktiva-3d-webbplatser/), och lättare rörelse- och scrollarbete inom [kreativ utveckling](https://dardo.studio/sv/tjanster/kreativ-utveckling/). För [Hyper](https://dardo.studio/sv/utvalda-projekt/hyper/) byggde vi en scrollstyrd 3D-berättelse med React Three Fiber som förvandlar utspridda signaler till en enda kundprofil. Om du har en idé som behöver rum för att förstås, [berätta om den](https://dardo.studio/sv/kontakt/?service=interactive-3d-websites). ## Vanliga frågor **Skadar 3D-webbplatser SEO?** Inte om innehållet finns i HTML-koden. Sökmotorer läser text, länkar och strukturerad data, inte det som ritas i en canvas, så lägg namn, beskrivningar och data på sidan och använd 3D-scenen för att förstärka dem. **Fungerar 3D-webbplatser i mobilen?** Det kan de göra, med budgetar för modellstorlek och JavaScript, ett begränsat pixelförhållande och tester på riktiga mellanklassmobiler. Erbjud alltid en version som fungerar utan WebGL. **Ska jag använda WebGL eller WebGPU?** WebGL fungerar i alla moderna webbläsare. WebGPU är nyare och kan vara snabbare, men stödet varierar fortfarande, så om du använder det bör du planera en reservlösning i WebGL, som startsidan på dardo.studio har. **Är en 3D-webbplats tillgänglig?** Det kan den vara, om tillgängligheten byggs in med varje funktion: tangentbordsstyrning, synligt fokus, reducerad rörelse och en textmotsvarighet bredvid varje canvas. Janus Observatory siktar på WCAG 2.2 nivå AA. ## Källor och vidare läsning Källorna bakom den här sidan, med mer information från de ursprungliga utgivarna. - [Janus Observatory: tillgänglighet (på engelska)](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN: WebGL API (på engelska)](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN: WebGPU API (på engelska)](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN: DecompressionStream (på engelska)](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN: prefers-reduced-motion (på engelska)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group: glTF (på engelska)](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer (på engelska)](https://meshoptimizer.org/) · meshoptimizer.org - [W3C: Riktlinjer för tillgängligt webbinnehåll (WCAG) 2.2 (på engelska)](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev: Web Vitals (på engelska)](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/sv/studio/) Nicolás Cerón är grundare av Dardo, en byrå för varumärke, webbdesign och webbutveckling i Bogotá, Colombia. ## Relaterade artiklar - [**Vad kostar en hemsida i Colombia 2026? Verkliga priser och vad som påverkar offerten**Vad en hemsida kostar i Colombia: daterade priser från leverantörer i Bogotá, fasta årskostnader för domän och webbhotell och det som påverkar offerten.](https://dardo.studio/sv/blogg/vad-kostar-en-hemsida-colombia/) - [**Migrera från Framer till Astro: så flyttar du en Framer-sajt utan att tappa design eller ranking**Framer saknar HTML-export, så en flytt till Astro är ett nybygge. Vad du ska fånga först, vad som går sönder och hur du behåller design, URL:er och ranking.](https://dardo.studio/sv/blogg/migrera-framer-till-astro/) - [**Migrera från Webflow till Astro: så flyttar du en Webflow-sajt utan att tappa innehåll, design eller ranking**Migrera från Webflow till Astro: kodexporten saknar CMS, formulär, sökning och språk. Vad du tar ut, vad du bygger om och hur du behåller din ranking.](https://dardo.studio/sv/blogg/migrera-webflow-till-astro/) - [**Migrera WordPress till Astro: så flyttar du en WordPress-sajt, headless eller helt, utan att tappa ranking**Migrera från WordPress till Astro: två vägar, vad du exporterar, hur du behåller Yoast-titlar, permalänkar och bilder och vilka URL:er de flesta glömmer.](https://dardo.studio/sv/blogg/migrera-wordpress-till-astro/) ## Fortsätt utforska. - [Tjänst · **Interaktiva 3D-webbplatser med Three.js och WebGL**](https://dardo.studio/sv/tjanster/interaktiva-3d-webbplatser/) - [Ditt projekt · **Starta en dialog**](https://dardo.studio/sv/kontakt/)