Zašto se stranice učitavaju brzo?

Brzina WebShopHR dućana dolazi iz nekoliko slojeva: server renderira HTML prije nego što kupac uopće zatraži stranicu, slike su optimizirane, JavaScript je minimalan, a statika i stranice se pametno keširaju. Brzina nije samo tehnički detalj. Direktno utječe na stopu napuštanja i doživljaj kupca.

Server-side rendering

Cijeli dućan renderira se na poslužitelju i šalje kao HTML. Kupac ne čeka da se prvo preuzme veliki JavaScript paket, a tek onda „oživi" stranica poput Reacta ili Vuea (postupak zvan hidratacija). Osim što je brže, to znači da ključni sadržaj (popis artikala, cijene, opisi) stiže odmah u prvom zahtjevu. Preglednik počinje prikazivati stranicu čim primi prve bajtove.

Minimalan JavaScript

Dućan učitava jednu malu JavaScript knjižnicu, i to odgođeno. Svi osnovni tokovi (košarica, naplata, pretraga, recenzije, povrat, cookie privola) rade kao obični HTML obrasci. HTMX je progresivno poboljšanje koje ubrzava djelomične zamjene, a ne uvjet za kupnju. AI chat dodaje dodatnu skriptu, ali samo na Enterprise paketu. Bez nje stranica funkcionira u potpunosti.

Bez vanjskih fontova i trackera

Sve skripte i stilovi dolaze s vlastitog poslužitelja. Sigurnosna pravila ne dopuštaju učitavanje resursa s nepoznatih domena. Nema Google Fontsa niti third-party trackera po defaultu, pa se kupčev IP ne šalje trećim stranama. Google Analytics se učitava tek ako trgovac unese svoj ID i kupac prihvati cookie privolu. Time se smanjuje broj vanjskih zahtjeva i rizik kašnjenja.

Slike su optimizirane u letu

Slike se ne serviraju u originalnoj veličini. Kad su konfigurirane, idu kroz imgproxy koji ih automatski pretvara u WebP, prilagođava širinu ovisno o kontekstu i šalje kao potpisani URL. Bez imgproxyja dućan graciozno pada na /slike/{key} putanju, pa slike nikad ne nestaju zbog nedostatka konfiguracije. Mobilni kupci tako ne preuzimaju ogromne originalne fotografije.

Potpisani URL-ovi sprječavaju zloupotrebu

imgproxy URL-ovi nose kriptografski potpis izračunat HMAC-SHA256 algoritmom. Ako potpis nije točan, imgproxy odbija servirati sliku, pa netko ne može sastaviti proizvoljne URL-ove i koristiti dućan kao besplatni resize servis. Aplikacija odbija startati u produkciji ako je imgproxy uključen bez ključa i soli. Nikad se ne koriste poznati razvojni ključevi. Sigurnosna konfiguracija je po defaultu zatvorena.

Dimenzije i odgađanje učitavanja slika

Svaka slika u predlošcima ima eksplicitne width i height atribute, pa preglednik odmah rezervira prostor i izbjegava pomake layouta. Slike koje nisu odmah vidljive učitavaju se lijeno (loading="lazy"), dok se hero slika učitava odmah (loading="eager").

Slikovni okviri imaju fiksan omjer stranica i object-fit: cover, pa ne dolazi do izobličenja. Bez ovakvih dimenzija, slike bi pomicale ostatak sadržaja dok se učitavaju. Isto pravilo drži i mobilne stranice mirnima na sporijim mrežama.

Pametno keširanje stranica

Javne stranice za goste drže se u kešu s generacijskim ključevima. Promjena teme ili sadržaja diže verziju ključa, pa se ne treba ručno brisati cijeli keš. Kad istovremeno više kupaca zatraži istu hladnu stranicu, samo jedan zahtjev renderira, a ostali dijele gotov HTML. Ako keš sloj zakazuje, dućan se nastavlja renderirati iz baze. Stranice zbog keša nikad ne pokazuju tuđe podatke.

Sigurnosni tokeni se ne dijele kroz keš

Keširani HTML sadrži zamjenski CSRF token. Pravi se token zamjenjuje tek pri serviranju pojedinačnog zahtjeva, pa isti keširani dokument može koristiti beskonačno mnogo kupaca bez curenja sigurnosnih tokena među njima. Svaki kupac ipak dobije vlastiti zaštićeni obrazac.

Agresivno keširanje statike

CSS, JavaScript, fontovi i slike serviraju se s otiskom sadržaja u URL-u. Kad se sadržaj promijeni, URL se promijeni, a na ispravnom URL-u preglednik može držati datoteku godinu dana kao immutable. Svi odgovori nose ETag, pa se nakon isteka keša može vratiti 304 umjesto ponovnog preuzimanja. Na taj način ponovni posjeti ne troše gotovo nikakav promet.

Košarica ne vidi zastarjele cijene

Košarica gosta čuva samo količine u Valkeyu. Cijene se uvijek čitaju svježe iz kataloga. To znači da kupac nikad ne vidi cijenu koju je trgovac promijenio prije par sati, a istovremeno se smanjuje broj upita u bazu za same količine. Čak i ako se kupac vrati sutradan, cijene će biti trenutne.

Pad jednog dijela ne ruši cijeli poslužitelj

Ako se u jednom handleru dogodi panika, middleware je hvata i pretvara u grešku 500 samo za taj zahtjev. Ostali kupci i dalje normalno pregledavaju dućan. Isto vrijedi za keš i rate-limit slojeve. Ako Valkey nije dostupan, stranica se nastavlja servirati iz baze. Nijedan pojedinačni pad ne može obustaviti prodaju.

Više o temi: Izgled i brzina.