Google PageSpeed Insights
Google PageSpeed Insights (ili skraćeno PSI) je online alat za testiranje performansi sajta koji analizira vreme učitavanja, brzinu odziva i vizuelnu stabilnost za određeni web sajt, kako na mobilnim, tako i na desktop uređajima.
Ovaj alat se koristi za besplatnu proveru brzine (bazirane na laboratorijskim (ili sintetičkim) i realnim (ili terenskim) podacima) koja vam daje procenjeni pregled performansi vašeg web sajta, a ujedno i predloge za njihovo poboljšanje.
Treba imati u vidu da ovaj alat ne testira rad vašeg web servera, već samo analizira rad komponenti vašeg sajta i ukazuje na delove kojima bi trebalo da se pozabavite kako bi vaš web sajt što bolje radio.
Zašto bi trebalo da koristite PageSpeed Insights?
Korišćenje Google PageSpeed Insights (PSI) alata vam donosi brojne prednosti. Evo nekoliko ključnih razloga zašto bi trebalo da koristite ovaj alat:
Poboljšanje korisničkog iskustva
Brzina učitavanja web sajta je ključna za korisničko iskustvo. Posetioci imaju malo strpljenja za spore sajtove i brzo će napustiti web sajt koji se ne učitava dovoljno brzo. PSI vam pomaže da identifikujete i otklonite probleme koji usporavaju vaš web sajt, čime potencijalno povećavate zadovoljstvo korisnika.
Povećanje stope konverzije
Brži sajtovi dovode do većih stopa konverzije. Studije pokazuju da kašnjenje od samo jedne sekunde može smanjiti stopu konverzije za čak 7%. Korišćenjem PSI alata za optimizaciju brzine učitavanja, možete direktno uticati na povećanje prodaje i konverzija na vašem web sajtu.
Bolji SEO skor
Google koristi brzinu učitavanja stranice kao jedan od faktora za rangiranje u pretragama. Brži sajtovi imaju veće šanse da se bolje rangiraju u rezultatima pretrage. Korišćenjem PSI alata, možete identifikovati i rešiti probleme koji negativno utiču na brzinu vašeg web sajta, čime uedno poboljšavate SEO performanse vašeg sajta.
Pristup detaljnim izveštajima
PSI pruža detaljne izveštaje o performansama vašeg sajta, uključujući laboratorijske i realne (terenske) podatke. Ovi izveštaji uključuju konkretne preporuke za poboljšanje brzine i performansi, što vam omogućava da precizno znate koje konkretne korake treba da preduzmete na poboljšanju vašeg sajta.
Praćenje Core Web Vitals
Core Web Vitals je set metrika koje Google koristi za merenje korisničkog iskustva na sajtu. PSI alat vam omogućava da pratite ove metrike i dobijete procenu njihovih vrednosti. Fokusiranje na poboljšanje ovih metrika pomaže da korisnicima pružite bolje iskustvo, što može rezultirati većim angažmanom i zadržavanjem posetilaca na web sajtu.
Šta su to laboratorijski (sintetički), a šta realni (terenski) podaci?
Laboratorijski podaci (takođe poznati kao sintetički podaci) pokazuju kako bi unapred definisani korisnici mogli da ostvaruju interakciju sa vašim web sajtom. Prikupljaju se u kontrolisanom okruženju i korisni su za otklanjanje problema sa performansama. Laboratorijski podaci se prikupljaju i analiziraju koristeći alat otvorenog koda Lighthouse.
Ovi podaci omogućavaju identifikaciju i otklanjanje problema sa performansama u kontrolisanim uslovima. Ključne metrike uključuju:
- First Contentful Paint (FCP): Vreme potrebno da se prvi sadržaj pojavi na ekranu.
- Speed Index: Brzina prikazivanja sadržaja tokom učitavanja stranice/web sajta.
- Largest Contentful Paint (LCP): Vreme potrebno da se učita najveći vidljivi element na stranici/web sajtu.
- Time to Interactive (TTI): Vreme potrebno da web sajt/stranica postane potpuno interaktivna.
- Total Blocking Time (TBT): Ukupno vreme tokom kog je glavna nit (main thread) blokirana i ne može odgovoriti na korisničke akcije.
- Cumulative Layout Shift (CLS): Količina neočekivanih pomeranja elemenata na stranici/web sajtu tokom njegovog učitavanja.
Realni podaci (takođe poznati kao podaci iz stvarnog sveta ili podaci o stvarnom korisničkom iskustvu (RUM)) pokazuju kako su stvarni korisnici iskusili vaš sajt. Terenski podaci se izvlače iz Chrome User Experience Report-a (CrUX).
Ključne metrike su:
- First Contentful Paint (FCP): Vreme do prvog prikaza sadržaja.
- Largest Contentful Paint (LCP): Vreme do učitavanja najvećeg vidljivog elementa.
- Cumulative Layout Shift (CLS): Neočekivana pomeranja elemenata na stranici/web sajtu.
- First Input Delay (FID): Vreme od prve interakcije korisnika do trenutka kada browser može da odgovori na tu interakciju.
Oba tipa podataka se koriste u izveštaju o performansama vašeg web sajta.
Kako pokrenuti test u Google PageSpeed Insights?
1. Posetite PageSpeed Insights sajt
2. Kopirajte/zalepite URL web stranice koju želite testirati u polje.
3. Kliknite na dugme Analyze (ili Analiziraj).
Sada sačekajte da PageSpeed da prikupi podatke iz baze Chrome User Experience Report (CrUX) i Lighthouse API-ja.
Ako je u pitanju sajt koji je duže vreme aktivan, imaćete na raspolaganju i podatke iz realnog okruženja (tzv terenske ili realne podatke). Oni će vam ujedno biti prvi prikazani u izveštaju.
Nakon toga ćete ispod videti izveštaj iz Lighthouse-a koji podrazumevano prikazuje podatke za mobilne uređaje.
Klikom na tab Računar moćićete da vidite i rezultate prikaza vašeg sajta na desktop računarima.
Obično će rezultati za mobilni biti nešto lošiji, mada to nije pravilo i zavisi od načina na koji ste optimizovali svoj web sajt i za prikaz na mobilnim uređajima. Ukoliko ste sajt kreirali pridržavajući se principa mobile first, onda ovi rezultati mogu biti veoma slični za oba tipa uređaja.
Ova analiza je podeljena u četiri osnovne kategorije:
- Učinak
- Pristupačnost
- Najbolje prakse
- Optimizacija za pretraživače
Hajde da vidimo odmah i šta koja od navedenih kategorija predstavlja:
- Učinak (Performance):
- Ova kategorija meri koliko brzo se web sajt učitava i koliko je efikasan u pružanju sadržaja korisnicima.
- Uključuje metrike kao što su First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to Interactive (TTI), Total Blocking Time (TBT), i Cumulative Layout Shift (CLS).
- Cilj je da se smanji vreme potrebno da korisnici vide i ostvare interakciju sa web sajtom, poboljšavajući tako korisničko iskustvo.
- Pristupačnost (Accessibility):
- Ova kategorija procenjuje koliko je vaš web sajt dostupan i prilagođen korisnicima sa određenim invaliditetom.
- Analizira elemente kao što su upotreba alternativnog teksta za slike, kontrast boja između teksta i pozadine, i semantička struktura HTML-a.
- Visok rezultat u ovoj kategoriji znači da je vaš web sajt prilagođen za sve korisnike, uključujući one sa posebnim potrebama.
- Najbolje prakse (Best Practices):
- Ova kategorija se fokusira na sigurnosne i tehničke aspekte vašeg web sajta.
- Proverava aspekte kao što su upotreba HTTPS protokola, sigurnost resursa, pravila za učitavanje sadržaja i performanse prilikom učitavanja.
- Optimizacija za pretraživače (search engine) (Search Engine Optimization – SEO):
- Ova kategorija ocenjuje koliko je vaš web sajt optimizovan za search engine.
- Analizira elemente kao što su pravilna upotreba meta tagova, struktura URL-ova, prisutnost sitemapa, i indeksibilnost stranice.
- Dobro optimizovan web sajt ima veće šanse da se visoko rangira u rezultatima pretrage, što povećava vidljivost i organski saobraćaj.
Ispod ovih rezultata će vam biti prikazana tzv dijagnostika. Tu možete videti detaljno opis potencijalnih problema i predloge za njihovo rešavanje.
Sa stanovišta tehničke optimizacije, ovaj deo je sigurno najbitniji deo Google PageSpeed Insights analize.
On će vam tačno pokazati šta to konkretno možete da popravite na vašem sajtu da bi on bio tehnički doteran i da bi samim tim obezbedio bolje korisničko iskustvo posetiocima vašeg sajta.
Na slici iznad (u okviru sekcije Dijagnostika) prikazane različite dijagnostičke metrike koje ukazuju na potencijalne probleme i načine za poboljšanje performansi web sajta. Evo detaljnijeg objašnjenja svake od ovih metrika:
- Eliminišite resurse koji blokiraju prikazivanje: Ova metrika ukazuje na resurse (kao što su CSS i JavaScript fajlovi) koji blokiraju renderovanje web sajta/stranice, što može usporiti vreme učitavanja.
- Elementi slika nemaju eksplicitne: width i height: Ova metrika ukazuje na slike koje nemaju eksplicitno definisane širinu i visinu, što može uzrokovati promene rasporeda tokom učitavanja.
- Prikazujte statičke elemente sa efikasnim smernicama keša: Ova metrika ukazuje na resurse koji se ne keširaju efikasno, što može povećati vreme učitavanja web sajta/stranice.
- Odredite odgovarajuću veličinu slika: Ova metrika ukazuje na slike koje su veće nego što je potrebno, što može usporiti učitavanje web sajta/stranice.
- Izbegavajte velike promene rasporeda: Ova metrika meri količinu neočekivanih pomeranja elemenata tokom učitavanja web sajta/stranice.
- Početno vreme odgovora servera je bilo kratko: Ova metrika meri vreme koje je potrebno serveru da odgovori na početni zahtev.
- Izbegava ogromne mrežne resurse: Ova metrika ukazuje na ukupnu veličinu resursa koji se preuzimaju prilikom učitavanja web sajta/stranice.
- Izbegava preveliku veličinu DOM-a: Ova metrika ukazuje na veličinu Document Object Model-a (DOM).
- Izbegavajte pravljenje lanaca kritičnih zahteva: Ova metrika ukazuje na lanca zavisnosti između resursa.
- Vreme izvršavanja JavaScript-a: Ova metrika meri ukupno vreme potrebno za izvršavanje JavaScript koda.
- Smanjuje rad glavne niti: Ova metrika ukazuje na vreme tokom kojeg je glavna nit (main thread) zauzeta obradom zadataka.
- Smanjite korišćenje sadržaja treće strane: Ova metrika ukazuje na vreme blokiranja glavne niti zbog sadržaja trećih strana.
- Element sa najvećim prikazivanjem sadržaja: Ova metrika meri vreme do učitavanja najvećeg vidljivog elementa na web sajtu/stranici.
Klikom na strelicu na dole pored svake konkretne dijagnostike otvoriće vam se detaljan prikaz sa konkretnom putanjom odnosno konkretnim resursom koji bi trebalo da pogledate i eventualno ispravite.
Kako tumačiti Google PageSpeed Insights izveštaje?
Tumačenje Google PageSpeed Insights (PSI) izveštaja može delovati složeno, ali sa pravim pristupom, možete lako razumeti šta vam izveštaj govori i saznati kako da poboljšate performanse svog web sajta.
Evo koraka koji će vam pomoći da pravilno tumačite PSI izveštaje:
Učinak
Opšti rezultat:
- Rezultat performansi kreće se od 0 do 100. Veći broj ukazuje na bolje performanse. Rezultati su posebno prikazani za mobilne uređaje i desktop računare.
Pregled ključnih metrika:
- First Contentful Paint (FCP): Vreme kada se prvi deo sadržaja prikaže na ekranu. Niže vrednosti su bolje.
- Largest Contentful Paint (LCP): Vreme potrebno da se najveći vidljivi deo sadržaja učita. Cilj je manje od 2.5 sekundi.
- Time to Interactive (TTI): Vreme kada web sajt/stranica postane potpuno interaktivna. Kraće vreme je bolje.
- Total Blocking Time (TBT): Ukupno vreme kada je web sajt/stranica blokirana i ne odgovara na korisničke interakcije. Manje je bolje.
- Cumulative Layout Shift (CLS): Mera neočekivanih pomeranja sadržaja na web sajtu/stranici. Manje vrednosti (manje od 0.1) su bolje.
Pristupačnost
Metrike za pristupačnost:
- Kontrast boja: Provera da li boje na web sajtu/stranici imaju dovoljan kontrast za korisnike sa oštećenjem vida.
- Alternativni tekst za slike: Provera da li sve slike imaju odgovarajući alt tekst za bolje iskustvo korisnika sa posebnim potrebama.
- Ispravno korišćenje HTML elemenata: Provera strukture HTML-a za pristupačnost (npr. korišćenje za naslove).
Najbolje prakse
Preporuke za najbolje prakse:
- HTTPS: Provera da li web sajt/stranica koristi sigurnu HTTPS vezu.
- Sigurnost resursa: Provera sigurnosti ugrađenih resursa (npr. iframe, skripti) i njihovih dozvola.
Optimizacija za pretraživače
SEO preporuke:
- Meta tagovi: Provera prisustva i pravilne upotrebe meta tagova (npr. title, description).
- Indeksibilnost: Provera da li su svi delovi web sajta/stranice indeksibilni za search engine.
- Struktura URL-ova: Provera da li su URL-ovi čisti i razumljivi.
Sve navedene kategorije pružaju sveobuhvatan pregled stanja vašeg web sajta i pomažu vam da identifikujete oblasti koje zahtevaju poboljšanje.
Kada je potrebno preduzeti aktivnosti na poboljšanju web sajta?
Kako smo do sada videli, analize Google PageSpeed Insights izveštaja pružaju detaljne informacije o performansama vašeg web sajta, ukazujući na oblasti koje je potrebno poboljšati da bi se unapredilo korisničko iskustvo i rangiranje u pretragama u search engine-ima.
Poboljšanje web sajta prema ovim analizama je potrebno uglavnom u sledećim slučajevima:
- Ocena brzine je niska: Ako je ocena brzine (score) na mobilnim uređajima i/ili desktop računarima ispod 50, to je znak da su potrebna značajna poboljšanja. Idealno je da ocena bude iznad 90. Ako želite da ubrzate svoj WordPress sajt, onda obavezno pročitajte koji su to trikovi za ubrzavanje WordPress web sajta. U pitanju su tri korisna teksta na našem blogu, pa preporučujemo da odvojite vreme da ih pročitate.
- Dugotrajno učitavanje stranica: Ako važne metrike poput First Contentful Paint (FCP), Largest Contentful Paint (LCP) ili Time to Interactive (TTI) pokazuju da web sajtu/stranici treba predugo da se učita, korisnici će verovatno napustiti sajt pre nego što ga uopšte vide.
- Visok broj preporuka za optimizaciju: Kada izveštaj ukazuje na veliki broj preporuka za poboljšanje, kao što su optimizacija slika, smanjenje JavaScript-a, eliminisanje render-blocking resursa i slično, potrebno je te preporuke razmotriti i primeniti. Zbog svoje veličine, slike se često pojavljuju u preporukama za optimizaciju. Zato pročitajte kako da optimizujete slike za vaš WordPress web sajt.
- Problemi sa Core Web Vitals: Google-ove ključne metrike za korisničko iskustvo (Core Web Vitals) uključuju LCP, First Input Delay (FID) i Cumulative Layout Shift (CLS). Ako izveštaj pokazuje da vaša stranica ima loše rezultate u ovim metrikama, to je jasan znak da su potrebne optimizacije.
Koraci za poboljšanje performansi sajta
U zasebnim tekstovima na našem sajtu smo pisali kako da poboljšate rad
- Optimizujte slike: Kompresujte slike bez gubitka kvaliteta i koristite moderne formate kao što su WebP. Preporučujemo da pročitate naš tekst na temu kako da sliku u WebP formatu postavite na WordPress web sajt.
- Minifikujte CSS i JavaScript: Smanjite veličinu CSS i JavaScript fajlova uklanjanjem nepotrebnih razmaka i komentara.
- Implementirajte keširanje: Omogućite keširanje da bi se resursi sajtova brže učitavali za povratne posetioce. Pročitajte obavezno naš tekst na temu kako da ubrzate svoj WordPress sajt pomoću LiteSpeed Cache plugin-a.
- Koristite Content Delivery Network (CDN): Distribuirajte sadržaj sajta preko CDN-a kako bi se smanjilo vreme učitavanja za korisnike širom sveta. Preporučujemo da za podešavanje CDN-a pročitate naš tekst na temu kako da aktivirate Cloudflare u cPanel-u.
- Eliminišite render-blocking resurse: Odložite učitavanje neesencijalnih CSS i JavaScript fajlova da bi se prvi sadržaj na stranici brže prikazao.
- Poboljšajte odgovor servera: Optimizujte performanse servera kako bi se smanjilo vreme potrebno za generisanje i isporuku sadržaja. Nekada odabir odgovarajućeg servera može značajno da utiče na njegove performanse, a ujedno i na performanse vašeg web sajta. Zato pročitajte kako da odredite optimalnu veličinu web servera za svoj web sajt.
Redovno praćenje i primena preporuka iz Google PageSpeed Insights izveštaja pomoći će vam da održavate visok nivo performansi vašeg web sajta, što će na kraju dovesti do boljeg korisničkog iskustva i boljeg rangiranja i search engine-ima.
Nenad Mihajlović