Page speed optimizacija sajta

Brzina učitavanja sajta je već neko vreme jedna od najpopularnijih tema na internetu, uglavnom u krugovima ljudi koji se bave izradom web sajtova i digitalnim marketingom. Trka za što bržim sajtom i ostvarivanjem što boljih rezultata na online testovima je postala prioritet na neki način i svima je postalo bitno da “budu u zelenom” na Google Page Speed Insights  ili sličnim testovima.

Svakako se sve ovo dešava sa razlogom. Sa strane korisničkog iskustva veoma je bitno koliko će trajati učitavanje određene stranice. A Google je uvek usmeren na korisničko iskustvo i samim tim postoje određeni faktori koji na to mogu uticati pozitivno ili negativno. 

Page speed odnosno brzina učitavanja je jedan od faktora koji će postati možda malo važniji od ove godine po pitanju SEO-a jer postaje deo Page Experience Update-a u 2021. Konkretno, pored ostalih faktora koje možete videti dodat je i Core Web Vitals, koji je usmeren na merenje korisničkog iskustva kroz metrike vezane za brzinu učitavanja stranica, interaktivnost i vizuelnu stabilnost.

Core Web Vitals (da li je bitan samo site speed?)

Ukratko, ne. Postoje 3 faktora koja su ovde obuhvaćena:

Largest Contentful Paint (LCP) – odnosi se na brzinu učitavanja

Predstavlja vreme koje je potrebno da se učita najveći element na stranici počev od momenta kada je stranica krenula sa učitavanjem. Najveći element može biti tekst, fotografija, video itd. U zavisnosti od toga na koji način je kreirana vaša web stranica i šta je vidljivo na ATF-u (Above the fold) view-u zavisiće i šta će Google prepoznati kao LCP. Above the fold predstavlja prvi vidljivi deo vaše web stranice na mobilnom (Google je mobile-first) odnosno ono što će korisnik videti kada se učita taj inicijalni deo (uglavnom je tu vidljiv header i početna sekcija). Znači, kada otvorite neku stranicu na mobilnom uređaju, prvo što vam se učitava jeste taj ATF deo, sve dok ne krenete da skrolujete dalje.

Metrike vezane za LCP (učitavanje najvećeg elementa na stranici ne sme biti duže od 2.5s)

Više informacija o LCP-u možete pročitati ovde

First Input Delay (FID) – odnosi se na interaktivnost

FID se odnosi na vreme od trenutka kada korisnik prvi put pokuša da stupi u interakciju sa stranicom (tj. kada klikne na neki link, dugme ili slično) do trenutka kada browser zaista krene da obrađuje samu interakciju. Ovo je prevod Google-ovog objašnjenja vezanog za ovu metriku.

Čisto radi ilustracije pokušaću da objasnim na sledeći način:

U trenutku kada browser učitava vašu stranicu, učitavaju se razne skripte, stilovi, fontovi itd. I u celom tom procesu (a dok korisnik gleda kako se učitava vaša stranica) može se pojaviti neko dugme na koje će korisnik kliknuti a da se pritom u pozadini još uvek nisu učitali svi ostali fajlovi, skripte itd. Ovakva situacija može potencijalno povećati vreme odgovora servera i samim tim korisnik će malo duže sačekati dok browser “ukapira” i izvrši funkciju tog dugmeta. U realnosti ovo možda neće trajati dugo za samog korisnika ali definitivno može uticati na njegov doživljaj same stranice.

Kada je reč o First Input Delay, onda govorimo o milisekundama i metrike su sledeće

Više informacija o FID-u možete pročitati ovde

Cumulative Layout Shift (CLS) – odnosi se na vizuelnu stabilnost stranice

CLS predstavlja metriku koja prati neočekivana pomeranja određenih elemenata na stranici u toku učitavanja. Google je to možda najbolje ilustrovao kroz video na ovoj stranici
Možete pogledati i objašnjenje sa GT Metrix-a kako bi bilo malo jasnije.

Layout shift se odnosi na neočekivano pomeranje sadržaja koje može dovesti do neželjene akcije.

CLS je vrlo osetljiva metrika i može se prikazati kao negativna u svim situacijama kada se dogodi neko neočekivano pomeranje, “iskakanje” nekih elemenata na stranici ili slično. Čak i u situacijama kada imate cookie banner, slider ili slično. Kroz Performance metrike u dev tools-u u Google Chrome-u treba pratiti ove stavke jer je Google omogućio da se sva 3 parametra (CLS, FID i LCP) mogu jasno prepoznati u celom toku učitavanja stranice i videti njihove metrike.

Kada je reč o Cumulative Layout Shift, metrike su sledeće

Više informacija o CLS-u možete pročitati ovde

Kako meriti brzinu učitavanja sajta?

Postoji više alata (tzv. online tool-ova) koji vam mogu omogućiti merenje brzine. Treba napomenuti da brzina učitavanja sajta nije brzina učitavanja samo početne stranice. Većina korisnika (a i webmastera) brzinu meri na taj način. Početna stranica jeste bitna ali merenje bi trebalo vršiti za više različitih stranica na sajtu, pogotovo za one koje su vam bitne i sa marketinške strane (za oglašavanje, SEO itd.). Ukoliko imate manji sajt koji se sastoji od 10-15 stranica zašto ih ne bi sve testirali? Takođe, ukoliko posedujete webshop neophodno je da testirate sve tipove stranica (stranice kategorija, potkategorija, stranice proizvoda..).

Neki od popularnijih alata za testiranje brzine su:

Navedeni alati vam mogu dati dobru sliku vezano za to koliko traje učitavanje određenih elemenata, šta je to što blokira i usporava učitavanje stranice kao i preporuke za optimizaciju.

Uvek gledajte da testirate sa više različitih alata, i pratite tzv Waterfall (WebPageTest, GT Metrix i Pingdom vam daju ovu metriku) odnosno gledajte od početka do kraja koji fajl se koliko dugo učitavao i koja stavka u celom tom procesu oduzima najviše vremena. Na taj način možete doći do informacije koji su to elementi na sajtu koje je potrebno optimizovati i odrediti sebi dalje korake po tom pitanju. Morate biti veoma temeljni kada je analiza brzine učitavanja u pitanju, a pogotovo kasnije kada je potrebno istu i optimizovati.

Ovako izgleda Waterfall pregled sa WebPageTest-a. Slično je i na GT metrix-u

Ja uglavnom koristim Page Speed Insights i WebPage Test za potrebe testiranje brzine.
Takođe koristim i Performance Tab u Google Chrome-u da bi ispratio metrike vezane za Core Web Vitals i sve testiram kroz Incognito prozor u Chrome-u.

U Google Chrome-u, kada otvorite stranicu, desni klik > Inspect > Performance > čekirajte Web Vitals i klik na Reload ikonicu u ovom tabu. Sačekajte i dobićete rezultate:

Obratite pažnju na LCP i CLS (Web Vitals metrike). Klikom na neku od njih dobićete ispod više informacija tako da npr. ukoliko vam je CLS (Layout shift) u crvenom, kliknite na taj pravougaonik i dobićete ispod koja je vrednost i ako malo skrolujete videćete i koji element ili klasa je uzrokovala povećanu vrednost.

Preporuke za page speed optimizaciju sajta

Optimizacija koda (CSS, JavaScript)

Ovaj deo optmizacije podrazumeva da efikasno koristite resurse za učitavanje stilova (CSS) i skripti (JS). Kada je WordPress u pitanju, uglavnom je potrebno koristiti neki od pluginova za ove potrebe tipa Wp Fastest cache, WP Super Cache i slično. Dodatno, savetujem da probate i Asset Cleanup jer uz pomoć njega možete ručno isključiti određeni CSS/JS na stranicama na kojima nije potreban.

Caching

Caching podrazumeva da se korisnicima koji su već pristupali vašim stranicama serviraju stranice iz cache-a što znači da im se određeni sadržaj ne učitava iznova svaki put nego dosta brže kroz kreiranje statičkih verzija vaših stranica. Ne morate znati dosta tehnikalija vezano za caching ali treba znati da je caching preporučljivo koristiti onda kada imate sadržaj koji se ne menja toliko često. I da, ukoliko promenite nešto na stranicama koje su keširane, obavezno obrišite keš kako bi se korisnicima prikazao novi ili izmenjeni sadržaj.

