luni, 9 ianuarie 2012
Introducere Web Storage Performance
Din ce in ce mai multi utilizatori cumpara din magazine virtuale in zilele de azi. Cercetarile arata ca au fost cresteri proportionale in cumpararea de produse online. De la 40% in anul 2004 la 84% in anul 2008 in Europa.
Un aspect important ce tine de aplicatile web este spatiul cel il ocupa acestea 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 acest blog. Felul in care stocam informatiile, sau cum sunt acestea comprimate pot avea un mare efect asupra performantei la nivel de client.
Introducere HTML 5 cat si CSS3 aduce numeroase beneficii prin diferitele API-uri, ce ne permit sa stocam la nivel de client diferite informatii, cat si sa folosim efecte cat mai diversificate care inainte depindeau de librarii externe cum ar Flash, Silverlight sau altele.
In mod general, cand cineva doreste sa cumpere online, acesta nu doreste sa astepte foarte mult pana cand se incarca pagina ,sau pana se proceseaza comanda.
Concurenta pe piata in acest domeniu este mare. Din aceasta cauza, cei care ofera servicii online trebuie sa aiba cele mai bune performante posibile. Daca un site are doar cativa utilizatori concomitenti, nu este greu ca acesta sa fie destul de rapid. Dar cu cresterea vanzarilor pe internet ,cresc si complexitatile integrarii si dorinta ca utilizatorul sa aiba o experienta cat mai favorabila online. Toate acestea duc la cateva provocari pentru dezvoltatori de software online. Daca nu sunt tratate cum trebuie, problemele pot conduce la cedarea sistemelor din cauza supraincarcarii sau timpului de raspuns nefavorabil. Acuma intrebarea este: “Cum prevenim aceste probleme de performanta si de disponibilitate, in asa fel incat situl nostru sa prezinte cea mai buna solutie?”
Firebug si YSlow, indispensabile pentru orice dezvoltator
Firebug este un plug-in pentru Firefox care pune la dispozitie o multitudine de unelte pentru a analiza performanta situ-lui vostru. Puteti edita, debug, si monotoriza CSS, HTML, si JavaScript in timp ce vizitati pagina.Va permite sa vedeti cat spatiu ocupa fiecare fisier in parte cat si multe alte optiuni.
De la versiunea 1.0.5 si pana in prezent, se poate vizualiza cat dureaza pana sunt incarcate fisierele HTML, CSS,imaginile, sau alte resurse.
Firebug deasemenea tine cont si de continutul dinamic din cadrul unei pagini cum ar fi DOM sau alte tehnici disponibile. Daca vizualizam sursa paginii prin Firebug, Firebug reflecta schimbarile facute la DOM. Acestea reprezinta unul dintre atuurile lui Firebug deoarece fara el, cererile si raspunsurile AJAX sunt invisibile. Putem vizualiza cat timp dureaza fiecare cerere/raspuns in tabul NET.
Putem vizualiza raspunsurile XNR prin click pe tabul Net si apoi din submeniu dam pe tabul XNR. Tabul XNR este special conceput sa analizeze AJAX
Yahoo! Slow are rolul de a analiza pagini web si a sugera cateva inbunatatiri bazate pe un set de reguli bine definit. Yahoo Slow este un add-on pentru Firefox integrat cu mediul de dezvoltare Firebug. YSlow poate da o nota unuei pagini web bazate pe un set predefinit de reguli sau un set definit de dezvoltator/utilizator. 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.
Grid Computing and Cloud Computing
Am considerat ca ar fi interesant un articol despre Grid si Cloud Computing, care desi sunt doua aspecte diferite, pot oferi multe beneficii utilizatorilor. Acest mic articol nu discuta despre cum poate fi imbunatatita performanta pe web, ci despre cum putem folosi noi web-ul pentru a ne spori performanta atunci cand avem resurse ce dorim sa le stocam intr-un mod diferit.
Grid Computing este un termen care se refera la combinarea de resurse de la mai multe surse pentru a a-si atinge un anumit scop. Reteau poate fi gandita ca un sistem distribuit cu resurse care nu interactioneaza unul cu altul si care este constituit dintr-un numar foarte mare de fisiere. Calculul distribuit este un tip special de calcul paralel care se bazeaza pe calculatoare intregi conectate printr-o retea (fie privata sau publica gen Internet) prin Ethernet de exemplu. Aceasta idee este in contrast cu ideea de un supercomputer care are mai multe procesoare conectate printr-un bus de mare viteza local.
Principalul dezavantaj din punct de vedere al performantei este variatia existenta in diferitele procesoare de pe piata, si mai este dat si de viteza internetului in functie de zona nefiind una favorabila.
Grid computing ofera o modalitate de a rezolva probleme existente, cum ar fi plierea proteinelor (folding@home) , simulare, analiza de date din astronomie(seti@home) si multe altele. Grid computing merge pe premiza ca orice ciclu de procesor care nu este utilizat, poate fi folosit in acest calcul.
Pentru ca un task sa fie potrivit pentru Grid Computing, codul din spate trebuie sa ruleze in paralel ,iar diferitele sarcini sa fie mutual exclusive.
Cloud Computing
Este o extensie a conceptului de programare orientat obiect si anume abstractizarea. Abstractizarea indeparteaza detaliile complexe legate de cum functioneaza lucrurile si ceea ce este perceput de utilizator. Tot ce vede utilizatorul este o interfata care primeste Inputuri si furnizeaza Outputuri. Cum este calculat si procesat outputul este complet ascuns. Intr-un mediu bazat pe Cloud Computing datele exista pe mai multe servere, detaliile legate de conexiunile in retea sunt ascunse deoarece utilizatorul nu este interesat de acest aspect. Cloud Computing deriva foarte mult de la paradigma Unix de a avea mai multe elemente, fiecare avand un scop cat mai specific, in loc sa avem un element masiv dar sa nu fie la fel de bun la acel scop.
Exemple ar fi: Amazon EC2, Google App Engine, Google Apps, Apple MobileMe dar si un exemplu pentru pasionati de jocuri <a href=”http://www.onlive.com/#1”>Onlive</a> bazat pe feeduri video a jocurilor.
Cloud Computing Vs Grid Computing
Diferenta dintre acestea este cateodata greu de inteles deoarece nu sunt intodeauna mutual exclusive. Amandoua sunt folosite pentru a maximiza resursele ce le avem la dispozitie. Deasemenea ambele folosesc abstractizarea la un nivel extensiv, si ambele au elemente care interactioneaza unul cu altul.
Diferenta provine de la felul in care sunt procesate diferitele taskuri in respectivele medii: in Grid computing un task major este dat si divizat in bucati mai mici si executat pe mai multe calculatoare.
Cloud computing are rolul de a furniza utilizatorului diferite servicii fara ca acesta sa investeasca in arhitectura din spate. Cloud computing poate oferi o multitudine de aceste servicii de la web hosting pana la redactare de documente online sau chiar jocuri si apoi sa ii prezinte utilizatorului un rezultat omogen.
In concluzie desi nu sunt mutual exclusive acest concepte, ele sunt distincte cel putin la nivel conceptual.
Mobile Storage Web Performance
Cresterea de utilizatori de internet mobil a dus la o crestere in cerintele serviciilor oferite sa fie cat mai fiabile posibil. O mare problema o consta timpul de acces de pe telefonul mobil, datorita infracstructuri wireless curente. Accesul Web de pe mobil sufera inca de cateva probleme: interoperabilitate si uzabilitate.
Interoperabilitatea: Problemele provin de la fragmentarea diferitelor platforme existente pe dispozitivele mobile, sisteme de operare multiple cat si browsere cu diferite performante.
Uzabilitate: Majoritatea problemelor provin de la dimensiunea fizica a dispozitivelor,care au rezolutie limitata, user input etc.
Cateva aspecte generale care trebuie luate in considerare cand dorim sa realizam un site web destinat pentru mobile:
1.Putem converti un site web care nu e dedicat mobilelor dar care contine informatiile cerute.
2.Cream un nou site de la 0 pentru mobile web concentrandu-ne mai mult pe dimensiune.
Odata creat noul site trebuie sa vedem cum functioneaza pe diferitele browsere, platforme disponibile pe piata. Trebuie deasemenea sa tinem cont de o clasa speciala de telefoane: smartphones dar si cele fara aceste functii.
Un articol care ne arata cum se comporta diferitele situri destinate pentru mobile poate fi gasit aici.
Interoperabilitatea: Problemele provin de la fragmentarea diferitelor platforme existente pe dispozitivele mobile, sisteme de operare multiple cat si browsere cu diferite performante.
Uzabilitate: Majoritatea problemelor provin de la dimensiunea fizica a dispozitivelor,care au rezolutie limitata, user input etc.
Cateva aspecte generale care trebuie luate in considerare cand dorim sa realizam un site web destinat pentru mobile:
1.Putem converti un site web care nu e dedicat mobilelor dar care contine informatiile cerute.
2.Cream un nou site de la 0 pentru mobile web concentrandu-ne mai mult pe dimensiune.
Odata creat noul site trebuie sa vedem cum functioneaza pe diferitele browsere, platforme disponibile pe piata. Trebuie deasemenea sa tinem cont de o clasa speciala de telefoane: smartphones dar si cele fara aceste functii.
Un articol care ne arata cum se comporta diferitele situri destinate pentru mobile poate fi gasit aici.
Optimizare CSS/CSS3
CSS joaca un rol foarte important in dezvoltarea de aplicatii web. Cateva optimizari legate de organizarea codului se pot face astfel:
1. - CSS ar trebuii sa fie extern fisierului pentru a beneficia de “caching”
2. - Referintele CSS ar trebui sa fie pus in varful paginii deoarece engine-ul de randare HTML care deasemenea interpreteaza CSS este primul chemat
3. - Incercati in a evita referintele CSS duplicate
4. - Dimensiune Fisierelor CSS
O alta practica buna este aceea in minimizare de cod prin folosirea avantajului de a grupa elementele logic. Cateva exemple ar fi:
1. - background (controleaza elementele din background, pozitionarea lor, cat de mult se repeta)
2. - font (font-size, font-weight, line-height, etc)
3. - margin( defineste latimea marginii unui compartiment)
4. - border (defineste proprietile pentru frontiera compartimentului)
5. - padding (defineste latimea umpluturii in laturile compartimentului)
O problema generata de CSS care duce la performante scazute in JavaScript sunt legate de redesenari in browser. Numeroase inbunatatiri de performanta pot fi obtinute prin aplicarea de animatii la elemente care au pozitie fixa sau absoluta si evitarea de expresii JavaScript in CSS.
CSS3
CSS 3 aduce multe lucruri si efecte noi ce inainte puteau fi facute doar folosind Flash, Javascript sau alte librarii. Deasemenea avem optiune pentru gradient implementat in cod cat si diferite efecte ce pot fi aplicate direct pe unele imagini cum ar fi shadow sau optiuni pentru hover,border,combinarea de imagini si multe altele fara a fi nevoie ca acestea sa fie complexe de la bun inceput si de o capacitate ridicata. 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.
Optimizare Javascript
Vom discuta cateva optimizari care pot fi aplicate la scripturile JavaScript.
Cateva reguli de baza atunci cand scriem cod JavaScript in aplicatia noastra ar fi:
Cateva reguli de baza atunci cand scriem cod JavaScript in aplicatia noastra ar fi:
1.Punerea de JavaScript la sfarsitul paginii, deoarece Engine-ul HTML de rendare va rula inaintea 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 dimensiunea fisierului descarcat. Se pot folosi programe de compactare ca codului
Ca majoritatea limbajelor de programare JavaScript este predispus la scapari de memorie. Evitarea acestor probleme va duce in majoritatea cazurilor la o crestere exponentiala. Scaparile de memorie sunt adesea asociate cu noduri ascunse in structura paginii si cu obiecte prinse intr-o bucla infinita.
Desi imbunatiri legate de cod pot optimiza performanta unei aplicatii web, logica poate deasemenea sa ne ajute sa le prevenim. Exista cateva tweakuri in a lucra cu DOM-ul care pot duce la prevenire de performante nedorite:
-evitarea DOM daca se poate sau folosirea lui cat mai rar posibil
-in loc de a atasa handleri de evenimente pentru fiecare lista, atasam handlerul la parinte pentru a nu trece prin toate elementele listei
Nu trebuie sa supraincarcam pagina cu prea mult JavaScript deoarece poate duce la o scadere in performanta. Performanta JavaScript depinde foarte mult si de engine-ul care il interpreteaza si care este specific fiecarui browser in parte.
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.
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.
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.
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.
Abonați-vă la:
Postări (Atom)