Naša stran je bila hitra. Vsaj tako smo mislili. Potem smo jo testirali na Website Carbon in dobili oceno B.

B ni slaba ocena. Za agencijo, ki strankam prodaja hitre spletne strani, pa tudi ni dovolj dobra. V treh dneh smo domačo stran z 1.237 KB spravili na 135 KB in dosegli A+. Tukaj je natančno, kaj smo spremenili in koliko je vsak ukrep prinesel.

Kaj meri Website Carbon

Website Carbon oceni, koliko CO₂ nastane ob vsakem ogledu strani. Izračun temelji predvsem na tem, koliko podatkov mora brskalnik prenesti, in na tem, ali strežnik teče na obnovljivi energiji.

Lestvica je jasna:

Ocena CO₂ na ogled
A+ do 0,040 g
A do 0,079 g
B do 0,145 g
C do 0,209 g

Mi smo imeli 0,11 g. Gostovanje na Cloudflare je bilo že zeleno, zato je ostala samo ena pot: stran mora prenesti manj podatkov. Za A+ smo morali težo zmanjšati na približno tretjino.

Pomemben stranski učinek: manj podatkov pomeni tudi hitrejše nalaganje. Ogljični odtis in hitrost sta v praksi isti problem.

Izhodišče: kam je šlo 1,2 MB

Prvi korak je bil izmeriti, kaj domača stran sploh naloži. Brskalnik smo pognali s praznim predpomnilnikom in stran prescrollali do konca.

Rezultat nas je presenetil. HTML in CSS skupaj sta imela samo 34 KB. Vse ostalo so bile stvari, ki jih obiskovalec ne vidi neposredno:

  • Slike projektov: 872 KB. Tri fotografije na domači strani so tehtale 387, 261 in 224 KB.
  • Google Analytics: 195 KB. Več kot polovica vsega, kar se je naložilo pred slikami.
  • Knjižnica za animacije (GSAP): 46 KB.
  • Font: 47 KB v dveh datotekah.

Pet ukrepov

1. Slike: z 872 KB na 30 KB

Fotografije projektov so bile neoptimizirani JPG-ji. Tiste na domači strani so bile široke 1.200 pikslov, nekatere v galerijah projektov celo 8.000. Na domači strani so prikazane v karticah, širokih približno 420 pikslov.

Zdaj jih Astro ob vsakem buildu samodejno pretvori v formata AVIF in WebP v več velikostih. Brskalnik izbere najmanjšo, ki je za zaslon dovolj ostra. Tri slike na domači strani skupaj zdaj tehtajo 30 KB, kar je 96 % manj, razlike v kakovosti pa na oko ni.

To je bil daleč največji prihranek. Cena: build zdaj traja približno dve minuti dlje, ker je pretvorba v AVIF počasna.

2. Google Analytics šele po privolitvi

Skripta Google Analytics se je prej naložila vsakemu obiskovalcu, tudi tistemu, ki je piškotke zavrnil. Zaradi Consent Mode ni beležila osebnih podatkov, a 195 KB je vseeno potovalo po omrežju.

Zdaj se skripta naloži šele, ko obiskovalec klikne “Sprejmi”. Kdor zavrne, ne prenese ničesar. To je hkrati bolj čisto tudi z vidika GDPR.

Kompromis: Google za obiskovalce, ki zavrnejo, ne more več modelirati anonimnih podatkov. Za nas je bila to sprejemljiva cena.

3. Animacije brez težke knjižnice

Animacije na strani (razkrivanje vsebine ob scrollu, nagibanje kartic, magnetni gumbi) so tekle na knjižnici GSAP. Odlično orodje, a stran je uporabljala le majhen del njenih zmožnosti.

Napisali smo lasten modul, ki pokrije natanko tiste funkcije, ki jih stran potrebuje, in uporablja vgrajene zmožnosti brskalnika. Stisnjen tehta 3,3 KB namesto 46 KB. Animacije so ostale enake.

4. Font samo s črkami, ki jih uporabljamo

Font Outfit se je nalagal v dveh datotekah s skupaj 47 KB, vključno z znaki za jezike, ki jih na strani nimamo.

Pregledali smo vse strani, poiskali vse znake, ki se dejansko pojavijo, in font zmanjšali samo na te: angleško abecedo, č, š, ž, ć, đ in ločila. Ena datoteka, 23 KB.

5. Favicon kot SVG

Majhna stvar, a pove veliko. Ikona v zavihku je bila datoteka .ico z 8 KB. Kot vektorski SVG ima 0,9 KB in je ostra na vsakem zaslonu.

Rezultat

Prej Potem
Teža domače strani 1.237 KB 135 KB
Slike 872 KB 30 KB
JavaScript 283 KB 46 KB
Font 47 KB 23 KB
CO₂ na ogled 0,11 g 0,01 g
Čistejša od 75 % strani 98 % strani
Ocena B A+

Stran je 9-krat lažja. Pri 10.000 ogledih na mesec to po izračunu Website Carbon pomeni približno 1,3 kg CO₂ na leto namesto 12,8 kg.

Kaj to pomeni za SEO in obiskovalce

Bodimo pošteni: Google vam ne bo dvignil uvrstitve, ker imate oceno A+. Značka v nogi strani ni signal za iskalnike.

Je pa signal tisto, kar ocena meri. Lažja stran se naloži hitreje, posebej na telefonu s slabim signalom. Hitrost vpliva na Core Web Vitals, ti pa na uvrstitve in na to, ali obiskovalec počaka ali odide.

Za nas ima ocena še en pomen. Ko strankam govorimo o hitrih straneh, lahko pokažemo svojo.

Kako preverite svojo stran

Testirajte na websitecarbon.com. Test je brezplačen in traja nekaj sekund. Če je ocena C ali slabša, je skoraj gotovo prostor za velik napredek.

Poglejte velikost slik. V brskalniku odprite orodja za razvijalce, zavihek Network, in osvežite stran. Če vidite slike z več sto KB, je to najhitrejši prihranek.

Preštejte zunanje skripte. Analitika, klepetalniki, pixli za oglase, vtičniki za družbena omrežja. Vsak doda težo. Vprašajte se, katere res potrebujete in ali se morajo naložiti pred privolitvijo.

Preverite fonte. Trije ali štirje fonti v več debelinah lahko hitro presežejo 200 KB.

Če želite vedeti, koliko bi lahko izboljšali svojo stran, nas kontaktirajte. Pregledamo, kaj vaša stran nalaga, in vam povemo, kateri ukrepi bodo prinesli največ.