STAW 11/12: Performanţa aplicaţiilor Web la nivel de client

Dr.SabinBuragawww.purl.org/net/busaco
Full-Stack Web Development
christmasexperiments.com
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/
performanța aplicațiilor Web la nivel de client
calendar.perfplanet.com

“The pushy bird gets the worm.”
Sean Adams

Constatare
performance golden rule – 80/20
minim 80% din timpul de răspuns perceput
la nivelul clientului este dat de încărcarea
componentelor adiționale ale unei pagini Web
Steve Souders – stevesouders.com/talks

Constatare
impactul performanței asupra
experienței utilizatorului + afacerilor
informații, studii de caz și statistici la wpostats.com

impactul performanței asupra
experienței utilizatorului + afacerilor
“BBC has seen that they lose an additional 10% of users
for every additional second it takes for their site to load” (2017)
www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
“rebuilding Pinterest pages for performance resulted in
a 40% decrease in wait time, a 15% increase in SEO traffic
and a 15% increase in conversion rate to signup” (2017)
medium.com/@Pinterest_Engineering
“Zalando saw a 0.7% increase in revenue
when they shaved 100ms off their load time” (2018)
jobs.zalando.com/tech/blog/loading-time-matters/

Modul în care utilizatorul percepe încărcarea
paginii este considerat mai important
decât timpul real de încărcare
Stoyan Stefanov, Psychology of Performance (2010)
www.slideshare.net/stoyan/psychology-of-performance
www.youtube.com/watch?v=e6Pup6sHH2M
S. Egger et al., “Time is bandwidth”? Narrowing the gap between
subjective time perception and Quality of Experience, ICC 2012

Modul în care utilizatorul percepe încărcarea
paginii este considerat mai important
decât timpul real de încărcare
“Amazon.com, rated as one of the fastest sites by users,
was really the slowest.”
Christine Perfetti & Lori Landesman
articles.uie.com/download_time/

Viteza de încărcare a conținutului
factor major în evaluarea relevanței unui sit Web
backend frontend
„cascada” încărcării
resurselor
(waterfall view)

Viteza de încărcare a conținutului
factor major în evaluarea relevanței unui sit Web
dificultăți în găsirea parametrilor potriviți
– lungimea codului (HTML, CSS, JS), timpul de execuție
a programelor JS, manipularea arborelui DOM,... –
care să asigure o încărcare optimă
Steve Souders

Durata interacțiunii cu utilizatorul
o aplicație Web – e.g., în special una cu caracter social –
poate persista timp îndelungat în browser

Durata interacțiunii cu utilizatorul
necesitatea monitorizarii comportamentului codului
la nivelul navigatorului Web:
reducerea memoriei irosite (memory leaks)
dinamica numărului de noduri și structurii arborelui DOM
timpul de execuție a codului Javascript
minimizarea transferului de date preluate de la server(e)
...

Care sunt metricile importante în evaluarea
performanței la nivel de client Web?

„viața” unei pagini Web (Stoyan Stefanov)
www.bookofspeed.com
a se studia și Lara Hogan, The Basics of Page Speed (2014)
designingforperformance.com/basics-of-page-speed/

time-to-first-byte

start render

above-the-fold time

page load time
developers.google.com/web/fundamentals/performance/critical-rendering-path/

Specificații utile: Performance & Tuning
High-Resolution Time – Level 2
Performance Timeline
Navigation Timing
Resource Timing
User Timing – Level 2
Paint Timing
Server Timing
Roadmap of Web Applications on Mobile (W3C, noiembrie 2019):
www.w3.org/Mobile/roadmap/performance.html

Măsurarea cu precizie a timpului:
High-Resolution Time – Level 2
(W3C Recommendation, 21 noiembrie 2019)
www.w3.org/TR/hr-time-2/
[Exposed=(Window,Worker)]
interface Performance : EventTarget {
DOMHighResTimeStamp now();
readonly attribute DOMHighResTimeStamp timeOrigin;
[Default] object toJSON();
};

Acces + stocare de date referitoare la performanță:
Performance Timeline (W3C Working Draft, 24 oct. 2019)
www.w3.org/TR/performance-timeline-2/

Informații temporale vizând încărcarea conținutului
Navigation Timing (recomandare W3C, 2012)
www.w3.org/TR/navigation-timing/

atribute temporale privind „viața” unui document Web

Informații temporale vizând resursele unui document
Resource Timing – Level 2 (W3C Editor’s Draft, nov. 2019)
www.w3.org/TR/resource-timing-2/

atribute oferite de interfața PerformanceResourceTiming
redirectStart redirectEnd fetchStart domainLookupStart
domainLookupEnd connectStart secureConnectionStart
connectEnd requestStart responseStart responseEnd

Suport pentru măsurarea performanței aplicației Web
User Timing – Level 2 (recomandare W3C, feb. 2019)
www.w3.org/TR/user-timing-2/
partial interface Performance {
void mark(DOMString markName);
void clearMarks(optional DOMString markName);
void measure(DOMString measureName,
optional DOMString startMark, optional DOMString endMark);
void clearMeasures(optional DOMString measureName);
};

Informații vizând acțiuni de redare a conținutului
Paint Timing
(în lucru la W3C, 18 octombrie 2019)
w3c.github.io/paint-timing/

Paint Timing
First Paint (FP) – prima redare efectuată de browser
a conținutului documentului după încărcare

Paint Timing
First Contentful Paint (FCP) – prima afișare care poate fi
de folos utilizatorilor finali
(the first time users could start consuming page content)
de studiat și Philip Walton, Leveraging the Performance
Metrics that Most Affect User Experience (2017)
developers.google.com/web/updates/2017/06/user-centric-performance-metrics

Suport pentru acces la informații temporale (metrici)
vizând cererea și răspunsul de la server
Server Timing (în lucru la W3C, 07 martie 2019)
www.w3.org/TR/server-timing/

Testarea performanței
depinde de mai multe condiții:
statutul utilizatorului – autentificat sau nu
rata de modificare în timp-real a conținutului
prezența reclamelor (ads)
configurația browser-ului (profil, extensii,...)
utilizarea certificatelor digitale – context: HTTPS, HTTP/2
starea cache-ului
platforma hardware & software la momentul exploatării

realizată automat via instrumente specifice
(„sintetică” – synthetic)
determinare facilă a unor probleme de performanță
oferă informații vizând metrici multiple
(timpi de transfer, redare, utilizarea procesorului,…)
nu implică direct utilizatorul final
perf.rocks/tools/

considerarea utilizatorilor reali
RUM (Real User Monitoring)
reflectă un mediu concret (browser)
oferă informații privind interacțiunea efectivă
(localizare geografică, starea conectivității,
fluxul de vizitare a paginilor, preferințe specifice,…)

considerarea utilizatorilor reali
RUM (Real User Monitoring)
context mai larg: interacțiunea om-calculator

WebPagetest – www.webpagetest.org
modul Node pentru API: marcelduran.com/webpagetest-api

statistici privind conexiunile efectuate pentru preluarea
resurselor (oferite de situl analizat + cele externe)

statistici despre acțiunile realizate de navigatorul Web

teste + recomandări oferite de Google PageSpeed Insights
developers.google.com/speed/

Website Speed Test
www.dotcom-tools.com/website-speed-test.aspx

auditarea resurselor necesare pentru prima redare a conținutului
– secvența critică de cereri (Critical Request Chain) – cu instrumentul
open-source LightHouse: developers.google.com/web/tools/lighthouse/

factori vizând performanța Web
raportați de instrumentul
disponibil la
tools.geekflare.com/report/speed-test/

Există reguli de îmbunătățire
a performanței aplicațiilor Web
(WPO – Web Performance Optimization)
la nivel de client?

Regula 1: reducerea numărului cererilor HTTP(S)
detalii la httparchive.org/trends.php

nu presupune diminuarea componentelor unei pagini
(foi de stil, imagini, script-uri,...)

implicații privind funcționalitatea
+ experiența utilizatorului cu aplicația (UX)

soluție:
CSS sprites
folosirea unei imagini unice
ce va include mai multe zone grafice ce pot fi „decupate”
și utilizate prin intermediul proprietăților CSS

