Web optimizacija, prvi koraci

Zašto je važno da sajt bude optimizovan?

Kako vreme prolazi optimizacija dobija sve više i više na značaju. Sada nije dovoljno da budete digitalno prisutni i da same informacije budu dobre već i da korisnik u optimalnom vremenu dođe do sadržaja koji ga zanima, kako kroz navigaciju sajta tako i kroz samu brzinu dostupnosti traženih informacija. Neki od glavnih razloga zašto je važno uložiti vreme su:

• Korisnici su nezadovoljni, dugo čekaju da dođu do informacija i napuštaju sajt posle nekog vremena
• Brzina učitavanja direktno utiče na biznis
• Utiče na rangiranje sajta na Google-u

Da li ste znali?

• Kašnjenje od 500ms će povećati frustraciju korisnika za 26% (Redware)
• Kašnjenje od 500ms će umanjiti saobraćaj na Google-u za 20%
• Kašnjenje od 100ms će umanjiti prodaju na Amazonu za 1%
• Od aprila 2010. brzina učitavanja sajta na desktopu je deo Google formule za rangiranje sajtova
• Od jula 2018. brzina učitavanja sajta na mobilnom je deo Google formule za rangiranje sajtova
• Manji broj korisnika direktno utiče na manji broj konverzija.

Gde je najbolje da prvo uložim vreme?

Kao neko ko se pretežno bavi razvojem na serverskoj strani, u početku mi se dešavalo da optimizaciju pretežno tu i baziram. Ulagali smo dosta vremena u optimizaciju same infrastrukture, aplikacije, i sl., međutim vreme koje smo ulagali nije odgovaralo rezultatu koji dobijamo. Daljim istraživanjem smo naišli na različite alate koji su nam pomogli da primetimo da iako je sajt koji optimizujemo, po ukupnom vremenu učitavanja bio najbrži, iz ugla korisničke percepcije bio je najsporiji. Kao u većini slučajeva optimizacije na kojima sam radila, pogledajte u nastavku prikaz ukupnog vremena, gde se vidi poređenje serverske i klijentske strane:

Serversko vreme učitavanja stranice je samo mali deo prvog reda u odnosu na klijentsko vreme. U ovom slučaju server ne predstavlja mesto u koje prvo treba uložiti vreme. U većini slučajeva na kojima sam radila uticaj klijentske strane je bio oko 80%, a serverske oko 20%. Ovde izuzimam ekstremne slučajeve kada aplikacija nije dostupna, kao i kada određeni serverski odgovori imaju zahtevne operacije sa bazom i traju dugo ili sl. Ovo možete primetiti iz izveštaja na osnovu vremena trajanja pojedinačnih zahteva.

Optimizacija na serverskoj strani najčešće oduzima više vremena, a ima manji benefit na celokupni rezultat. Pogledajte vremensku liniju svih zahteva na strani, detektujte da li je problem na serverskoj ili klijentskoj strani i prema tome odaberite alate i dalje usmerite vreme koje ulažete.

Koje metrike su zaista važne?

Ukoliko ste krenuli da istražujete i čitate na ovu temu, verovatno ste naišli na različite metrike. Dosta njih su prikazane u samim pregledačima kao što su vreme učitavanja DOM-a, vreme učitavanja kompletne strane itd. Sintetički alati prikazuju rezultate za metrike poput prvog prikazivanja sadržaja (First Contentful Paint), prvog značajnog prikazivanja (First Meaningful Paint), indeksa brzine i slično. Možda ste se pitali koje su metrike relevantne i na šta treba najviše obratiti pažnju.

U nastavku sledi podela na dva osnovna tipa metrike:

• Metrike pregledača
• Metrike orijentisane na korisnike

Metrike pregledača su manje značajne. Može da se dogodi da je učitan DOM, ali da je CSS-om sakriven određeni element strane, ili da je učitan sadržaj strane a da korisnik ne može da izvrši bilo kakav vid interakcije. Veoma je važna korisnička percepcija učitavanja sajta. Onog momenta kada korisnik stekne utisak da je sajt spreman, počinje da ga koristi bez obzira na to da li su se učitali svi resursi koje strana zahteva. Metrike koje su orijentisane na korisnike definišu upravo stvari ovog tipa.

