CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de client

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

⑇performanța Web

strategii pentru reducerea timpului de încărcare

Dr.

Sab

in B

ura

ga


co

“The pushy bird gets the worm.”

Sean Adams

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


co

Constatareimpactul performanței asupra

experienței utilizatorului + afacerilor

Amazon: 100 milliseconds faster = 1% more revenueGoogle: 2% slower = 2% less searching per userShopzilla: 5 sec. faster = 25% more page views,

7—12% more revenue

www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

Dr.

Sab

in B

ura

ga


co

Modul în care utilizatorul percepe încărcareapaginii este considerat mai important

decât timpul real de încărcare

Dr.

Sab

in B

ura

ga


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 Landesmanhttp://uie.com/articles/download_time/

Dr.

Sab

in B

ura

ga


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


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


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


co

Care este timpul de încărcare a unei pagini Web?

Dr.

Sab

in B

ura

ga


co

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

a se studia și Lara Hogan, The Basics of Page Speed (2014)http://designingforperformance.com/basics-of-page-speed/

Dr.

Sab

in B

ura

ga


co

timpul de viață a unei pagini WebNavigation Timing (recomandare W3C, 2012)

www.w3.org/TR/navigation-timing/

atributetemporalede interes

Dr.

Sab

in B

ura

ga


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, plugin-uri,...)

starea cache-uluiplatforma hardware & software la momentul exploatării

Dr.

Sab

in B

ura

ga


co

teste concrete: www.webpagetest.org

Dr.

Sab

in B

ura

ga


co

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)

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Regula 1: reducerea numărului cererilor HTTP

detalii la http://httparchive.org/trends.php

Dr.

Sab

in B

ura

ga


co


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


co


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


co


Dr.

Sab

in B

ura

ga


co



se recurge la proprietăți CSSprecum background-position, margin-left, margin-right etc.

Dr.

Sab

in B

ura

ga


co



detalii în articolul Dave Shea,CSS Sprites: Image Slicing’s Kiss of Death, 2004:

www.alistapart.com/articles/sprites

Dr.

Sab

in B

ura

ga


co



tehnici + exemplificări:http://css-tricks.com/css-sprites/

utilitare disponibile online:csssprites.com spritecow.com spriteme.org

Dr.

Sab

in B

ura

ga


co


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


co



data:[tip] [;base64], date

detalii la developer.mozilla.org/docs/Web/HTTP/data_URIs

Dr.

Sab

in B

ura

ga


co



data:[tip] [;base64], date

data:image/png;base64,R02DAAA…EA=

tipulMIME

datelepropriu-zise

Dr.

Sab

in B

ura

ga


co

instrumente Web:http://dataurl.net/

http://dopiaza.org/tools/datauri/

http://duri.me/

Dr.

Sab

in B

ura

ga


co


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)

Dr.

Sab

in B

ura

ga


co


soluție:reunirea mai multor fișiere CSS/JavaScript

atenție la problemele privind modularizareași refolosirea codului

Dr.

Sab

in B

ura

ga


co


a se considera HTTP/2 față de HTTP/1.1

în cazul HTTP/2, timpul de încărcare a resurselor este cu 50—70% mai mic

Ragnar Lönn, HTTP/1.1 vs. HTTP/2: A Performance Analysis (2015)www.slideshare.net/LoadImpact/http11-vs-http2-a-performance-analysis

Dr.

Sab

in B

ura

ga


co

teste în timp-real efectuate cu http2.loadimpact.com/

Dr.

Sab

in B

ura

ga


co

Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)

Dr.

Sab

in B

ura

ga


co


CDN – Content Distribution Network

colecție de servere Web distribuite geografic pentru aasigura mai eficient rezolvarea cererilor de acces la date

Dr.

Sab

in B

ura

ga


co



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


co

CDN – arhitectura clasică (Akamai Technologies, 2007)

Dr.

Sab

in B

ura

ga


co



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


co



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

Dr.

Sab

in B

ura

ga


co

performanța accesului la anumite biblioteci JavaScriptdisponibile prin CDN: http://www.cdnperf.com/

Dr.

Sab

in B

ura

ga


co



probleme care nu sunt rezolvate:persistența conexiunilor, tranzacții, autentificare,

optimizări la nivel hardware,...

Dr.

Sab

in B

ura

ga


co



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)

Dr.

Sab

in B

ura

ga


co

Regula 3: setarea timpului de expirare a paginii

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co



indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul

Dr.

Sab

in B

ura

ga