soluție:
CSS sprites
se recurge la proprietăți CSS
precum background-position, margin-left, margin-right etc.

soluție:
CSS sprites
pentru detalii, a se studia:
www.alistapart.com/articles/sprites
developer.mozilla.org/Web/CSS/CSS_Images

soluție:
CSS sprites
tehnici + exemplificări:
css-tricks.com/css-sprites/
utilitare disponibile online:
csssprites.com  spritegen.website-performance.org

soluție:
CSS sprites
această abordare poate fi considerată demodată
în contextul HTTP/2
a se parcurge și CSS and Network Performance (2018)
csswizardry.com/2018/11/css-and-network-performance/

soluție:
imagini stocate direct în URI
utilizarea schemei data (RFC 2397)
“inclusion of small data items as ‘immediate’ data”

soluție:
data:[tip] [;base64], date
detalii la developer.mozilla.org/docs/Web/HTTP/data_URIs

soluție:
data:[tip] [;base64], date
data:image/png;base64,R02DAAA…EA=
date propriu-zise

instrumente Web:
dataurl.net
dopiaza.org/tools/datauri/
duri.me

soluție:
reunirea mai multor fișiere CSS/JavaScript
fișierele CSS sau JavaScript multiple pot fi combinate
într-un singur fișier CSS ori JavaScript, respectiv
(apoi eventual compresate)
raport oferit de tools.pingdom.com

soluție:
reunirea mai multor fișiere CSS/JavaScript
atenție la problemele privind modularizarea
și refolosirea codului
această tehnică poate fi considerată demodată
în contextul HTTP/2

A se considera HTTP/2 față de HTTP/1.1
în cazul HTTP/2, de regulă timpul de încărcare
a resurselor este (mult) mai mic
Ragnar Lönn, HTTP/1.1 vs. HTTP/2 (2016)
www.slideshare.net/LoadImpact/oreilly-fluent-conference-http11-vs-http2

studii de caz:
css-tricks.com/http2-real-world-performance-test-analysis/
gokulkrishh.github.io/performance/2017/04/30/comparison-of-http-and-http2.html
HTTP/2
HTTP/1.1

Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
CDN – Content Distribution Network
colecție de servere Web distribuite geografic pentru a
asigura mai eficient rezolvarea cererilor de acces la date
Web farms, clusters, cloud computing

arhitectura client-server vs. peer-to-peer vs. hibridă
soluții (comerciale) disponibile: Akamai, Bitgravity,
Cachefly, CDNify, EdgeCast, Incapsula, Telefónica, XCDN
www.cdnplanet.com

livrarea de conținut static:
imagini, script-uri, foi de stiluri, multimedia

soluții CDN vizând livrarea
codului bibliotecilor JS:
CDNJS
github.com/cdnjs/cdnjs
jsDelivr
github.com/jsdelivr/jsdelivr

Regula 3: setarea timpului de expirare a paginii
context: managementul cache-ului
considerații de interes în articolul Y. Ma et al., Measurement and
Analysis of Mobile Web Cache Performance, WWW 2015
taoxie.cs.illinois.edu/publications/www15-webcache.pdf

soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP

soluție:
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat cache-ul

soluție:
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat cache-ul
Expires: Sat, 25 Jan 2020 07:33:00 GMT

soluție:
stabilirea unui timp în viitor va determina păstrarea
pe perioadă îndelungată a conținutului paginii Web
în cache-ul local

soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP

soluție:
specificarea perioadei de secunde pentru care
o componentă e păstrată în cache prin directiva max-age

soluție:
Cache-Control: max-age=315360000

soluție alternativă:
configurarea serverului Web
e.g., recurgerea la modulul Apache mod_expires

observație:
valoarea campului Expires e absolută (dată de calendar),
iar timpul max-age de păstrare în cache este relativ
(număr de secunde față de momentul curent)

Regula 4: compresarea conținutului resurselor

soluție:
mesajul de răspuns HTTP poate fi transmis compresat
clientului Web
abordare tradițională: gzip – www.gzip.org
abordare modernă: Brotli – tools.ietf.org/html/rfc7932

