Optimizarea servirii ad-urilor

Sunt convins că orice utilizator de internet este agasat de reclame. Și asta deoarece, dacă nu ne deranjează vizual (overlayere imense, nesimțite), ne papă timp. Și asta deoarece reclamele sunt servite (cu mici excepții) de pe servere externe. Iar ca posesor de site/blog, un timeout al ad serverului înseamnă câțiva vizitatori pierduți. Și hai să-ți spun de ce:

Puțină teorie

Majoritatea reclamelor sunt încărcate cu un cod foarte simplu:

<script src="delayed.js.php" type="text/javascript" charset="utf-8"></script>

delayed.js.php este url-ul spre ad server. Problema care apare se datorează modului în care se întâmplă încărcarea paginilor: pentru a respecta diverse dependențe (de ex. vrei să se încarce întâi jQuery, după aceaea fișierul tău cu script-uri, nu?), browserul blochează orice activitate în momentul când dă de un cod asemănător cu cel de mai sus. Altfel spus, orice este după un script src este executat DUPĂ ce se primește un răspuns de la server.

De cele mai multe ori e ok. Dar în cazul în care serverul nu răspunde, site-ul tău este blocat pentru 10-20-30 secunde. Adică până browserul își dă seama că serverul are buba și nu poate încărca nimic.

delayed.js.php este un script foarte simplu (atât de simplu încât ‘script’ mi se pare ușor forțat) care simulează un delay prea mare. Iată codul din script:

Așa, și?

Statisticile spun că dacă un site nu se încarcă în 5-10 secunde, ai șanse destul de mari să pierzi vizitatorul. Și cum nimeni nu vrea să piardă vizitatori…

Soluția

Soluția este încărcarea asincronă a scripturilor externe. Sunt mai multe metode de a face acest lucru, dar cel mai elegant mi se pare modul în care se încarcă Google Analytics. Adică încarcă scriptul când poate, fără să blocheze pagina. În cazul în care scriptul nu se încarcă… Asta e. Nu se întâmplă nimic, site-ul este afișat complet, userul nu așteaptă inutil.

Pasul 1

Să presupunem că avem codul următor, furnizat de agenția de publicitate:

<script type="text/javascript" language="javascript" src="http://www2.glam.com/app/site/affiliate/viewChannelModule.act?mName=viewAdJs&affiliateId=302620505&adSize=728x90"></script>
Pasul 2

Șterge codul de mai sus, dar salvează undeva valoarea atributului src ( http://www2.glam.com/app/site/affiliate/viewChannelModule.act?mName=viewAdJs&affiliateId=302620505&adSize=728x90 )

<script type="text/javascript" charset="utf-8">
/* <!&#91;CDATA&#91; */
	(function() {
		var myAd = document.createElement('script');
				myAd.type = 'text/javascript';
				myAd.async = true;
	  myAd.src = 'URL_AD_SERVER';
		(document.getElementsByTagName('head')&#91;0&#93; || document.getElementsByTagName('body')&#91;0&#93;).appendChild(myAd);
	})();
/* &#93;&#93;> */
</script>
Pasul 3

Se înlocuiește URL_AD_SERVER cu link-ul salvat, astfel încât vei avea:

myAd.src = 'http://www2.glam.com/app/site/affiliate/viewChannelModule.act?mName=viewAdJs&affiliateId=302620505&adSize=728x90';

Salvezi și.. cam asta e :)

Același fișier php, același delay, o abordare ușor diferită. Rezultatul?

Pagina se încarcă fără să aștepte fișierul extern. Mi se pare un pic mai bine. Ție nu? Partea bună este că merge cam pe toate browserele: IE6+, Safari, Opera, Chrome și desigur, Firefox.

Iată cum, cu un fragment de cod poți îmbunătăți masiv experiența utlizatorului și reduci „riscul” ca vizitatorul să folosească Adblock (sau ceva asemănător). Eu, de exemplu, folosesc Adblock doar pe site-urile cu reclame nesimțite (realitatea e cel mai bun exemplu) și pe site-urile cu timeout mare al scripturilor.

14 Comentarii to “Optimizarea servirii ad-urilor”

  1. Nu e rău. :)
    Merită încercat. Diseară o să mă joc și eu cu încărcarea unor js-uri. :)

  2. Staicu Ionuț-Bogdan

    Bine, nu știu dacă se pretează în cazul în care ai ceva dependențe. Eu n-aș încărca jQuery prin metoda asta :D

  3. Pare eficienta metoda ta de incarcare a scripturilor externe care nu creaza dependente. O sa o incerc cu siguranta. Multumesc.

  4. Foarte frumos blogul. Design frumos, articole bune, tematica pe gustul meu. Bravo ;).

    Doar o curiozitate am: tema WP e luata de pe net free sau e unicata, facuta de un designer la cererea ta?

    LE: si mai esti si constantean de-al meu :))))). Doar ce ti-am citit “About me”-ul.

  5. Staicu Ionuț-Bogdan

    Mulțumesc de aprecieri :)

    Tema este făcută de mine (design + cod)

  6. Banuiam eu ca era prea frumoasa si cu stil ca sa o gasesti free pe net.

  7. daca pui scriptul asta in head restul paginii se va downloada si nu va astepta parsarea + intepretarea lui?

  8. Staicu Ionuț-Bogdan

    daca pui scriptul asta in head restul paginii se va downloada si nu va astepta parsarea + intepretarea lui?

    Exact :)

  9. dar tot blochezi downloadul paralel nu? nu inteleg ce e cu prop async.

  10. Staicu Ionuț-Bogdan

    Ionuț, tocmai asta e șmecheria. Că nu mai blochează nimic. Se încarcă fix cum poate și se execută când îl downloadează. Tocmai din această cauză metoda e bună pentru reclame :)

  11. ok, nu stiam de chestia asta cu async, e standard ceva?

  12. Staicu Ionuț-Bogdan

    Nu e standard. Dar e cross browser (inclusiv IE6).

    Iar dacă cei de la google consideră că e fiabil… înseamnă că este :D

  13. Stiu ca e un post mai vechi dar nu pare sa functioneze cu eMag Profitshare. Stii cumva de ce? Gresesc eu undeva?

Show trackbacks
  1. […] scripturile asincron. Cam cum am scris aici. Pentru mai multe scripturi, vezi […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter