--- title: "Strony internetowe 3D: kiedy warto i jak zadbać o szybkość" description: "Kiedy strona internetowa 3D się opłaca, 3D czy wideo i zdjęcia oraz jak dziesięć światów 3D Janus Observatory pozostało szybkich i użytecznych bez WebGL." url: "https://dardo.studio/pl/blog/strony-internetowe-3d/" language: "pl" 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/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","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:01:50.513Z" --- [Blog](https://dardo.studio/pl/blog/) # Strony internetowe 3D: kiedy się opłacają i jak sprawić, by działały szybko Strony internetowe 3D: kiedy się opłacają, kiedy lepsze są wideo lub zdjęcia i jak dziesięć światów 3D Janus Observatory pozostało szybkich i dostępnych. Autor: [Nicolás Cerón](https://dardo.studio/pl/studio/) ·12 października 2026 ![Wnętrze starego planetarium nocą: mosiężny projektor gwiazd rzuca bursztynowe punkty światła na granatową kopułę, a nad nim unosi się mała, fasetowana karmazynowa planeta.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Najważniejsze wnioski - 3D ma sens, gdy temat jest przestrzenny albo gdy eksplorowanie go wyjaśnia coś, czego nie pokaże obraz; w innych przypadkach zwykle lepiej sprawdzają się zdjęcia lub wideo. - Zbuduj stronę tak, by działała bez WebGL, i traktuj warstwę 3D jako rozszerzenie; dzięki temu tekst i dane pozostają czytelne także dla wyszukiwarek. - W Janus Observatory warianty gzip zmniejszyły transfer 59 modeli 3D z 15,8 MB do 8,2 MB, a oryginały zostały jako wersja awaryjna. - Ustal budżety dla JavaScriptu i wagi modeli przed rozpoczęciem modelowania i sprawdzaj je przy każdym wydaniu. - Ogranicz współczynnik pikseli, respektuj ustawienie ograniczonego ruchu, zapewnij obsługę każdej interakcji z klawiatury i testuj na prawdziwych telefonach ze średniej półki. ## Krótka odpowiedź Strona internetowa 3D ma sens, gdy temat jest przestrzenny albo gdy poruszanie się po nim wyjaśnia coś, czego nie pokaże obraz: produkt, który chcesz obrócić, miejsce, zbiór danych, cały świat. Nie ma sensu, gdy tylko dekoruje stronę, którą zdjęcie albo krótkie wideo wyjaśniłyby równie dobrze. Tak czy inaczej warstwa 3D ma realny koszt w rozmiarze pobieranych plików, zużyciu baterii i dostępności, więc zbuduj stronę tak, by działała bez niej, i traktuj 3D jako rozszerzenie. Ten poradnik opiera się na dwóch naszych projektach: [Janus Observatory](https://dardo.studio/pl/realizacje/janus-observatory-projekt-strony-www/), doświadczeniu w przeglądarce z dziesięcioma światami 3D, oraz dardo.studio, którego strona główna otwiera się sceną 3D renderowaną w czasie rzeczywistym. ## Kiedy 3D jest warte swojego miejsca - **Odwiedzający musi zobaczyć coś z więcej niż jednej strony:** produkt, budynek, urządzenie. - **Przestrzeń jest opowieścią:** mapa, plan terenu, podróż przez kolejne miejsca. - **Interakcja wyjaśnia system** szybciej niż tekst, na przykład przy porównywaniu scenariuszy albo eksplorowaniu danych. - **Doświadczenie marki jest produktem:** premiery, wystawy i kampanie, w których liczy się atmosfera, a odwiedzający oczekują, że będą mogli coś odkrywać. ## Kiedy nie - Scena 3D powtarza to, co już mówią nagłówek i obraz. - Większość odwiedzających wchodzi na stronę z telefonów ze średniej półki przez internet mobilny i potrzebuje szybko jednej informacji, takiej jak cena, adres czy godziny otwarcia. - Po starcie nikt w zespole nie będzie utrzymywał modeli, kodu ani wersji awaryjnych. ## 3D, wideo czy obrazy? | Opcja | Dobre do | Na co uważać | | ------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | 3D w czasie rzeczywistym z WebGL lub WebGPU | Eksplorowania, obracania, porównywania, reagowania na działania użytkownika | Waga modeli i kodu, obciążenie GPU, praca nad dostępnością, testy w przeglądarkach | | Wideo | Pokazywania sekwencji lub atmosfery za każdym razem w ten sam sposób | Rozmiar pliku, zasady autoodtwarzania, napisy, brak interakcji | | Obrazy lub krótka animacja | Szybkiego wyjaśnienia jednej rzeczy | Słabiej zapadają w pamięć; nie da się ich eksplorować | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) działa w każdej nowoczesnej przeglądarce. [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) jest nowsze i w niektórych zadaniach szybsze, ale jego obsługa wciąż się różni, więc zaplanuj rozwiązanie awaryjne. Wejście 3D na dardo.studio najpierw próbuje użyć WebGPU, a w razie potrzeby przechodzi na WebGL 2, natomiast strony usług, realizacji i kontaktu to zwykły HTML, który nigdy nie czeka na scenę 3D. ## Czego nauczyło nas budowanie Janus Observatory Janus Observatory zamienia dziesięć opublikowanych scenariuszy przyszłości Ziemi w opowieść w 17 rozdziałach, atlas i obserwatorium, z dziesięcioma autorskimi światami low-poly i przegubowym obcym astronomem. Projekt działa w darmowym planie Cloudflare Workers, który ogranicza rozmiar aplikacji. Raport z wydania z 27 września 2026 r. zapisuje, czego wymagało utrzymanie szybkości: - **Kompresuj modele i zachowaj wersję awaryjną.** 59 modeli 3D trafia do przeglądarki jako warianty gzip o łącznej wadze 8,2 MB zamiast 15,8 MB, czyli o 47,9% mniej do pobrania. Przeglądarki, które nie potrafią ich rozpakować, dostają pliki oryginalne. - **Dekoduj poza wątkiem głównym, a potem kończ pracę.** Dekodowanie Meshopt działa w jednym workerze w tle, który wyłącza się po pięciu sekundach bezczynności. - **Ustal budżet JavaScriptu i go egzekwuj.** Początkowy JavaScript strony głównej waży 197 059 bajtów po kompresji gzip przy budżecie 256 000 bajtów, a build to sprawdza. - **Uważaj na lawiny żądań.** Pętla spekulatywnego prefetchu w stosie Next.js i OpenNext wygenerowała 11 704 żądania w jednym nieudanym śladzie z przeglądarki. Rozwiązaniem było wyłączenie prefetchu dla tych linków, a testy wymagają teraz zera żądań spekulatywnych. - **Ustal rozdzielczość, zamiast gonić za liczbą klatek.** Elementy canvas renderują się ze stałym współczynnikiem pikseli urządzenia od 1 do 1,5. Raport wycofał też wcześniejszy wynik liczby klatek na sekundę, który zależał od obniżenia rozdzielczości, więc żadnego nie podajemy. ## Zbuduj stronę tak, by działała bez 3D Janus ma jedną zasadę, która kształtuje wszystko inne: podstawowe doświadczenie musi działać bez WebGL i bez AI. Wszystkie dziesięć rekordów scenariuszy ładuje się przy wyłączonym JavaScripcie, elementy sterujące działają bez WebGL, a obracanie z klawiatury, widoczny fokus i ograniczony ruch powstawały razem z każdą funkcją. [Strona dostępności](https://janus-observatory.nicocerond.workers.dev/accessibility) projektu wymienia elementy sterujące, odpowiedniki niewizualne i znane ograniczenia. Celem jest poziom AA [WCAG 2.2](https://www.w3.org/TR/WCAG22/), sprawdzany testami automatycznymi w Chromium, Firefoksie i WebKit. Ta zasada pomaga też wyszukiwarkom i asystentom AI: tekst, nazwy i dane są w HTML, a nie wewnątrz canvasa. ## Checklista szybkiej i dostępnej strony 3D 1. **Najpierw napisz stronę bez 3D.** Jeśli wersja HTML nie ma sensu, 3D tego nie naprawi. 2. **Zdecyduj, co wyjaśnia 3D**, i wytnij wszystko, co jest tam tylko po to, by robić wrażenie. 3. **Ustal budżety** dla JavaScriptu, wagi modeli i rozmiaru tekstur, zanim zacznie się modelowanie, i sprawdzaj je w buildzie. 4. **Kompresuj modele** narzędziami takimi jak [meshoptimizer](https://meshoptimizer.org/), udostępniaj je w formacie [glTF](https://www.khronos.org/gltf/) i zachowaj nieskompresowaną wersję awaryjną, gdy polegasz na nowszych funkcjach przeglądarek, takich jak [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream). 5. **Ładuj scenę po treści** i dopiero wtedy, gdy za chwilę ma się pojawić na ekranie. 6. **Ogranicz współczynnik pikseli**, żeby ekrany o wysokiej gęstości nie renderowały czterokrotnie większej liczby pikseli. 7. **Respektuj** [**prefers-reduced-motion**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion), zapewnij obsługę każdej interakcji z klawiatury i umieść tekstowy odpowiednik obok każdego canvasa. 8. **Testuj na prawdziwych telefonach ze średniej półki** i w więcej niż jednym silniku przeglądarki, a po starcie śledź [Core Web Vitals](https://web.dev/articles/vitals). ## Ile to kosztuje 3D dodaje czas na modelowanie, optymalizację i testy ponad projekt i development, a wersje awaryjne są częścią pracy, a nie dodatkiem. Gdy wyceniamy 3D, pojawia się ono jako pozycja „animacje na zamówienie, 3D lub interaktywne dane” wśród czynników kosztowych, które opisujemy w poradniku o tym, [ile kosztuje strona internetowa w Kolumbii](https://dardo.studio/pl/blog/ile-kosztuje-strona-internetowa-kolumbia/). ## Jak Dardo buduje strony internetowe 3D Projektujemy i budujemy doświadczenia 3D w ramach usługi [interaktywnych stron 3D](https://dardo.studio/pl/uslugi/interaktywne-strony-3d/), a lżejsze animacje i efekty przy przewijaniu w ramach [kreatywnego developmentu](https://dardo.studio/pl/uslugi/kreatywny-development/). Dla [Hyper](https://dardo.studio/pl/realizacje/hyper-projekt-strony/) zbudowaliśmy w React Three Fiber opowieść 3D sterowaną przewijaniem, która zamienia rozproszone sygnały w jeden profil klienta. Jeśli masz pomysł, który potrzebuje przestrzeni, by można go było zrozumieć, [opowiedz nam o nim](https://dardo.studio/pl/kontakt/?service=interactive-3d-websites). ## Najczęstsze pytania **Czy strony internetowe 3D szkodzą SEO?** Nie, jeśli treść jest w HTML. Wyszukiwarki czytają tekst, linki i dane strukturalne, a nie to, co jest narysowane wewnątrz canvasa, więc umieść nazwy, opisy i dane na stronie, a scenę 3D wykorzystaj do ich wzbogacenia. **Czy strony 3D działają na telefonach?** Mogą działać, jeśli ustalisz budżety rozmiaru modeli i JavaScriptu, ograniczysz współczynnik pikseli i przetestujesz stronę na prawdziwych telefonach ze średniej półki. Zawsze zapewnij wersję, która działa bez WebGL. **WebGL czy WebGPU?** WebGL działa w każdej nowoczesnej przeglądarce. WebGPU jest nowsze i może być szybsze, ale jego obsługa wciąż się różni, więc jeśli go używasz, zaplanuj wersję awaryjną w WebGL, tak jak na stronie głównej dardo.studio. **Czy strona 3D może być dostępna?** Tak, jeśli dostępność powstaje razem z każdą funkcją: sterowanie z klawiatury, widoczny fokus, ograniczony ruch i tekstowy odpowiednik obok każdego canvasa. Janus Observatory ma za cel poziom AA WCAG 2.2. ## Źródła i dalsza lektura Źródła tej strony wraz z dodatkowymi informacjami od oryginalnych wydawców. - [Janus Observatory: dostępność (po angielsku)](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN: WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN: WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN: DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group: glTF](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer](https://meshoptimizer.org/) · meshoptimizer.org - [W3C: Wytyczne dotyczące dostępności treści internetowych (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev: Web Vitals](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/pl/studio/) Nicolás Cerón jest założycielem Dardo, studia brandingu, projektowania i tworzenia stron internetowych z siedzibą w Bogocie w Kolumbii. ## Powiązane artykuły - [**Ile kosztuje strona internetowa w Kolumbii w 2026 roku? Realne ceny i co wpływa na wycenę**Ile kosztuje strona internetowa w Kolumbii: datowane ceny firm z Bogoty, roczne koszty domeny i hostingu oraz czynniki, które naprawdę zmieniają wycenę.](https://dardo.studio/pl/blog/ile-kosztuje-strona-internetowa-kolumbia/) - [**Migracja z Framera do Astro: jak przenieść stronę bez utraty designu i pozycji w Google**Framer nie ma eksportu HTML, więc przejście na Astro to przebudowa. Co zapisać najpierw, co się psuje i jak zachować design, adresy URL i pozycje.](https://dardo.studio/pl/blog/migracja-z-framera-do-astro/) - [**Migracja z Webflow do Astro: jak przenieść stronę bez utraty treści, designu i pozycji w Google**Migracja z Webflow do Astro: eksport kodu pomija CMS, formularze, wyszukiwarkę i wersje językowe. Co wyciągnąć, co odbudować i jak zachować pozycje.](https://dardo.studio/pl/blog/migracja-z-webflow-do-astro/) - [**Migracja z WordPressa do Astro: jak przenieść stronę, headless lub w całości, bez utraty pozycji w Google**Migracja z WordPressa do Astro na dwa sposoby: co wyeksportować, jak zachować tytuły z Yoast, odnośniki i obrazy oraz adresy URL, o których się zapomina.](https://dardo.studio/pl/blog/migracja-z-wordpressa-do-astro/) ## Odkrywaj dalej. - [Usługa · **Interaktywne strony internetowe 3D z Three.js i WebGL**](https://dardo.studio/pl/uslugi/interaktywne-strony-3d/) - [Twój projekt · **Zacznijmy rozmowę**](https://dardo.studio/pl/kontakt/)