Nadaljujem z zapisi o optimizaciji hitrosti spletne trgovine (ali strani) z malce bolj konkretnimi primeri izboljšav. Verjetno je vsebina bolj namenjena razvijalcem kot lastnikom spletnih trgovin, vendar menim, da se lahko tudi slednji kaj naučijo.
Zakaj ponovno pisanje o optimizaciji hitrosti? Ker vidim, da je stanje na tem področju katastrofalno, verjetno bolj, kot si misli večina lastnikov spletnih trgovin ali strani. Večina ne meri, koliko obiskovalcev izgubi, ko se stran na mobilniku nalaga po 10 sekund. Tisti, ki pa so že tako daleč, da so opazili škodo, pogosto namesto urejanja trenutnega stanja želijo zamenjati celotno platformo. Žal pa ostanejo v začaranem krogu, saj večina izdelovalcev spletnih trgovin dela na predizdelanih predlogah, ki v večini primerov niso idealno optimizirane za hitrost. Iskreno povedano, bi bilo to tudi zelo težko doseči, saj morajo te biti primerne za več različnih tipov spletnih mest.
Če ne veste, kakšno je stanje vašega spletnega mesta, lahko to preverite na povezavi: Google PageSpeed Insights.
Glejte, da je hitrost spletne trgovine na mobilni napravi vsaj pod 3 sekunde nalaganja oz. ocena 50+/100.
Spodaj bom predstavil nekaj primerov, kako sem se lotil zadnjih primerov optimizacije hitrosti z najpogostejšimi točkami.
Preverite dnevnik napak na spletnem mestu
Zelo pogosto se pri delovanju spletne strani v ozadju pojavljajo napake, ki se mogoče ne kažejo na sprednjem delu trgovine, vendar kljub temu vplivajo na delovanje. Napake namreč ne zaključijo določenih operacij, posledično pa se te večkrat izvajajo, kot je potrebno. Lahko se zgodi tudi, da se vse skupaj zaradi tega zacikla in precej obremeni proces delovanja.
Poleg napak v dnevnikih preverite tudi izvajanje procesov na strežniku preko terminala. Za podrobnejše analize so na voljo orodja, kot je New Relic. Ne pozabite preveriti tudi napake v konzoli brskalnika (F12 in klik na zavihek "Console").
Močno vam priporočamo, da po odpravi vseh napak dobro stestirate delovanje trgovine, saj se lahko pojavijo nove funkcionalnosti in spremeni delovanje trgovine. Na primer, če ima trgovina modul za klepet, ki prej ni deloval zaradi napake, se lahko po odpravi napake na strani nenadoma pojavi okno za klepet, kar lahko povzroči slabo voljo spletnega trgovca, ker tega ni takoj opazil.
Nadgradite spletno platformo in okolje (PHP, ipd.)
Ko odpravite vse napake in preverite delovanje, je primerno začeti s posodobitvijo sistema in nadgradnjo strežniškega okolja. Vsaj pri Magentu in OpenMage je tako, da so nove verzije sistema običajno bolje optimizirane in hitrejše. Podpirajo tudi novejša okolja, kot je na primer PHP 8.x.
Razlika v hitrosti delovanja med PHP 5.6 in PHP 8.3 je ogromna, saj testi in primerjalne analize kažejo, da je PHP 8.3 lahko dvakrat do trikrat hitrejši od PHP 5.6, kar pomeni, da aplikacije, ki tečejo na PHP 8.3, izvajajo operacije in naloge bistveno hitreje in učinkoviteje.
Po nadgradnji ponovno preverite napake, saj vsi dodatni moduli in teme morda niso prilagojeni novejšim verzijam, če že dlje časa niso bili posodobljeni.
Optimizacija prikaza slik
V večini primerov slike pri nalaganju spletne strani zasedejo največ prostora oz. porabijo največ podatkovne širine. Za njihovo optimizacijo se osredotočam na tri glavna področja: nalaganje slik na različnih resolucijah, odloženo nalaganje slik izven vidnega polja in prikaz slik v modernih formatih (WebP).
Nalaganje slik na različnih resolucijah
Če niste previdni na začetku in nimate vgrajenega avtomatskega pomanjševanja slik na spletni strani, ko nalagate nove slike, preverite najprej, kako velike so naslovne slike in druge slike na strani. V večini primerov so slike prevelike, lahko zasedajo tudi do en megabajt, medtem ko bi lahko bile desetkrat manjše, če bi se pravilno naložile v ustreznem formatu.
Na primer, nedavno sem pregledal spletno stran, ki sem jo dobil v popravilo, in v njenem meniju je bilo več slik, ki skupaj presegajo 16 MB, čeprav niso bile vidne na mobilni napravi. Posledično se je stran nalagala tudi po več kot 20 sekund. Zanimivo je, da je bila ta trgovina izdelana s strani enega največjih izdelovalcev spletnih strani v Sloveniji, kar pomeni, da je vedno potrebno biti previden pri postavitvi novega projekta. Če imate sredstva, toplo priporočam, da se izogibate večnamenskim predizdelanimi predlogam in raje naredite predlogo po meri. Če pa že uporabljate predizdelane predloge, jih je priporočljivo preizkusiti, preden začnete z delom na njih. Ne glejte vedno samo na izgled trgovine, ampak se osredotočite tudi na njeno delovanje. Ponavadi drži, da malo denarja prinese malo muzike, vendar ne vedno!
Slike preverite tako, da v brskalniku odprete orodje za razvijalce (desni klik in Inspect ali s klikom na gumb F12). Nato kliknite na zavihek "Network", kjer lahko vire na strani razvrstite po velikosti. Če opazite, da se za mobilno verzijo naloži več slik, ki so širše od izbrane širine mobilnika, to pomeni, da se nalagajo prevelike slike.
Na podlagi primera vidimo, da bi lahko bila slika ožja in precej manjše velikosti. Poleg tega je vredno razmisliti, ali ima takšna slika sploh smisel na mobilniku, saj iz nje besedilo ni berljivo. Verjetno je bolje, če se slika skrije ali zamenja s podolgovato sliko z večjimi napisi.
Če želite uporabiti različne slike za različne velikosti zaslona, uporabite HTML format .
<picture>
<source media="(min-width: 460px)" srcset="mobile_slika.wepb">
<img src="desktop_slika.webp">
</picture>
Ponavadi strankam predlagam, da ločijo besedilo od slike, tako da naložijo samo eno sliko, ki se avtomatsko pravilno obreže na strani. Besedilo nad sliko se nato prilagaja glede na širino zaslona, tako da je vedno vse optimalno prikazano, kar prihrani trgovcem veliko časa. Posledično lahko trgovci hitreje izvajajo marketinške akcije in druge marketinške dejavnosti.
Odloženo nalaganje slik izven vidnega polja
Odloženo nalaganje slik izven vidnega polja je odlična praksa, ki omogoča hitrejše nalaganje strani, zlasti pri spletnih mestih z veliko slikovno vsebino. Namesto da bi obiskovalcem naenkrat naložili vse slike, se slike v vidnem polju naložijo takoj, ostale pa se nalagajo šele, ko pridejo v vidno polje. To prihrani čas nalaganja in izboljša uporabniško izkušnjo.
Za implementacijo odloženega nalaganja slik izven vidnega polja lahko uporabite HTML oznako loading="lazy" ali pa vdelate JavaScript vtičnik za LazyLoad nalaganje, kot je na primer vanilla-lazyload.
<img loading="lazy" src="image.webp" alt="..." />Več informacij o tej metodi najdete na spletni strani razvijalcev Mozille.
Poleg tega je dobro narediti tudi predhodno nalaganje (preload) slik, ki so takoj vidne na strani, da se te naložijo prednostno in zapolnijo prostor. To zmanjšuje premike strani med nalaganjem in zagotavlja, da se večje slike naložijo prej.
Predhodno nalaganje slik lahko izvedete na naslednji način:
<link rel="preload" as="image" href="important.png">Če imate različne slike za različne resolucije, jih lahko predhodno naložite glede na resolucijo, da se prepreči nalaganje nepotrebnih slik za določeno napravo.
<link rel="preload" href="mobile_slika.webp" as="image" media="(max-width: 460px)">
<link rel="preload" href="desktop_slika.webp" as="image" media="(min-width: 461px)">S tem boste zagotovili boljšo učinkovitost nalaganja slik in izboljšali hitrost ter uporabniško izkušnjo vaše spletne strani.
Prikaz slik v modernih formatih (WebP)
Prikazovanje slik v WebP formatu na spletni strani je odličen način za izboljšanje hitrosti nalaganja in zmanjšanje porabe pasovne širine. WebP slike so običajno manjše od drugih formatov, kot so JPG in PNG, hkrati pa ohranjajo visoko kakovost. Implementacija podpore za nalaganje slik v WebP formatu zahteva dodatno konfiguracijo na platformi, saj nekatere platforme privzeto podpirajo le klasične formate, kot so GIF, PNG in JPG.
Če že imate vse slike naložene v drugih formatih, je najbolje izvesti pretvorbo slik v WebP format. Na primer, za platformo Magento lahko ustvarite modul, ki samodejno pretvori slike v WebP format, če še niso v tem formatu. Ta modul lahko pregleda obstoječo HTML vsebino in pretvori slike iz formatov JPG in PNG v format WebP na strežniku in zamenja URL-je slik.
Pri izdelavi teme je priporočljivo uporabljati čim več vektorskih elementov, ki se lahko naložijo v formatu SVG preko predloge. Vse ostale slike naj se naložijo preko administracije strani in po potrebi spreminjajo z vgrajeno optimizacijo velikosti, načina nalaganja in formata. To omogoča prilagodljivost in učinkovito upravljanje slikovne vsebine na spletni strani.
Minimiziranje HTML/JS/CSS
Seveda, poleg slik moramo biti pozorni tudi na preostale elemente spletne trgovine, da se ti nalagajo čim bolj optimalno. Verjetno je največji minus predizdelanih predlog ravno ta, da običajno nalagajo več različnih knjižnic, ki so po mojih izkušnjah lahko v veliki meri čisto odvečne. Nekateri razvijalci za hitrejše delo raje dodajajo dodatne knjižnice, namesto da bi sami ustvarili kakšno enostavno funkcionalnost. Več knjižnic, kot je na strani, pa zasede več časa.
Če že ne boste odstranjevali odvečnih knjižnic na svoji strani, je dobro, da vsaj kodo, ki se nalaga na strani, optimizirate. To lahko storite tako, da združite skupno kodo datotek. Na primer, združite skupaj CSS in JS datoteke. Nato pa vse skupaj s HTML kodo minimizirajte. Z minimiziranjem se lahko odstranijo nepotrebni komentarji, presledki itd., tako da so datoteke manjše. Hkrati, ker je teh manj, je potrebnih manj zahtevkov na strežniku, da se te vsebine naložijo.
Še mogoče primer, ki bo lažje razumljiv: če pogledamo najbolj priljubljeno knjižnico za CSS oblikovanje Bootstrap, ta zasede sama toliko prostora kot moj celoten CSS spletne trgovine.
Nalaganje zunanjih skript z zamikom
Ko smo že optimizirali vso prikazano vsebino, ostaja še en vidik, ki ga ne moremo popolnoma nadzorovati, in to so zunanje skripte, ki se nalagajo iz zunanjih virov. Na to nimam neposrednega vpliva. Ta del je včasih najtežje optimizirati, saj zahteva temeljito premišljanje o tem, kako ravnati, da ne bi upočasnili delovanja trgovine ali spremenili funkcionalnosti.
To je še posebej pomembno, saj se je že zgodilo, da je ena sama takšna skripta precej upočasnila sicer hitro nalaganje strani.
Prva rešitev je, da nalaganje nepotrebnih skript izvedemo šele po tem, ko se stran že v celoti naloži, tako da ne vplivamo na prvotno nalaganje spletne strani. To lahko naredimo pri skriptah, ki se nanašajo na pojavna sporočila za prijavo na novice in podobno.
<script>
window.addEventListener('DOMContentLoaded', function() {
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
ml('account', xxxx);
});
</script>
Vendar obstajajo skripte, katerih izvajanje ne moremo prestaviti, saj bi to vplivalo na njihovo delovanje. Sem spadajo na primer Google Data Layer, Facebook Pixel in podobni. Te se morajo naložiti takoj, da lahko beležijo vse interakcije uporabnika s stranjo. Te skripte običajno imajo precejšen vpliv na hitrost strani. Če želite preveriti, kako vplivajo na hitrost strani, jih lahko testirate tako s kot brez njih. Za te primere je potrebno več dela, vendar obstajajo rešitve, če smo ustvarjalni.
Na primer, za omenjene primere lahko implementiramo prvostransko sledenje. To pomeni, da vključimo lokalno skripto na stran, ki zbira podatke obiskovalcev in jih nato pošilja na zunanje sisteme. Tako ne obremenjujemo nalaganja strani z zunanjimi skriptami, saj izvajamo skripto neposredno s svoje strani.
Predpomnilnik in njegovo ogrevanje
Ko smo že opravili večino optimizacije na spletni strani ali v spletni trgovini, nas čaka še zadnji pomemben korak: upravljanje predpomnilnika (cache).
Predpomnilnik deluje kot začasna shramba podatkov, ki omogoča hitrejši dostop do pogosto uporabljenih informacij. Namenjen je izboljšanju zmogljivosti sistema in zmanjšanju časa nalaganja s tem, da zmanjšuje potrebo po ponovnem pridobivanju ali izračunu istih podatkov.
Ta sistem shranjuje generirane HTML strani, podatkovne poizvedbe in druge vsebine, da se izogne ponovnemu ustvarjanju teh vsebin ob vsakem zahtevku. Predpomniljenje bistveno pospeši nalaganje strani, saj celotne strani postreže neposredno iz predpomnilnika, kar izboljša zmogljivost in uporabniško izkušnjo. Obstajajo različne vrste predpomnjenja. Na primer, v sistemu Magento je osnovni predpomnilnik drugačen od dodatnega Full Page Cache (FPC). Osnovni cache shranjuje posamezne elemente strani, kot so poizvedbe in podatki, medtem ko FPC shranjuje celotne HTML strani. To omogoča takojšnjo postrežbo celotnih strani brez potrebe po ponovnem sestavljanju iz posameznih delov, kar vodi do hitrejšega nalaganja strani in zmanjšane obremenitve strežnika.
Ko vklopimo predpomnilnik, je pomembno, da ogrejemo vse strani pred prvim obiskom. To pomeni, da že vnaprej generiramo predpomnjene strani, da prvi obiskovalec ne bo moral čakati na ustvarjanje predpomnilnika. Stran ogrejemo s pomočjo tako imenovanih "cache warmerjev", to so skripte, ki se običajno izvajajo preko cron opravil in obiščejo vse povezave na strani, da sprožijo generiranje predpomnilnika.
Čeprav je ta postopek dolgotrajen, je ključnega pomena za zagotovitev optimalnega delovanja spletnega mesta ali trgovine, ki omogoča čim več prodaje ali povpraševanj. Sam sem delal na precej kompleksnih platformah, kot sta Magento 2 in Openmage, in mi je uspelo za oba ustvariti predlogo s popolno oceno za mobilne naprave (100/100). To kaže, da je vse mogoče, če se potrudimo. Čeprav ocena ni vedno popolna, je dobro, da je vsaj pozitivna (50+).
Upam, da ste našli ta pregled zanimiv in koristen. Mislim, da sem zajel glavne stvari, ki pomagajo pospešiti nalaganje spletnih strani, čeprav seveda ne morem pokriti vsega v enem članku. Pri tem je pomembno razumeti tako izboljšave na sprednji strani spletnega mesta kot tudi na strani strežnika. To vključuje uporabo orodij, kot so Redis, Varnish in OpCache itd., ki pomagajo shranjevati podatke in pospešiti delovanje spletnih strani. Hkrati je treba paziti tudi na hitrost strežnika in pravilno konfiguracijo, da zagotovimo, da se strani hitro nalagajo.
Če želite videti, kako deluje optimizacija v praksi, lahko preverite demo različice spletnih trgovin Magento 2 in OpenMage (Magento 1.9).
