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.
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
možemo u Inspect Elements > Settings uključiti te experinente:
Inspect Elements > Settings
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
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
Ovo su bili moji dojmovi sa Digital Lab.in 2019 🙂
Svakako se vidimo opet nagodinu!