Sajt se sporo učitava: mogući uzroci i kako da proverite

Kliknete na svoj sajt sa telefona i čekate. Bela stranica, pa logo, pa tekst koji poskoči kad se pojavi slika, pa iskače chat prozor. Za to vreme kupac koji vas je pronašao na Google-u možda već gleda sledeći rezultat.

Spor sajt je jedan od onih problema koje vlasnik firme oseća, ali ne zna odakle da krene. Dobra vest je da se brzina može izmeriti besplatnim Google alatom, i da postoji kratka lista uzroka koje vredi prvo proveriti. Neke od njih možete da rešite sami, za neke vam treba programer, a ponekad savetujemo da se sajt napravi iz početka umesto krpljenja.

Zašto je brzina važna

Prvi razlog su posetioci. Kako navodi web.dev, ljudi mogu samo neko vreme da trpe loše uslove na sajtu pre nego što ga napuste. Isti tekst navodi primer BBC-ja, koji je gubio dodatnih 10% korisnika za svaku sekundu dužeg učitavanja.

Drugi razlog je Google. Kako navodi Google Search Central, Core Web Vitals se koriste u sistemima za rangiranje. Na istoj stranici Google kaže i da uvek pokušava da prikaže najrelevantniji sadržaj, čak i kada je iskustvo na stranici slabije, a da, kada za neku pretragu postoji mnogo korisnog sadržaja, dobro iskustvo na stranici može da doprinese uspehu u pretrazi. Brz sajt zato ne može da nadoknadi loš ili nepostojeći sadržaj. U dokumentaciji o Core Web Vitals Google vlasnicima sajtova preporučuje da ostvare dobre vrednosti ovih metrika.

Treći razlog: Google sajt gleda kao telefon. Prema Google Search Central, za indeksiranje i rangiranje koristi se mobilna verzija sajta. Sajt koji je brz na kancelarijskom računaru, a spor na telefonu, i dalje je spor sajt.

Kako da izmerite brzinu sajta

PageSpeed Insights, korak po korak

1. Otvorite pagespeed.web.dev i ubacite adresu sajta.
2. Izaberite karticu Mobilni (Mobile). Prema dokumentaciji PageSpeed Insights, mobilni test simulira uređaj srednje klase na mobilnoj mreži, a Google, kao što smo naveli, za rangiranje koristi mobilnu verziju sajta.
3. Pogledajte prvo gornji deo, sa podacima stvarnih korisnika, pa tek onda broj od 0 do 100.
4. Testirajte i početnu i jednu stranicu usluge ili proizvoda, ne samo početnu.

Podaci stvarnih korisnika i laboratorijski test nisu isto

PageSpeed Insights prikazuje dve vrste podataka i važno je razlikovati ih.

• Podaci iz stvarnog korišćenja (field data). Prema dokumentaciji PageSpeed Insights, oni dolaze iz izveštaja Chrome User Experience Report (CrUX) i obuhvataju prethodnih 28 dana. To je ono što su vaši posetioci zaista doživeli.
• Laboratorijski test (lab data). Ista dokumentacija navodi da ga pravi alat Lighthouse u kontrolisanim uslovima, sa jednim uređajem i unapred zadatom brzinom mreže, i da je koristan za otkrivanje problema. Iz tog testa dolazi i ocena od 0 do 100, a prema istoj dokumentaciji 90 i više je dobro, 50 do 89 traži poboljšanje, ispod 50 je loše.

Dve stvari treba znati. Prvo, kako navodi ista dokumentacija, laboratorijski rezultat može da se razlikuje od onoga što doživljavaju stvarni korisnici. Drugo, ako sajt ima malo posete, podataka stvarnih korisnika za tu stranicu možda neće biti. Prema istoj dokumentaciji, alat tada prikazuje podatke za ceo sajt, a ako ni njih nema, ostaje vam samo laboratorijski test. Ako vam se to desi, savetujemo da se oslonite na laboratorijski test i na sopstveni test na telefonu.

Tri metrike koje Google meri: LCP, INP i CLS