Za WorPress možete koristiti sledeće pluginove za caching: W3 Total cache, WP Super cache, Wp Fastest cache itd..

Minify

Ovo je proces koji podrazumeva smanjivanje odnosno minifikaciju CSS/JS fajlova. Kada pišete CSS npr. uglavnom to radite tako što svaki ID ili klasu dodajete u novi red, otvarate zagradu, dodajete vrednosti itd.. Minifikacija sve te razmake odnosno prazna mesta koja nastaju spaja u jednu celinu i dobijate fajl u kome izgleda kao da je sve pisano jedno za drugim. To svakako nije baš najpreglednije ali kada kompletno završite CSS ili JS onda slobodno možete odraditi minifikaciju na taj način i uštedećete koji KB. S’ obzirom na to da ćete nekad biti u prilici i da promenite nešto u tim CSS/JS fajlovima, čisto radi preglednosti čuvajte originalni (ne-minifikovani) CSS/JS kako biste lakši došli do dela u kodu koji je potrebno promeniti. Kada napravite izmene, ponovo uradite minify za taj fajl i vratite ga na server.

Kada je WordPress u pitanju, većina caching pluginova poseduje i opciju za minifikaciju. Samo označite “minify CSS” i “minify JS”. Out-of-the-box to bi trebalo da odradi ok posao ali uvek može doći do nekih neočekivanih promena na stranicama tako da sve dobro proverite nakon što označite ove opcije. Postoje i Advanced opcije u okviru ovih plugin-ova za malo detaljnije upravljanje minifikacijom ali je više namenjeno developerima odnosno onima koji tačno znaju šta rade i koje fajlove žele da „smanje“ a koje ne.
Ukoliko ne koristite WordPress, možete uraditi minifikaciju i preko online tool-ova tipa https://cssminifier.com/

Async and defer JavaScript

Način učitavanja JavaScript-a u toku učitavanja web stranice je veoma bitan. Kada pogledate rezultate određenog online testa uglavnom ćete primetiti da najviše vremena odlazi na učitavanje JS, CSS fajlova ili fotografija. Teško je zamisliti neki web sajt danas bez JavaScripta i iz tog razloga je potrebno odrediti prioritete odnosno one skripte koje je potrebno učitati na samom početku i one čije se učitavanje može odložiti. U tom procesu se koriste metode poznate kao async i defer.

Kako izgleda učitavanje stranice bez Async/Defer metode

Kako izgleda učitavanje stranice bez Async/Defer metode

Kada pretraživač krene da renderuje HTML i dođe do određenog JS fajla, taj fajl se onda preuzima (fetch) i izvršava (execute) i tek kada se taj proces završi, nastavlja se sa učitavanjem ostatka sadržaja. Ovo je naravno slučaj ukoliko se skrpte ili linkovi ka istim nalaze u <head> delu. U zavisnosti od veličine tih JS fajlova i vremena potrebnog za njihovo izvršavanje, možete izgubiti dragoceno vreme i samim time vreme učitavanja vaše stranice će biti povećano.

JavaScript Async <script async src=“script.js“></script>

Kako izgleda učitavanje stranice sa Async metodom

U ovom slučaju, renderovanje HTML-a i preuzimanje skripte (fetch) se vrši uporedo. Odnosno JS fajl se preuzima “asinhrono” i ne blokira učitavanje ostatka sadržaja. U trenutku kada se preuzme skripta, nastaje proces izvršavanja te skripte (execute) i tada se “čeka” sa učitavanjem ostatka HTML-a. Znači, jedini momenat kada JavaScript blokira HTML jeste u momentu kada se isti izvršava a ne i kada se preuzima.


JavaScript Defer <script defer src=“script.js“></script>

Kako izgleda učitavanje stranice sa Defer metodom

Ovde imamo situaciju da se skripta takođe preuzima asinhrono paralelno sa učitavanjem HTML-a ali se skripta ne izvršava sve dok se ne učita ostatak HTML-a. Kada se učita, tek onda se izvršava skripta. Veoma često se koristi ovaj pristup i potencijalno može dati bolje rezultate ali vodite računa o tome da li je to i najoptimalnije rešenje za vas sa strane funkcija koje te skripte izvršavaju.

