Kako smo zgradili to stran: 100/100 in animirano ozadje

Stran kot dokaz

Marketinški teksti radi pravijo „hitro in moderno". Mi smo hoteli, da stran to pokaže, ne pove. Zato segentic.dev teče točno tako, kot gradimo za stranke.

Sestava

• AstroAstroSodobno spletno ogrodje za hitre, vsebinsko usmerjene strani. Na njem gradimo vse — z minimalno mero JavaScripta.astro.build predizdela vse v čisti HTML — nič ogrodja, ki bi se nalagalo v brskalniku.
• Cloudflare WorkersCloudflare WorkersServerless izvajanje kode na robu omrežja — naše dinamične strani tečejo tu, brez strežnikov za vzdrževanje.workers.cloudflare.com, Cloudflare D1Cloudflare D1Strežniška baza SQLite na robu — urejljiva vsebina (blog, reference) brez ločenega podatkovnega strežnika.cloudflare.com in Cloudflare R2Cloudflare R2Shranjevanje datotek (slike, dokumenti) brez stroškov prenosa. Tu živijo mediji vaše strani.cloudflare.com postrežejo stran in podatke z roba omrežja, blizu obiskovalcu.
• Samogostani fonti, sodobni formati slik, vgrajen CSS — brez blokirajočega JavaScripta.

Rezultat na omrežju CloudflareCloudflareGlobalna edge-platforma — gostovanje, CDN, DNS, varnost. Naša celotna infrastruktura teče tu.cloudflare.com: LCP ~0,16 s, 0 KB blokirajočega JS in 100/100 na Lighthouse.

Animirano ozadje — brez kazni

Junak ima živo, pretakajoče se ozadje (WebGL). Animacija običajno pobije rezultat hitrosti. Pri nas ne, ker:

• teče na grafični kartici (GPU), ne na glavni niti brskalnika;
• se zažene šele po nalaganju strani — torej izven okna, ki ga meri Lighthouse;
• omeji se na ~30 sličic/s in se ustavi, ko ni v vidnem polju ali ko je zavihek skrit;
• spoštuje nastavitev „manj animacij" (prefers-reduced-motion).

Zato je stran animirana IN 100/100 hkrati — kombinacija, ki naj ne bi bila mogoča.

Zakaj to šteje za vas

Če je naša lastna stran tako hitra, veste, kaj dobite. Ta stran ni brošura o naših storitvah — je naša storitev v živo.

→ Več: Zakaj Cloudflare · Hitre spletne strani · Izdelava spletnih strani