In cadrul Best Web Image, unul dintre principiile pe baza carora dezvoltam aplicatii este Viteza. De-a lungul timpului am testat si implementat diverse tehnici speciale pentru a ne atinge acest obiectiv. Printre ele:

• utilizarea unui framework performant
• minimizarea CSS/JS si gruparea lor intr-un singur fisier
• simplificarea codului HTML prin eliminarea spatierii si a liniilor
• utilizarea sprite-urilor
• utilizarea AJAX si incarcarea resurselor de tip social plugin dupa incarcarea aplicatiei la utilizator

Inainte de a vorbi despre fiecare dintre aceste metode, sa luam un exemplu elocvent (un proiect BWI in faza de testare, care combina toate tehnicile enumerate mai sus): Mai rapid decat 97% din toate site-urile testate si scor A de la Y!Slow! Cum arata codul HTML generat de un asemenea website? Este destul de dificil de aratat deoarece este o singura linie foarte lunga. A se observa lipsa liniilor HTML.  

Ti-ai testat vreodata site-ul din punct de vedere al vitezei ?

Utilizeaza de fiecare data Page Speed tests! Noi recomandam PingDom. Daca ai acces la Webmaster Tools, si un website online de ceva timp, cea mai buna referinta este graficul din sectiunea Labs > Site performance (path valabil la data scrierii articolului iunie 2012). In timpul dezvoltarii site-ului tine cont de scorul de performanta dat de Y!Slow (plugin pentru Firefox). Cele mai complexe proiecte ale noastre, cu foarte multe elemente grafice si content amplu, obtin un scor mai mare de 60-70 de puncte.

Tehnici speciale de optimizare

Inainte de a continua, ar fi util sa citesti directivele Yahoo! pentru optimizarea paginilor.

1. Utilizarea unui framework performant

Optiunea noastra nr. #1 este Codeigniter Strict din punct de vedere al vitezei acesta este un framework rapid, care nu incarca aplicatia cu cod de care nu ai nevoie si care are built in o librarie de Profiling. Profiling iti afiseaza toate datele de care ai nevoie pentru a optimiza pagina:

• timpul de executie al PHP
• timpul de executie al query-urilor MySQL
• variabilele utilizate, memoria ocupata
• timpii totali de executie ai aplicatiei si multe altele

Este esential ca aplicatia pe care o construiesti sa minimizeze resursele utilizate!

2. Minimizarea CSS/JS si gruparea lor intr-un singur fisier

Ce inseamna? Daca ai 5 fisiere CSS externe combina-le intr-un singur mare CSS. De ce? Pentru ca browserul utilizatorului sa nu trimita 5 request-uri catre server, si astfel sa piarda milisecunde pretioase. Mai multe despre request-uri... Acelasi lucru este valabil si pentru JS (librariile de Jquery, pluginul de afisare al imaginilor, css-ul construit pentru site, etc) trebuie toate combinate intr-un singur fisier. De asemenea nu utiliza CSS si JS in cadrul template-ului HTML (inline CSS, inline JS). Combinand aceasta tehnica cu un plugin foarte simplu pentru framework-ul utilizat poti gestiona foarte usor toate fisierele, atat in timpul dezvoltarii, cat si ulterior. Noi utilizam o versiune modificata de Carabiner, care pe scurt combina toate fisierele intr-un singur  fisier ce poate fi stocat in cache.

3. Simplificarea codului HTML prin eliminarea spatierii si a liniilor

Aceasta tehnica are 2 etape. Pasul 1: Utilizarea PHP tidy (inclus in PHP 5) pentru validarea si corectarea codului:

Rezultatul:

test

Atentie! PHP tidy are o serie de optiuni de configurare care pot schimba comportamentul functiei. PHP tidy produce rezultate neprevazute precum unificarea nested div-urilor, migrarea codului css inline in clase CSS si altele. Este de preferat ca aplicatia sa fie de la inceput dezvoltata si testata plecand de la premiza utilizarii acestei tehnici. Debuging-ul ulterior este complicat. Pasul 2: Eliminarea spatierii inutile si a separarii codului prin linii. Pentru aceasta noi utilizam un plugin care are la baza o functie simpla:

preg_replace('/\n|\r|\r\n/m', '', $buffer); //remove end of line carriage  preg_replace('/\s\s+/m', ' ', $buffer); //remove multiple spacing

De ce toate acestea ? Folosirea acestei tehnici poate micsora dimensiunea unei pagini cu 20-40%, ceea ce se traduce intr-un timp semnificativ mai mic de incarcare a acesteia.

4. Utilizarea sprite-urilor

Sprite-urile fac o mare diferenta atunci cand vine vorba de imaginile utilizate in design. Imagineaza-ti ca in timp ce in mod normal ai 20-50 de imagini de background, de la iconite la gradienti, ai putea avea o singura imagine care sa le contina pe toate. Sa zicem ca ai 20 de imagini a cate 10K = 200K. Daca le combini pe toate intr-o imagine mai mare poti obtine 150K. In loc de 20 request-uri vei avea doar 1 request, iar in loc de 200K downloadati vei avea doar 150K. Utilizarea sprite-urilor este mai complicata insa acestea aduc un beneficiu major proiectelor online. Toate proiectele noastre utilizeaza sprite-uri. Exemple:

• Davo clothing
• Executor judecatoresc Bucuresti
• SINO acupunctura

5. Utilizarea AJAX si incarcarea resurselor de tip social plugin dupa incarcarea aplicatiei la utilizator

JS incarcat asincron:

(function() {  	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();

Aceasta este o bucata de cod dintr-un script Google Analytics. Elementul