Optimizare HTML/HTML5

Deoarece HTML sta la baza fiecarei aplicatii web, de-a lungul anilor s-au descoperit majoritatea problemelor si bug-urile. Cateva practici de baza pentru imbunatatirea de comportamentului HTML ar fi:

-stergerea de spatii

-folosirea de DTD stricte pentru a maximiza timpul de rendare

-omitererea de tag-uri redundante

-minimizarea de headere, metadata si atribute ALT

Html 5 Storage APIs

Html 5 vine cu mai multe API-uri noi ce au tinta imbunatatirea felului in care sunt stocate informatiile la nivel de client fara ca sa mai apelam la direrite librarii externe consumatoare de spatiu. Aceste API-uri sunt : Web Storage, Web SQL Database, Indexed Databases si FileSystem.

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 aceleasi proprietati, dar care isi pierde valorile atunci cand este inchisa fereastra.

Avantaje:

-este suportat de toate browserele moderne

-usor de folosit find un API sincron

-evenimente semantice disponibile pentru a tine celelelalte ferestre sincronizate

Dezavantaje:

-performanta slaba pentru date mai complexe atunci cand folosim API-ul sincron

-performanta slaba cand cautam date de dimensiune mari datorita lipsei de indexare

-performanta slaba cand stocam si descarcam date complexe datorita necesitatii de a serializa si deserializa de la si catre valori de tip string. Majoritatea browserelor suporta doar tipul string

-nevoia de a asigura consistenta si integritatea datelor deoarece nu avem o structura fixa

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.

Avantaje:

-este suportat de toate browserele moderne

-performanta buna deoarece este un API asincron si nu va bloca interfata userului.

-performanta buna la cautarea de date datorita indexarii

-robust deoarece suporta un model transactional de baza de date

- usor de mentinut integritatea datelor datorita rigiditatii structurii

Dezavantaje

-deprecated. Nu va fi suportat de IE sau Firefox si probabil va disparea pe viitor

-greu de invatat deoarece necesita cunostinte de baze de date relationale de tip SQL

-sufera de object-relational impedence mistmach

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 legat 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 vrem 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.

Avantaje:

-performanta buna datorita tipului asincron si nu va bloca fereastra utilizatorului

-buna performanta in a cauta date datorita indexarii

-suporta modelul “agile” de dezvoltare, fara a avea nevoie de structuri de date flexibile

-usor de invatat datorita modelului simplu din spate

-suportat de majoritatea browserelor

Dezavantaje

-API destul de complex

-nevoie de a asigura consistenta si integritatea datelor datorita faptului ca aceasta nu este structurata

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.

Avantaje:

-poate stoca continut mare de date de tip binar fiind potrivit pentru imagini, audio, video, pdf, etc.

-performanta buna, find un API asincron

Dezavantaje:

-e un standard relativ nou , fiind suportat de chrome momentan

-nu exista suport pentru tranzactii

-nu are suport pentru indexare sau cautare in fisiere

Alte Tehnici de imbunatatire(UPDATE)

1.Minimizare de fisiere CSS si Javascript pentru a salva spatiu.


Minimizare este un proces ce consta in indepartarea de caractere care nu sunt necesare (cum ar fi tab-uri, spatii, comentari de cod) din codul sursa pentru a reduce dimensiunea fisierului. Spre exemplu putem transforma codul acesta CSS:
.some-class {
color: #ffffff;
line-height: 20px;
font-size: 9px;
}


