Brzina sajta i tehničke performanse
Slike su najčešći razlog zašto se sajtovi sporo učitavaju, jer na prosečnom sajtu, slike čine 40-60% ukupne “težine” stranice, a na sajtovima u Srbiji taj procenat je često i veći jer se slike postavljaju direktno sa telefona ili fotoaparata, bez ikakve pripreme.
Ako ste ikada testirali brzinu sajta i dobili lošu ocenu, velike su šanse da su slike glavni krivac. Dobra vest je da je optimizacija slika jedna od najlakših i najbrže izvodivih izmena na sajtu, a istovremeno donosi najveće poboljšanje brzine.
U ovom tekstu ćemo vas provesti kroz konkretan proces: kako da proverite da li su vaše slike problem, kako da ih pripremite pre postavljanja na sajt i šta možete uraditi sa slikama koje su već na sajtu. Za kompletan pregled tehničke optimizacije sajta, pročitajte naš detaljni vodič o tehničkoj optimizaciji.
Da biste razumeli zašto je optimizacija slika tako važna, korisno je da znate šta se dešava kada neko otvori vaš sajt. Pregledač posetioca mora da preuzme sve fajlove koji čine stranicu: kod, fontove, skripte i slike. Od svega toga, slike su skoro uvek najveći fajlovi.
Jedna fotografija snimljena telefonom obično ima između 3 i 8 megabajta. Ako na jednoj stranici imate pet takvih fotografija, to je 15-40 MB podataka koje pregledač mora da preuzme pre nego što stranica izgleda kompletno. Na mobilnom internetu u Srbiji, to može da traje 10, 15, pa i više sekundi.
Poređenja radi, ceo kod jedne prosečne stranice (bez slika) retko prelazi 1-2 MB. To znači da slike mogu da čine i 90% ukupne težine stranice. Optimizacijom slika bukvalno uklanjate najveći teret sa svog sajta.
Pre nego što krenete da menjate bilo šta, proverite trenutno stanje. Ovo je jednostavan proces koji traje par minuta.
Otvorite svoj sajt u browseru, kliknite desnim tasterom miša bilo gde na stranici i izaberite opciju “Inspect” ili “Pregledaj element”. Zatim kliknite na karticu “Network” i osvežite stranicu. Pregledač će vam prikazati listu svih fajlova koji se učitavaju, uključujući veličinu svakog od njih. Filtrirajte prikaz na “Img” da vidite samo slike.
Ako vidite slike koje su veće od 200-300 KB, to su kandidati za optimizaciju. Ako vidite slike od nekoliko megabajta, imate ozbiljan problem koji aktivno usporava vaš sajt.
Optimizacija slika se svodi na tri stvari: pravu veličinu, pravi format i pravi način isporuke. Svaki od ovih koraka smanjuje količinu prostora koji slike zauzimaju na sajtu/serveru, a zajedno mogu da smanje ukupnu veličinu stranice i za 80%.
Ovo je najčešća greška i najlakša za ispravku. Vlasnici sajtova postavljaju fotografije u originalnoj rezoluciji, recimo 4000×3000 piksela, a sajt ih prikazuje u prozoru od 800×600 piksela. Pregledač i dalje preuzima celu sliku od 4000×3000, a onda je sam smanjuje na ekranu.
To je kao da šaljete kamion da dostavi jednu kovertu. Podatke jeste preneli, ali potrošili ste višestruko više resursa nego što je bilo potrebno.
Pre nego što postavite sliku na sajt, proverite u kojim dimenzijama se ona zapravo prikazuje. Ako se slika na sajtu prikazuje u širini od 800 piksela, nema potrebe da fajl bude širi od toga. Smanjivanje dimenzija sa 4000 na 800 piksela može da smanji veličinu fajla sa 5 MB na 200-300 KB, bez ikakve vidljive razlike u kvalitetu.
Format slike značajno utiče na veličinu fajla. Evo šta treba da znate o najvažnijim formatima:
JPEG je i dalje najčešći format za fotografije na sajtovima. Dobar je za slike sa mnogo boja i detalja, ali nije najefikasniji po pitanju kompresije.
PNG je neophodan kada vam treba providna pozadina (na primer, za logo). Međutim, PNG fajlovi su značajno veći od JPEG-a za fotografije. Česta greška je postavljanje fotografija u PNG formatu jer izgledaju bolje, a zapravo samo nepotrebno povećava veličinu fajla.
WebP je moderan format koji nudi isti vizuelni kvalitet kao JPEG, ali sa 25-35% manjom veličinom fajla. Svi moderni pregledači ga podržavaju, a većina platformi za upravljanje sajtom može automatski da konvertuje slike u ovaj format.
Ako imate online prodavnicu sa 500 fotografija proizvoda, prelazak sa JPEG na WebP format može da uštedi stotine megabajta ukupne težine sajta. Za posetioca koji pregleda 10 stranica proizvoda, to je razlika između 30 sekundi čekanja i 10 sekundi čekanja.
Standardno ponašanje pregledača je da pri otvaranju stranice odmah preuzme sve slike, uključujući one koje su daleko ispod vidljivog dela ekrana. Posetilac vidi samo vrh stranice, ali pregledač u pozadini već preuzima slike koje su na dnu. To usporava početno učitavanje onoga što je posetiocu zaista važno.
Lazy loading menja ovo ponašanje. Sa ovom tehnikom, slike se učitavaju tek kada im se posetilac približi skrolovanjem. Slika koja je na dnu stranice neće se učitavati dok posetilac ne dođe blizu tog dela. Rezultat je značajno brže inicijalno učitavanje stranice.
Ovo je posebno korisno za stranice sa mnogo slika: galerije proizvoda, portfolio stranice, blogove sa ilustracijama. Na stranici sa 20 slika, umesto da pregledač preuzima svih 20 odjednom, on preuzima samo 3-4 koje su vidljive, a ostale učitava po potrebi.
Većina modernih platformi za izradu sajtova ima ugrađenu podršku za lazy loading ili je možete aktivirati jednim dodatkom. Ovo je izmena koju vaš programer može da implementira za manje od sat vremena, a koja može dramatično da ubrza učitavanje stranica sa mnogo slika.
Ovaj detalj mnogi preskaču, ali je važan. Kada postavljate sliku na sajt, neophodno je da u kodu budu definisane njene dimenzije (širina i visina). Ovo ne utiče na brzinu preuzimanja slike, ali utiče na nešto drugo: vizuelnu stabilnost stranice.
Ako dimenzije nisu definisane, pregledač ne zna koliko prostora da ostavi za sliku dok se ona učitava. Tekst se prikaže, posetilac počne da čita, a onda se pojavi slika i pomeri ceo sadržaj na dole. Ovo je poznato kao CLS (Cumulative Layout Shift) i Google ga aktivno meri i kažnjava u rangiranju.
O tome šta je CLS i kako utiče na SEO detaljnije pišemo u tekstu o Core Web Vitals. Ovde je ključna poenta da definisanje dimenzija slika rešava ovaj problem: pregledač unapred zna koliko prostora da ostavi, pa sadržaj ne skače.
Ako tek pokrećete sajt, lako je primeniti sve ovo od starta. Ali šta ako imate sajt sa stotinama ili hiljadama već postavljenih slika koje nisu optimizovane?
Nemojte paničiti i nemojte pokušavati da sve uradite odjednom. Krenite od stranica koje su najvažnije za vaš biznis.
Prvo, identifikujte 5-10 najposećenijih stranica na sajtu. To su obično početna stranica, stranice najpopularnijih proizvoda ili usluga i kontakt stranica. Optimizujte slike na tim stranicama prvo jer su one te koje većina posetilaca vidi.
Drugo, proverite da li vaša platforma ima mogućnost automatske optimizacije. Mnogi sistemi za upravljanje sadržajem nude dodatke koji automatski kompresuju i konvertuju slike pri postavljanju, pa čak i retroaktivno optimizuju slike koje su već na sajtu. Ovo je daleko brži pristup nego ručna obrada svake slike pojedinačno.
Treće, za sve nove slike koje postavljate od danas, primenite proces koji smo opisali: smanjite dimenzije, koristite pravi format, kompresujte pre postavljanja. Vremenom, sve više stranica na sajtu će imati optimizovane slike.
Ako imate online prodavnicu, optimizacija slika je još važnija nego za obične sajtove. Prodavnica sa 200 proizvoda može imati i preko 1000 slika (više fotografija po proizvodu, slike kategorija, baneri). Svaka neoptimizovana slika se množi sa brojem posetilaca dnevno.
Zamislite da svaki posetilac pri pregledu proizvoda preuzima 3 MB nepotrebnih podataka. Sa 100 posetilaca dnevno, to je 300 MB nepotrebnog transfera dnevno. Sa 1000 posetilaca, to je 3 GB. Ovo opterećuje server, usporava sajt za sve i povećava troškove hostinga.
Za online prodavnice, ključna stvar je da uspostavite proces za svaku novu fotografiju proizvoda: snimite fotografiju, smanjite dimenzije na veličinu prikaza, konvertujte u WebP format, kompresujte i tek onda postavite na sajt. Ovo zvuči kao mnogo koraka, ali kada jednom napravite rutinu, ceo proces traje manje od minut po slici.
Optimizacija slika je verovatno najisplativija stvar koju možete uraditi za brzinu svog sajta. Ne zahteva tehničko znanje, ne košta ništa i može drastično da poboljša iskustvo vaših posetilaca.
Smanjite dimenzije na stvarnu veličinu prikaza, koristite WebP format i omogućite lazy loading. Te tri izmene same po sebi mogu da prepolove vreme učitavanja vaših stranica.
Želite da proverite da li vaš sajt ima ovaj problem? Uradite besplatnu procenu na dobarsajt.com.