Merhaba arkadaşlar sitemi wmaraci'daki seo analizi ile tarayınca bazı hatalar buluyor. bunlardan birkaç tanesine kafam takıldı. umarım yardım edecek arkadaşlar çıkar.
1. CSS Standartizasyonu'nda CSS kodlarınız standarta uygun değil "CSS kodlarınızı eklerken @import olarak eklemekten kaçının." diyor. evet main.css dosyamda diğer .css leri bağlamak için @import kullanılmış. @import yerine başka ne kullanabilirim. google da da aradım ama fazla da bilgim olmadığı için bir sonuca ulaşamadım.
2. CSS Sprite özelliğini kullanmıyor benim sitem. araştırdığım kadarıyla çok faydalı bir yöntem. fakat nasıl yapılacağını basitçe anlatan bir yazı bulamadım. herkes uzman değil :) basit birşekilde sırasıyla yapılacak adımları yazan bir arkadaş çıkar diye umuyorum.
2. Sitenizde kullandığınız tüm resimleri tek bir resim dosyasında topluyorsunuz. Böylece tek seferde hepsi elde ediliyor. Ardından resimlerin kullanılacağı alanlarda CSS kodlarıyla büyük resmin başlangıç koordinatlarını x ve y cinsinden giriyorsunuz, resmin kullanacağınız kısmını da söz konusu alanın genişlik ve yüksekliği olarak belirtiyorsunuz.
aslında pek de bi bilgi gerekmiyor ben çata pata bişiler diyeim css sprite hakkında http://tr.spritegen.website-performance.org/ yukarıda siteye girin zip dosyasına attığınız 3-5-10 resim dosyasını zipteki max boyut 1mb olacak
Daha sonra Tümleşik Resim Üretim Seçenekleri altında Yatay Aralık: 5px Dikey Aralık:5px Diye ayarlayın
CSS Üretim Seçenekleri burada seçeneklerde sprite- silin gitsin sonrada Tümleşik Resim Dosyasını & CSS Kodlarını Üret ürete tıklayın tamamdır resim dosyasın indirip ftpye atmayı unutmuyoruz :D
2. Sitenizde kullandığınız tüm resimleri tek bir resim dosyasında topluyorsunuz. Böylece tek seferde hepsi elde ediliyor. Ardından resimlerin kullanılacağı alanlarda CSS kodlarıyla büyük resmin başlangıç koordinatlarını x ve y cinsinden giriyorsunuz, resmin kullanacağınız kısmını da söz konusu alanın genişlik ve yüksekliği olarak belirtiyorsunuz.
Hocam dediğiniz gibi @import olan .css leri düzenledim. seo analizinde hala sorun görünüyor fakat çok acayip birşey oldu. bu kodları yazınca sitenin açılış hızı inanılmaz arttı. şöyle ki @import varken seo analizinde açılış hızı 6,99sn iken sizin verdiğiniz kodları girdiğimde bu açılış hızı 2.52sn'ye düştü :D birkaç kez test ettim farklı bir şey yüzünden mi oldu diye @import lu kodu girince açılış hızı 6,99sn lere geliyor kodu silip sizin verdiğiniz kodu girince 2.50sn civarına geliyor. ne mübarek kodmuş :D ama @import hatası hala gitmedi. belki bir süre beklemek lazım. şimdi css sprite için uğraşacağım umarım yapabilirim.
aslında pek de bi bilgi gerekmiyor ben çata pata bişiler diyeim css sprite hakkında
http://tr.spritegen.website-performance.org/ yukarıda siteye girin zip dosyasına attığınız 3-5-10 resim dosyasını zipteki max boyut 1mb olacak
Daha sonra Tümleşik Resim Üretim Seçenekleri altında
Yatay Aralık: 5px
Dikey Aralık:5px
Diye ayarlayın
CSS Üretim Seçenekleri burada seçeneklerde sprite- silin gitsin sonrada Tümleşik Resim Dosyasını & CSS Kodlarını Üret ürete tıklayın tamamdır resim dosyasın indirip ftpye atmayı unutmuyoruz :D
cevabınız için teşekkür ederim. deneyeyim bakalım umarım yapabilirim.
Ek Olarak: @StRonK hocam bu sprite i yapamadım kafamda karıştı. şimdi önce images klasörünü zip yapıp dediğiniz gibi siteye yükledim. bana tek bir resim dosyası ve kodları verdi. Şimdi ben bu kodları css dosyasına nasıl yerleştireceğim örnek verecek olursak;
voteinfo adlı bir resmi ele alalım. bu resim blocks.css adlı dosyanın içinde duruyor ve kodları şöyle
.bvote p {
background:#f6fafd url(../images/voteinfo.png) no-repeat 100% 0;
border:1px solid #d8e3ea;
color:#466f9d;
padding:5px 18px 5px 8px;
}
bana verilen kod ise şu şekilde;
.voteinfo{ background-position: -5258px -176px; width: 12px; height: 12px; }
şimdi bunu nasıl düzenleyeceğiz? Ben şu şekilde denedim ama olmadı. sprite resmin adını spriteimages olarak değiştirip images klasörüne attım ve kodları şu şekilde değiştirdim.
#container li {
background: url(../images/spriteimages.png) no-repeat top left;
}
{ background-position: -5258px -176px; width: 12px; height: 12px; }