Danas JavaScript igra ključnu ulogu u kreiranju interaktivnih i dinamičnih veb sajtova. Može se reći da svaki savremeni sajt koristi JavaScript. Prisutаn je u mnogim slajderima, karuselima, padajućim menijima, Drag&Drop elementima, galerijama, animiranim dugmadima i mnogim drugim funkcionalnostima.
Zahvaljujući njemu postižu se dizajni sa jedinstvenim vizuelnim efektima. Omogućavaju se funkcionalnosti kao što su chat, feed u realnom vremenu, rezervacije. JavaScript šalje događaje ka eksternim platformama kao što su Google Analytics, Facebook Pixel, Mailchimp, GDPR Consent platforme i druge.
JavaScript omogućava korisnicima interakciju sa veb stranicom bez njenog ponovnog učitavanja, a koristi u veb razvoju su neprocenjive.
Može li JavaScript da uspori sajt?
Postoje situacije u kojima može dovesti do usporavanja. Usporavanje izazvano JavaScript-om može biti teže uočljivo, ali ako znamo na šta da obratimo pažnju, provera je jednostavna.
Može se pojaviti pri određenoj akciji (klik na dugme, otežano skrolovanje, „seckanje“ animacije i dr.) ili pri inicijalnom učitavanju sajta.
U većini slučajeva radi se o usporavanju pri prvom učitavanju sajta i stranica. Razlozi mogu biti različiti, a jedan od najčešćih je povezan sa JavaScript resursima koji se učitavaju na sajtu. Obično se ne radi o jednom skriptu, već o ukupnoj količini svih JavaScript resursa prilikom učitavanja.
Što se više efekata akumulira, to se povećava broj JavaScript resursa na sajtu. Povećanje ovih resursa ne može proći nezapaženo i svakako utiče na brzinu učitavanja sajta.
Glavni razlog je što ovi resursi povećavaju ukupnu veličinu veb stranice i zahtevaju dodatno vreme za preuzimanje (Download) sa veb servera u pregledaču posetioca.
Drugi razlog je što zahtevaju dodatno vreme za obradu i izvršavanje u pregledaču posetioca.
Međutim, nema razloga za zabrinutost. Ne morate uklanjati lepe vizuelne efekte niti se odricati omiljenih funkcionalnosti.
Jednostavno i efikasno rešenje je optimizacija sa odloženim učitavanjem JavaScript-a (Delay JavaScript execution). Ova optimizacija omogućava da se pri inicijalnom učitavanju preuzmu i izvrše samo oni JS resursi koji su neophodni za prikaz vidljivog dela stranice, što može značajno ubrzati učitavanje. Ostali resursi će se preuzeti kasnije.
Skripti se veštački odlažu i učitavaju tek nakon određenog događaja: skrolovanja, klika ili nakon tačno definisanog vremena (npr. 2 sekunde).
Drugi pristup odlaganju, umesto delay metode, je korišćenje HTML atributa defer. Metoda sa defer-om je bezbednija, ali sa nešto manjom efikasnošću.
Koristno ili štetno je odloženo učitavanje JavaScript-a?
Kada je sajt jednostavan ili srednje složen, često se ne koristi mnogo JavaScript-a. Zato, na manjim sajtovima, JavaScript obično nema vidljiv uticaj na performanse i nije potrebna ovakva optimizacija. Čak i ako se primeni, efekat je zanemarljiv i bolje je da se ne radi.
Međutim, složeniji sajtovi često učitavaju previše JavaScript-a, što značajno produžava vreme učitavanja. Veći deo ovih skriptova nije neophodan za inicijalni prikaz sadržaja i dobro je da se odloži njihovo izvršavanje.
Efekat optimizacije može se jasno primetiti na sajtovima sa 2–5 MB skripti.
U praksi često nailazimo na slučajeve gde JavaScript zauzima više od polovine ukupnog obima veb stranice.
Na primer, cela početna stranica ima 8 MB, od čega je 5 MB samo JavaScript. U takvom slučaju efekat odlaganja je značajan i optimizacija je dobar pristup.
Kako izmeriti količinu JavaScript-a na sajtu?
Metrike koje se koriste za merenje količine JavaScript-a uključuju:
- Obim (u KB) JavaScript fajlova preuzetih u pregledaču;
- Broj JavaScript fajlova;
- Vreme izvršavanja skripti (performance);
- Veličinu izvornog JavaScript koda (uključujući inline skripte).
Sve ove metrike su relevantne, ali najčešće je dovoljan pokazatelj obim preuzetog JavaScript-a da bi se procenilo da li je potrebna optimizacija. U ređim slučajevima prate se i ostale metrike.
Merenje se može izvršiti na nekoliko načina:
- Korišćenjem alata u pregledaču (DevTools);
- Kroz PageSpeed Insights ili Lighthouse (ugrađeno u Chrome);
- Korišćenjem drugih alata trećih strana, poput WebPageTest i GTmetrix.
- PageSpeed Insights, WebPageTest i GTmetrix pokazuju ukupno opterećenje od JavaScript-a i koji fajlovi blokiraju prikaz stranice. Rezultati se takođe prikazuju prema tome da li resurs potiče sa sajta ili od trećih strana, poput Google, Facebook, Mailchimp, GDPR Consent platformi i drugih.
Korišćenje DevTools u pregledaču
- Otvorite pregledač i pritisnite F12 ili Ctrl+Shift+I da se otvori DevTools.
- Izaberite tab Network i osvežite stranicu (Ctrl+R).
- Kliknite na dugme „JS“ na alatnoj traci.
Prikazaće se lista svih .js fajlova, sa njihovim veličinama u koloni Size i vremenom učitavanja u koloni Time. Najvažnije informacije su u donjoj traci:
- ukupna količina (u KB ili MB) u resources;
- deo koji je već preuzet u transferred.
Kako to utiče na Page Speed Insights?
Prilikom provere sajta u PageSpeed Insights mogu se pojaviti sledeće preporuke:
- Eliminate render-blocking resources
- Reduce unused JavaScript
Ove preporuke direktno zavise od JavaScript resursa koji se učitavaju pri inicijalnom prikazu sajta. Ako ih vidite za svoj sajt, verovatno još niste podesili odloženo učitavanje.
Svi resursi se prvo preuzimaju u pregledaču i obrađuju, i tek tada se prikazuje sadržaj stranice. Dok se resursi ne učitaju, pregledač zaustavlja prikaz (renderovanje) sajta, pa korisnik vidi „prazan“ ekran.
Neki resursi nisu potrebni za vidljivi deo stranice pri prvom prikazu i nepotrebno blokiraju učitavanje. To su tzv. render-blocking resursi.
Drugi resursi se uopšte ne koriste na toj stranici. Na primer, skript za slajder koji se ne prikazuje na početnoj strani ili cela biblioteka poput jQuery, kada se koristi samo deo nje. Ovo je tzv. unused JavaScript.
Odloženo učitavanje direktno utiče na ove aspekte i može potpuno ili delimično ispuniti preporuke za uklanjanje render-blocking i unused resursa.
Dodatno, optimizacija utiče i na metrike poput LCP, FCP, kao i na preporuke:
- JavaScript execution time
- Minimize main-thread work
Moguće je delimično poboljšanje i kod svih preporuka gde se pojavljuju .js fajlovi.
Izuzetak je preporuka za minifikaciju. Minifikacija JS/CSS je druga vrsta optimizacije sajta, koju možete primeniti ako do sada nije korišćena.
Možemo li optimizovati učitavanje bez da smo eksperti?
Kod većine veb sajtova, za ispravljanje usporavanja je potrebna intervencija programera.
U WordPress-u, srećom, bez menjanja sajta moguće je smanjiti ukupno opterećenje od JS i ukloniti render-blocking i unused resurse.
Na nekim WordPress sajtovima, bez dubinskog znanja, problem se može rešiti dodavanjem plugina za odloženo učitavanje JavaScript resursa.
Međutim, postoje sajtovi gde odlaganje može izazvati vizuelne greške zbog odloženih resursa. To može izgledati kao „pokvarena“ vizija sajta. Za fina podešavanja potrebno je dubinsko tehničko znanje. Analiza pomaže da se identifikuje resurs koji izaziva problem i doda kao izuzetak u pravilu za odlaganje.
Postoje besplatni i plaćeni plugini za odloženo učitavanje JavaScript-a.
Dobar besplatan plugin je WP Meteor: https://bg.wordpress.org/plugins/wp-meteor/
Nakon instalacije moguće je odabrati način odlaganja: dok korisnik ne interaguje sa stranicom (npr. skrolovanjem, klikom na element) ili nakon određenog vremena (1 ili 2 sekunde).
Odlaganjem do 2 sekunde postižu se vrlo dobri rezultati.
Plugin služi samo za odlaganje JavaScript-a i ne primenjuje druge optimizacije kao što su keširanje, minifikacija, optimizacije po CSS-u itd. Međutim, kompatibilan je i može se uspešno koristiti u kombinaciji sa drugim pluginima za te svrhe. Dobra kombinacija je korišćenje WP Meteor zajedno sa W3 Total Cache i Autoptimize. Svi ostali kompatibilni pluginovi navedeni su u dokumentaciji.
Postoje i drugi besplatni pluginovi, ali princip rada im je drugačiji. Većina koristi defer umesto delay za odlaganje.
Od plaćenih rešenja, dobri primeri su WP Rocket i NitroPack.
WP Rocket nudi više optimizacija na jednom mestu, uključujući i odlaganje JS-a. Prednost WP Rocket-a je što omogućava jednostavno i bezbedno podešavanje: jednim klikom mogu se odložiti svi ostali resursi, osim onih teme i kritičnih pluginova. Ovo može uštedeti vreme na analizi ako odlaganje izazove vizuelne greške.
NitroPack je vrhunsko, ali skuplje rešenje za optimizaciju sajta, koje uključuje kompletan set alata. Njegova efikasnost u velikoj meri zavisi od odlaganja JavaScript-a, ali nudi i druge prednosti, često nadmašujući WP Rocket.
U slučaju problema sa odlaganjem JavaScript-a, postoji više režima rada i jednim klikom može se preći na sigurniji režim sa manjim brojem optimizacija.
Važno je imati na umu da dodavanje izuzetaka smanjuje koristi od odlaganja. Svaki izuzetak od odlaganja JavaScript-a smanjuje rezultate, ali je često jedini način da se reše vizuelni problemi bez promena na sajtu ili intervencije programera.
Najčešći uzroci vizuelnih problema kod odlaganja JS-a su resursi teme i neki kritični pluginovi. Ako je potrebna dijagnostika, preporučuje se da se počne od tih resursa. Moguće je testirati isključenje cele teme iz optimizacija da bi se identifikovao problem.