Referentne vrednosti za metrike možete naći na ovom linku, pogledajte kategoriju performanse.

Metrike pregledača

1. Vreme do prvog bajta (TTFB - Time to First Byte)

Serverski orijentisana metrika koja nam govori koliko brzo server isporučuje odgovor, tj. prvi bajt odgovora. Korisna za detekciju usporenja na serverskoj strani.

2. Prvo prikazivanje (First Paint)

Daje nam informaciju o tome kada se prikazao prvi piksel odgovora na ekranu. Ovo, kao i preostale metrike koje su orijentisane na pregledač, nije nešto što je važno korisniku, za razliku od metrike za prvi prikaz sadržaja (First Contentful Paint) i metrika za prvo značajno prikazivanje (First Meaningful Paint) koje su opisane u nastavku. U trenutku kada se prikaže prvi piksel, korisnik ne može da konzumira sadržaj.

3. Vreme učitavanja stranice (Page Load)

Trenutak kada su preuzeti svi resursi koje strana zahteva (slike, js, css, ...) i strana prikazana u celini. Uključuje sve što postoji na strani, kako vidljive elemente na prvom ekranu, tako i sve preostale.

Metrike orijentisane na korisnika

1. Prvo prikazivanje sadržaja (First Contentful Paint)

Prikaz prvog sadržaja na strani, najčešće to bude prikaz navigacije. Razlika u odnosu na metriku prvog prikaza (First Paint) je što mora da sadrži tekst, nešto što ljudski mozak može da procesuira.

2. Prvo značajno prikazivanje (First Meaningful Paint)

Za razliku od metrike prvog prikaza sadržaja (First Contentful Paint), ova predstavlja trenutak kada se prikaže prvi paragraf, naslov. Nešto što je sadržaj same strane, zbog čega je korisnik i došao na naš sajt.

3. Vreme početka interakcije (Time To Interactive)

Trenutak kada korisnik može da ima interakciju na strani. Dešava se da, iako je sadržaj dostupan na strani, korisnik još uvek ne može, putem linka, da ode na drugu stranicu, ili da pomeri sadržaj ka dole. Najčešće se javlja kod klijentskih aplikacija pisanim u React-u, Angularu, ...

4. Vreme prikaza najvećeg sadržaja (Largest Contentful Paint)

Meri vreme prikaza elementa koji zauzima najviše mesta na strani. Najčešće je to slika, i za ovaj tip sadržaja želimo da se što pre prikaže na strani.

5. Vreme prvog neaktivnog procesora (First CPU Idle)

Prethodni naziv ove metrike je bio “Vreme prve interakcije” i ono predstavlja trenutak kada je korisniku omogućena minimalna interakcija na strani. Većina UI elemenata je interaktivna.

6. Indeks brzine (Speed Index)

Daje nam informaciju o tome koliko brzo se sajt učitava, tj. koliko brzo se elementi prikazuju na strani.

Na slici iznad možete da primetite da je potrebno identično vreme za učitavanje kompletne strane “A”, kao i strane “B” (12s), s tim što postoji očigledna razlika u dinamici prikazivanja sadržaja. Na primeru strane “A”, oko 90% sadržaja ukupne strane je prikazano već posle 400ms, dok se na primeru strane “B”, ta ista vrednost dostiže tek nakon 11s. Ova metrika nam služi za bolje razumevanje dinamike prikaza elemenata na strani.

Sama percepcija korisnika je mnogo važnija od stvarnog vremena potrebnog za učitavanje sajta. Ukoliko korisnik ima utisak da je sadržaj prikazan, ranije će početi da ga koristi, bez obzira na to da li su se svi resursi na strani učitali.

7. Maksimalan zastoj prve interakcije korisnika (Max potential First Input Delay)

