Digital Lab.in 2019 – izvještaj sa ICT konferencije

()

Digital Lab.In je ICT konferencija u Labinu, Istra, koja je ove godine bila u drugom izdanju.

Radionice i konferencija održani su 27. i 28. rujna u Labinu, predivnom mediteranskom gradu koji je smješten 320m iznad mora, s pogledom na Kvarnerski zaljev i otok Cres.

Labin me se jako dojmio kao jako mirno i lijepo mjesto za život, čak me pomalo i podsjetio na Slavoniju. Ali, količina “ravnice” i izostanak krša.

To su bila dva dana nezaboravnog iskustva za programere, digitalne nomade, dizajnere i sve one koji žele da se upoznaju s novim tehnologijama.

U petak, prvi dan, koji je na kraju bio jako dugačak su bile radionice. Ukupno je bilo 5 različitih cjelodnevnih radionica, a meni je najzanimljivija na bila:

Frontend Performance: Building Faster Websites” – vodio ju je Harry Roberts – CSS Wizardry

Iako sam već prije čitao njegov blog i puno učio o performansama web stranice, nisam ni znao da ću jednom imati ga prilike upoznati i biti na njegovoj radionici.

Radionica je trajala 7h + pauza za ručak i 2 pauze za kavu.

Mene je put u Labin naveo tako što je tvrtka u kojoj sada radim organizirala team-building i posjet konferenciji odjednom, pa je to bila izvrsna prilika za vikend-odmor i naučiti nešto novo.

Radionica je bila za napredne web programere, i to ne samo frontend nego općenito web dizajnere koje zanima da su im web stranice što brže.

Odmah na početku smo saznali činjenicu da čak 80% brzine (odnosno sporosti weba, ovisno kako gledamo) se događa zbog frontend performansi. Dakle, puno je veći problem 5 velikih slika u galeriji slika nego špageti kod koji je dohvatio linkove do slika iz baze podataka.

839D35C5 571B 453D BF78 111E608DC5C2 1 576x1024 2

Donosim par tema koje su mi se učinile posebno zanimljive na radionici:

1) o brzini učitavanja web stranice se puno može saznati iz Google Analytics, podaci nisu najtočniji – previše su sintetički, ali se može saznati recimo odnos konvezija i brzine web stranice po pojedinoj državi ili pregledniku


2) Postoji izravna veza između brzine učitavanja web stranice i konverzija:  

Što je sporija vaša web stranica, to će biti manje konverzija i manje zarade

HARRY ROBERTS

3) Harry nam je ispričao anegdotu o jednom portalu za Bitcoin klađenje. Ukratko, analizom podataka brzine web stranice su uočili da se web stranica jako sporo učitava u Venezueli u odnosu na primjerice Ujedinjeno Kraljevstvo.

Međutim, kada se uspoređivala stopa konverzije po državi, u Venezueli su zarađivali po 100 puta više nego u UK. Kvaka je bila u tome što su u Venezueli izmislili svoju kriptovalutu (PetroDollar). Osim toga, u Venezueli je struja besplatna za sve stanovnike. Budući da se kriptovalute rudare (tj. proizvode) sa računalima koja rade bez prekida, oni su proizvodili besplatni novac.

Kada se zbroji 2 i 2 nije čudo što najviše zarade dolazilo iz te države, jer su stanovnici imali besplatni novac sa kojim su se kockali 🙂

Samo za referencu – prosječno vrijeme učitavanja je na početku bilo 1 min. Harry-ev zadatak je bio maksimalno smanjiti vrijeme učitavanja kako bi se stopa konverzija povećala. O detaljima i ostalim brojkama nije dalje govorio, ali vjerujem da su profiti za kladionicu narasli poprilično visoko.

4) Savjet: uvijek se trebamo fokusirati na najgori scenarij – ako bi popravili najgore dijelove web stranice, onda bi se ljestvica uspjeha podigla.

5) Google Analytics standardno prikaže samo 1% podataka od korisnika za brzinu učitavanja web stranice – kako bi to promjenili, podesimo siteSpeedSampleRate parametar u Google Analytics kodu na 100 i tako ćemo skupljati od svih korisnika sve podatke vezano za brzinu i time će podaci biti točniji.

6) Naučili smo da je za testiranje performansi najbollji Google Chrome i podešavali u njemu novi profil sa kojima ćemo bolje testirati brzinu. Također, uočavali smo razliku između veličine fajlova / kompresije i primjerice ostalog vremena potrebnog da se fajl downloada – često je download time samo 25ms a ukupno vrijeme 400ms.

To se zove overall time (ukupno vrijeme) i latency time (time to first byte, response time itd.)

7) Naučili smo i razlike u prioritetima preuzimanje dokumenata: prvo ide main resource (HTML) pa CSS (i to samo ono što je u viewportu) zato je dobro svaki media query i print css napisati u svoj fajl. Poslije HTML i CSS-a se učitava JavaScript koji nije async ili defer (vrsta učitavanja), pa fontovi….

Više detalja se nalazi u tablici

Zato je jako važno da “kažemo” pregledniku da preuzima datoteke pravim prioritetom.

8) Naučili smo da se može ubaciiti CSS style i unutar body-a i tako parcijalno učitavamo HTML i CSS, a korisnik ima bolje iskustvo. To se zove progressive render – puno je brže učitavanje za korisnika i poboljšava se user experience.

Slika kako se web renderira sa progressive renderingom

Evo primjer koda:

 
<link rel="stylesheet" type="text/css" href="something.css">
<div class="something">
<p>blah1</p>
</div>  
<link rel="stylesheet" type="text/css" href="something2.css">
<div class="something2">
<p>blah2</p>
</div>  <link rel="stylesheet" type="text/css" href="something3.css">
<div class="something3">
<p>blah3</p>
</div> 

Naravno, takav kod nije ispravan, ali se web stranica brže učitava korisniku.

9) Naučili smo da omogućimo experimente u Google Chrome pregledniku. Eksperimenti se nalaze u chrome://flags/ . Kada se omoguće eksperimenti:

Developer tools experiments unutar chrome:/flags

image

možemo u Inspect Elements > Settings uključiti te experinente:

image 1

Inspect Elements > Settings

image 2

U lijevom izborniku je potrebno odabrati “Experiments” i potom 6 puta pritisnuti Shift tipku da se dodatni eksperimenti omoguće

Više o dodatnim eksperimentima u ovom članku.

10) Naučili smo i mnoštvo trikova sa dev tools – primjerice da se omogući Local overrides, i onda možemo uređivati web stranicu, spremati CSS, HTML, slike i kada osvježimo web stranicu, biti će prikazana sa našim izmjenama  više o local overrides.

11) Učili smo čitati waterfall graf sa stranice webpagetest.org

72222617 1749740355170336 263816605220208640 o

Analiza grafa učitavanja (waterfall) brzine web stranice nam daje ključne informacije što usporava web stranicu

Drugi dan je bio nešto opušteniji, sastojao se od niza predavanja. 
Najzanimljivi mi je bio o tzv. resource hints koji je predavao Harry. Slideovi sa prezentacije su: https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints

DigitalLabin2019 Dan2 MCVEVENTographyPhoto NoLogo 140 of 348 1

Ovo su bili moji dojmovi sa Digital Lab.in 2019 🙂

Svakako se vidimo opet nagodinu!

Da li vam je ovaj članak koristan?

Ocjenite članak, i pomognite nam pisati što kvalitetnije tekstove!

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *