Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Web la nivel de client
performanța aplicațiilor Web la nivel de client
calendar.perfplanet.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“The pushy bird gets the worm.”
Sean Adams
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Constatareperformance golden rule – 80/20
minim 80% din timpul de răspuns perceputla nivelul clientului este dat de încărcarea
componentelor adiționale ale unei pagini Web
Steve Souders – stevesouders.com/talks
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Constatareimpactul performanței asupra
experienței utilizatorului + afacerilor
informații, studii de caz și statistici la wpostats.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modul în care utilizatorul percepe încărcareapaginii 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modul în care utilizatorul percepe încărcareapaginii 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 Landesmanarticles.uie.com/download_time/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Viteza de încărcare a conținutuluifactor major în evaluarea relevanței unui sit Web
backend frontend
„cascada” încărcării resurselor
(waterfall view)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Viteza de încărcare a conținutuluifactor 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Durata interacțiunii cu utilizatorul
o aplicație Web – e.g., în special una cu caracter social –poate persista timp îndelungat în browser
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Durata interacțiunii cu utilizatorul
necesitatea monitorizarii comportamentului coduluila nivelul navigatorului Web:
reducerea memoriei irosite (memory leaks)dinamica numărului de noduri și structurii arborelui DOM
timpul de execuție a codului Javascriptminimizarea transferului de date preluate de la server(e)
...
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Care sunt metricile importante în evaluareaperformanței la nivel de client Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
„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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
time-to-first-byte
start render
above-the-fold time
page load time
developers.google.com/web/fundamentals/performance/critical-rendering-path/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Specificații utile: Performance & Tuning
High-Resolution TimePerformance Timeline
Navigation TimingResource Timing
User TimingPaint Timing
Server Timing
www.w3.org/2018/12/web-roadmaps/mobile/performance.html
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Măsurarea cu precizie a timpului: High-Resolution Time (Candidate Rec., martie 2018)
www.w3.org/TR/hr-time-2/
[Exposed=(Window,Worker)]
interface Performance : EventTarget {
DOMHighResTimeStamp now();
readonly attribute DOMHighResTimeStamp timeOrigin;
[Default] object toJSON();
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Acces + stocare de date referitoare la performanță: Performance Timeline (W3C Working Draft, nov. 2018)
www.w3.org/TR/performance-timeline-2/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații temporale vizând încărcarea conținutuluiNavigation Timing (recomandare W3C, 2012)
www.w3.org/TR/navigation-timing/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
atribute temporale privind „viața” unui document Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații temporale vizând resursele unui documentResource Timing (W3C Editor’s Draft, 7 ian. 2019)
w3c.github.io/resource-timing/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
atribute oferite de interfața PerformanceResourceTiming
redirectStart redirectEnd fetchStart domainLookupStart
domainLookupEnd connectStart secureConnectionStart
connectEnd requestStart responseStart responseEnd
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Suport pentru măsurarea performanței aplicației WebUser Timing (recomandare W3C, 2013)
www.w3.org/TR/user-timing/
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);
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații vizând acțiuni de redare a conținutuluiPaint Timing
(în lucru la W3C, 10 decembrie 2018)
w3c.github.io/paint-timing/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații vizând acțiuni de redare a conținutuluiPaint Timing
First Paint (FP) – prima redare efectuată de browser a conținutului documentului după încărcare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații vizând acțiuni de redare a conținutuluiPaint 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Suport pentru acces la informații temporale (metrici) vizând cererea și răspunsul de la server
Server Timing (în lucru la W3C, 19 octombrie 2018)
www.w3.org/TR/server-timing/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Testarea performanțeidepinde de mai multe condiții:
statutul utilizatorului – autentificat sau nurata de modificare în timp-real a conținutului
prezența reclamelor (ads)configurația browser-ului (profil, extensii,...)
utilizarea certificatelor digitale – context: HTTPSstarea cache-ului
platforma hardware & software la momentul exploatării
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Testarea performanței
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Testarea performanței
considerarea utilizatorilor realiRUM (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,…)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Testarea performanței
considerarea utilizatorilor realiRUM (Real User Monitoring)
context mai larg: interacțiunea om-calculator
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebPagetest – www.webpagetest.orgmodul Node pentru API: marcelduran.com/webpagetest-api
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
statistici privind conexiunile efectuate pentru preluarea resurselor (oferite de situl analizat + cele externe)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
statistici despre acțiunile realizate de navigatorul Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
teste + recomandări oferite de Google PageSpeed Insights
developers.google.com/speed/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Website Speed Testwww.dotcom-tools.com/website-speed-test.aspx
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
factori vizând performanța Web raportați de instrumentul
disponibil la tools.geekflare.com/report/speed-test/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Există reguli de îmbunătățire a performanței aplicațiilor Web
(WPO – Web Performance Optimization) la nivel de client?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
detalii la httparchive.org/trends.php
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
nu presupune diminuarea componentelor unei pagini(foi de stil, imagini, script-uri,...)
implicații privind funcționalitatea
+ experiența utilizatorului cu aplicația (UX)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
folosirea unei imagini unicece va include mai multe zone grafice ce pot fi „decupate”
și utilizate prin intermediul proprietăților CSS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
se recurge la proprietăți CSSprecum background-position, margin-left, margin-right etc.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
pentru detalii, a se studia:www.alistapart.com/articles/sprites
developer.mozilla.org/Web/CSS/CSS_Images
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
tehnici + exemplificări:css-tricks.com/css-sprites/
utilitare disponibile online:csssprites.com spritegen.website-performance.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:imagini stocate direct în URI
utilizarea schemei data (RFC 2397)
“inclusion of small data items as ‘immediate’ data”
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:imagini stocate direct în URI
data:[tip] [;base64], date
detalii la developer.mozilla.org/docs/Web/HTTP/data_URIs
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:imagini stocate direct în URI
data:[tip] [;base64], date
data:image/png;base64,R02DAAA…EA=
date propriu-zise
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
instrumente Web:dataurl.net
dopiaza.org/tools/datauri/
duri.me
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
colecție de servere Web distribuite geografic pentru aasigura mai eficient rezolvarea cererilor de acces la date
Web farms, clusters, cloud computing
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
livrarea de conținut static:imagini, script-uri, foi de stiluri, multimedia
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
soluții CDN vizând livrarea codului bibliotecilor JS:
CDNJSgithub.com/cdnjs/cdnjs
jsDelivrgithub.com/jsdelivr/jsdelivr
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul
Expires: Sat, 26 Jan 2019 07:33:00 GMT
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
stabilirea unui timp în viitor va determina păstrareape perioadă îndelungată a conținutului paginii Web
în cache-ul local
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
specificarea perioadei de secunde pentru careo componentă e păstrată în cache prin directiva max-age
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
Cache-Control: max-age=315360000
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție alternativă:configurarea serverului Web
e.g., recurgerea la modulul Apache mod_expires
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
considerații practice (Barry Pollard, 2018): www.tunetheweb.com/performance/brotli/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
pot fi compresate în special resursele textuale:documente HTML, foi de stiluri CSS, programe JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
evident, compresarea trebuie să fie oferităde serverul Web utilizat – mod_deflate pentru Apache
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
pentru navigatoarele Web fără suport,decompresia se poate realiza la nivel de proxy
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
REDbotredbot.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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ținutulconform stilurilor precizate
progressive rendering
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
context:download-urile paralele
timpul de răspuns este dat de numărul de componentedintr-o pagină (fiecare generând o cerere HTTP
dacă nu e disponibilă în cache)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
context:download-urile paralele
navigatoarele Web limitează numărul de download-uri paralele per domeniu al sitului Web (2—6 transferuri)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
context:download-urile paralele
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
cel mai nefavorabil caz:script-urile sunt plasate la începutul documentului
cel mai favorabil caz:script-urile sunt inserate la finalul documentului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS 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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
(în loc de) pauză
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
timpul de răspuns depinde de: resolver-ul DNS
numărul de cereriproximitatea domeniului interogat
lărgimea de bandăetc.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
soluție:
DNS caching
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
soluție:utilizarea câmpului Keep-Alive într-un antet HTTPpentru minimizarea cererilor de tip DNS lookups
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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ă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
soluție:JavaScript minification
exemple de instrumente – unele, disponibile online:JavaScript Optimizer, JSCompress, JSMin, Minify, Packer,
ShrinkSafe, YUI Compressor, UglifyJS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
soluție alternativă: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,...)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
soluție alternativă:JavaScript obfuscation
pericole:apariția erorilor, dificultatea mentenanței codului,
impedimente privind depanarea programelorreverse engineering
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
alte soluții:
minimizare + compresare (cu Brotli sau gzip)
folosirea script-urilor „scufundate” în pagini Web
modularizarea și/sau minimizarea foilor de stiluri CSS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
realitate:existența mai multor tehnici de redirecționare
a browser-ului spre alt URL via HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
deoarece implică unele cereri HTTP suplimentare,redirecționările au impact asupra timpului de răspuns
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
rezolvări:folosirea mod_rewrite (Apache) saualias-urilor de domenii simbolice
pentru transferul cererilor de la un sit Web vechila unul actualizat
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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.)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 11: eliminarea script-urilor duplicate
soluție:implementarea unui mecanism de management
al încărcării programelor JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 11: eliminarea script-urilor duplicate
soluție:implementarea unui mecanism de management
al încărcării programelor JavaScript
de exemplu, via sistemul de aplicarea machetelor de redare – templating system
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
ETag (entity tag)
mecanism HTTP ce permite serverelor și clienților Websă valideze componentele stocate în cache
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
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 formatcu cele create de IIS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
strategie:minimizarea numărului de cereri HTTP asincrone
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
strategie:folosirea de formate compacte (XML vs. JSON vs. CSV)și/sau a tehnicilor de compresie a datelor transferate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
strategie:specificarea timpului de expirare a conținutului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
Atenție la problemele vizând confidențialitatea datelor!
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte reguli de bună practică?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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, 17 octombrie 2018)w3c.github.io/preload/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
developer.mozilla.org/Web/HTML/Preloading_content
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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ă)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Reducerea numărului de elemente DOM
desktop: httparchive.org/trends.php
vs.
platforme mobile:mobile.httparchive.org/trends.php
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Reducerea numărului de elemente DOM
determinarea elementelor dintr-un document HTML cudocument.getElementsByTagName('*').length
și compararea cu alte pagini Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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 1338www.reddit.com/r/programming 1625 1531 1364 1517www.trilulilu.ro/ 1397 1030 1102 1651www.microsoft.com/ro-ro/default.aspx 720 809 684 487
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
sugestii de optimizare a imaginilor: Image Analysis Toolwebspeedtest.cloudinary.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
de parcurs și Maciej Cegłowski, The Website Obesity Crisis (2015)idlewords.com/talks/website_obesity.htm
jbristowe.github.io/webpage-obesity/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte strategii
recurgerea la streaming pentru a prelua date (e.g., JSON, fluxuri multimedia)
(re)vezi cursurile anterioare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Ce aspecte vizează performanțaprogramelor JavaScript?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpinablocarea transferurilor sau redării conținutului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
fenomenul render-blocking JavaScript
script-urile necesare a reda conținutul paginii pot fi incluse în document pentru a evita cereri HTTP suplimentare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
codul JS neesențial poate fi încărcat asincroncode splitting
Reduce JavaScript Payloads with Code Splitting (2018)developers.google.com/web/fundamentals/performance/optimizing-
javascript/code-splitting/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Asigurarea/evitarea execuției script-urilorîntr-o anumită ordine
aspect de interes atunci când programele JavaScriptsunt interdependente
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Evitarea dispersării script-urilor „scufundate”în documentul HTML (don’t scatter inline scripts)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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, 11 noiembrie 2018)
w3c.github.io/requestidlecallback/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
de studiat și articolul:developer.mozilla.org/Web/API/Window/requestIdleCallback
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte strategii
recurgerea la tehnici de optimizare specificeunei anumite biblioteci JavaScript
exemplificări:jQuery – learn.jquery.com/performance/
React.js – reactjs.org/docs/optimizing-performance.html
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Optimizarea succede etapa de verificarea corectitudinii codului
Douglas Crockford
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspecte de interes înruditetestarea aplicațiilor în contextul ingineriei Web
performanță versus utilizabilitateperformanța în contextul robustețeisecuritatea – e.g., confidențialitatea
www.igvita.com/2016/05/20/building-fast-and-resilient-web-applications/
performancerobust
res-
ponsive
ilient
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
O listă de contra-exemple – perf.fail
Ilya Grigorik, High Performance Browser Networking, O’Reilly, 2013: hpbn.co
Mathias Schäfer, Robust Client-Side JavaScript, 2017molily.de/robust-javascript/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente specifice (pentru platforme mobile):
Accelerated Mobile Pages (Google)www.ampproject.org
critici: A letter about Google AMP (ianuarie 2018): ampletter.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
coInstrumente specifice (pentru platforme mobile):
Progressive Web Appsdevelopers.google.com/web/progressive-web-apps/
ghid pentru dezvoltatori:www.smashingmagazine.com/2018/11/guide-pwa-progressive-
web-applications/
studii de caz: pwa.rocks
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente specifice (pentru platforme mobile):
dedicate livrării de știri:
Apple News Formatdeveloper.apple.com/news-publisher/
Instant Articles (Facebook)instantarticles.fb.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Posibile acțiuni realizate de utilizatoriuzual, 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 JSvezi inițiativa LibreJS – www.gnu.org/software/librejs/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Observații de final:
performanța aplicațiilor Web la nivel de client are un caracter dinamic
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Observații de final:
performanța aplicațiilor Web la nivel de client are un caracter dinamic
monitorizarea performanței trebuie realizată în timpul rulării
vezi WebDriver (W3C Recommendation, 5 iunie 2018) www.w3.org/TR/webdriver1/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Observații de final:
aplicația Web trebuie să se adapteze caracteristicilor dispozitivului pe care rulează
procesor, memorie, rețea, afișaj, senzori,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Mult succes!
Top Related