SERVICII DE OPTIMIZARE SEO
Serviciul de optimizare SEO, se referă la partea tehnică a website-ului, serviciu care trebuie aplicat dupa partea de web design. Noi vom optimiza imaginile din site-ul Dvs., fişierele CSS şi JavaScript, tag-urile H1, H2, descrierile, titlurile şi vom echilibra conţinutul paginilor pentru o densitate cât mai bună a cuvintelor cheie sau expresiilor.

Sprite CSS – Imagini in Sprite-uri CSS

Sprite CSS – Imagini in Sprite-uri CSS

Sprite CSS – pentru ca suntem specialisti in optimizarea site-urilor pentru o incarcare mai rapida in browsere si eliminarea erorilor, incercam sa explicam si ce inseamna „Sprite CSS”. Daca ati facut teste de optimizare cu Page Speed, cu siguranta ati avut indicatii de combinare a imaginilor. Aceasta modalitate de combinare a imaginilor mici si in special imaginile din template, reduc cererile HTML si site-ul se incarca mult mai repede. Imaginile care se incarca separat, se vor incarca dintr-o singura imagine cu valori X si Y. Acestea se pot defini in mod automat cu diverse tool-uri din Internet sau chiar cu „Paint”, de la Windows.

Aceasta combinare de imagini si localizarea in imaginea sprite (X/Y), cu optiunea CSS backgroun-pozition, nu este foarte usoara insa, daca cititi cu atentie acest tutorial, veti reusi sa aveti un site mult mai performant. Am sa iau ca exemplu un website de oferte cazare, care nu a fost optimizat si care incarca cateva imagini din CSS. Mai jos, aveti imaginea cu problemele din site:

Dupa cum vedeti in imaginea de mai sus, imaginile pe care ar trebui sa le combin sunt in numar de 9. Daca incarcarea imaginilor din CSS, sunt in numar mai mic de 5, erorile sau indicatiile de la Page Speed, nu vor mai aparea insa, este foarte bine sa le coombinam pe toate. Pentru inceput, voi scoate din site imaginile care trebuiesc combinate si le voi adauga cu Photoshop, intr-o singura imagine. Iata cum arata imaginea dupa combinare:

Codul vechi din fisierul CSS, arata asa:

span.searchfor{background:url(http://cdncazare.cazare-pro.com/cazare/skins/cazare/search_forbg.png) no-repeat left top;}

Noul cod va arata asa:

span.searchfor{background-image: url(„http://oferte-cazare.biz/imagini/oferte-cazare-sprite.png”); background-position: -10px -10px;}

Dupa crearea imaginii oferte-cazare-sprite.png, am salvato si am adaugato in folderul /imagini de pe server. Daca observati, calea catre imaginea respectiva este http://oferte-cazare.biz/imagini/oferte-cazare-sprite.png. Toate celelalte imagini vor avea acelasi URL, vor fi diferite doar locatiile in imaginea oferte-cazare-sprite.jpg si mai exact, prima imagine pe care am inlocuito a fost search_forbg.png. In noua imagine ea se gaseste la – background-position: -10px -10px; Urmatoarea imagine va fi la – background-position: -10px -60px;, adica ceva mai jos, imaginea cu steluta.

Dupa terminarea acestei operatii, am facut din nou un test cu Page Speed si procentul meu a crescut de la 81%, la 91%. Din punctul meu de vedere este o realizare. Daca incercam sa optimizam site-ul si tinem cont de anumite standarde, vom avea o incarcare rapida in browser si vom elimina chiar si erorile din site. Iata imaginea de final:

Optimizare SEO
office@opti-seo.ro

Dorel Tanase - specialist in optimizare si promovare pentru motoarele de cautare. In domeniul SEO, din anul 2004. In anul 2007, am inceput sa creez pagini Web, in HTML si am urmat cursul dezvoltarii Internet-ului, cu toate CMS-urile aparute noi, incepand cu Mambo, Joomla, WordPress si apoi celelalte CMS-uri. Website-uri de vizitat: http://computerscom.ro, http://web-design.co.com, http://on-seo.co.uk

4 Comentarii
  • Romania SEO
    Adaugat la 11:39h, 11 ianuarie Răspunde

    Am creat o imagine si un fisier CSS, cu cerintele tale. Descarca: http://opti-seo.ro/cereri-sprite/mamica.rar

  • Mami
    Adaugat la 09:51h, 11 ianuarie Răspunde

    Poti la site-ul din semnatura sa pui imaginile din template intr-un css sprite, astfel incat totul sa arate bine? Platesc cat este cazul

  • Toma
    Adaugat la 14:40h, 11 martie Răspunde

    Si ce sa intmplat cu cel are care au background(‘bg.png’) repeat; acelea nu le poti face cu sprite. Ar trebuie sa ieie in considerare „reapt” cand face scorul

  • Romania SEO
    Adaugat la 19:11h, 11 martie Răspunde

    Nu prea am inteles ce spui! Orice imagine se poate pune intr-un sprite, nu are importanta ce imagine este.

Adaugati un comentariu la acest articol