CLIW 2014—2015 (12/12): Performanța Web la nivel de client

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
⑇
performanța Web
strategii pentru reducerea timpului de încărcare

“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 – http://stevesouders.com/talks.php

Modul în care utilizatorul percepe încărcarea
paginii este considerat mai important
decât timpul real de încărcare

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 este timpul de încărcare a unei pagini Web?

„viața” unei pagini Web (Stoyan Stefanov)
www.bookofspeed.com

timpul de viață a unei pagini Web
Navigation Timing (recomandare W3C, 2012)
www.w3.org/TR/navigation-timing/
atribute
temporale
de interes

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, plugin-uri,...)
starea cache-ului
platforma hardware & software la momentul exploatării

teste concrete:
www.webpagetest.org

de experimentat utilitarul în linie de comandă + modulul Node.js:
https://github.com/marcelduran/webpagetest-api
statistici privind conexiunile efectuate pentru preluarea
resurselor (oferite de situl analizat + cele externe)

detalii vizând performanța Web
atunci când anumite conținuturi sunt deja stocate în cache

Există reguli de îmbunătățire a performanței
aplicațiilor Web la nivel de client?

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)

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
detalii în articolul Dave Shea,
CSS Sprites: Image Slicing’s Kiss of Death, 2004:
www.alistapart.com/articles/sprites

soluție:
CSS sprites
tehnici + exemplificări:
http://css-tricks.com/css-sprites/
utilitare disponibile online:
csssprites.com spritecow.com spriteme.org

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=
tipul
MIME
datele
propriu-zise

instrumente Web:
http://dataurl.net/
http://dopiaza.org/tools/datauri/
http://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)

soluție:
reunirea mai multor fișiere CSS/JavaScript
atenție la problemele privind modularizarea
și refolosirea codului

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

colecție de servere Web distribuite geografic pentru a
asigura mai eficient rezolvarea cererilor de acces la date
Web farms, clusters, cloud computing

CDN – arhitectura clasică (Akamai Technologies, 2007)

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

performanța accesului la anumite biblioteci JavaScript
disponibile via rețele de distribuție a conținutului:
http://www.cdnperf.com/

probleme care nu sunt rezolvate:
persistența conexiunilor, tranzacții, autentificare,
optimizări la nivel hardware,...

probleme care nu sunt rezolvate:
persistența conexiunilor, tranzacții, autentificare,
optimizări la nivel hardware,...
recurgerea la soluții mai complexe de găzduire Web
(inclusiv, cele bazate pe cloud computing)

Regula 3: setarea timpului de expirare a paginii

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, 07 Feb 2015 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)
vezi K. Young, “A Beginner's Guide to HTTP Cache Headers” (2013)
www.mobify.com/blog/beginners-guide-to-http-cache-headers/

Regula 4: compresarea conținutului resurselor

soluție:
mesajul de răspuns HTTP poate fi transmis compresat
– e.g., folosind gzip: http://www.gnu.org/software/gzip/ –
clientului Web

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 care nu au suport pentru gzip,
decompresia se poate realiza la nivel de proxy

Regula 5: plasarea foilor CSS în antetul paginii

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

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)

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 gzip)
folosirea script-urilor „scufundate” în pagini Web
modularizarea și/sau minimizarea foilor de stiluri CSS