Metrika	Šta znači za posetioca	Dobro	Loše
LCP (Largest Contentful Paint)	Koliko brzo se pojavi glavni sadržaj, obično velika slika ili naslov	do 2,5 s	preko 4 s
INP (Interaction to Next Paint)	Koliko brzo stranica reaguje na klik ili dodir	do 200 ms	preko 500 ms
CLS (Cumulative Layout Shift)	Koliko sadržaj „skače” dok se stranica učitava	do 0,1	preko 0,25

Vrednosti su preuzete sa web.dev stranica o LCP, INP i CLS. Prema web.dev, meri se 75. percentil poseta, odvojeno za mobilne i desktop uređaje. Drugim rečima, nije dovoljno da je sajt brz za polovinu poseta: dobru vrednost treba da ima najmanje 75% poseta.

Ako ste ranije čuli za metriku FID, ona više nije deo Core Web Vitals. Prema web.dev, INP ju je zamenio 12. marta 2024.

Ako ste sajt povezali sa Google Search Console-om, tamo postoji i izveštaj Core Web Vitals, koji grupiše stranice na dobre, one kojima treba poboljšanje i loše, na osnovu podataka stvarnih korisnika. Prema istoj stranici pomoći, ako nema dovoljno podataka za određeni tip uređaja, izveštaj prikazuje da podaci nisu dostupni, a grupe stranica bez dovoljno podataka se izostavljaju.

Test koji ne traži nikakav alat

Uzmite svoj telefon, isključite WiFi i otvorite sajt preko mobilnog interneta, kao kupac. Pratite tri stvari: koliko dugo gledate u prazan ili poluprazan ekran, da li tekst skače dok čitate i da li meni i dugmići reaguju odmah. Ako vas nešto nervira, nervira i kupca.

Uzroci koje prvo treba proveriti

1. Prevelike slike

Ovaj uzrok preporučujemo da proverite prvi, jer ga možete srediti i sami. Pogledajte koliko je piksela široka i koliko megabajta ima fotografija koju postavljate i uporedite to sa okvirom u kome se prikazuje na sajtu. Prema web.dev, slanje slika predviđenih za desktop na mobilne uređaje može da potroši dva do četiri puta više podataka nego što je potrebno.

Šta pomaže:

• Smanjite sliku na stvarnu veličinu prikaza pre postavljanja na sajt i kompresujte je.
• Koristite moderniji format. WordPress dokumentacija preporučuje da za svaku sliku izaberete odgovarajući format i kompresiju i da razmotrite format WebP, koji daje manje fajlove.
• Slike niže na stranici neka se učitavaju tek kada posetilac dođe do njih (lazy loading). Pažnja: prema web.dev, slike koje su vidljive odmah po otvaranju stranice, a posebno glavnu (LCP) sliku, ne treba učitavati odloženo.

2. Previše WordPress dodataka i teški page builder-i

Kako navodi WordPress dokumentacija, broj dodataka (pluginova) i njihove performanse imaju veliki uticaj na brzinu sajta, a deaktiviranje i brisanje nepotrebnih dodataka je značajan način da se poboljšaju performanse. Ista dokumentacija navodi i da tema ima veliki uticaj: laka, brza tema radi mnogo efikasnije od teške, pune grafike.

Ako je sajt napravljen u teškoj temi ili page builder-u (vizuelnom alatu za slaganje stranica), naš savet je da ne očekujete da će problem rešiti jedan dodatak za ubrzanje, nego da u PageSpeed Insights proverite koliko koda i skripti stranica učitava. Razlike između WordPress-a i sajta pravljenog po meri opisali smo u tekstu WordPress ili custom sajt.

3. Jeftin ili preopterećen hosting

Pre nego što se išta prikaže, server mora da odgovori. To vreme se zove TTFB (Time to First Byte). Prema web.dev, dobar TTFB je do 0,8 sekundi, a loš preko 1,8 sekundi, uz napomenu da je to okvirna smernica, a ne Core Web Vital. Isti tekst navodi da na TTFB utiču vreme odgovora servera, preusmerenja i uspostavljanje veze.