co



indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul

Expires: Sat, 13 Feb 2016 07:33:00 GMT

Dr.

Sab

in B

ura

ga


co



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


co


soluție:controlul politicii de actualizare a cache-ului

via Cache-Control – câmp în antetul HTTP

Dr.

Sab

in B

ura

ga


co




specificarea perioadei de secunde pentru careo componentă e păstrată în cache prin directiva max-age

Dr.

Sab

in B

ura

ga


co




Cache-Control: max-age=315360000

Dr.

Sab

in B

ura

ga


co


soluție alternativă:configurarea serverului Web

e.g., recurgerea la modulul Apache mod_expires

Dr.

Sab

in B

ura

ga


co


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/

Dr.

Sab

in B

ura

ga


co

Regula 4: compresarea conținutului resurselor


Dr.

Sab

in B

ura

ga


co


soluție:mesajul de răspuns HTTP poate fi transmis compresat

– e.g., folosind gzip: http://www.gnu.org/software/gzip/ –clientului Web

Dr.

Sab

in B

ura

ga


co



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

Dr.

Sab

in B

ura

ga


co



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

Dr.

Sab

in B

ura

ga


co



pentru navigatoarele Web care nu au suport pentru gzip,decompresia se poate realiza la nivel de proxy

Dr.

Sab

in B

ura

ga


co

Regula 5: plasarea foilor CSS în antetul paginii

Dr.

Sab

in B

ura

ga


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


co

Regula 6: plasarea script-urilor la finalul paginii

Dr.

Sab

in B

ura

ga


co


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


co



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

Dr.

Sab

in B

ura

ga


co



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


co


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

Dr.

Sab

in B

ura

ga


co


cel mai favorabil caz:script-urile sunt inserate la finalul documentului

Dr.

Sab

in B

ura

ga


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)

detalii la http://httparchive.org/compare.php

Dr.

Sab

in B

ura

ga


co


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


co


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


co


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


co


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


co


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


co

Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)

Dr.

Sab

in B

ura

ga


co


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


co


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


co


soluție:

DNS caching

Dr.

Sab

in B

ura

ga


co


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


co


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

Dr.

Sab

in B

ura

ga


co

Regula 9: reducerea mărimii fișierelor JavaScript

Dr.

Sab

in B

ura

ga


co


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


co


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


co


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


co


soluție alternativă:JavaScript obfuscation

pericole:apariția erorilor, dificultatea mentenanței codului,

impedimente privind depanarea programelorreverse engineering

Dr.

Sab

in B

ura

ga


co


alte soluții:

minimizare + compresare (cu gzip)

folosirea script-urilor „scufundate” în pagini Web

modularizarea și/sau minimizarea foilor de stiluri CSS

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co

Regula 10: evitarea redirecționărilor

Dr.

Sab

in B

ura

ga


co


realitate:existența mai multor tehnici de redirecționare

a browser-ului spre alt URL via HTTP

Dr.

Sab

in B

ura

ga


co


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


co


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


co


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

Dr.

Sab

in B

ura

ga


co


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


co


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


co


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


co

Regula 11: eliminarea script-urilor duplicate

Dr.

Sab

in B

ura

ga


co


soluție:implementarea unui mecanism de management

al încărcării programelor JavaScript

Dr.

Sab

in B

ura

ga


co


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


co

Regula 12: configurarea ETag-urilor

Dr.

Sab

in B

ura

ga


co


ETag (entity tag)

mecanism HTTP ce permite serverelor și clienților Websă valideze componentele stocate în cache

Dr.

Sab

in B

ura

ga


co


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


co


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


co


ETag (entity tag)

sfat (Souders, 2007):reconfigurarea ETag-urilor

astfel încât să recurgă la un format comun sau evitarea folosirii lor

Dr.

Sab

in B

ura

ga


co

Regula 13: păstrarea în cachea datelor transferate asincron

Dr.

Sab

in B

ura

ga


co


strategie:minimizarea numărului de cereri HTTP asincrone

realizate via obiectul XMLHttpRequest

Dr.

Sab

in B

ura

ga


co


strategie:folosirea de formate compacte (XML vs. JSON)

și/sau a tehnicilor de compresie a datelor transferate

Dr.

Sab

in B

ura

ga


co


strategie:specificarea timpului de expirare a conținutului

Dr.

Sab

in B

ura

ga


co


se poate recurge la șablonul de proiectareBrowser-Side Cache

http://ajaxpatterns.org/Browser-Side_Cache

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


un exemplu demonstrativ lahttp://www.httpwatch.com/demos/ajax_caching/

Dr.

Sab

in B

ura

ga


co

(în loc de) pauză

Dr.

Sab

in B

ura

ga


co

Alte reguli de bună practică?

Dr.

Sab

in B

ura

ga


co

Regula 14: folosirea metodei GET pentru cereri Ajax

Dr.

Sab

in B

ura

ga


co

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(starea aplicației la nivel de server nu se modifică)

Dr.

Sab

in B

ura

ga


co

Regula 15: reducerea numărului de elemente DOM


Dr.

Sab

in B

ura

ga


co


determinarea elementelor dintr-un document HTML cudocument.getElementsByTagName('*').length

și compararea cu alte pagini Web

Dr.

Sab

in B

ura

ga


co


exemple (14 ian. 2014 vs. 12 ian. 2015 vs. 4 ian. 2016):

http://www.ted.com/ 521 959 922http://www.reddit.com/r/programming 1625 1531 1364http://www.trilulilu.ro/ 1397 1030 1102http://www.microsoft.com/ro-ro/default.aspx 720 809 684https://mail.google.com/mail/u/0/?shva=1#inbox 1899 2135 2134

Dr.

Sab

in B

ura

ga


co

Regula 16: divizarea componentelor între domenii

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Regula 17: grafica 2D folosind SVG vs. <canvas>

detalii la msdn.microsoft.com/en-us/library/gg193983%28v=vs.85%29.aspx

<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


co

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 (2015)http://firtman.github.io/velocity/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Evaluarea performanței aplicațiilor Web

PageSpeed Tools – developers.google.com/speed/pagespeed/

YSlow – http://developer.yahoo.com/performance/

WPOStats – https://wpostats.com/

HTTP Archive – http://httparchive.org/

HttpWatch – www.httpwatch.com/

Dr.

Sab

in B

ura

ga


co

studiu de caz

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

Dr.

Sab

in B

ura

ga


co

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

studiu de caz

Dr.

Sab

in B

ura

ga


co

Mozilla Firefoxanalizarea performanței redării conținutului grafic WebGL

studiu de caz

Dr.

Sab

in B

ura

ga


co

Edge F12 developer toolshttp://msdn.microsoft.com/library/ie/bg182326%28v=vs.85%29

studiu de caz

Dr.

Sab

in B

ura

ga


co

extensia Firebug – http://getfirebug.com/

studiu de caz

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

Alte strategii

optimizarea transferurilor de date via SSL/TLS

testare cu SSL Server Testhttps://www.ssllabs.com/ssltest/

diverse tehnici de optimizare (Geoffroy Couprie, 2013)http://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/

Dr.

Sab

in B

ura

ga


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


co

Alte strategii

optimizarea – eventual, reducerea calității –resurselor multimedia:

imagini JPEG și/sau PNG, fișiere audio și/sau video,fonturi, animații Flash, documente PDF etc.

C. McAnlis, Image Compression for Web Developers (2013)www.html5rocks.com/en/tutorials/speed/img-compression/

instrumente la https://css-tricks.com/performance-tools/

Dr.

Sab

in B

ura

ga


co

mărimea medie a unui răspuns oferit de cele mai vizitate 1000 situri

1 ian. 2013HTML: 5 KB, CSS: 10 KB, JS: 12 KBJPG: 15 KB, PNG: 9 KB, GIF: 3 KB

15 dec. 2015HTML: 4 KB, CSS: 14 KB, JS: 15 KBJPG: 24 KB, PNG: 18 KB, GIF: 5 KB

SVG: 6 KB, video: 149 KB

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

Dr.

Sab

in B

ura

ga


co

studiu de caz: audit de resurse

aici, opțiunea Audits din cadrul instrumentelor pentru dezvoltatorii Web oferite de Chrome

Dr.

Sab

in B

ura

ga


co

Alte strategii

folosirea tehnicilor de încărcare asincronă

de citit și articolele:C. Coyier, Thinking Async (2012): css-tricks.com/thinking-async/

I. Grigorik, Script-injected "async scripts" considered harmful (2014)www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

Dr.

Sab

in B

ura

ga


co

Alte strategii

recurgerea la streaming pentru a prelua date (e.g., JSON, fluxuri multimedia)

diverse instrumente de interes:Oboe.js – oboejs.com

Stream.js – http://winterbe.github.io/streamjs/

mpegts – https://github.com/RReverser/mpegts

BitTorrent over WebRTC – https://webtorrent.io/

vezi https://developer.mozilla.org/Apps/Build/Audio_and_video_delivery

Dr.

Sab

in B

ura

ga


co

Ce aspecte vizează performanțaprogramelor JavaScript?

Dr.

Sab

in B

ura

ga


co

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

blocarea transferurilor

Dr.

Sab

in B

ura

ga


co

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

blocarea transferurilor

instrument de referință: Cuzillionhttp://stevesouders.com/cuzillion/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


co

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

Dr.

Sab

in B

ura

ga


co

Alte strategii

recurgerea la tehnici de optimizare specificeunei anumite biblioteci JavaScript

exemplificări:jQuery – https://learn.jquery.com/performance/

React.js – facebook.github.io/react/docs/advanced-performance.html

Dr.

Sab

in B

ura

ga


co

Optimizarea succede etapa de verificarea corectitudinii codului

Douglas Crockford

Dr.

Sab

in B

ura

ga


co

Resurse suplimentare

Steve Souders, High Performance Web Sites, O’Reilly, 2007

Steve Souders, Even Faster Web Sites, O’Reilly, 2009http://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/

Dr.

Sab

in B

ura

ga


co

Resurse suplimentare

Browser Technologieshttp://platform.html5.org/

Front-end Code Standards & Best Practiceshttp://isobar-idev.github.io/code-standards/

Dr.

Sab

in B

ura

ga


co

Aspecte de interes înrudite

testarea aplicațiilor în contextul ingineriei Web

securitatea – e.g., confidențialitatea

performanță versus utilizabilitate

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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: AnalyzingMobile Browser Energy Consumption”, WWW2012

www2012.wwwconference.org/proceedings/proceedings/p41.pdf

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

navigatoarele Web moderne nu elimină conținutul paginii anterioare până când nu e disponibil

cel al documentului curent

stevesouders.com/blog/2012/12/05/clear-current-page-ux/

connect

DNS time to first byte content

click link create BODY start render

<html><script> <body><script>

Dr.

Sab

in B

ura

ga


co

„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/

Dr.

Sab

in B

ura

ga


co

Minimizarea utilizării memoriei

aspect important: programele JavaScript

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

Folosirea facilităților oferite de CSS

uzual, browser-ele dispozitivelor mobileoferă 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 marehttps://speakerdeck.com/addyosmani/css-performance-tooling

http://davidwalsh.name/css-js-animation

Dr.

Sab

in B

ura

ga


co

Minimizarea arborelui DOM

reducerea numărului și reutilizarea de noduriminimizarea operațiilor de manipulare a arborelui DOM

Dr.

Sab

in B

ura

ga


co

Interacțiunea cu utilizatorul

navigatoarele Web mobile folosesc un unic fir de execuție(single threaded)

Dr.

Sab

in B

ura

ga


co

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șteptareoferirea de feedback vizual

stevesouders.com/blog/2013/06/16/browser-busy-indicators/

Dr.

Sab

in B

ura

ga


co

RAIL (Response, Animation, Idle and Load)

Paul Irish, Paul Lewis, Introducing RAIL: A User-Centric Model For Performance (2015):http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail

studiu de caz: metodologia RAIL

considerarea utilizatorului în contextul performanței Web

Dr.

Sab

in B

ura

ga


co

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.

Dr.

Sab

in B

ura

ga


co

http://mobilehtml5.org/

Dr.

Sab

in B

ura

ga


co

Studii de caz și alte resurse de interes:

prezentările din cadrul conferințelor Velocityvelocityconf.com/velocity2015/public/schedule/proceedings

velocityconf.com/velocity2014/public/schedule/proceedings

velocityconf.com/velocity2013/public/schedule/proceedings

prezentările lui Andy Davies: www.slideshare.net/AndyDavies/presentations

Dr.

Sab

in B

ura

ga


co

Instrumente + resurse vizând dezvoltarea aplicațiilor Web mobile – exemplificări:

W3C mobileOK Checker – http://validator.w3.org/mobile/

Accelerated Mobile Pages – https://www.ampproject.org/

jQuery Mobile – http://jquerymobile.com/

Sencha Touch – http://www.sencha.com/products/touch

SproutCore – http://sproutcore.com/

Mobile Web Programming – www.mobilexweb.com/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

episodul viitor: retrospectivă + perspective

Date post:	13-Apr-2017
Category:	Software
Upload:	sabin-buraga
View:	458 times
Download:	4 times

CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de client

Software