U zavisnosti od vaših potreba sami ćete odrediti koje skripte treba da se učitavaju sa async a koje sa defer metodom. Nije svaka situacija ista i zavisi od sajta do sajta. Svakako je potrebno da nakon implementacije ovih metoda obavezno testirate učitavanje i pregledate da li se svi elementi učitavaju onako kako bi trebalo i da li postoje bilo kakvi nedostaci.

Učitavanje fontova

Preporuka koju bih mogao da dam jeste da prilikom odabira fontova vodite računa o tome koji su vam stilovi tog fonta potrebni i da izaberete samo ono što je neophodno. Npr. ukoliko neki font ima 15 varijacija (od Thin verzije preko Light, Regular, SemiBold, Bold, Black itd..) vi izaberite da se učitavaju samo one varijante koje su vam neophodne za vaš sajt. Ukoliko ćete na sajtu koristiti samo Regular i Bold onda za taj font gledajte da samo se samo te varijante učitaju. Sve dodatne varijante nepotrebno produžavaju vreme učitavanja.

Kada je WordPress u pitanju, neke malo kvalitetnije teme uglavnom imaju opciju da učitate samo varijacije nekog fonta koje su vam potrebne (npr. Astra)

Koristite Font preload
Za brže učitavanje fontova preporuka je da koristite i Font Preloading odnosno da podesite da se unapred učitavaju resursi koji će svakako biti potrebni. Preload se može koristiti i za CSS i druge tipove resursa ali je možda najveća korist kada ovu funkciju koristite za fontove. Više informacija i detaljno objašnjenje opcije font preload možete pročitati ovde

Izaberite dobar hosting

Hosting je veoma bitan. U skladu sa vašim potrebama, veličinom sajta kao i dnevnim posetama, birate i server koji ćete koristiti. Za manje sajtove shared hosting će verovatno biti dovoljan dok za veće sajtove (tipa webshop) preporuka je korisiti VPS ili dedicated server. Nemojte štediti na hostingu jer će vam se višestruko vratiti ulaganje u isti. Iz ugla korisnika kao i Google-a brzina učitavanja svake stranice na vašem sajtu je veoma bitan faktor na koji hosting utiče u velikoj meri. Nemojte tražiti najjeftinije rešenje za hosting, tražite preporuke, pitajte za iskustva drugih i gledajte karakteristike servera u skladu sa vašim potrebama i procenjenom posetom na dnevnom/mesečnom nivou.

Optimizacija slika

Skaliranje (podešavanje veličine)

Optimizujte fotografije inteligentno. Radite to tako što ćete prvo odrediti koja veličina fotografije vam odgovara za svako polje na stranici. Npr. ukoliko imate sekciju na sajtu gde sa leve strane imate tekst a sa desne fotografiju, obratite pažnju na to koliki prostor je potreban za tu fotografiju na dekstopu i u skladu sa tim je skalirajte (podesite veličinu taman toliko da zauzima dovoljno prostora ili malo više od toga). Ovde se sve svodi na veličinu u pixelima tako da ukoliko vam taj deo na sajtu gde će nalaziti fotografija zauzima npr. 500px onda nema potrebe da ubacujete fotografiju veličine 1920px u širinu, zar ne? Svaki pixel je bitan i ovo su osnovne metode koje vam mogu pomoći u optimizaciji.

Fotografija koja vam na desktopu zauzima ~500px širine, nema potrebe da se uploaduje u punoj širini (npr. 1920px). Prvo smanjite veličinu, kompresujte i nakon toga upload-ujte

Preporuka je da posedujete više različitih veličina iste fotografije i da podesite da se, u zavisnosti od veličine ekrana, učitava odgovarajuća fotografija (mobile u odnosu na desktop). Više informacija o responsive fotografijama i pozivanju odgovarajućih istih u zavisnosti od veličine ekrana možete pronaći ovde

Koristite odgovarajući format slika

Iako je webP format već neko vreme prisutan, jpeg je i dalje najzastupljeniji. Svi moderni browseri podržavaju jpeg, dok webP još uvek nema potpunu podršku na Safari-u, tako da na Apple uređajima (ukoliko koristite default tj. Safari) neće uvek raditi kako treba. I dalje je najbolje da koristite jpeg a u kombinaciji sa nekim od WP plugin-ova možete podesiti opciju da se radi tzv. fallback na webP verziju kada browser sa koga se pristupa podržava prikaz webP fajlova. Vi tu ne morate ništa da radite, plugin sve odrađuje za vas i automatski prikazuje webP verziju kada prepozna browser. Ja za ove potrebe koristim plugin ShortPixel.

