Dacă tot sunt cu articole tehnice zilele acestea (de la lucrarea de disertaţie mi se trage) simt nevoia să vorbesc un pic despre optimizarea web. Aceasta constă în modificarea unui site astfel încât acesta să se încarce cât mai repede.

Evident, acesta este un domeniu vast şi despre aşa ceva se poate scrie lejer o carte. Nu vreau asta. Vin, însă, cu o idee, care, cel puţin în cazul meu, a funcţionat. Ideea constă în a muta chestiile statice de pe site direct în template-ul paginii, în codul sursă al acesteia, pentru că nu solicită serverul de baze de date cu aceleaşi interogări.

Să dau un exemplu. La Joomla! şi la alte CMS-uri, printre care, probabil, şi WordPress, există posibilitatea de a avea extensii. De exemplu blogroll-ul meu, care nu prea se schimbă, era generat de un modul care interoga severul de bază de date. La fiecare afişare se făcea această interogare, care rezulta în câteva sute de caractere, mereu aceleaşi, ce erau returnate.

Hai să spunem că nu ar fi grav (dar nici profesionist nu este), pentru că serverele actuale suportă foarte multe interogări pe secundă. Dar (şi aici intervine partea de fineţe) orice site are câteva părţi statice, care, însumate, returnează câteva mii de caractere, mereu aceleaşi. Ţinând cont că un server are, de obicei, mai multe site-uri, se ajunge la câteva mii, poate zeci de mii de caractere pe secundă.

Iniţial problemele legate de optimizare nu se observă pe site-urile mici, însă, odată cu creşterea traficului pe site şi a dimensiunilor acestor site-uri, problemele încep să apară şi se manifestă sub enervanta formă de site ce se încarcă greu.

Ce se poate face?

• Cei de la hosting pot să optimizeze serverul (de obicei se face treaba asta).

Ce poţi face tu pentru a-ţi optimiza site-ul astfel încât să se încarce mai repede?

• Poţi activa mecanismul de cache din CMS.
• Poţi introduce chestiile statice direct în template, chestii statice precum: bannere, text, blogroll-ul, etc.

Teoria mea:

Chestiile băgate direct în template-ul site-ului se execută mai repede (de către webserver) decât cele care trebuie să interogheze baza de date pentru a returna un rezultat, pentru că ele returnează direct rezultatul. Cel mai bine este să tratezi serverul de hosting ca şi cum ar fi al tău: nu vrei să-l încarci nenecesar.

Ştiu că teoretic interogarea durează puţin însă pe serverele aglomerate sau cele de tip shared (mai mulţi pe acelaşi server) cred că se observă. Cel puţin mie unul aşa mi se pare. Şi nu cred că sunt singurul.

Cum se face? Simplu. Să presupunem că avem un banner al cărui cod este:

<a href="ceva"><img src="sursa_imaginii" /></a>

Putem introduce acest cod direct în template, în poziţia care ne interesează. Pentru asta deschidem site-ul în browser şi selectăm opţiunea de a vedea sursa paginii. Acolo ne uităm unde apare codul sursă de la banner.

Într-o altă fereastră (sau într-un alt tab) deschidem aplicaţia care ne permite editarea template-ului (temă, etc). Copiem tot conţinutul template-ului şi-l salvăm într-un fişier pe hard disk. Apoi căutăm locaţia unde am vrea să punem banner-ul, astfel încât să se încarce direct, fără să mai fie returnat din baza de date.

Ştiu că aici sună vag, însă varietatea extrem de mare de CMS-uri şi template-uri specifice nu-mi permite să intru mai în detalii. Pot, totuşi, să spun că acestea au o logică comună. De exemplu toate au <div>-uri, sau diviziuni, ce conţin tot felul de chestii. Fiecare astfel de <div> are, în general, o denumire specifică sau o clasă (<div class="care_este">), ce ne ajută să ne dăm seama de rolul şi funcţia sa.

De exemplu multe template-uri au <div class="right"> şi care la rândul ei conţine mai multe diviziuni. Acolo se pune, de exemplu, blogroll-ul. În acest div copiem codul pe care l-a returnat serverul către browser şi care a fost afişat, din sursa paginii.

Exemplu. Să presupunem că avem codul sursă al template-ului ceva de genul:

[…]

<div class="right">

    <div class="extension_holder_1">

        <?php [… aici avem codul specific CMS-ului ce execută una sau mai multe extensii…] ?>

    </div>

    …

    <div class="extension_holder_2">

        <?php [… aici avem codul specific CMS-ului ce execută una sau mai multe extensii…] ?>

    </div>

    …

</div>

[…]

Observăm că una (sau mai multe) dintre extensii este apelată în cod (paranteza dreaptă). Pentru a introduce codul static în template este suficient să intorducem codul acesteia în locul în care dorim să se afle, rezutând ceva de genul:

[…]

<div class="right">

    <div class="extension_holder_1">

        <a href="ceva"><img src="sursa_imaginii" /></a>

    </div>

    …

    <div class="extension_holder_2">

        <?php [… aici avem codul specific CMS-ului ce execută una sau mai multe extensii…] ?>

    </div>

    …

</div>

[…]

Sper că se observă modificarea din primul container (div). Se mai observă că banner-ul generic a fost pus deasupra extensiei ce se execută folosind baza de date. Evident, se poate pune şi dedesubt. Şi mai evident este faptul că aveţi nevoie de cunoştinţe de HTML pentru aceasta. Vestea bună este că HTML-ul este uşor de învăţat (mie mi-a luat câteva zile, la un curs online şi gratuit).

Nu cred că aş mai putea avea vreun site fără să-l optimizez. Mai mult, am ajuns să optimizez şi pozele, astfel încât le salvez la o calitate de 95% (pentru imaginile cu extensia .JPG). Se încarcă mai repede, consumă mai puţină bandă (deşi aş avea de unde), sunt mai mici şi ocupă mai puţin spaţiu.

În principiu cam atât am de spus despre acest subiect. Liber la întrebări şi sugestii.