considerații practice (Barry Pollard, 2018):
www.tunetheweb.com/performance/brotli/

soluție:
pot fi compresate în special resursele textuale:
documente HTML, foi de stiluri CSS, programe JavaScript

soluție:
evident, compresarea trebuie să fie oferită
de serverul Web utilizat – mod_deflate pentru Apache

soluție:
pentru navigatoarele Web fără suport,
decompresia se poate realiza la nivel de proxy

REDbot
redbot.org

Regula 5: plasarea foilor CSS în antetul paginii
uzual, componentele sunt transferate de pe server
în ordinea specificării lor în documentul HTML

proprietățile CSS trebuie încărcate primele
pentru ca browser-ul să poată reda conținutul
conform stilurilor precizate
progressive rendering

Regula 6: plasarea script-urilor la finalul paginii
context:
download-urile paralele
timpul de răspuns este dat de numărul de componente
dintr-o pagină (fiecare generând o cerere HTTP
dacă nu e disponibilă în cache)

context:
navigatoarele Web limitează numărul de download-uri
paralele per domeniu al sitului Web (2—6 transferuri)

context:
script-urile JavaScript blochează
transferul paralel al altor resurse
(programul ar putea schimba conținutul paginii,
deci navigatorul va încerca să nu altereze arborele DOM)

cel mai nefavorabil caz:
script-urile sunt plasate la începutul documentului
cel mai favorabil caz:
script-urile sunt inserate la finalul documentului

Regula 7: fișierele JavaScript/CSS externe
1 ian. 2013
(CSS: 35 KB, JS: 207 KB)
15 dec. 2015
(CSS: 76 KB, JS: 363 KB)
statistici pentru desktop: httparchive.org/compare.php
1 oct. 2016
(CSS: 76 KB, JS: 410 KB)
15 dec. 2017
(CSS: 98 KB, JS: 504 KB)

deși programele/stilurile specificate direct (inline)
în cadrul documentului HTML sunt procesate mai rapid,
fișierele externe pot fi stocate în cache-ul navigatorului

deși programele/stilurile specificate direct (inline)
în cadrul documentului HTML sunt procesate mai rapid,
fișierele externe pot fi stocate în cache-ul navigatorului

refolosirea lor pentru mai multe pagini sau situri Web

soluția „optimă” depinde de context:
totalul vizualizărilor paginii (page views)
starea cache-ului – empty cache vs. primed cache
gradul de reutilizare a componentelor

tehnici:
post-onload download
dacă pagina principală are cele mai multe vizite,
programele JavaScript și stilurile CSS se pot „scufunda”
direct în documentul HTML, urmând ca alte componente
adiționale să fie încărcate – asincron – via fișiere externe

tehnici:
dynamic inlining
dacă detectăm că o componentă există deja în cache-ul
browser-ului, putem stabili care fragmente de cod
să fie stocate intern și care să fie transferate (externe)

(în loc de) pauză

Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
realitate:
fiecare cerere realizată de navigatorul Web
pentru rezolvarea unui nume simbolic de domeniu
în vederea obținerii adresei IP a acestuia consumă timp

timpul de răspuns depinde de:
resolver-ul DNS
numărul de cereri
proximitatea domeniului interogat
lărgimea de bandă
etc.

soluție:
DNS caching

constatare:
păstrarea în cache-ul DNS local (la nivel de client)
a perechii <domeniu simbolic, adresa IP>
depinde de timpul de viață asociat domeniului
(TTL – Time To Live)
valori tipice: minute sau ore

soluție:
utilizarea câmpului Keep-Alive într-un antet HTTP
pentru minimizarea cererilor de tip DNS lookups

Regula 9: reducerea mărimii fișierelor JavaScript
soluție:
JavaScript minification
algoritmi de reducere a caracterelor inutile
(e.g., spații albe) din codul-sursă JavaScript
pentru a reduce dimensiunea fisierului text ce-l stochează

soluție:
JavaScript minification
exemple de instrumente – unele, disponibile online:
JavaScript Optimizer, JSCompress, JSMin, Minify, Packer,
ShrinkSafe, YUI Compressor, UglifyJS

