Hitrost spletnega mesta neposredno vpliva na uporabniško izkušnjo, zato je za hitrejše delovanje ključna optimizacija slik ter stiskanje in asinhrono nalaganje CSS in JavaScript kode. Znatno izboljšanje zmogljivosti dosežemo tudi z učinkovitim predpomnjenjem, uporabo omrežja za dostavo vsebine (CDN) in strežniškim stiskanjem podatkov. Da bi ohranili odlično uporabniško izkušnjo in dobre poslovne rezultate, pa je nujno redno merjenje učinkovitosti z orodji, kot sta Lighthouse in PageSpeed Insights.

Hitrost spletnega mesta neposredno vpliva na uporabniško izkušnjo, uporabniki pričakujejo, da se bodo strani hitro nalagale, zlasti na mobilnih napravah in pri počasnejših povezavah. Že majhna zamuda lahko poveča zapuščanje strani in zmanjša zanimanje. Izboljšanje spletne zmogljivosti običajno ne zahteva celotne prenove. V tem članku bom opisal nekaj praktičnih načinov za pospešitev delovanje spletnega mesta.

Slike so pogosto največja sredstva na spletni strani. Nalaganje nepotrebno velikih slik lahko zelo poveča čas nalaganja. Najbolje je spremeniti velikost slik na dejansko potrebne dimenzije in uporabiti sodobne formate, kot sta WebP ali AVIF. Uporabi se lahko tudi prilagodljive slike z ukazom srcset, da mobilne naprave ne bodo prenašale datotek velikosti namiznega računalnika.

<picture>

    <source srcset="slika.avif" type="image/avif">

    <source srcset="slika.webp" type="image/webp">

    <img src="slika.jpg" alt="Slika" width="1200" height="600">

</picture>

Za slike prikazane nižje na strani se lahko uporabi tudi zakasnjeno nalaganje (lazy loading) s pomočjo atributa loading, ki naloži datoteke šele, ko se jim uporabnik približa.

<img src="/images/slika.webp" loading="lazy" alt="Slika">

Enak princip lahko uporabimo tudi za nalaganje ostalih multimedijskih vsebin, kot so video posnetki, avdio datoteke in druge vdelane datoteke (embed, iframe).

Na spletni strani je običajno naloženi tudi kar nekaj datotek za urejanje stilov in dinamičnosti vsebine. Presledki, komentarji in nepotrebni znaki povečajo velikost datoteke, ne da bi to vplivalo na funkcionalnost, zato je datoteke dobro stisniti (minify). CSS kodo kot je

.gumb {

    background-color: #094879;

    padding: 10px 20px;

}

lahko brez izgube funkcionalnosti stisnemo na 

.gumb{background-color:#094879;padding:10px 20px;}

S pomočjo orodij, kot je webpack pa lahko postopek tudi avtomatiziramo.

JavaScript lahko znatno vpliva na zmogljivost, saj ga mora brskalnik prenesti, razčleniti, prevesti in izvesti. Bolj kot zmanjševanje same datoteke, je pomembno zmanjševanje količine kode, ki je nepotrebna za posamezno stran. Za skripte, ki jih ni treba takoj izvesti, se lahko uporabi defer

<script src="aplikacija.js" defer></script>

Za neodvisne skripte tretjih oseb pa se lahko uporabi asinhrono nalaganje

<script src="analitika.js" async></script>

Namesto da prenesemo vsa sredstva iz glavnega strežnika, lahko uporabimo CDN (content delivery network), ki shranjuje datoteke na drugih strežnikih.  Namesto da bi se vsak uporabnik povezal z glavnim strežnikom, lahko prejme vire z lokacije, ki mu je geografsko bližje. CDN je še posebej uporaben za spletna mesta z mednarodnimi uporabniki ali veliko količino statične vsebine.

Pri nalaganju lahko tudi zmanjšamo količino datotek, ki se naloži ob vsaki osvežitvi strani. Predpomnjenje omogoča brskalnikom, da lokalno shranjujejo pogosto uporabljene vire. Ko se obiskovalci vrnejo na spletno mesto, lahko ponovno uporabijo predpomnjene datoteke CSS, JavaScript in slike, namesto da bi jih ponovno prenesli. Na strežniku lahko določimo header, ki sporoči brskalniku, kako naj shranjuje sredstva. Določimo mu lahko dostopnost (public/private) in čas trajanja. Za datoteke, ki se ne bodo spreminjale oziroma imajo že v imenu dodano verzijo lahko uporabimo tudi immutable, kar sporoči brskalniku, da je ni treba preverjati.

Cache-Control: public, max-age=31536000, immutable

Hiter uporabniški vmesnik ne more nadomestiti počasnega strežnika. Če strežnik predolgo ustvarja začetni odgovor HTML, se celotna stran zažene počasi. Poizvedbe v bazo, neučinkovita koda in prekomerni klici API-ja lahko prispevajo k dolgim odzivnim časom strežnika. Predpomnjenje pogosto zahtevanih strani ali rezultatov baze lahko pomaga izboljšati zmogljivost in precej pospeši nalaganje.

if (cache.ContainsKey(page))

{

    return cache[page];

}

var generatedPage = GeneratePage();

cache[page] = generatedPage;

return generatedPage;

Za besedilne datoteke kot so HTML, CSS, JavaScript, SVG in JSON se lahko tudi omogoči stiskanje s pomočjo Gzip ali Brotli. Stiskanje zmanjša velikost poslanih podatkov in s tem pospeši nalaganje. Primer implementacije na Node.js strežniku

import express from 'express';

import compression from 'compression';

const app = express();

app.use(compression());

app.get('/api/data', (req, res) => {

    res.json({

        message: 'Pozdravljen svet!',

        data: '...'

    });

});

app.listen(3000);

Pred in po optimizacijo strani lahko uporabimo orodja za merjenje kot so Chrome DevTools, Lighthouse in PageSpeed Insights, ki nam omogočajo hitro prepoznavanje ozkih grl. Pri analizi je poleg hitrosti nalaganja datotek dobro spremljati tudi največje vsebinsko slikanje (LCP - Largest Contentful Paint), ki pove, kako hitro postane glavna vsebina vidna, interakcija z naslednjim slikanjem (INP - Interaction to Next Paint), ki pove, kako odzivna je stran na interakcije uporabnikov, in kumulativni premik postavitve (CLS - Cumulative Layout Shift), ki pove, koliko se postavitev nepričakovano premakne. Učinkovitost delovanja je treba redno spremljati, saj lahko nove slike, vtičniki, skripte in spremembe oblikovanja postopoma upočasnijo delovanje spletnega mesta.

Učinkovitost delovanja spletnega mesta je rezultat številnih majhnih odločitev in ne ene same optimizacije. Stiskanje slik, zmanjšanje JavaScripta, omogočanje predpomnjenja, izboljšanje odzivnih časov strežnika in uporaba CDN-ja lahko bistveno vplivajo na hitrost nalaganja strani. Pomembno je tudi merjenje učinkovitost delovanja pred in po implementaciji sprememb, da ugotovimo, katere optimizacije dejansko pomagajo. Hitro spletno mesto zagotavlja boljšo izkušnjo za uporabnike, porabi manj virov in lahko prispeva k boljšim poslovnim rezultatom.

Domen Gričar

Front - end programer, predavatelj

MCT, MS, MCSD

domen.gricar@kompas-xnet.si

Do you have any additional questions?

For more information, we are always happy to assist you. Feel free to contact us at info@kompas-xnet.si or call us at 01 5136 990.