Client storage performance optimization .

1. WEB STORAGE PERFORMANCE AT A CLIENT
LEVEL

2.  Un aspect important ce tine de aplicatiile web este
spatiul cel il ocupa aplicatiile web si cum este
gestionat acesta la nivel de client.
 Se pot aplica multe tehnici de imbunatatire a
aplicatiilor, o parte dintre ele vor fi prezentate in
blogul: http://web-storage-perf.blogspot.com/, dar
cu siguranta mai sunt multe altele.
 Felul in care stocam informatiile, sau cum sunt
acestea comprimate, pot avea un mare efect
asupra performantei la nivel de client.

3. METODE DE A IMBUNATATI PERFORMANTA
SITULUI VOSTRU
 Cunoasterea componentelor din propria noastra
pagina cat mai bine
 Este benefic in a crea “profile” pentru site ca sa
gasim componente care sunt nefolosite, care pot fi
optimizate, sau sterse ulterior
 Sunt pe piata numeroase unelte care ne pot ajuta in
a optimiza fiecare componenta in parte

4. SALVAREA IMAGINILOR IN FORMATUL NECESAR
 Exista 3 mari formate existente pe
piata pentru web: JPEG si PNG
folosite pentru imagini statice, iar GIF
folosite pentru imagini statice sau
dinamice, care spre exemplu contin o
animatie.
 Putem folosi pngcrush pentru a
optimiza PNG de pe pagina web
 Desemenea putem folosi Jpegcrop
pentru a optimiza JPEG-urile in mod
similar.

5.  Avantaje si dezavantaje in folosirea diferitelor formate:
 GIF: ofera un maxim de 256 de culori si inca este
folosit pentru animatii simple in componenta
paginilor web.
 JPEG: este cel mai folosit doarece are posibilitatea
de a arata fotografii cu continut de milioane de
culori, la o marime a fisierului destul de mica.
 PNG: desi e mai mare ca marime de fisier, este o
alegere buna daca nu doresti sa pierzi calitatea din
fotografii.

6.  Case study JPEG vs PNG vs GIF:
O imagine de 960x720 ocupa 1.38 MB in
format PNG vs 566 KB in format JPEG(salvat
folosind Photoshop la calitate maxima) si 499 kb(tot
calitate maxima) folosind GIF.

7. MINIMIZARE DE FISIERE CSS SI JAVASCRIPT
PENTRU A SALVA SPATIU
 Minimizarea este un proces ce consta in
indepartarea de caractere care nu sunt necesare
(cum ar fi tab-uri, spatii, comentarii de cod) din
codul sursa pentru a reduce dimensiunea fisierului.
 Sunt o multitudine de unelte disponibile pe piata
atat pentru CSS: CSS Optimizer, CSS Drive
Gallery- CSS Compressor, Online CSS Optimizer,
Formatting cat si pentru JavaScript: JSMIN, YUI
Compressor si JavaScript Code Improver

8. HTML 5 WEB STORAGE
 Ce reprezinta?
Reprezinta un API introdus de html 5 pentru a stoca
perechi de date cheie/valoare.
Avantaje fata de cookies:
Este usor de folosit de dezvoltatori si are un spatiu mai
mare de stocare (5 MB) fata de 4 KB pt un cookie.
Insemnand ca putem stoca si alte tipuri de continut pe
disk cum ar fi : setari preferate ale userului, imagini cat
si alte fisiere . Poate fi accesat folosind Javascript.

9. TIPURI DE STOCARE HTML5
1.Web Storage:
 Reprezinta un sigur obiect persistent numit
localstorage caruia ii pot fi atribuite valori ce poate fi
apoi folosit si dupa ce browserul a fost inchis. Mai
exista un obiect numit sesion storage cu acelasi
proprietati dar care isi pierde valorile atunci cand
este inchisa fereastra.

10. 2.Web Sql Database
 Este un tip de baze de date structurata cu toata
functionalitatea si complexitatea unei baze de date
de tip Sql. Are perechi de tip cheie/valoare la fel ca
web storage dar in acelasi timp capacitatea de a
indexa in asa fel incat cautarea se face mult mai
repede.
 Deprecated. Nu va fi suportat de IE sau Firefox si
probabil va disparea pe viitor

11. 3.Indexed Database
 Un API ce doreste a combina avantajele celor
mentionate mai sus fara a avea dezavantajele lor.
Reprezinta o coletie de “magazine de obiect” in care
putem depozita cate un obiect. Seamana cu
tabelele de tip SQL, dar in acest caz nu sunt
constrangeri legate de structura obiectului nefiind
nevoie sa definim ceva de dinainte. Deci este
similar cu Web Storage dar cu avantajul ca poti
avea oricat de multe baze de date dorim si oricat de
multe “magazine” cu fiecare baza de date. Este un
API de tip asincron spre deosebire de Web Storage
si se pot indexa magazinele pentru a imbunatati
viteza de cautare.

12. 4.FileSystem
 Formatele anteriore sunt foarte bune pentru text sau
date structurate, dar cand vine vorba de continut binar
sau fisiere de dimensiuni mari avem nevoie de
altceva. Putem folosi FileSystem API. Acorda fiecarui
domeniu o ierarhie in sistemul de fisiere. Pentru
actiunile de scriere/citire de fisiere individuale, API-ul
este contruit pe FILE API existent deja.

13. COMBINAREA DE FISIERE CSS SI JAVASCRIPT
PENTRU A REDUCE CERERILE HTTP
 Pentru fiecare componenta necesara pentru a
reda o pagina web, o cerere HTTP este facuta
catre server
 Prin combinarea de fisiere putem reduce
cererile HTTP

14. FOLOSIREA DE CSS SPRITE PENTRU A
REDUCE CERERILE HTTP
 Un “CSS Sprite” este o combinatie de imagini mai
mici intr-una mai mare.
 Pentru a reduce cererile la server, Digg combina
mai multe imagini mici intr-una mai mare si apoi
foloseste CSS pentru a la pozitiona in mod potrivit.
 Pentru a face acest lucru se poate folosi CSS
Sprite Generator

15.  Toate aceste noi modalitati de a stoca informatia la
nivel de client aduce sau va aduce pe viitor in functie
de cat de repede este adoptat html 5, un spor de
performanta major pe mai multe nivele si va schimba
modul cum sunt gestionate multe resurse in prezent

16. CSS3
 CSS 3 aduce multe lucruri si efecte noi ce inainte
puteau fi facute doar folosind Flash, Javascript sau
alte librarii.
 Acest lucru acorda si o mare flexibilitate in design,
nemaifiind nevoie sa inlocuim imaginea toata, ci
doar sa scriem codul pentru efectul dorit.
 Toate acestea duc la o reducere a resurselor ce
trebuie stocate la nivel de client.

17. Sunt multe optiuni care reduc sau elimina
necesitatea de a ne baza pe librarii externe (flash sau
silverlight), si implicit se reduce nevoia de a stoca
imagini complexe, sau de a instala plug-inuri externe.
Cateva dintre aceste optiuni sunt :
 Drop-shadow
 Transform, Transition
 Hover
 Border-radius
 Transformari 3d
 Gradient
 Multe altele…

18. EXAMPLE
 Fara optimizare: Cu Optimizare

19. FOLOSIREA DE COMPRESIE LA NIVEL DE SERVER
 Comprimarea de componente este similara cu
arhivarea unui fisier/fisiere folosind zip sau rar
pentru a le trimite prin email
 Metode populare de compresie sunt Deflate si
gzip.
 Gzip este cea mai populara si cea mai eficienta
metoda de comprimare la momentul actual. A fost
dezvoltat de proiectul GNU si standardizat RFC
1952.

21. EVITAREA DE CSS SI JAVASCRIPT INLINE
 Fisierele CSS si javascrip sunt stocate de catre
browser dupa ce sunt descarcate pentru o utilizare
ulterioara
 Daca dezvoltatorul foloseste mult CSS si
JavaScript in documentele lor HTML atunci clientul
nu va putea beneficia de functionalitatea
browserului de a stoca aceste fisiere

22.  Un alt avantaj consta in faptul ca fisierul referentiat
poate fi inclus in mai multe fisiere de tip html, si nu
o sa mai fie acelasi cod scris de doua sau mai
multe ori in diferite pagini html.

24. DISTRIBUIREA RESURSELOR DE PE SITE
Ideea de baza este aceea de a imparti sarcina
pentru a incarca anumite elemente cu un alt site.
Cateva site-uri pentru stocare de componente web
sunt:
 1.FeedBurner pentru Feeduri RSS
 2.Flickr, photobucket pentru Imagini
 3.Google AJAX Librarie API pentru JavaScript

25. And Many More …

26. OPTIMIZARI
Deoarece HTML sta la baza fiecarei aplicatii
web, de-a lungul anilor s-au descoperit majoritatea
problemelor si bug-urilor:
 -stergerea de spatii
 -folosirea de DTD stricte pentru a maximiza timpul
de randare
 -omitererea de tag-uri redundante
 -minimizarea de headere, metadata si atribute ALT

27. OPTIMIZARE JAVASCRIPT
 1.Punerea de JavaScript la sfarsitul paginii,
deoarece Engine-ul HTML de rendare va rula
inainte la masina virtuala Javascript
 2.Codul JavaScript trebuie sa fie extern, deoarece
este descarcat pentru prima data si apoi este stocat
de browser pentru o utilizare ulterioara.

28.  3.Gruparea logica a scripturilor in asa fel incat vor fi
incarcate in paginile care au nevoie de ele. Evitarea
de a incarca fisiere JavaScript acolo unde doar
cateva fisiere sunt necesare.
 4.Codul sa fie cat mai compact ca sa duca la o
scadere in dimensiune a fisierului descarcat.

29. OPTIMIZARE CSS
 CSS ar trebuie sa fie extern fisierului pentru a
beneficia de “caching”
 Referintele CSS ar trebui sa fie puse in varful
paginii deoarece engine-ul de randare HTML, care
interpreteaza CSS este primul chemat
 Incercati in a evita referintele CSS duplicate
 Dimensiune Fisierelor CSS

30. OPTIMIZARII
 Sunt disponibile pe piata mai multe unelte pentru
AJAX:
 -“Razor Profiler”
 -”Y Slow!” plug-in pentru Firefox
 - XHR din Firebug

31. FIREBUG
 Puteti
edita, debug, si monotoriza CSS,
HTML, si JavaScript in timp ce vizualizati
pagina

32. YAHOO! SLOW
 Yahoo! Slow are rolul de a analiza pagini web si a
sugera cateva inbunatatiri bazate pe un set de
reguli bine definite
 Addon la Firebug pentru Firefox

33.  Acesta ofera sugestii pentru imbunatatirea paginii
web, unelte pentru analiza performantei cum ar fi
Smuch.it sau JSLint, ofera o lista cu componentele
paginii, ne arata statistici legate de pagina.

34. Va multumim !