WordPress dokumentacija navodi da hosting provajderi uglavnom nude veće performanse za veću cenu i da tehnike optimizacije koje vam stoje na raspolaganju zavise od hostinga. Zato savetujemo da ne birate najjeftiniji paket ako vam je brzina važna i da pitate hosting koliko sajtova deli isti server.

4. Nema keširanja

Prema WordPress dokumentaciji, keš posetiocima šalje gotove statične fajlove, bez ponovnog pokretanja PHP-a i WordPress-a i bez odlaska u bazu, što smanjuje opterećenje servera. Ista dokumentacija navodi da keširanje kod uglavnom statičnih stranica može višestruko da poboljša performanse i opisuje ga kao najveću korist za najmanje truda. Ako se sadržaj vašeg sajta retko menja, preporučujemo da keš bude prvi tehnički korak.

5. Skripte trećih strana: chat, pikseli, mape, ugrađeni video

Chat widget, Facebook piksel, Google Analytics, Google mapa na svakoj stranici, ugrađeni YouTube video, kolačić baner, widget sa Instagram objavama. Prema web.dev, skripte trećih strana su one koje se na sajt ugrađuju direktno od drugog dobavljača, na primer dugmad za deljenje, ugrađeni video, oglasi i analitika. Isti tekst navodi da, ako ste optimizovali sopstveni kod, a sajt je i dalje spor, krivac su verovatno skripte trećih strana. Isti tekst navodi da ugrađeni sadržaj kao što su oglasi i video može značajno da uspori stranicu i savetuje: ako skripta ne donosi jasnu vrednost, uklonite je.

Za svaku skriptu na sajtu postavite jedno pitanje: da li zbog nje dobijam kupce ili samo zato što je neko jednom rekao da treba?

6. Slajderi i video u pozadini

Prema web.dev, kandidati za LCP, odnosno glavni sadržaj stranice, su upravo slike, pozadinske slike, video i blokovi teksta. Zato teški slajder ili video u pozadini na vrhu stranice direktno utiču na tu metriku. Preporučujemo jednu dobru, optimizovanu sliku i jasan naslov umesto slajdera.

7. Fontovi

Prema web.dev, jedan fajl fonta sadrži samo jedan stil (osim kod varijabilnog fonta), pa svaka dodatna porodica i debljina znači novi fajl za preuzimanje. Isti tekst navodi da browser može da sakrije tekst dok se font učitava, da je najbrži font onaj koji se uopšte ne preuzima i da jedan varijabilni font može da zameni više fajlova. Fontovi utiču i na „skakanje” sadržaja: prema web.dev, tekst može da se pomeri kada se font prikaže veći ili manji od rezervnog fonta. Isti tekst kao uzroke pomeranja navodi i slike i video bez zadatih dimenzija, kao i oglase i widget-e koji promene veličinu posle učitavanja.

Lista za proveru: simptom, uzrok, rešenje

Simptom	Šta prvo proveriti	Šta uraditi
Dugo bela stranica pre bilo čega	Spor server, nema keša, preusmerenja	Uključiti keš, proveriti hosting i TTFB, ukloniti suvišna preusmerenja
Tekst se vidi, velika slika na vrhu kasni	Prevelika ili odloženo učitana glavna slika, slajder	Smanjiti i kompresovati sliku, ukloniti lazy loading sa nje, zameniti slajder jednom slikom
Sadržaj skače dok se učitava	Slike bez dimenzija, fontovi, baneri i widget-i	Zadati dimenzije slikama, rezervisati prostor za banere, srediti učitavanje fontova
Stranica se vidi, ali dugmići i meni kasne	Previše JavaScript-a, skripte trećih strana	Ukloniti nepotrebne skripte, odložiti učitavanje ostalih
Spor ceo sajt, a admin panel još sporiji	Previše dodataka, slab hosting	Obrisati nepotrebne dodatke, razmisliti o boljem hostingu
Brzo na računaru, sporo na telefonu	Teške slike i skripte, test na brzom WiFi-ju	Testirati mobilni u PageSpeed Insights i na mobilnom internetu
Sporo samo na jednoj stranici	Galerija, mapa, ugrađeni video ili veliki PDF	Smanjiti galeriju, mapu i video učitati tek na klik

