Zašto je web stranica spora i što se može popraviti za jedan dan

Spora stranica rijetko je posljedica jedne velike greške. Obično je zbroj malih odluka donesenih tijekom godina: još jedna slika, još jedan dodatak, još jedna skripta za praćenje. Dobra vijest je da se zato može i popraviti dio po dio.

Zašto je brzina važna

• Posjetitelji odlaze. Tko na mobitelu čeka dulje od nekoliko sekundi, vrati se na rezultate pretrage i klikne sljedeći.
• Google je uzima u obzir. Brzina i stabilnost prikaza dio su onoga po čemu tražilica ocjenjuje iskustvo stranice.
• Oglasi koštaju više. Plaćate klik i onda kad posjetitelj ode prije nego što se stranica učita.

Kako izmjeriti

Naš alat Brzina stranice pokreće Googleovo mjerenje za mobitel i računalo i prikazuje cijelo izvješće. Tri brojke su najvažnije:

• LCP (najveći prikaz sadržaja): koliko brzo se pojavi glavni sadržaj. Dobro je do 2,5 sekunde.
• INP (odziv na interakciju): koliko brzo stranica reagira na dodir ili klik. Dobro je do 200 milisekundi.
• CLS (pomak izgleda): koliko sadržaj skače dok se stranica učitava. Dobro je do 0,1.

Dvije napomene prije nego što krenete popravljati. Prvo, gledajte mobilni rezultat, jer se on mjeri na sporijem uređaju i sporijoj vezi i gotovo je uvijek lošiji. Drugo, jedno mjerenje nije pouzdano: ista stranica izmjerena tri puta zaredom može dobiti primjetno različite brojke. Mjerite nekoliko puta i gledajte srednju vrijednost.

Šest najčešćih uzroka

1. Prevelike slike. Fotografija s mobitela ili iz fotoaparata, široka četiri tisuće točaka, prikazana u okviru širokom četiristo. Preglednik preuzme cijelu, pa je smanji. Ovo je najčešći pojedinačni uzrok i najlakši popravak.

2. Resursi koji blokiraju prikaz. Datoteke stilova i skripti u zaglavlju koje se moraju preuzeti prije nego što se išta prikaže. Dok one ne stignu, posjetitelj gleda bijeli zaslon.

3. Skripte trećih strana. Analitika, chat, oglasni pikseli, karte, ugrađeni videozapisi, obavijesti o kolačićima. Svaka dolazi s tuđeg poslužitelja i svaka zauzima procesor. Na mnogim stranicama čine više od polovice ukupnog opterećenja, a dio njih nitko više ne koristi.

4. Fontovi. Četiri obitelji fontova u šest debljina znače dvadesetak datoteka. Dok ne stignu, tekst je nevidljiv ili skoči kad se font zamijeni.

5. Spor poslužitelj. Ako poslužitelju treba sekunda da uopće počne slati stranicu, sve ostalo kreće sa sekundom zaostatka. Česti uzroci su jeftin dijeljeni hosting, nepodešena predmemorija i sustav za upravljanje sadržajem s puno dodataka.

6. Previše dodataka i težak predložak. Predložak koji podržava sve moguće izglede učitava kod za sve njih, iako vi koristite jedan. Svaki dodatak donosi vlastite stilove i skripte, na svakoj stranici.

Što se može riješiti u jednom danu

1. Smanjiti i pretvoriti slike. Svesti ih na širinu u kojoj se prikazuju i spremiti u suvremenom formatu (WebP ili AVIF). Učinak je često najveći od svih koraka.
2. Uključiti odgođeno učitavanje za slike ispod prvog zaslona, da se preuzimaju tek kad im se posjetitelj približi.
3. Upisati dimenzije slika i ugrađenih okvira, da preglednik rezervira mjesto i sadržaj ne skače.
4. Uključiti predmemoriju i sažimanje na poslužitelju ili kroz mrežu za isporuku sadržaja.
5. Ukloniti ono što se ne koristi. Dodatke, stare skripte za praćenje, fontove i debljine koje se nigdje ne pojavljuju.
6. Odgoditi skripte trećih strana koje nisu potrebne za prvi prikaz. Chat ili karta mogu se učitati kad ih posjetitelj zatreba.
7. Učitati glavni font unaprijed i dopustiti prikaz teksta zamjenskim fontom dok pravi ne stigne.

Nakon svakog koraka izmjerite ponovno. Tako vidite što je stvarno pomoglo i ne trošite vrijeme na izmjene bez učinka.

Što traži više posla

• Zamjena teškog predloška lakšim ili izrada vlastitog.
• Preseljenje na bolji hosting kad je poslužitelj usko grlo.
• Stranica koja se sastavlja u pregledniku. Ako se sadržaj dohvaća i slaže tek nakon učitavanja skripti, posjetitelj i tražilica dugo vide praznu stranicu. Tu pomaže pripremanje stranica unaprijed, na poslužitelju ili pri izgradnji.
• Web trgovina s velikim katalogom, gdje su spori upiti u bazu, a ne prikaz.

Česte zablude

• “Na mom računalu je brza.” Vi imate brzu vezu, jako računalo i stranicu u predmemoriji. Posjetitelj koji prvi put dolazi s mobitela nema ništa od toga.
• “Ocjena mora biti 100.” Ocjena je sažetak, a ne cilj. Važno je da su tri glavne brojke u zelenom i da stranica radi svoj posao. Stranica s ocjenom 85 koja prodaje bolja je od one sa 100 koja ne radi ništa.
• “Dodatak za ubrzanje će to riješiti.” Dodatak može uključiti predmemoriju i sažimanje. Ne može smanjiti sliku od pet megabajta niti ukloniti deset skripti koje ste sami dodali.

Primjer

Ova stranica izgrađena je tako da se stilovi isporučuju unutar same stranice, slike u više veličina, a skripte samo tamo gdje su potrebne. Na Googleovom mjerenju redovito dobiva ocjene između 95 i 100 za mobitel. Nije riječ o posebnom triku, nego o tome da se o brzini mislilo od početka, a ne nakon objave.

Izmjerite svoju stranicu našim alatom. Iz rezultata možete jednim gumbom poslati upit s izmjerenim ocjenama, pa ćemo vam reći što bismo prvo popravili. Više o tome kako gradimo stranice pročitajte u opisu web rješenja.