Neticaret'in üreticisi Eçözüm Bilgi Teknolojileri A.Ş. Visa Avrupa ‘ya kayıtlı tescilli temsilcidir.
Css Sprite Nedir - Nasıl Kullanılır ? Css Sprite Nedir - Nasıl Kullanılır ?

css spriteCss sprite, e-ticaret sitenize giriş yaptığınız zaman sitenize çağrılmakta olan bütün resimleri bir araya getirerek tek bir resim üzerinden çağırılmalarını sağlayan tekniktir. Direk olarak sitenizin açılış hızını arttırıcı ve buna paralel olarak arama motoru optimizasyonunuzdan daha yüksek performans almanızı sağlamaktadır.

Css sprite tekniğinin asıl amacı, ana sayfanızda bulunan resimlerin tek bir dosya içerisinden hızlı bir şekilde çağırılmasıdır. Bu sayede bu tekniği kullanacağınız resimler için tek tek kod yazmanıza gerek kalmamakta ve aynı zamanda yapılan tek bir sorgulama sayesinde statik olarak sitenizde kullanmakta olduğunuz resimler gösterilebilmektedir.

Css Sprite Tekniğinin Önemi

E-ticaret sitelerinizin ana sayfasında bulunan resimleri dinamik olarak yani zamanla değiştirilir bir şekilde kullanırsınız. Dinamik resimlerinizin yanında statik resimlerinizin yani kalıcı ya da uzun zamanlı kullandığınız resimlerde bulunmaktadır. İşte bu resimleri tek bir alanda toplayarak aşırı kod kalabalığı ve sorgu sayısından kurtulursunuz. Bu sayede sitenizin daha hızlı açılmasını ve resimlerin görüntülenebilmesi için geçen sürenin kısalmasını sağlayabilirsiniz.

CSS Sprite Neden Önemlidir ?

Anasayfanızda kullandığınız resim sayısı çok fazla ise, arama motorları ya da diğer kaynaklardan sitenize giriş yapan kullanıcılar beklemek zorunda kalacaklardır. Çoğu zaman kullanıcılar bu bekleme süresine dayanamayarak sitenizden çıkış yaparlar. Bu durumun yanı sıra sizin sitenizle beraber tıklanmış olan diğer bir site açılmış ise ilk olarak açılan siteye bakılacak ve o siteden ürün satın alan kullanıcı sayısı da daha fazla olacaktır.

Bir Örnekle CSS Sprite Tekniğinin Önemi

Arama motorlarında, aynı kelimede, birinci ve ikinci sırada bulunan iki siteye aranma motorlarından gelen ve sitede kalan kullanıcı sayıları karşılaştırılmıştır. Birinci sıradaki sitenin anasayfa açılma hızı ikinci sırada bulunan siteye göre oldukça düşüktür ve bu durum sitede bulunan fazla resimlerden kaynaklanmaktadır. Yapılan araştırma sonucuna göre arama motorlarından bu iki siteye giriş yapan toplam kullanıcı sayısının %70’i ikinci siteyi tercih etmiştir. Sadece anasayfanın yavaş açılmasından dolayı arama motorlarında 2. sırada olan bir site 1. Sırada olan siteden daha fazla hit sağlamıştır. Bununla birlikte sitenin açılma hızı genel olarak SEO’ya da etki etmektedir. Yani hem kullanıcıların sitede kalmalarını sağlayan hem de arama motorları nezlinde olumlu bir etkiye sahip olan tekniktir.

Css Sprite Tekniğini Sitenize Nasıl Uygulayabilirsiniz

Css sprite tekniğini sitenize uygulayabilmek için CSS bilginiz ve aynı zamanda istediğiniz resimleri düzenleyebilmeniz için resim düzenleme programlarını (Photoshop vb..) kullanabiliyor olmanız gerekir. Dilerseniz Neticaret bünyesinde bulunan uzman grafik tasarım ekibi Negrafik ile birlikte sitenizde buluna resimler için css sprite tekniğinin uygulanmasını sağlayabilirsiniz. Bununla birlikte yukarıda anlatılan programlar ile ilgili bilginiz var ise biraz sonra gösterilecek olan online css sprite tekniğini uygulayabileceğiniz siteden yardım alarak bu tekniği e-ticaret sitenize uygulayabilirsiniz.

Css Sprite Tekniği Online Site Üzerinden Uygulama

http://www.spritecow.com/ adresine girdikten sonra background alanı saydam olacak şekilde hazırladığınız resim topluluğunu siteye ekleyiniz. Bu işlemi gerçekleştirdikten sonra kullanmak istediğiniz alanı sol üst kısımda bulunan Select Sprite butonunu kullanarak seçiniz. Bu işlemi gerçekleştirdiğinizde sitenin hemen alt kısmında sizlere css kodları verilecektir.

css sprite teknigi

Neticaret e-ticaret paketlerini denemek ve hem sunucu bazlı hem de site içi seo bazlı üstün performans gösteren e-ticaret sistemini incelemek isterseniz aşağıda bulunan demo talebi butonuna tıklayabilirsiniz.

Paylaş

Facebookta Paylaş Tweetle