lostyazilim
tr.link

Css Sprite ile blog açılış hızımızı arttıralım

61 Mesajlar 20.145 Okunma
acebozum
tr.link

Vee Vee WM Aracı Kullanıcı
  • Üyelik 31.03.2012
  • Yaş/Cinsiyet 33 / E
  • Meslek seo
  • Konum
  • Ad Soyad A** K**
  • Mesajlar 181
  • Beğeniler 3 / 30
  • Ticaret 1, (%100)
teşekkürler faydalandım :)
 

 

elektronikssl
webimgo

sametweb sametweb WM Aracı Kullanıcı
  • Üyelik 29.08.2011
  • Yaş/Cinsiyet 34 / E
  • Meslek software developer
  • Konum ABD
  • Ad Soyad S** M**
  • Mesajlar 615
  • Beğeniler 52 / 196
  • Ticaret 1, (%100)
Kullandığım bir yöntem, webde anlatanlar da var.

Bir arkadaş uğraşamam felan demiş. Sitenizin hiti yüksekse eğer kesinlikle kullanmanızı öneririm. Çünkü sistemin şöyle bir avantajı var. Siz en küçük ikon, logo, arkaplan vs. gibi resimleri ayrı ayrı kaynaklardan sunduğunuz zaman, her resim için sunucunuza ayrı bir istek gönderilir. Ama tek kaynaktan sunup CSS sprite yöntemiyle resimleri gösterdiğiniz zaman, resim tek seferde çekilir ve ondan sonra sunucu değil CSS devreye girer ve her resmi gerektiği yere yerleştirir. Düşünün, sitenizdeki 20 resmi birleştirseniz, günlük hitiniz 10.000 olsa, birleştirmeden önce sitenize sadece resimler için 200.000 sorgu giderken, birleştirdikten sonra sadece 10.000 sorgu gidecek. Bu da sizin hem CPU kullanımızı azaltacak, hem de site açılışınızı hızlandıracak, resimlerin yüklenmesini kolaylaştıracak. Hatta resimler birleştirildikten sonra, 20 resmin toplam kapladığı yerden daha az yer kaplayacağı için trafiğinize (bandwith) bile katkısı olacak.

Hasıl-ı kelam, uğraşmaya değer :)
 

 

React Dersleri YouTube Kanalı
https://www.youtube.com/c/reactdersleri

Veysel Karaselek Veysel Karaselek Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 10.03.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum Konya
  • Ad Soyad ** **
  • Mesajlar 135
  • Beğeniler 85 / 21
  • Ticaret 6, (%100)
Biraz uzun oldu gibi :) Güzel anlatım olmuş.
 

 

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)
Bu adım önemli dediğin 5.resim bozuk düzeltebilir misin?
 

 

wmaraci
wmaraci

mesuttt mesuttt WM Aracı Kullanıcı
  • Üyelik 24.09.2011
  • Yaş/Cinsiyet 32 / E
  • Meslek Webmarter
  • Konum Diğer
  • Ad Soyad M** S**
  • Mesajlar 382
  • Beğeniler 24 / 42
  • Ticaret 0, (%0)
şimdi deniyorum umarım olur, paylaşım için teşekkürler :)

Please wait, this may take a little while if you upload big files.

10 dk dır bekliyorum henüz resimleri upload aşamasını geçemedim :D
 

 

furkandemirci furkandemirci SEO Kullanıcı
  • Üyelik 17.02.2013
  • Yaş/Cinsiyet 27 / E
  • Meslek SEO
  • Konum Erzurum
  • Ad Soyad F** D**
  • Mesajlar 927
  • Beğeniler 378 / 157
  • Ticaret 17, (%100)
Teşekkürler..
 

 

##

mesuttt mesuttt WM Aracı Kullanıcı
  • Üyelik 24.09.2011
  • Yaş/Cinsiyet 32 / E
  • Meslek Webmarter
  • Konum Diğer
  • Ad Soyad M** S**
  • Mesajlar 382
  • Beğeniler 24 / 42
  • Ticaret 0, (%0)
http://tr.spritegen.website-performance.org/ bu sitede işe yarıyor beyler tavsiye ederim :)
 

 

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)
Bu teknik anlatımı sevdim ancak wordpress için de yardım edebilecek yok mu bir ustamız? Wordpress blogları için wordpress tabanlı siteyi kastediyorum.
 

 

tranceportex tranceportex WM Aracı Kullanıcı
  • Üyelik 11.03.2013
  • Yaş/Cinsiyet 39 / E
  • Meslek ögrenci
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 1
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)
çok güzel bir makale teşekkürler.daha önce bir temamda yaptım bunu.ama simdi farklı bi temada ugraşıyorum

c)3 numaralı kısımdaki div class html kodlarını ise şu şekilde blog şablonumuza ekliyoruz.Örneğin birinci kod için Ctrl+F yardımı ile postheadericonuw kelimesini arıyoruz;(siz tabii kendi resimlerinizin adı ile arama yapacaksınız)
Mesela şablonumuz içerisinde(Widget şablonlarını genişleterek) şu şekilde bulmuş olalım.
Kod:
|


Şimdi kırmızı olarak işaretlediğim bölümü,üstteki resimde 3 nolu bölümde yer alan div class html kodlarından eşi ile değiştiriyoruz.

Kod:

Sonuç olarak şöyle bir görüntü oluşacak;

Kod:
|




şimdi bu c bölümündeki
|
olması gereken kısım

bende bu şekilde

.caixa {
margin:0;height:auto;
padding:1px;border:1px solid #CFCFCF;
background: #fff url(http://3.bp.blogspot.com/_YGpl3rQPSzI/SuTk6g46QKI/AAAAAAAAOwM/A5eOZOiYARo/s1600/post.png) repeat-x top left;
}



buraya senin werdigin


div kodunu nasıl koyucam.
bilen bir arkadasım yardımcı olabilirse cok sevinirim.
 

 

shubuo1012 shubuo1012 WM Aracı Kullanıcı
  • Üyelik 30.08.2013
  • Yaş/Cinsiyet 42 / E
  • Meslek BİLGİ İŞLEM
  • Konum İstanbul Avrupa
  • Ad Soyad A** Ö**
  • Mesajlar 29
  • Beğeniler 0 / 7
  • Ticaret 0, (%0)
konu hala açıksa wp sitem için ücretli destek taleblerini beklerim özel msj ile

Ek Olarak: konu açıkmı
 

 

Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al