Kako da koristite PageSpeed Insights API za monitoring performansi web sajta

Postoji nekoliko dobrih alata za monitoring performansi web sajta, ali Google-ov PageSpeed Insights spada u najbolje. Dostupan je kao web aplikacija, a i kao Lighthouse tab u okviru Chrome DevTools alata, kao i u okviru dev alata u Edge, Opera, Brave i Vivaldo browser-ima.

Kao što znate, performanse nekog web sajta su postale izuzetno važne i pored sadržaja jedan su od najvažnijih faktora za rangiranje vašeg sajta u Google pretrazi.

WordPress danas pokreće preko 43% svih web sajtova na Internetu (prema poslednjem izveštaju W3Techs-a), pa je logično da se u ovom tekstu pozabavimo monitoringom performansi upravo WordPress web sajtova.

Iako je WordPress značajno napredovao od svojih početaka, njegove performanse su i dalje često upitne, što zbog zavisnosti od tema, tako i zbog, u nekim slučajevima, preterane upotrebe plugin-a. U određenim slučajevima WordPress možete ubrzati korišćenjem kvalitetnog hostinga, kao i korišćenjem nekih drugih tehnika i najboljih praksi za ubrzanje WordPress sajta.

Pristupanje Lighthouse-u

Lighthouse u browser-u možete pronaći u okviru dev alata već navedenih browser-a. Otvorite neki sajt u nekom od navedenih browser-a (mi ćemo koristiti Chrome), prebacite se na tab Lighthouse u okviru dev tools-a i kliknite na dugme Analyze page load. Nakon par sekundi će se pojaviti dashboard sa prikazanim rezultatima analize performansi tog sajta.

Možete da čekirate bilo koje od kategorija kojima se mere performanse (Performance, Accessibility, Best practices, SEO) i dobićete detaljniji izveštaj pomoću kojeg možete imati bolji uvid u performanse analiziranog sajta.

Zahvaljujući tome Lighthouse zaista daje mnogo korisnih informacija koje mogu pomoći da optimizujete svoj sajt, ali ima i nekih mana koje treba pomenuti:

• svaki put kada analizirate stranicu, potrebno je da ručno pokrenete alat
• nije lako detektovati razlike, odnosno koje su se performanse pogoršale ili poboljšale u odnosu na prethodnu analizu
• ima dosta podataka koje treba proveriti, pa neke od njih možete pogrešno razumeti
• tehnički detalji su namenjeni prevashodno developerima, pa mogu biti nerazumljivi ili beskorisni nekome ko nije tehnički potkovan, a želi da ima uvid u performanse
• performanse lokalnog uređaja i brzina mreže mogu da utiču na rezultate, pa to može dati iskrivljenu sliku

Srećom, PageSpeed Insights API omogućava da prevaziđete većinu ovih mana, tako što ćete automatizovati testove koji ujedno mogu biti sačuvani i kasnije upoređeni sa prethodnim rezultatima.

Šta je PageSpeed Insights API?

Google obezbeđuje besplatan PageSpeed Insights REST API koji vraća podatke u JSON formatu. Ovaj API sadrži svu Lighthouse metriku pa i više od toga. Omogućava vam da automatizujete pokretanje testa, sačuvate rezultate testa, pregledate promene koje su se desile tokom vremena i prikaže tačno one informacije koje su vam potrebne.

PageSpeed Insights API emulira način na koji Google vidi vaš sajt. Možete da pokrenete izveštaj svakih nekoliko dana ili kada god uradite neku izmenu koja može da utiče na performanse sajta.

Iako su ovi rezultati od velike pomoći, ne znači da su obavezno i uvek odraz pravih performansi vašeg sajta na Internetu. Zato je browser Performance API bolja opcija ukoliko želite da posmatrate rezultate onako kakvi su oni u realnom svetu, i to na svim uređajima i mrežama.

PageSpeed Insights API

Kopirajte sledeću adresu u vaš browser i editujte URL da biste pristupili performansama vaše stranice

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.nazivsajta.rs/ (nazivsajta.rs – zamenite svojim domenom)

Za ovo je idealan Firefox jer on ima ugrađen JSON viewer, ali možete da koristite i JSON viewer ekstenziju za Chrome koja obezbeđuje istu funkcionalnost. Konačni Lighthouse Performance skor se nalazi označen na slici ispod, pod opcijom categories → performance.

Možete da promenite API URL query string. Jedini potreban parametar je URL.
Na primer to može biti:

url=https://nazivsajta.rs/page1

Podrazumevano se pokreće desktop test, ali možete i da ga eksplicitno zahtevate sa:

strategy=desktop

ili prebaciti na mobilni sa:

strategy=mobile

Pokreću se samo testovi perfomansi, ukoliko eksplicitno ne zahtevate neki od konkretnih testova:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

Neki jezici mogu biti definisani tako što podešavate locale (na primer francuski):

locale=fr-FR

Detalji Google Analytics kampanje mogu biti podešeni kao:

utm_campaign=<campaign>
utm_source=<source>

Servis je inače besplatan ukoliko ne pokrećete testove često, ali ćete morati da se registrujete za Google API ključ ukoliko nameravate da u kratkom vremenskom periodu pokrećete više testova sa iste IP adrese. Ključ se dodaje URL-u sa:

key=<api-key>

Možete da napravite URL query string definišući svoje parametre odvojene znakom &. Sledeći API URL testira stranicu https://nekisajt.rs/ testiranjem performansi sajta kojem se pristupa putem mobilnog uređaja (mobilni telefon / tablet).:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://nekisajt.rs/&strategy=mobile&category=performance&category=accessibility

Možete napraviti svoje URL-ove ili koristiti Google PageSpeed API URL builder tool