pentru detalii, de studiat articolele
N. Zakas, Better JavaScript Minification, 2010:
www.alistapart.com/articles/better-javascript-minification/
www.alistapart.com/articles/javascript-minification-part-II/
developers.google.com/speed/docs/insights/MinifyResources

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

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 (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

ETag (entity tag)
sfat (Souders, 2007):
reconfigurarea ETag-urilor
astfel încât să recurgă la un format comun
sau evitarea folosirii lor

Regula 13: păstrarea în cache
a datelor transferate asincron

strategie:
minimizarea numărului de cereri HTTP asincrone
realizate via obiectul XMLHttpRequest

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

strategie:
specificarea timpului de expirare a conținutului

se poate recurge la șablonul de proiectare
Browser-Side Cache
http://ajaxpatterns.org/Browser-Side_Cache

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

un exemplu demonstrativ la
http://www.httpwatch.com/demos/ajax_caching/

Alte reguli de bună practică?

Regula 14: folosirea metodei GET
pentru cereri Ajax

Regula 14: folosirea metodei GET
pentru cereri Ajax
pentru 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

Regula 15: reducerea numărului de elemente DOM

determinarea elementelor dintr-un document HTML cu
document.getElementsByTagName('*').length
și compararea cu alte pagini Web

exemplificări (14 ianuarie 2014 vs. 12 ianuarie 2015):
http://www.ted.com/ 521 959
http://www.reddit.com/r/programming 1625 1531
http://www.trilulilu.ro/ 1397 1030
http://www.microsoft.com/ro-ro/default.aspx 720 809
https://mail.google.com/mail/u/0/?shva=1#inbox 1899 2135

Regula 16: divizarea componentelor între domenii

Regula 16: 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

Alte reguli – mai ales în contextul Web-ului mobil:
preîncărcarea (condiționată ori anticipată) a resurselor
minimizarea accesului la arborele DOM
mărimea necompresată a unei componente să fie < 25 K
împachetarea componentelor într-un document multipart
de studiat tutorialul oferit de Maximiliano Firtman (2014)
http://firtman.github.io/velocity/

Care sunt instrumentele software
pentru analizarea performanței la nivel de client?

Evaluarea performanței aplicațiilor Web
PageSpeed Tools
https://developers.google.com/speed/pagespeed/
YSlow
http://developer.yahoo.com/performance/
HTTP Archive – http://httparchive.org/
HttpWatch – www.httpwatch.com

Chrome Developer Tools
https://developer.chrome.com/

instrumentele de analiză oferite de Mozilla Firefox
https://developer.mozilla.org/docs/Tools

Mozilla Firefox
analizarea performanței redării conținutului grafic WebGL

Internet Explorer F12 developer tools
informații privind interacțiunea cu utilizatorul
http://msdn.microsoft.com/library/ie/bg182326%28v=vs.85%29

extensia Firebug – http://getfirebug.com/

statistici privind arborele DOM oferite de DOM Monster
http://mir.aculo.us/dom-monster/

Evaluarea performanței aplicațiilor Web
numeroase alte resurse,
incluzând instrumente și tehnici de optimizare Web:
http://is.gd/web_perf_tools
http://www.webperformancetoday.com/
o listă de contra-exemple: http://perf.fail/
de asemenea, a se consulta http://calendar.perfplanet.com/

Alte strategii
optimizarea transferurilor de date via SSL/TLS
testare cu SSL Server Test
https://www.ssllabs.com/ssltest/
diverse tehnici de optimizare (Geoffroy Couprie, 2013)
http://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/

Alte strategii
reducerea numărului de cookie-uri

Alte strategii
optimizarea (reducerea calității) resurselor multimedia:
imagini JPEG și/sau PNG, fișiere audio și/sau video,
fonturi, animații Flash, Silverlight, documente PDF etc.
http://calendar.perfplanet.com/2011/lossy-image-compression/

Alte strategii
folosirea tehnicilor de încărcare asincronă
și de streaming

Ce aspecte vizează performanța
programelor JavaScript?

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

Studierea interacțiunii dintre componentele
JavaScript dintr-o pagină pentru a preîntâmpina
blocarea transferurilor
instrument de referință: Cuzillion
http://stevesouders.com/cuzillion/

Asigurarea/evitarea execuției script-urilor
într-o anumită ordine

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)

Alte strategii
recurgerea la tehnici de optimizare specifice
unei anumite biblioteci JavaScript
e.g., de studiat prezentarea lui Paul Irish,
jQuery Anti-Patterns for Performance & Compression:
http://slidesha.re/QsQFS

Optimizarea succede etapa de verificare
a corectitudinii codului
Douglas Crockford

Resurse suplimentare
Steve Souders, High Performance Web Sites, O’Reilly, 2007
Steve Souders, Even Faster Web Sites, O’Reilly, 2009
http://stevesouders.com/
Ilya Grigorik, High Performance Browser Networking,
O’Reilly, 2013:
http://chimera.labs.oreilly.com/books/1230000000545/
prezentările susținute de Ilya Grigorik:
http://lanyrd.com/profile/igrigorik/sessions/

Resurse suplimentare
Browser Technologies
http://platform.html5.org/
Front-end Code Standards & Best Practices
http://isobar-idev.github.io/code-standards/

Aspecte de interes înrudite
testarea aplicațiilor în contextul ingineriei Web
securitatea – e.g., confidențialitatea
performanță versus utilizabilitate

Care-s principalele aspecte privind performanța
aplicațiilor ce rulează pe dispozitive mobile?

