O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
4. Dr.SabinBuragawww.purl.org/net/busaco
Constatare
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
alte statistici la wpostats.com
5. Dr.SabinBuragawww.purl.org/net/busaco
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
6. Dr.SabinBuragawww.purl.org/net/busaco
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/
8. Dr.SabinBuragawww.purl.org/net/busaco
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
10. Dr.SabinBuragawww.purl.org/net/busaco
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)
...
24. Dr.SabinBuragawww.purl.org/net/busaco
Informații vizând acțiuni de redare a conținutului
Paint Timing (în lucru la W3C, septembrie 2017)
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
26. Dr.SabinBuragawww.purl.org/net/busaco
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
starea cache-ului
platforma hardware & software la momentul exploatării
27. Dr.SabinBuragawww.purl.org/net/busaco
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/
28. Dr.SabinBuragawww.purl.org/net/busaco
Testarea performanței
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,…)
context mai larg: interacțiunea om-calculator
39. Dr.SabinBuragawww.purl.org/net/busaco
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)
40. Dr.SabinBuragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
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
50. Dr.SabinBuragawww.purl.org/net/busaco
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
51. Dr.SabinBuragawww.purl.org/net/busaco
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
52. Dr.SabinBuragawww.purl.org/net/busaco
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
54. Dr.SabinBuragawww.purl.org/net/busaco
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
55. Dr.SabinBuragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a 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
56. Dr.SabinBuragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
CDN – Content Distribution Network
livrarea de conținut static:
imagini, script-uri, foi de stiluri, multimedia
58. Dr.SabinBuragawww.purl.org/net/busaco
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
61. Dr.SabinBuragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat cache-ul
Expires: Sat, 17 Feb 2018 07:33:00 GMT
62. Dr.SabinBuragawww.purl.org/net/busaco
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ăstrarea
pe perioadă îndelungată a conținutului paginii Web
în cache-ul local
64. Dr.SabinBuragawww.purl.org/net/busaco
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 care
o componentă e păstrată în cache prin directiva max-age
67. Dr.SabinBuragawww.purl.org/net/busaco
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)
71. Dr.SabinBuragawww.purl.org/net/busaco
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
72. Dr.SabinBuragawww.purl.org/net/busaco
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
75. Dr.SabinBuragawww.purl.org/net/busaco
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
76. Dr.SabinBuragawww.purl.org/net/busaco
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)
77. Dr.SabinBuragawww.purl.org/net/busaco
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)
78. Dr.SabinBuragawww.purl.org/net/busaco
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)
79. Dr.SabinBuragawww.purl.org/net/busaco
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
81. Dr.SabinBuragawww.purl.org/net/busaco
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
82. Dr.SabinBuragawww.purl.org/net/busaco
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
83. Dr.SabinBuragawww.purl.org/net/busaco
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
84. Dr.SabinBuragawww.purl.org/net/busaco
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
85. Dr.SabinBuragawww.purl.org/net/busaco
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)
87. Dr.SabinBuragawww.purl.org/net/busaco
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
90. Dr.SabinBuragawww.purl.org/net/busaco
Regula 8: reducerea cererilor de rezolvare
a 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
94. Dr.SabinBuragawww.purl.org/net/busaco
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,...)
96. Dr.SabinBuragawww.purl.org/net/busaco
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
98. Dr.SabinBuragawww.purl.org/net/busaco
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)
99. Dr.SabinBuragawww.purl.org/net/busaco
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
101. Dr.SabinBuragawww.purl.org/net/busaco
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
103. Dr.SabinBuragawww.purl.org/net/busaco
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.)
105. Dr.SabinBuragawww.purl.org/net/busaco
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
107. Dr.SabinBuragawww.purl.org/net/busaco
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
108. Dr.SabinBuragawww.purl.org/net/busaco
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 format
cu cele create de IIS
115. Dr.SabinBuragawww.purl.org/net/busaco
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 (W3C Candidate Rec., octombrie 2017)
www.w3.org/TR/preload/
117. Dr.SabinBuragawww.purl.org/net/busaco
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ă)
124. Dr.SabinBuragawww.purl.org/net/busaco
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
125. Dr.SabinBuragawww.purl.org/net/busaco
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 (2017)
https://images.guide/
instrumente la css-tricks.com/performance-tools/
132. Dr.SabinBuragawww.purl.org/net/busaco
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
133. Dr.SabinBuragawww.purl.org/net/busaco
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…
136. Dr.SabinBuragawww.purl.org/net/busaco
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
(W3C Proposed Recommendation, 10 octombrie 2017)
www.w3.org/TR/requestidlecallback/
140. Dr.SabinBuragawww.purl.org/net/busaco
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
141. Dr.SabinBuragawww.purl.org/net/busaco
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
142. Dr.SabinBuragawww.purl.org/net/busaco
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, 2017)
developers.google.com/speed/docs/insights/mobile
143. Dr.SabinBuragawww.purl.org/net/busaco
Studii de caz și alte resurse de interes:
Web Performance Matters – perf.rocks
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, 2017
molily.de/robust-javascript/
147. Dr.SabinBuragawww.purl.org/net/busaco
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/