Kompresija slika

Kompresija fotografija se može raditi online kroz neki od tool-ova. Takođe, možete je (zajedno sa skaliranjem) raditi i offline preko nekih od alata koji su namenjeni obradi fotografija (Phostoshop). U Photoshopu ovo ćete raditi uglavnom tako što ćete prvo podesiti odgovarajuću veličnu fotografije a zatim putem opcije “Save for Web” optimizovati fotografiju tako da zauzima što manje prostora na serveru.

Pluginovi za WP vam mogu automatizovati proces optimizacije odnosno kompresije fotografija i postoje kvalitetna rešenja koja će vam uštedeti dosta vremena. Svakako su svi pluginovi na ovu tematiku usmereni na kompresiju a ne na skaliranje/crop-ovanje fotografija tako da deo posla moguće da ćete morati da radite manuelno. Preporuka, kada je u pitanju krajnja veličina optimizovane fotografije, jeste da ne prelazi 100kb ili max 150kb. Gledajte da sve fotografije koje postavljate budu manje od 100kb. Ovo nije uvek moguće i nemojte bukvalno sve ovo shvatiti ali gledajte da pre svega uštedite na veličini fotografije u pixelima a zatim tek da je kompresujete dodatno.

Preporuka za alate za kompresiju slika: https://tinypng.com/, https://imageoptim.com/mac
WordPress alati: https://shortpixel.com/, https://sr.wordpress.org/plugins/ewww-image-optimizer/

Optimizujte u skladu sa vašim potrebama

Svaki sajt je jedinstven na neki svoj način. I pristup optimizaciji sajta bi trebao da bude u skladu sa tim. Ukoliko ste profesionalni fotograf i posedujete portfolio sajt sa vašim fotografijama, onda treba biti oprezan sa kompresijom jer želite da vaš rad bude prikazan u dobroj rezoluciji. U svakom slučaju je optimizacija fotografija preporučljiva ali treba je raditi u skladu sa potrebama. Plugin-ovi za WordPress automatizuju proces u određenoj meri ali nemojte „na slepo“ koristiti ove pluginove tako što ih samo instalirate/uključite bulk optimize i to je to. Ne, uvek testirajte par fotki da vidite rezultate na vašem sajtu i ukoliko ste zadovoljni, pustite i ostatak fotografija da se optimizuju. I ne zaboravite crop jer je bitno koliko pixela vam zauzima koja fotografija.

Optimizacija za brzinu učitavanja (page speed) je veoma ozbiljan i detaljan proces i sve se svodi na to da koristite preporučenu praksu odnosno metode koje potencijalno mogu smanjiti brzinu učitavanja vaših web stranica, kroz efikasno učitavanje resursa koji su neophodni. Neko osnovno poznavanje HTML-a, CSS-a i JS-a jeste poželjno ali nije neophodno da biste uradili kvalitetnu optimizaciju. Postoji dosta resursa online na ovu temu, pogotovo u poslednjih godinu i po dana od kada je Google objavio Core Web Vitals. Brzina učitavanja sajta je uvek bila bitna tema iz ugla web developera a sada postaje još bitnija i sa SEO strane i zato nema vremena za čekanje i sve stvari koje iz nekog razloga niste mogli ili niste stigli da optimizujete do sada, uradite. Jer potencijalno mogu uticati u velikoj meri na vaš sajt.

Da li će se i koliko dobro rangirati vaš web sajt na Google-u može u velikoj meri zavisiti od Google Core Web Vitals metrika koje su objašnjene na početku ovog članka. Brzina sajta, interaktivnost i stabilnost vaših web stranica su sada mnogo bitniji faktori nego ranije i pravo je vreme za ulaganje u optimizaciju. Google će sve manje tolerisati sporo učitavanje stranica i nedovoljno kvalitetan UX (user experience) i sa te strane je potrebno raditi kako bi se ispoštovali pre svega korisnici koji dolaze na vaš sajt. A samim tim i pretraživači.


Scroll to Top