Css Sprite tekniği ile Web projelerinde performans artışı sağlama.
Web projelerin'de HTTP istek sayısını azaltarak performans artışı sağlamak için uygulanacak yöntemlerden biride
CSS Sprite tekniğidir.Bir web sayfası tasarladığınızı düşünelim ve bu sayfada'ki bir çok alanda ufaklı büyüklü resim ler gösterdiğinizi düşenelim. Böyle bir durumda her bir resim'i bu objelere tek tek linklemeniz gerekecektir.Kullanıcılarınızda bu sayfayı görüntülemek istediğinde sayfanızda ki her resim için sunucuya tek tek istek gönderilecektir. Sayfanızdaki istek sayısı ne kadar fazla olursa sayfanız normalden daha yavaş ve daha geç yüklenecektir.
Bu durumun önüne geçip ,sayfanızın daha hızlı yüklenmesini istiyorsanız sunucudaki istek sayısını azaltmanız gerekmektedir.
CSS Sprite tekniğide sunucuya giden istek sayısını azaltmak için tasarlanan bir yöntemdir.Neyse konuyu fazla dağıtmadan örneğimiz üzerinden ilerleyelim.Sayfadaki parça parça olan resimlerin tek bir resimde birleştirildiğini düşünürsek.Sunucuya giden istek sayısı otomatikmen sayfadaki resim sayısı kadar azalacaktır.Bunun bize ne kadar bir etksi , faydası olur diye düşünmek gerekirse kullanıcı sayısı az olan sistemlerde kullanılması durumunda gözle görülebilecek bir performans artışı sağlamayacaktır fakat kulanıcı sayısı onbinler , yüzbinler veya daha fazla aktif kullanıcısı bulunan sistemlerde gerçekten çok büyük bir performans artışı sağlayacaktır.
CSS Sprite kullanan firmaların başında Facebook , Google , Amazon gibi büyük ve çok kullanıcılı şirketler yer almaktadır.
Peki tek bir resmi sayfamdaki resim gösterilen objelere nasıl dağıtıcam ?
Bunun için sayfadaki resim gösterilen objelere tek bir resim üzerinden koordinat vererek bu işlemi gerçekleştirebiliriz.
Yandaki resimdeki ikonlar muhtemelen hepinize tanıdık gelecektir.Bunlar facebook'a her girdiğimizde gördüğümüz facebook ikonları.Facebook gibi milyonlarca kullanıcısı olan bir sistem için bu yöntem çok büyük bir performans artışı sağlayacaktır.
Şimdi yandaki resmi kullanarak kendimiz için ufak bir uygulama yapalım.Yandaki resimde bulunanan simgeleri ekrana atacağımız 5 farklı "div" elementi üzerinde pozisyon bilgisi vererek yan yana gösterelim.Bunun ince resimdeki pozisyonları ,resimlerin width , height bilgilerini ayarlayan CSS Class lar yazalım
Aşağıdaki koordinat bilgileri hesaplanırken eğer gösterilmek istenen resim resim bütünün 25 piksel solunda ve 19 piksel aşağısında ise CSS cssSpriteStyleImage2 class ında gösterildiği gibi ayarlanır.
<style type="text/css">
#tableCssSprite div
{
background-image: url('../Images/image.jpg');
width: 25px;
height: 20px;
}
.cssSpriteStyleImage1 /*1. Resim
Koodinat vb Bilgileri*/
{
background-position: 25px
0px;
}
.cssSpriteStyleImage2 /*2. Resim
Koordinat vb Bilgileri*/
{
background-position: 25px
-19px;
}
.cssSpriteStyleImage3 /*3. Resim
Koordinat vb Bilgileri*/
{
background-position: 25px
-35px;
}
.cssSpriteStyleImage4 /*4. Resim
Koordinat vb Bilgileri*/
{
background-position: 25px
-51px;
}
.cssSpriteStyleImage5 /*5. Resim
Koordinat vb Bilgileri*/
{
background-position: 25px
-69px;
}
</style>
|
Web tasarımımızıda aşağıda gösterildiği gibi ayarlarsak yan yana 5 tane div ve her bir div'de büyük resimde gösterilen ufak resimler görülecektir.
<html>
<head>
<title></title>
</head>
<body>
<table id="tableCssSprite">
<tr>
<td>
<div
id="dvImage1"
class="cssSpriteStyleImage1">
</div>
</td>
<td>
<div
id="dvImage2"
class="cssSpriteStyleImage2">
</div>
</td>
<td>
<div
id="dvImage3"
class="cssSpriteStyleImage3">
</div>
</td>
<td>
<div
id="dvImage4"
class="cssSpriteStyleImage4">
</div>
</td>
<td>
<div
id="dvImage5"
class="cssSpriteStyleImage5">
</div>
</td>
</tr>
</table>
</body>
</html>
|
Uygulama Ekran Çıktısı aşağıdaki gibi olacaktır.
Eğer her bir resim için tek tek yol verecek olsaydık bu her bir resim için sunucuya iste gönderilecekti.Ancak bir resim üzerinden koordinat yöntemiyle birden fazla resme yol verdiğimiz için, sunucuya sadece tek bir istek gidecektir.Sunucuya giden her istek sunucun cevap süresinin uzamasına dolayısıyla kullanıcının beklemesine sebep olacaktır.Koordinat yöntemiyle sunucuya giden istek sayısını azaltarak en kolay performans artışını sağlayabiliriz.
HTML
|
Diğer
|
|
Yahoo!
|
%10
|
%90
|
Google
|
%25
|
%75
|
MySpace
|
%9
|
%91
|
MSN
|
%5
|
%95
|
eBay
|
%5
|
%95
|
Amazon
|
%38
|
%62
|
Youtube
|
%9
|
%91
|
CNN
|
%15
|
%85
|
Yahoo! User Interface Blog sitesinin, "Performance
Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP
Requests" adlı makalesinden alıntıdır. Not : Yukarıdaki değerler, cache
varsayılmadan ve ortalama 2.5 Mbps internet bağlantı hızının test
sonuçlarıdır
Yukarıdaki tablo popüler bir kaç web sitesinin sayfaları oluştururken harcadıkları zamanı gösteriyor.HTML belgesinin indirilme süresi %5 ile %38 arasında zaman alırken diğer parçaları(resimler, script ve style dosyaları) yüklemek %62 ile %95 arasında zaman alıyor.Yani HTTP istek sayısını azaltarak,gözle görülür seviyede performans artışı sağlayabiliriz.
(İstatistiki bilgiler kullanıcının tarayıcı modeli ve gönderilen isteğin tipine göre değişebilir.)
Bunun için yardımcı bir bilgi verelim.
CSS Sprite işlemi için özel olarak tasarlanmış Web Siteleri mevcut bu siteler aracılığıyla yüklediğiniz resim içerisindeki ufak resimlerin koordinatları , genişlik yükseklik değerlerini alabilirsiniz.(Google'da CSS Sprite Generator tarzında bir anahtar kelimeyle bu sitelere rahatlıkla ulaşabilirsiniz.)
Hiç yorum yok:
Yorum Gönder