Vreme koje protekne od prve interakcije korisnika, kao što je npr. klik na određeni link, do trenutka kada pregledač može da odgovori na nju. Računa se kao vreme najduže aktivnosti nakon prvog prikaza sadržaja. Pre prvog prikaza sadržaja, korisnik i nije u mogućnosti da izvrši bilo koji vid interakcije.

8. Prilagođena metrika (Custom metric)

Metrika koju sami definišemo u zavisnosti od samog biznisa. Npr. Pinterest metrika je prikaz prvog pina, dok je Twitter metrika prikaz prvog tweeta.

Koje alate je najbolje da koristim? Da li zaista mogu da znam kakvo je iskustvo korisnika koji posećuju moj sajt?

Ukoliko vam se dogodilo da posle nekog vremena primetite da je vaš sajt značajno usporio od trenutka kada ste završili razvoj, a pritom znate da je u međuvremenu bilo dosta izmena na različitim nivoima i da ćete teško detektovati šta je uzrok i odakle da počnete, alati u nastavku vam mogu biti od velikog značaja kako bi optimizovali vreme održavanja i razvoja samog sajta.

Postoje dva tipa alata koji mogu biti korisni prilikom merenja performansi sajta, a to su alati za:

• Monitoring realnih korisnika (RUM - Real User Monitoring)
• Sintetički monitoring.

Monitoring realnih korisnika (RUM)

Ukoliko vas zanima kakav je korisnički doživljaj vašeg sajta, ovaj tip alata vam može biti od koristi i dati odgovore na sledeća pitanja:

• Ko su pravi korisnici mog sajta?
• Sa kojih lokacija i uređaja pristupaju mom sajtu?
• Koje pregledače koriste za pristup?
• Kakvo je njihovo korisničko iskustvo, iz ugla učitavanja sajta?

Ovim alatima su prikazane performanse sajta upravo na osnovu iskustva pravih korisnika. Prilikom implementacije, potrebno je da se uključe skripte samog alata koji se koristi za merenje i generisanje izveštaja. Vrednosti koje se beleže su iz pregledača pravog korisnika. Koriste se na produkcionom okruženju, skuplji su, ali su realniji jer su bazirani na pravim korisnicima umesto pretpostavkama marketing ili razvojnog tima.

Neki od alata za monitoring realnih korisnika su:

1. Pingdom Visitor Insights

2. New Relic Browser

3. Akamai mPulse

4. Sematex Experience

U okviru Google Analitike takođe imate informacije o brzini učitavanja strane pravih korisnika, u sekciji Behaviour/Site Speed.

Ti podaci su dosta siromašniji u odnosu na informacije dobijene od gore navedenih alata.

Sintetički monitoring

Sintetički alati su alati koji vrše analizu sajta u “laboratorijskim” uslovima. Postoje skripte koje simuliraju posetu korisnika i koje se periodično izvršavaju. Ovi alati pružaju mogućnost da se kontroliše samo okruženje pod kojim se testira, u vidu podešavanja geografske lokacije, uređaja, mreže preko koje se pristupa i slično. Koriste se za razvojno i produkciono okruženje, i jeftiniji su. Neki od njih mogu lokalno da se instaliraju i postave da budu sastavni deo kontinuirane nadogradnje (CI - Continuous Integration).

Većina ovih alata sadrži mogućnost slanja notifikacija u slučaju da se prekorači određena vremenska granica. Npr. odgovor servera tj. TTFB je veći od 200 ms. Korisno je imati ovu vrstu informacija što ranije, kako bi promena ponašanja mogla da se poveže sa aktivnostima koje su rađene na samom sajtu. Tako ćete brže detektovati uzrok i pobrinuti se za potrebne optimizacije. Usporenje može biti uzrokovano kako infrastrukturalnom promenom, tako i prelaskom sajta na noviju verziju.

Neki od sintetičkih alata su:

1. Web Page Test

