Svi članci

3D web2 min čitanja

3D web stranica ne mora biti spora

WebGL scena i brzo učitavanje nisu u sukobu. Pet odluka zbog kojih imerzivna stranica ostaje brza, pristupačna i vidljiva Googleu.

Laptop i mobitel na stolu prikazuju istu 3D scenu planeta u plavim tonovima

Najčešći prigovor 3D web stranicama glasi: „Lijepo, ali sporo.” I često je opravdan — scena koja se učitava deset sekundi prije nego što posjetitelj vidi ijednu riječ košta i posjete i pozicije na Googleu. No to je posljedica načina izrade, a ne same tehnologije.

Evo pet odluka koje odlučuju hoće li 3D stranica biti brza.

1. Sadržaj prvi, scena poslije

Tekst, naslov i poziv na akciju moraju biti vidljivi odmah, bez čekanja na WebGL. Scena se učitava u pozadini i pojavljuje kad je spremna. Posjetitelj koji je došao pročitati što radite to može napraviti u prvoj sekundi, a onaj koji ostane dobiva doživljaj.

2. Modeli i teksture na dijeti

Većina težine 3D stranice nije u kodu, nego u modelima i teksturama. Zato:

  • modele izvozimo kao glTF i sažimamo ih (Draco ili Meshopt),
  • teksture pretvaramo u KTX2, format koji grafička kartica čita izravno,
  • broj poligona prilagođavamo onome što se na ekranu stvarno vidi.

Model od 40 MB lako postane 2 MB, a da razliku nitko ne primijeti.

3. Ne crtaj ono što nitko ne gleda

Scena koja se renderira 60 puta u sekundi dok je posjetitelj na dnu stranice ili u drugoj kartici troši bateriju i grije mobitel. Renderiranje pauziramo kad scena nije vidljiva, a na slabijim uređajima smanjujemo rezoluciju i broj čestica.

4. Poštuj „smanjeno kretanje”

Dio ljudi u postavkama sustava uključi smanjeno kretanje (reduced motion) — zbog vrtoglavice, migrene ili jednostavno uštede baterije. Za njih scena staje na jednoj lijepoj, mirnoj slici. Stranica i dalje izgleda kako treba, samo se ne miče.

5. Tražilice dobivaju HTML, ne WebGL

Googleov robot ne gleda animacije. Njemu šaljemo isti sadržaj kao statičan HTML sa sličicom scene, pa je svaka rečenica indeksirana, a stranica se i robotima i posjetiteljima učitava jednako brzo.

Kako znati da je dovoljno brzo?

Mjerimo isto što i Google: LCP (koliko brzo se pojavi glavni sadržaj) i INP (koliko brzo stranica reagira na klik). Cilj je LCP ispod 2,5 sekunde i INP ispod 200 ms — na prosječnom mobitelu, ne na razvojnom računalu.

3D je alat, ne cilj. Ako scena ne pomaže priči o vašem brendu, ne treba je ni biti — a ako pomaže, ne mora usporiti stranicu.

Pročitajte i