Onion Information

Page Clicks: 0

First Seen: 03/15/2024

Last Indexed: 10/23/2024

Domain Index Total: 397

Preskoči na sadržaj Mjerenje i tehnike poboljšanja performansi web aplikacija doc. dr. sc. Vedran Miletić, vmiletic@inf.uniri.hr , vedran.miletic.net Fakultet informatike i digitalnih tehnologija Sveučilišta u Rijeci, akademska 2021./2022. godina Korisnička percepcija brzine rada web sjedišta Nielsen Norman Group , istraživači u domeni korisničkog iskustva, su u članku iz 1997. godine kao najveći razlog za sporost web sjedišta istaknuli velike slike . 13 godina kasnije, nakon prodora broadband pristupa kod velikog broja korisnika interneta, ponovno su razmotrili problem i objavili članak o vremenima odgovora na zahtjeve od strane web sjedišta u kojemu kažu: Slow page rendering today is typically caused by server delays or overly fancy page widgets , not by big images. Users still hate slow sites and don't hesitate telling us. Ograničenja vremena odgovora na zahtjev (1/2) Isti autori su u starijem članku iz 1993. godine zaključili na temelju istraživanja ljudskih faktora u korištenju tehnologije da postoje ograničenja vremena odgovora na zahtjev: 0,1 sekunda daje osjećaj trenutnog odgovora -- to jest, ishod se čini kao da ga je uzrokovao korisnik, a ne računalo. Ova je razina odzivnosti ključna za podršku osjećaju izravne manipulacije (izravna manipulacija jedna je od ključnih GUI tehnika za povećanje angažmana i kontrole korisnika). 1 sekunda održava tijek misli korisnika besprijekornim . Korisnici mogu osjetiti kašnjenje i tako znaju da računalo generira ishod, ali i dalje osjećaju kontrolu nad ukupnim iskustvom i da se slobodno kreću, a ne čekaju na računalo. Ovaj stupanj odziva potreban je za dobru navigaciju. Ograničenja vremena odgovora na zahtjev (2/2) 10 sekundi zadržava pažnju korisnika . Nakon 1-10 sekundi korisnici definitivno osjećaju da su prepušteni na milost i nemilost računala i priželjkuju da je brže, ali mogu se nositi s tim. Nakon 10 sekundi počinju razmišljati o drugim stvarima, što otežava vraćanje na razmišljanje o problemu koji rješavaju nakon što računalo napokon reagira. Dodatno o tome kažu: A 10-second delay will often make users leave a site immediately. And even if they stay, it's harder for them to understand what's going on, making it less likely that they'll succeed in any difficult tasks. Even a few seconds' delay is enough to create an unpleasant user experience. Users are no longer in control, and they're consciously annoyed by having to wait for the computer. Thus, with repeated short delays, users will give up unless they're extremely committed to completing the task. Jednostavno mjerenje vremena odgovora na zahtjev Iskoristimo Network Monitor (Firefox Developer Tools) za mjerenje brzine prikaza kućne stranice nekoliko web sjedišta: webglsamples.org razmjena.github.io reviews.llvm.org www.inf.uniri.hr Stvaranje opterećenja i mjerenje vremena odgovora na zahtjev Dosad smo mjerili vrijeme odgovora na zahtjev jednog korisnika. Moguće je simulirati opterećenje većeg broja istovremenih korisnika i mjeriti vrijeme odgovora na zahtjev. Alati koji se pritom koriste su: ab (Apache HTTP server benchmarking tool) Siege (izlaz u obliku JSON) wrk (podržava skriptiranje u jeziku Lua ) Apache JMeter (složeniji alat, vrlo moćan), primjeri izvještaja koje generira Flood (rješenje u oblaku) Druga motivacija osim korisničkog iskustva When real users have a slow experience on mobile, they're much less likely to find what they are looking for or purchase from you in the future. For many sites this equates to a huge missed opportunity, especially when more than half of visits are abandoned if a mobile page takes over 3 seconds to load. Users want to find answers to their questions quickly and data shows that people really care about how quickly their pages load. The Search team announced speed would be a ranking signal for desktop searches in 2010 and as of this month (July 2018), page speed will be a ranking factor for mobile searches too. Izvor: Speed is now a landing page factor for Google Search and Ads (Addy Osmani and Ilya Grigorik, Google Developers, July 2018) Googleovi alati za developere: Make the Web Faster , PageSpeed Insights Brzina prikaza stranice kao faktor u rangiranju Google has indicated that site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. And research has shown that Google might be specifically measuring time to first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation. Izvor: Page Speed (Moz) Drugi članci na Moz blogu u kojima govori o brzini prikaza web stranica: Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car , Better Site Speed: 4 Outside-the-Box Ideas Web Vitals inicijativa je Googlea za pružanje jedinstvenih smjernica za kvalitetne signale koji su neophodni za pružanje izvrsnog korisničkog iskustva na webu. detaljne upute ( sekvencijalni pregled za lakše učenje ) opis tipičnih uzoraka: carousel, oblici pisama, slike, beskonačno pomicanje itd. drugi ih navode, npr. Cloudflare Smanjenje broja HTTP zahtjeva Inline JavaScript koda (ako nije velik) u HTML datotekama Korištenje CSS Sprites za prikaz slika (naročito ikona, simbola) Korištenje manjeg broja CSS/JavaScript biblioteka i okvira npr. GitHubova eliminacija jQueryja Spajanje CSS/JavaScript datoteka npr. Font Awesome (izvorno 6 CSS i 7 JavaScript datoteka se distribuira kao 1 JavaScript i 1 CSS datoteka) Korištenje manjih CSS/JavaScript biblioteka i okvira npr. Ionicons (1 JavaScript datoteka, 1300 ikona) umjesto Font Awesome (1 JavaScript i 1 CSS datoteka, 7800 ikona) Smanjenje veličine CSS i JavaScript datoteka Alati kao minify s npm-a mogu iz CSS i JavaScript datoteka bez promjene značenja napisanog koda maknuti: Neke razmake Znakove novog retka Komentare Neke znakove za blok koda Yet Gmail downloads about three megabytes worth of JavaScript to render its inbox. HEY downloads less than sixty kilobytes. If you can build a Gmail rival with this stack, and have it be met with broad applaud by tens of thousands of paying customers, you can probably build just about anything with it. Izvor: Rails 7 will have three great answers to JavaScript in 2021+ (DHH, HEY World) Resursi koji blokiraju prikaz stranice CSS: CSS atribut media omogućuje označavanje pojedinih CSS datoteka kao neblokirajućih za prikaz stranice JavaScript: Moguće je postaviti na dnu stranice da izvođenje skripte ne prekida nastavak učitavanja HTML-a i resursa koje HTML navodi asinkrono učitava skriptu odgađa izvođenje skripte dok se stranica ne učita Korištenje mreže za distribuciju sadržaja Mreža za isporuku sadržaja ili mreža za distribuciju sadržaja (engl. content delivery network , kraće CDN) je geografski distribuirana mreža proxy poslužitelja i njihovih podatkovnih centara. Cilj je pružiti visoku dostupnost i performanse distribucijom usluge prostorno blizu krajnjih korisnika. ( Wikipedia ) Rad CDN-ova omogućen je korištenjem Cross-Origin Resource Sharinga (CORS-a) . Popularni CDN-ovi: Cloudflare Microsoft Azure CDN , Amazon CloudFront Akamai , KeyCDN , Imperva CDN specifične namjene: jsDelivr , cdnjs Smanjenje korištenja HTTP 301 Moved Permanently Preusmjeravanje uvodi barem jedno dodatno povratno vrijeme slanja zahtjeva i primanja odgovora na zahtjev Ilustracija rješenja: github.com/fidit-rijeka/ i github.com/fidit-rijeka imaju isti sadržaj i nema preusmjeravanja Tražilice kao Google penaliziraju duplicirani sadržaj, ali postoji rješenje korištenjem kanonskih oznaka Eliminacija polomljenih poveznica (HTTP 404 Not Found) Web poslužitelji i web aplikacije izvode usmjeravanje na način: potraži statičku datoteku (web poslužitelj izvodi usmjeravanje), ako ne postoji datoteka, potraži dinamički resurs (web aplikacija izvodi usmjeravanje, npr. Django URL dispatcher , Rails router , Laravel router ), ako ne postoji putanja koju web aplikacija poznaje, vrati HTTP statusni kod 404 Not Found i pripadnu stranicu web aplikacija nakon neuspjelog usmjeravanja izgrađuje stranicu pa su greške tipa 404 Not Found vrlo zahtjevne za resursima dobro je periodički provjeravati stranicu za polomljenim poveznicama, naročito na statičke datoteke, npr. BrokenLinkCheck.com , Ahrefs Broken Link Checker , dead link checker i Dr. Link Check Keširanje Web aplikacije koje uključuju Memcached kao potpornu uslugu na način kako to propisuje dvanaest faktora se zasigurno nekad pitaju: Muči me pitanje O da li bi me volela i da nemam keš? Izvor: GAZDA PAJA x MARLON BRUTAL -- DIZEL (OFFICIAL VIDEO) Keširanje je jedna od najvažnijih, ako ne i najvažnija tehnika za postizanje visokih performansi web aplikacije . Razlikujemo nekoliko vrsta keširanja: keširanje resursa u pregledniku (kod korisnika) keširanje odgovora ispred web poslužitelja keširanje odgovora u web aplikaciji keširanje operacija u interpreteru programskog jezika Keširanje u pregledniku (1/3) HTTP zaglavlje Pragma ( dokumentacija na MDN-u ) je HTTP/1.0 ekvivalent zaglavlja Cache-Control i koristi se samo za kompatibilnost sa starijim sustavima. HTTP zaglavlje Cache-Control ( dokumentacija na MDN-u ): public , private , no-cache , no-store max-age , s-maxage (vrijeme u sekundama) must-revalidate , proxy-revalidate , immutable Provjerimo zaglavlja (naredba curl -I ) na: example.group.miletic.net www.inf.uniri.hr Keširanje u pregledniku (2/3) Primjer u Apache HTTP Serveru s uključenim mod_headers : Header set Cache-Control "max-age=84600, public" Ilustrativan primjer u čistom PHP-u (Laravel ima klasu SetCacheHeaders ): ( Više detalja o dns-prefetchu na MDN-u i njegova primjena u ostvarivanju boljih performansi , specifikacija u Resource Hints na W3C-u .) Povezivanje unaprijed ( preconnect ) Povezivanje unaprijed omogućuje pregledniku da uspostavi vezu s poslužiteljem prije nego će doći do potrebe za slanjem HTTP zahtjeva na taj poslužitelj. Pronalaženje IP adrese za domenu putem DNS-a, TCP rukovanje i dogovor oko šifrarnika u TLS-u mogu se pokrenuti unaprijed, čime se eliminra povratno kašnjenje za te veze i štedi vrijeme iz perspektive korisnika. ( Više detalja o preconnectu na MDN-u , specifikacija u Resource Hints na W3C-u .) Kompresija Gzip ( Wikipedia ) je oblik kompresije koji komprimira HTML, CSS i JavaScript datoteke na poslužitelju prije slanja klijentu. Ovo je jednostavno uključiti u popularnim web poslužiteljima, a može drastično smanjiti količinu podataka koja se prenosi. Više detalja na MDN-u: HTTP kompresija HTTP zaglavlje Accept-Encoding HTTP zaglavlje Content-Encoding Kompresija (Apache HTTP Server) Primjer u Apache HTTP Serveru s uključenim mod_deflate : AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterB...