WEB STORAGE PERFORMANCE AT A CLIENT LEVEL

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.

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

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.

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.

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.

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

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.

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.

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

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.

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.

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

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

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

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.

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…

EXAMPLE Fara optimizare: Cu Optimizare

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.

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

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.

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

And Many More …

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

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.

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.

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

OPTIMIZARII

Sunt disponibile pe piata mai multe unelte pentru AJAX:

-“Razor Profiler” -”Y Slow!” plug-in pentru Firefox - XHR din Firebug

FIREBUG Puteti edita, debug, si monotoriza CSS,

HTML, si JavaScript in timp ce vizualizati pagina

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

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.

Va multumim !

Mihai ValacheVasiliu Dragos-

Mihail