PageSpeed Insights API JSON rezultati

Testovi uobičajeno vraćaju oko 600Kb JSON podataka, u zavisnosti od izabrane kategorije, broja elemenata na stranici i kompleksnosti screenshot-ova (embedovanih u base64 formatu).

Javlja se dupliranje nekih podataka, a dokumentacija rezultata nije uvek jasna. JSON je podeljen u četiri sekcije koje ćemo detaljnije predstaviti u nastavku teksta.

loadingExperience

Ovo su metrike koje se odnose na korisničko iskustvo. One uključuju informacije kao što su Core Web Vitalis CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS, i FIRST_INPUT_DELAY_MS. Detalji i vrednosti za kategorije vraćaju FAST, AVERAGE, SLOW, ili NONE ukoliko ništa nije izmereno.

Na primer:

"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},

originLoadingExperience

Ovo su zbirne metrike izračunate za iskustva učitavanja za sve korisnike. Sekcije su identične loadingExperience-u i sajtovi sa manje saobraćaja verovatno neće pokazati nikakve razlike u brojevima.

lighthouseResult

Ovo je najveća sekcija i sadrži svu Lighthouse metriku. On obezbeđuje informacije o testu:

• requestedUrl – URL koji ste zahtevali
• finalURL – stranica koja je testirana nakon svih redirekcija
• lighthouseVersion – verzija softvera
• fetchTime – vreme kada je test pokrenut
• userAgent – user agent string browser-a koji je korišćen za testiranje
• environment – proširene user agent informacije
• configSettings – podešavanja prosleđena API-ju

Ovo je praćeno audits sekcijom sa mnogim sekcijama, uključujući unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails, i full-page-screenshot.

Većina audit metrika ima sekciju details koja sadrži faktore poput “overallSavingsBytes” i “overallSavingsMs” koji procenjuju benefite od implementacije poboljšanja.

Sekcija metrics daje sumarno prikaz svih metrika u nizu pod nazivom items:

"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},

Sekciju audits prati sekcija categories koja daje ukupne Lighthouse skorove za izabrane kategorije prosleđene na API URL:

"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//…

Score je broj između 0 i 1 koji je prikazan kao procenat u Lighthouse izveštajima. Skorovi imaju sledeća značenja:

• 0.9 do 1.0 je dobro
• 0.5 do ispod 0.9 znači da je neophodno poboljšanje
• ispod 0.5 je loše (slabo) i zahteva više pažnje korisnika

Sekcija auditRefs donosi listu svih metrika i mera koje se koriste za računanje svakog skora.

analysisUTCTimestamp

Na kraju, prikazano je i vreme analize. Ono bi trebalo da odgovara vremenu prikazanom u lighthouseResult.fetchTime.

JSON Result metrike

Svakako preporučujemo da sačuvate i upoznate se sa JSON rezultatom u text editoru. Alternativno, za njihov pregled možete koristiti neke od besplatnih online alata kao što su:

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

JSON result ima veroma korisne metrike, od kojih navodimo neke koje vam mogu koristiti. Ne zaboravite da podesite željenu kategoriju uz URL, ukoliko vam je to neophodno.

Summary Metrics

Ukupan skor od 0 do 1

Performance Metrics

Uključuju Core Web Vitals skor od 0 do 1

Evo i nekih korisnih performance skorova koji uključuju:

Kreirajte no-code performance dashboard

Live API feed-ovi mogu da se čitaju i procesiraju u mnogim aplikacijama uključujući Microsoft Excel (Neočekivano, Google Sheets ne podržava JSON feed-ove bez dodatnih plugina ili makro koda, ali podržava XML).

Da biste importovali skor performansi u realnom vremenu u Excel, otvorite Excel, pa zatim idite na tab Data i odatle kliknite na From Web. U polje koje vam se otvori (sa podrazumevano čekiranim radio button-om Basic) unesite vaš PageSpeed Insights API URL i kliknite na OK.

U sledećem prozoru kliknite na Connect. Ostavite podešavanja na podrazumevana (Anonymous). Nastavićete dalje ka alatu Query Settings.

Kliknkite na Record desno od rezultata Lighthouse metrike. Zatim kliknite isto na categories i performance da biste se spustili do JSON hijerarhije.

Kliknite na ikonicu Into Table na vrhu menija koji se otvori posle klika desnim tasetom miša.

Zatim kliknite na strelicu pored filtera u zaglavlju tabele da biste uklonili sve osim opcije score. Nakon toga kliknite na OK.

Na kraju kliknite na Close & Load da bi se u ćeliji prikazao skor performansi u realnom vremenu (live performance score).

Isti proces možete da ponovite i za sve ostale metrike koje želite da importujete.

Zaključak

Kako smo videli, Lighthouse je odličan online alat, ali nije baš praktičan ukoliko treba često da proveravate različite stranice/web sajtove. Sa druge strane PageSpeed Insights API vam omogućava da sami za svoje potrebe kreirate automatizovane testove, koje kasnije možete koristiti za različite potrebe. Pored toga, tu su i ostale prednosti korišćenja PageSpeed Insights API-ja:

• Testovi performansi mogu biti automatizovani (bez potrebe da ih ručno pokrećete)
• Rezultati se sakupljaju na Google serverima, pa faktori kao što su brzina lokalnih diskova ili mreže imaju manje uticaja
• Metrike uključuju informacije koje obično nisu dostupne u Lighthouse-u
• Važne metrike mogu biti snimljene i nadgledane tokom vremena da bi se bolje pratile promene u rezultatima
• Performanse i SEO informacije mogu biti prikazane u jednostavnim izveštajima, tako da mogu biti dostupne i razumljive za različite korisnike (menadžere, developere, klijente itd).