Šta možete sami, a šta prepustiti programeru

Možete sami, bez tehničkog znanja:

• Smanjite i kompresujete slike pre postavljanja. Fotografija sa telefona nikad ne treba da ide direktno na sajt.
• Obrišite dodatke koje ne koristite, ne samo da ih deaktivirate.
• Uklonite slajder, video u pozadini i widget-e koji ne donose upite.
• Prođite kroz skripte: da li vam zaista trebaju chat, piksel za kampanju koja je odavno završena, widget sa Instagram objavama?
• Pitajte hosting da li imate uključen keš i na kakvom serveru je sajt.
• Pre svake veće izmene napravite rezervnu kopiju sajta.

Za ovo vam obično treba programer:

• Podešavanje keša na serveru i CDN-a.
• Odloženo učitavanje skripti (async i defer). Prema web.dev, skripte trećih strana treba uvek učitavati sa async ili defer, osim ako su neophodne za prikaz stranice.
• Automatsko pravljenje više veličina slika (srcset) i prelazak na moderniji format.
• Sređivanje fontova, uklanjanje nekorišćenog CSS-a i JavaScript-a.
• Zamena teške teme ili page builder-a, popravka koda i prelazak na drugi hosting.

Kada je jeftinije napraviti novi sajt nego krpiti stari

Popravka ima smisla kada je osnova sajta zdrava, a problem su slike, keš i par skripti. Tada preporučujemo popravku umesto novog sajta.

Novi sajt ima smisla kada:

• je sajt napravljen u teškoj temi ili page builder-u i svaka stranica nosi ogromnu količinu koda,
• ključne funkcije zavise od desetina dodataka koje niko ne sme da dira,
• platforma ili tema više ne dobijaju ažuriranja,
• se sajt i posle sređivanja slika, keša i skripti na telefonu i dalje učitava loše,
• sajt pored brzine ima i druge probleme: ne radi dobro na telefonu, ne možete sami da menjate sadržaj ili ne donosi upite.

Ako je vaš slučaj poslednji, pogledajte i tekst zašto sajt ne donosi upite, jer savetujemo da brzinu ne posmatrate odvojeno od ostalih problema. Kod pravljenja novog sajta preporučujemo da stare adrese trajno preusmerite na nove. Prema Google Search Central, 301 i druga trajna preusmerenja ne dovode do gubitka PageRank-a, a preusmerenja treba zadržati što duže, po pravilu najmanje godinu dana. Postupak smo opisali u tekstu redizajn sajta bez gubitka pozicija.

Lista za proveru, ukratko

• Sajt sam testirao u PageSpeed Insights, na kartici za mobilni
• Znam da li imam podatke stvarnih korisnika ili samo laboratorijski test
• LCP je do 2,5 s, INP do 200 ms, CLS do 0,1
• Slike su smanjene na stvarnu veličinu prikaza i kompresovane
• Glavna slika na vrhu se ne učitava odloženo
• Obrisani su svi dodaci koje ne koristim
• Keš je uključen
• Na sajtu su samo skripte i widget-i koji mi zaista trebaju
• Nema slajdera i videa u pozadini na početnoj stranici
• Sajt sam otvorio na telefonu, preko mobilnog interneta, i ništa ne skače

Povezani članci

• Zašto sajt ne donosi upite: 10 razloga
• Redizajn sajta bez gubitka pozicija na Google-u
• WordPress vs custom sajt: šta je bolje za vaš biznis

Hoćete da neko pogleda zašto je vaš sajt spor?

Pošaljite nam adresu sajta. Reći ćemo vam šta ga usporava i da li je dovoljno da se sredi postojeći ili je vreme za novi, brz sajt.

Pošaljite nam upit →