JavaScript obfuscation
tehnică de optimizare care elimină atât comentariile și
spațiile albe, cât rescrie codul în vederea reducerii
dimensiunii fișierului (modificarea numelui variabilelor,
ori funcțiilor, compactarea șirurilor de caractere,...)

JavaScript obfuscation
pericole:
apariția erorilor, dificultatea mentenanței codului,
impedimente privind depanarea programelor
reverse engineering

alte soluții:
minimizare + compresare (cu Brotli sau gzip)
folosirea script-urilor „scufundate” în pagini Web
modularizarea și/sau minimizarea foilor de stiluri CSS

Regula 10: evitarea redirecționărilor
realitate:
existența mai multor tehnici de redirecționare
a browser-ului spre alt URL via HTTP

300 Multiple Choices (pe baza câmpului Content-Type)
301 Moved Permanently
302 Moved Temporarily
303 See Other (clarificare a mesajului 302)
304 Not Modified (datele sunt deja în cache)
307 Temporary Redirect (clarificare a mesajului 302)

soluții clasice:
la nivel de server – via câmpul-antet HTTP Location
la client – folosind elementul HTML
<meta http-equiv="refresh" .../>
sau recurgând la document.location în JavaScript

deoarece implică unele cereri HTTP suplimentare,
redirecționările au impact asupra timpului de răspuns

rezolvări:
adăugarea caracterului / la finalul unui URL
pentru a preîntâmpina redirecționările de tip 301
soluții tehnologice:
Alias și/sau DirectorySlash pentru serverul Apache

rezolvări:
folosirea mod_rewrite (Apache) sau
alias-urilor de domenii simbolice
pentru transferul cererilor de la un sit Web vechi
la unul actualizat

rezolvări:
monitorizarea traficului,
pentru a detecta redirecționările frecvente
(inclusiv cele via servicii de scurtare a adreselor Web
precum bit.ly, tinyurl.com etc.)

Regula 11: eliminarea script-urilor duplicate
soluție:
implementarea unui mecanism de management
al încărcării programelor JavaScript

Regula 11: eliminarea script-urilor duplicate
soluție:
implementarea unui mecanism de management
al încărcării programelor JavaScript
de exemplu, via sistemul de aplicare
a machetelor de redare – templating system

Regula 12: configurarea ETag-urilor
ETag (entity tag)
mecanism HTTP ce permite serverelor și clienților Web
să valideze componentele stocate în cache

ETag (entity tag)
versiunea (starea) unei componente – aici, entitate –
a paginii Web este identificată unic via un ETag
pentru a se putea aplica o anumită politică
de eliminare/păstrare (d)in cache

ETag (entity tag)
nu există un mecanism standardizat de specificare,
deoarece se bazează pe atribute dependente de server
ETag-urile generate de Apache nu au același format
cu cele create de IIS

Regula 13: păstrarea în cache
a datelor transferate asincron
strategie:
minimizarea numărului de cereri HTTP asincrone

strategie:
folosirea de formate compacte (XML vs. JSON vs. CSV)
și/sau a tehnicilor de compresie a datelor transferate

strategie:
politici de păstrare în cache a datelor în funcție de tipul
resurselor Web
exemplu în contextul service worker-ilor:
medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c

strategie:
specificarea timpului de expirare a conținutului

Atenție la problemele vizând confidențialitatea datelor!

Alte reguli de bună practică?

Preîncărcarea resurselor
indicarea via <link rel="preload" …/> a resurselor de tip
audio, document, fetch, font, image, script, style, track, worker, video
ce pot fi preîncărcate de către navigatorul Web
Preload (în lucru la W3C, 30 decembrie 2019)
w3c.github.io/preload/

developer.mozilla.org/Web/HTML/Preloading_content

Folosirea metodei GET pentru cereri Ajax
în cazul metodei POST, browser-ul recurge la 2 etape:
trimiterea câmpurilor din antet,
apoi transmiterea efectivă a datelor
pentru a prelua de pe server date, vom utiliza GET
(starea aplicației la nivel de server nu se modifică)