Standards for Web Applications on Mobile
www.w3.org/standards/techs/mobileapp

http://www.slideshare.net/iivanoo/mobile-applications-development-lecture-8

Timpul de viață a bateriei
dependent de factori precum:
utilizarea procesorului, reafișarea conținutului
(repainting), interpretarea și rularea codului JS,
traficul de rețea – inclusiv aspecte privind GPS
N.Thiagarajan et al., “Who Killed My Battery: Analyzing
Mobile Browser Energy Consumption”, WWW2012
www2012.wwwconference.org/proceedings/proceedings/p41.pdf

Latența rețelei
viteza ~ percepție a încărcării
vitezele de transfer (download + upload) variază
ca și în cazul aplicațiilor Web tradiționale, se vizează
transferul de reprezentări de resurse HTML, CSS,
multimedia, cod JS (al aplicației + adițional), date

„Scufundarea” unor resurse direct în HTML
în cazul Web-ului mobil, pot apărea îmbunătățiri de
performanță dacă stilurile CSS și programele JavaScript
sunt incluse în pagina HTML la prima încărcare a sitului
exemplu notabil: m.bing.com
vezi http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/

Minimizarea utilizării memoriei
aspect important: programele JavaScript

Optimizarea imaginilor
posibilă soluție:
redimensionarea dinamică a imaginilor
via servicii externe (proxy-uri Web) precum Sencha
www.sencha.com/learn/how-to-use-src-sencha-io/

Optimizarea imaginilor
alternative, unele open-source:
Cloudinary – http://cloudinary.com/
Embedly – http://embed.ly/display
OpenRoss – https://github.com/ssaw/openross
Resize – https://resize.ly/
Wordpress Photon – developer.wordpress.com/docs/photon/
inclusiv vizând alte conținuturi:
e.g., MapProxy – http://mapproxy.org/

Folosirea facilităților oferite de CSS
uzual, browser-ele dispozitivelor mobile
oferă suport pentru CSS nivelul 3

aplicare de proprietăți per dispozitiv (media queries)
efecte grafice realizate exclusiv cu CSS: umbre, animații,…
dezavantaje: memorie + timp de procesare mai mare
https://speakerdeck.com/addyosmani/css-performance-tooling
http://davidwalsh.name/css-js-animation

Minimizarea arborelui DOM
reducerea numărului și reutilizarea de noduri
minimizarea operațiilor de manipulare a arborelui DOM

Interacțiunea cu utilizatorul
navigatoarele Web mobile folosesc un unic fir de execuție
(single threaded)
anumite acțiuni din partea utilizatorului pot conduce la
timpi de așteptareoferirea de feedback vizual
se poate recurge la API-uri specifice standardizate:
http://www.w3.org/standards/techs/js

Eterogenitatea browser-elor mobile
(Maximiliano Firtman, 2014)
limite, suport privind standardele Web,
existența instrumentelor de depanare,
utilizarea de proxy-uri aflate la distanță etc.

http://mobilehtml5.org/

Studii de caz și alte resurse de interes:
R. Fioravanti, Building High Performance Mobile Web
Applications (2012): http://rjf-io2012.appspot.com/
A. Davies, Speed is Essential for a Great Web Experience
(2014): http://tinyurl.com/mrs37ey
prezentările conferințelor Velocity
velocityconf.com/velocity2014/public/schedule/proceedings

Instrumente vizând dezvoltarea
aplicațiilor Web mobile – exemplificări:
W3C mobileOK Checker – http://validator.w3.org/mobile/
jQuery Mobile – http://jquerymobile.com/
Sencha Touch – http://www.sencha.com/products/touch
SproutCore – http://sproutcore.com/
Firefox OS – www.info.uaic.ro/~busaco/teach/labs/firefoxos/
Mobile Web Programming – www.mobilexweb.com/

Web Developer Checklist – http://webdevchecklist.com/
vezi și I. Zuzak, “The Web Engineer’s Online Toolbox”:
http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html

episodul viitor: evaluarea proiectului (P)
miercuri, 28 ianuarie, 12:00 – C401
www.info.uaic.ro/~busaco/teach/courses/cliw/web-projects.html#calendar

Mult succes!

CLIW 2014—2015 (12/12): Performanța Web la nivel de client

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to CLIW 2014—2015 (12/12): Performanța Web la nivel de client

Similar to CLIW 2014—2015 (12/12): Performanța Web la nivel de client (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2014—2015 (12/12): Performanța Web la nivel de client