Cum faci o pagina web mai rapida – tehnici speciale de optimizare web

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:

<?php
$html = '<p>test</I>';

$tidy = tidy_parse_string($html);
$tidy->cleanRepair();

echo $tidy;
?>

Rezultatul:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
</head>
<body>
<p>test</p>
</body>
</html>

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:

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 <script> este generat dinamic la terminarea incarcarii paginii, iar apoi sursa este transferata asincron. Aceasta tehnica poate fi utilizata pentru incarcarea plugin-urilor externe precum facebook like buttons, g+ buttons, disqus comments, etc.

In acest moment foarte multe site-uri sunt incetinite de utilizarea excesiva a acestor plugin-uri, care utilizeaza resurse destul de mari.

De ex. Facebook are librarii JS care au pana la 500KB. Acest lucru poate duce la un timp foarte mare de incarcare.

Problema caching-ului

Toate aceste tehnici determina ca JS-ul si CSS-ul sa fie cache-uite in browserul utilizatorului. Atunci cand modifici de exemplu pozitia unor elemente CSS, schimbarea nu se propaga la utilizatorii care revin pe site.

In acest caz utilizeaza versionarea fisierelor. Noi utilizam de exemplu nume de forma www.v1.2.css, js.v2.3.js. Astfel, cand se face un update major al acestor fisiere, browserul utilizatorului va intelege ca s-a schimbat denumirea fisierului CSS/JS si il va redownloda. Problema caching-ului a fost rezolvata.

Hint: CTRL + F5 face reload la browser, fortand redownload-ul resurselor utilizate de pagina

Concluzii

Exista foarte multe tehnici de optimizare ce pot fi utilizate in dezvoltarea proiectelor web. Fiecare dintre ele aduce un plus de performanta site-urilor pe care le creezii. Important este sa incepi sa te documentezi si sa le aplici treptat in proiectele dezvoltate. Astfel vei creste calitatea proiectelor online.

In cadrul BWI utilizam astfel de tehnici pentru ca, desi inseamna timp suplimentar acordat fiecarui proiect in parte, aduc un plus-valoare proiectelor web de CALITATE!

Resurse

  • http://developer.yahoo.com/yslow/
  • http://developer.yahoo.com/performance/rules.html
  • http://tools.pingdom.com/fpt/
  • http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  • http://codeigniter.com/user_guide/general/profiling.html
  • http://codeigniter.com/wiki/Carabiner/
  • http://php.net/manual/en/book.tidy.php
  • http://css-tricks.com/css-sprites/

Alexandru David

Comments are closed.