Reducerea numărului de elemente DOM
determinarea elementelor dintr-un document HTML cu
document.getElementsByTagName('*').length
și compararea cu alte pagini Web

Reducerea numărului de elemente DOM
exemple (14.01.14 vs. 12.01.15 vs. 04.01.16 vs. 08.01.18):
www.ted.com/  521 959 922 1338
www.reddit.com/r/programming 1625 1531 1364 1517
www.trilulilu.ro/ 1397 1030 1102 1651
www.microsoft.com/ro-ro/default.aspx  720 809 684 487

Divizarea componentelor între domenii
efect: maximizarea transferurilor paralele
nu vor fi folosite mai mult de 2—4 domenii diferite,
pentru a nu apărea penalități vizând interogările DNS

Grafica 2D folosind SVG vs. <canvas>
<canvas><svg>
performanță ridicată
(filtre, ray tracing)
conținut complex,
animații în timp-real
manipulare video
imagini statice/animate
(eventual, beneficiind de CSS)
fidelitate ridicată
vizualizare + listare
conținut indexat de
motoare de căutare

Alte strategii
optimizarea transferurilor de date via SSL/TLS
SSL and TLS Deployment Best Practices (2017)
github.com/ssllabs/research/wiki/SSL-and-TLS-Deployment-Best-Practices
instrumente dedicate: www.ssllabs.com/projects/

Alte strategii
reducerea numărului de cookie-uri
exemplu:
“Evite’s gallery page makes over 400 requests
(~200 redirects), over 180 distinct connections,
and fetches over 2MB of data, ~1MB of which is in cookies!”
perf.fail/post/105638623464/evites-gallery-ads-targeting-gone-wrong

Alte strategii
optimizarea – eventual, reducerea calității –
resurselor multimedia:
imagini JPEG și/sau PNG, fișiere audio și/sau video,
fonturi, documente PDF etc.
Addy Osmani, Essential Image Optimization (2018)
images.guide
instrumente la css-tricks.com/performance-tools/

sugestii de optimizare a imaginilor: Image Analysis Tool
webspeedtest.cloudinary.com

de parcurs și Maciej Cegłowski, The Website Obesity Crisis (2015)
idlewords.com/talks/website_obesity.htm

Alte strategii
recurgerea la streaming pentru a prelua date
(e.g., JSON, fluxuri multimedia)
(re)vezi cursurile
anterioare

Ce aspecte vizează performanța
programelor JavaScript?

Studierea interacțiunii dintre componentele
JavaScript dintr-o pagină pentru a preîntâmpina
blocarea transferurilor sau redării conținutului

fenomenul render-blocking JavaScript
script-urile necesare a reda conținutul paginii pot fi incluse
în document pentru a evita cereri HTTP suplimentare

codul JS neesențial poate fi încărcat asincron
code splitting
Reduce JavaScript Payloads with Code Splitting (2018)
developers.google.com/web/fundamentals/performance/optimizing-
javascript/code-splitting/

sfat: utilizarea atributului defer pentru <script>
execuția începe după ce procesarea codului a avut loc,
dar înainte de apariția evenimentului DOMContentLoad
garantează ordinea execuției script-urilor,
iar procesarea nu e blocată
hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/
construire arbore DOM… gata!
preluare script (fetch) execuție
HTML
JS

sfat: utilizarea atributului async pentru <script>
execuția începe când e posibil, după terminarea încărcării
(cu prioritate scăzută), înainte de evenimentul load
ordinea execuției nu e garantată,
iar crearea arborelui DOM poate fi blocată
hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/
construire DOM…
preluare script execuție
HTML
JS
blocare construire DOM…

Asigurarea/evitarea execuției script-urilor
într-o anumită ordine
aspect de interes atunci când programele JavaScript
sunt interdependente

Evitarea dispersării script-urilor „scufundate”
în documentul HTML (don’t scatter inline scripts)

Plasarea într-o coadă de așteptare a execuției
codului JS ce va fi rulat atunci când browser-ul
se află în starea idle (i.e. utilizatorul e inactiv sau
la finalul unui cadru de redare – frame)
Cooperative Scheduling of Background Tasks
(în lucru, 30 decembrie 2019)
w3c.github.io/requestidlecallback/

de studiat și articolul:
developer.mozilla.org/Web/API/Window/requestIdleCallback

Alte strategii
recurgerea la tehnici de optimizare specifice
unei anumite biblioteci JavaScript
exemplificări – la nivel de client:
jQuery – learn.jquery.com/performance/
React.js – reactjs.org/docs/optimizing-performance.html

Alte strategii
recurgerea la tehnici de optimizare specifice
unei anumite biblioteci JavaScript
exemplificări – pe server (Node.js):
Performance Hooks – nodejs.org/api/perf_hooks.html
bune practici la framework-ul Express –
expressjs.com/en/advanced/best-practice-performance.html

Optimizarea succede etapa de verificare
a corectitudinii codului
Douglas Crockford

Aspecte de interes înrudite
testarea aplicațiilor în contextul ingineriei Web
performanță versus utilizabilitate
performanța în contextul robusteței
securitatea – e.g., confidențialitatea
www.igvita.com/2016/05/20/building-fast-and-resilient-web-applications/
performance
robust
res-
ponsive
ilient

RAIL (Response, Animation, Idle and Load)
Paul Irish, Paul Lewis,
Introducing RAIL: A User-Centric Model For Performance (2015):
www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
developers.google.com/web/fundamentals/performance/rail
metodologia RAIL
considerarea utilizatorului în contextul performanței Web

Reguli în contextul Web-ului mobil:
Max Firtman, Mobile Web Performance Checklist (2016)
www.oreilly.com/ideas/mobile-web-performance-checklist
Mobile Analysis in PageSpeed Insights (Google, 2018)
developers.google.com/speed/docs/insights/v5/get-started

Studii de caz și alte resurse de interes:
Web Performance Matters – perf.rocks
Web Performance Docs from Google – web.dev
Web Performance Blogosphere – www.perfplanet.com
Ilya Grigorik, High Performance Browser Networking,
O’Reilly, 2013: hpbn.co
Mathias Schäfer, Robust Client-Side JavaScript, 2017
molily.de/robust-javascript/
Vitaly Friedman, Front-End Performance Checklist, 2020
www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/

Instrumente specifice (pentru platforme mobile):
Accelerated Mobile Pages (Google)
amp.dev
critici: A letter about Google AMP (ianuarie 2018):
ampletter.org

Instrumente specifice:
Progressive Web Apps
developers.google.com/web/progressive-web-apps/
studii de caz:
pwa.rocks

Instrumente specifice:
dedicate livrării de știri:
Apple News Format
developer.apple.com/news-publisher/
Instant Articles (Facebook)
instantarticles.fb.com

Posibile acțiuni realizate de utilizatori
uzual, pe baza extensiilor instalate în browser
blocarea reclamelor (ad blocking)
anularea încărcării anumitor tipuri de resurse
(e.g., foi CSS, fonturi externe)
suprimarea execuției anumitor script-uri JS
vezi inițiativa LibreJS – www.gnu.org/software/librejs/

Observații de final:
are un caracter dinamic

are un caracter dinamic
monitorizarea performanței trebuie realizată
în timpul rulării
WebDriver (W3C Living Document, 31 dec. 2019)
a remote control interface that enables introspection
and control of user agents
w3c.github.io/webdriver/
developer.mozilla.org/docs/Web/API/Navigator/webdriver

aplicația Web trebuie să se adapteze
caracteristicilor dispozitivului pe care rulează
procesor, memorie, rețea, afișaj, senzori,…
adaptive loading
A. Osmani, Adaptive Loading: Improving Web Performance on low-end devices, 2019
dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69

episodul viitor: (re)găsirea resurselor Web

STAW 11/12: Performanţa aplicaţiilor Web la nivel de client

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to STAW 11/12: Performanţa aplicaţiilor Web la nivel de client

Similar to STAW 11/12: Performanţa aplicaţiilor Web la nivel de client (20)

More from Sabin Buraga

More from Sabin Buraga (20)

STAW 11/12: Performanţa aplicaţiilor Web la nivel de client