Alat nudi veliki broj mogućnosti prilikom pokretanja testova, kao što su: definisanje lokacije sa koje se pokreće test, odabir broja testova koji se pokreću, podešavanje specifičnih zaglavlja zahteva, prikaz metrike specifične za sam sajt (ubacivanjem predefinisane skripte), mogućnost da se testovi izvrše i u slučaju da postoji osnovna autentifikacija, itd.

Jedan tip testova koji postoji kao mogućnost, je upoređivanje sa konkurentskim sajtovima. Ovde možete da dobijte osnovnu povratnu informaciju o tome kako izgleda učitavanje vašeg sajta u odnosu na konkurenciju, iz korisničke perspektive.

2. TestMySite

Ukoliko želite da vidite kako performanse vašeg sajta utiču na biznis:

3. Google Page Speed Insights

Google Page Speed Insights je od 2018. godine baziran na alatu Lighthouse. Na sledećem linku možete videti na koji način se vrši kalkulacija ocene za kategoriju performanse. Prikazane su metrike koje su deo ukupne formule, svaka od njih ima različitu važnost u samoj formuli, kao i broj poena koji nosi u zavisnosti od broja sekundi za koji se ispuni.

4. Chrome Devleoper Tool

Lighthouse je takođe u pozadini "Audit" panela u okviru alata Chrome Developer Tool. Imate opciju da simulirate zagušenje mreže i odaberete tip uređaja sa kog se pristupa. Zgodan je za pokretanje u toku razvoja, za razliku od Google Page Speed Insight-a možete da ga koristite na lokalnom okruženju.

5. GT Metrix

GTMetrix nudi besplatnu verziju koja ima dosta funkcionalnosti, kao na primer mogućnost da se upamti istorija prethodnih testova, ili mogućnost da se uporede konkurentni sajtovi ili dve verzije istog sajta. Sem GT Metrix ocene, prikazano je i YSlow rangiranje, kao i preporuke za dalju optimizaciju.

Na narednoj slici možete primetiti koji su metrike dostupne u GTMetrix alatu, u podešavanjima za slanje notifikacija, u slučaju da se prekorači određena vrednost.

6. Pingdom

Pingdom sem mogućnosti nadgledanja performansi učitavanja strana, nudi i monitoring realnih korisnika, kao i dostupnost sajta i značajnih transakcija, kao što su npr. kupovina ili prijava. Ima mogućnost pokretanja testova sa 7 različitih geografskih lokacija.

Zaključak

Brzina učitavanja sajta je jedan od važnih aspekata korisničkog iskustva, i igra sve veću ulogu u poslednje vreme. Treba obratiti podjednako pažnju na nju u odnosu na ostale aspekte korisničkog iskustva, kao što su izgled, lakoća korišćenja, navigacija…

U članku su prikazane metrike koje su važne, referentne vrednosti kao i alati koji su značajni u procesu razvoja. Moje preporuke su da:

• Krenete od jednog alata i naučite da ga koristite i tumačite rezultate koje daje. Izdvojila bih WebPageTest. Besplatan je, može da se instalira na lokalnom okruženju, ima dosta opcija za podešavanje samih testova, i daje detaljne izveštaje u više formata.
• Optimizujete učitavanje sajta iz ugla korisnika. Percepcija korisnika je veoma važna. Fokusirajte se na metrike orijentisane na korisnika.
• Pogledajte vremensku liniju svih zahteva prilikom učitavanja strane, detektujte da li je problem na serverskoj ili klijentskoj strani i prema tome dalje usmerite vreme koje ulažete za optimizaciju.
• Na produkcionom okruženju koristite prvenstveno alate za monitoring realnih korisnika. Ukoliko ne želite, ili niste u mogućnosti da uložite novac u neki od ovih alata, koristite Google Analytics (Behaviour/Site Speed).
• Podesite automatske notifikacije za ključne parametre (vreme prikaza prvog sadržaja, vreme do prvog bajta, ukupna veličina strane, broj zahteva, … )
• Na testnom okruženju koristite sintetičke alate i integrišite ih tako da postanu deo kontinuirane nadogradnje (CI) kako bi ispratili promene u vremenu učitavanja u toku razvoja.