25 Aralık 2014 Perşembe

Css Sprite ile Blog Açılış Hızını Arttırmak

Yorum yok
Css sprite temanızda kullandığınız resimlerin tek bir resim dosyası içerisinde sıralanarak birleştirilip kullanılmasıdır. Pek çok resmi farklı farklı kaynaklardan çağırmak yerine tek bir yerden çağırılarak hız artışı sağlanır. Sitenizin açılış hızının ise hem ziyaretçiyi bekletmeme açısından hemde ziyaretçi sayınızın artışı bakımından büyük bir öneme sahiptir. Şimdi resimli anlatıma geçelim.

1. Adım: http://gtmetrix.com sitesine giderek sitemizin açılış hızını hesaplıyoruz.
 
2. Adım: Combine images using CSS sprites linkine tıklayarak genişletiyoruz. Yeni bir klasör açıp bu linklerde verilen tüm resimleri bu klasörde toplayınız. (Eğer yeşil renkteyse bu bölüm bir sıkıntınız yok demektir. Eğer kırmızı ve ya turuncu renkte gösterilmişse sıkıntı var demektir. Bu sıkıntıyı gidermek için şimdi dediklerimi yapmalısınız.)
 
Yukarıda görmüş olduğunuz gibi bir klasörde topladım.
3. Adım: http://css.spritegen.com/ adresine açıyoruz. Dosya seç bölümünden tüm resimlerimizi seçiyoruz. Ardından en altta yer alan Create Sprite butonuna tıklıyoruz.
Tıkladıktan sonra web site bize 3 kısım verecektir. Bunlar Your image, Your CSS  ve Your HTML kısımlarıdır. Bu kısımlardan ilkinde resim üzerinde sağa tıklayıp resmi bilgisayarımıza kaydediyoruz. Ardından resmi hostumuza yükleyip linkini kopyalıyoruz. (Linkini alma işlemini Yeni yayın -> Resim Ekle -> Seçilenleri ekle -> Html  yoluyla linki bulabilirsiniz.)  Ardından kopyalamış olduğumuz linki Your CSS kısmındaki png.png yerine yapıştırıyoruz. Bir nevi adresimizi güncellemiş olduk.

Şablona tıklayıp HTML'yi düzenleye tıklıyoruz. Şablonu biçimlendire tıklıyoruz. Ctrl + F tuşuna basıp ]]></b:skin> kodunu aratıyoruz. Bu koddan hemen önce Your CSS kodunu kopyalayıp bu alana yapıştırıyoruz. Tabii ki resmin güncellenmiş linkini girdikten sonra bu işlemi yapıyoruz.
4. Adım: Your HTML kısmında 5 farklı kod var. Bunların hepsinin isimlerini mesela subscribe-netvibes şeklinde aratıyoruz.
Arattıktan sonra <img expr ile başlayan bir kısım var. Bu kısımın tamamını silip Your HTML kısmındaki ilk satırdaki kodu kopyalayıp yapıştırıyoruz. Bu işlemi tüm resimler için yapıp site hızımızı tekrar test ettiğimizdeki sonuca bakalım :)


0 yorum :

Yorum Gönder