In: .some-class{color:#fff;line-height:20px;font-size:9px;}


Din fericire nu este necesar a face acest proces manual deoarece 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. Case study: Un fisier css de 4.93 KB neoptimizat poate fi redus la 3.01 KB.


2.Folosirea de compresie la nivel de server pentru a reduce dimensiunea fisierelor


Acest lucru poate fi putin dificil pentru site-urile care se afla pe un host partajat care nu are compresie la nivel de server, dar pentru o optimizare cat mai buna a paginii fiecare componenta trebuie comprimata. 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. Daca folositi propriul vostru server dedicat sau daca aveti VPS aveti noroc deoarece daca nu aveti compresia activata, instalarea unei aplicati care sa se ocupe de compresie e foarte usor.
Incepand cu versiunea HTTP 1.1, clientii web au suport pentru encodare atunci cand intalnesc Headerul Accept-Encoding in cererea HTTP:


- Accept-Encoding: gzip, deflate
Daca serverul web vede acest header in cerere, acesta poate comprima raspunsul folosind una dintre metodele listate de client. Serverul web notifica clientul prin headerul Content-Encoding aflat in raspuns.
- Content-Encoding: 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. O alta metoda de comprimare care mai poate fi gasita in mod mai frecvent este deflate, dar aceasta nu este la fel de eficienta.
Un ghid pentru a instala mod_gzip pe Apache se poate gasi aici.


3.Evitarea de CSS si JavaScript inline


In mod normal , CSS extern si fisierele JavaScript sunt “cached” de browserul utilizatorului. Cand userul navigeaza de pe pagina de inceput ei deja au incarcat fisierele CSS si JavaScript pe care nu mai trebuie sa le incarce la un moment ulterior. Daca dezvoltatorul foloseste multe fisiere CSS si JavaScript in documentele lor html atunci clientul nu va putea beneficia de functionalitatea browserului de a stoca aceste fisiere. Spre exemplu daca avem mai multe fisiere html la care dorim sa aplicam stilizari css identice, este avantajos sa referentiem un singur fisier css decat sa scriem acelasi cod inline pentru fiecare fisier in parte.


4.Distribuirea resurselor de pe site


Distribuirea a unor resurse de pe site catre alte situ-uri duce la o reducere semnificativa a incarcarii pe propriul server. Ideea de baza este aceea de a imparti sarcina pentru a incarca anumite elemente cu un alt site.
Se poate folosi Feedburner pentru a gestiona feed-urile RSS, Flickr pentru imagini si Google AJAX Libraries API pentru a servi librarii populare JavaScript cum ar fi MooTools, jQuery si Dojo.


5. Folosirea de Cuzilion pentru a planifica structura optima a sitului vostru


Cuzilion este o aplicatie bazata web creata de Steve Souders(angajat la Google) care va ajuta la experimentarea cu diferite configuratii a unui site web pentru a determina o structura optima. Daca deja aveti implementat designul structurii unui site web, puteti folosi Cuzilion pentru a o simula si apoi sa imbunatatiti performanta unde este nevoie.
Un bun articol despre Cuzilion se poate gasi aici.

Studiu De caz:

Name Size( KB) Size after compresion(KB)        %
page1 29,5 27,3 7,457627
page2 4,67 4,37 6,423983
page3  109 93,2 14,49541
page4 91,8 88,2 3,921569
page5 82,8 77,4 6,521739




In urma utilizarii programelor gratuite de compresia a fisierelor html (ex Compress HTML)
http://www.textfixer.com/html/compress-html-compression.php ,
am obtinut o reducere a dimensiunii fisierului html in medie de 7.5% (min3.92% max14.4%),  majoritatea avand o compresie de 6.5-7%.


Dar in urma utilizarii programului de compresia fisierul html a devenit aproape imposibil de citit de catre un utilizator uman.
Iar complexitatea si dimensiunea majoritatii fisierelor html fac ca formatarea manuala a documentului sa fie o mare pierdere de timp.


Am incercat cautarea unui program de refacere a unui variante lizibile a documentului dar pana in momentul de fata nu am gasit nici unul.

Reducerea Dimensiuni Imaginilor

Cum majoritatea site-urilor din in ziua de azi sunt pline de imagini cat mai detaliate este foarte important a le comprima pentru a obtine cele mai bune performante. Exista 3 mari formate existente pe piata pentru web:JPEG si PNG folosite pentru imagini statice si GIF folosite ori pentru statice sau dinamice, care de exemplu contin o animatie . In general JPEG ar trebui folosite pentru imagini realistice cu netezi declivităţi si tonuri de culoarea diferite. In contrast GIF si PNG ar trebui folosite pentru imagini care au culori cat mai opac cum ar fi diagrame sau log-uri.

Putem incerca convertirea GIF-urilor catre PNG sa vedem daca acest lucru ne economiseste spatiu. In trecut dezvoltatorii ezitau in a folosi PNG datorita suportului  limitat in browsere dar la momentul actual acest lucru nu mai este valabil. Singura problema majora este transparenta-alfa in PNG-uri ce contin culori „adevarate”, dar acelasi lucru poate fi zis si de GIF care nici ele nu ofera suport pentru acest lucru.

Putem folosi http://pmt.sourceforge.net/pngcrush/ pentru a optimiza PNG de pe pagina web.

Desemenea putem folosi http://jpegclub.org/ 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 fotografii.

Studiu de caz:

Pentru acest studio de caz am decis sa folosim un website de convertire de imagini.

http://www.online-utility.org/image_converter.jsp

Folosind imagini alese aleatoriu in urma unei cautari de imagini cu motorul de cautare google am obtinut urmatoarele rezultate.

GIF to PNG

In cazul convertirii de imagini de la formatul gif la png am obtinut o reducere medie a dimensiunii fisierul de 20%. Iar pierderea calitatii imaginii este neglijabila.

GIF to JPG

Convertirea de imagini de la formatul gif la jpg poate rezulta, uneori, la o compresie de pana la 70%. Dar, in unele cazuri imagine rezultata in urma conversie poate fi mai mare decat cea initiala (400% mai mare intr-un caz). Iar calitatea imaginii rezultate in urma conversiei este net inferioare celei in format png.

TIFF to PNG

In general imaginea in format png este aproximat 50% din imaginea initiala cu o calitate apropiata.

TIFF to JPG

In toate cazurile imaginea in format jpg este mai mare si de mai proasta calitate ca originalul (cazul cel mai nefavorabil gasit pana acum este de o crestere de 780% in dimensiune)

BMP to PNG

Conversia de la formatul bmp la png rezulta in o reducere a dimensiunii imaginii de pana la 60% iar diferentele de calitate sunt minore.

BMP to JPG

Pe departe cea mai eficienta conversia in ceea ce priveste spatial. In unele cazuri putem avea si o reducere de 95% a dimensiunii imaginii finale.

JPG to PNG and PNG to JPG

Exista multa dezbatere pe internet care format este mai efficient si ofera o calitate mai buna a imaginii. Desi nu avem un raspuns pentru aceasta intrebare putem spune ca conversia de la un format la altul este deficitara. In nici un caz de conversie nu sa observant o reducere a dimensiunii fisierelor, iar in multe cazuri acestea au devenit mai mari in urma conversiei.

Concluzii:

Pentru reducerea dimensiunii imaginilor in format GIF, TIFF se prefere convertirea in format PNG. Iar in cazul imaginilor BMP se recomanda convertire acestora in JPG-uri.