CSS Sprite nedir? |
Ancak CSS Sprite nedir sorusuna değinmeden önce şunu bilmenizi isterim ki; hiçbir şey görüldüğü kadar zor değildir. Belki birçoğunuz başlığı okuduğu anda "ben SEO’dan anlamam, böyle şeylerle hiç uğraşamam" diye düşünüyor olabilirsiniz. Bu yüzden gerçekten bu konu hakkında hiçbir şey bilmediğinizi varsayarak, temel seviyede detaylı bir şekilde CSS Sprite tekniğini ve mantığını anlatmaya çalışacağım.
Önereceğim taktik ile hem sitenize SEO açısında artı bir puan sağlamış olacak, hem de sitenizin kesinlikle daha hızlı yüklenmesini sağlayacaksınız.
Blogger ya da Wordpress kullanıyor olmanız önemli değil! Hatta bir blog olması da önemli değil! Joomla, Asp, Php gibi yazılımlarda da CSS Sprite işlemini rahatlıkla uygulayabilirsiniz.
Daha önce bir yerlerde duymuş ya da az da olsa bu konuda bilgiler edinmiş olabilirsiniz. Ancak temel seviyede CSS Sprite nedir, nasıl uygulanır, faydaları nelerdir öncelikle biraz bunlardan bahsedelim.
CSS Sprite tekniği nedir?
Sitenizin yüklenmesi sırında fotoğrafların tek bir kaynaktan çağrılmasını sağlayarak, sayfa açılış hızını arttırmaktır. Kafanızda tam olarak bir şeyler canlanmış olabilir ama sizlere daha iyi anlamanız için bir örnek vereyim.
Web siteniz/bloğunuzun Google Maps üzerinde bir yerde tıpkı bir ev gibi işaretli olduğunu düşünün. Beni de evinize ziyarete gelen bir misafir olarak kabul edin. Eve misafir geldiği zaman şöyle ufaktan da olsa sağa sola çeki düzen veririz değil mi? Misafirimizin karnı açsa yemek yapar ya da olmadı bir çay koyarız. Ben geldim ve oturma odanızda TV seyrediyorum. Siz bir şeyler hazırlamak için mutfağa gittiniz. Aklınızda bir menü var ama ihtiyacınız olan sebzeler olmadığı için pazara gitmeniz gerekiyor. Bu sırada ben hala bekliyorum.
Koşa koşa pazara gittiniz ve sadece tek bir şey alıp eve döndünüz. Bu gidip gelme süreniz size 5 dk zaman kaybettirdi diyelim. Ama alacaklarınız daha bitmedi. Bu yüzden tekrar pazara gittiniz ve bir poşet daha bir şeyler alıp tekrar geldiniz. Bu durumda 10 dk zaman kaybetmiş ve beni bekletmiş oldunuz. Bunu böyle birkaç kez daha tekrar ettiğinizi düşünün. Doğal olarak ben bunun yemek falan yapacağı yok diyerek kalkıp gidiyorum.
İşte bu teknik tam olarak şudur: Madem alacağım çok şey var ve onları aynı pazardan alacağım, kendime bir pazar arabası alayım da bütün alacaklarımı içine koyup tek seferde gidip geleyim. Böylelikle sadece 5 dk da bütün alacaklarımı almış olurum.
CSS Sprite tekniğini web için düşünürsek;
Şimdi bu örneği asıl uygulamamız gereken blog sayfamız için düşünelim.
Blogunuzda küçük resimler ve ikonların her biri farklı URL adreslerine sahiptir. Dolayısıyla sayfa açılışı sırasında her birinin yüklenmesi için ayrı bir zaman harcanır. Biz bu küçük resimlerin tamamını pazar arabamıza doldurup tek seferde yüklenmesini sağlayacağız.
Daha iyi anlamanız için şöyle bir örnekle açıklayayım:
CSS Sprite görsel URL |
CSS Sprite görsel URL |
CSS Sprite tekniğini nasıl uygulayacağız?
İnanın hiç öyle sanıldığı kadar karmaşık ya da zor değil. Az da olsa blogger kullanırken kodlarla oynayarak bir şeyler öğrendiyseniz, emin olun bunu da kolaylıkla yaparsınız. Çünkü ben, kendi kendime öğrendim.
Öncelikle hangi resimleri birleştirmek istediğinize karar verin. Bu iş için gtmetrix.com gibi sitelerden faydalanabilirsiniz. Çünkü site analizi yaptığınız zaman sonuç ekranında hangi resimlerin sayfa açılışını geciktirdiğini ve optimize etmeniz gerektiğini açık açık söylüyor.
Örneğin şu anda wordpress altyapısına sahip kendi sitem olan ciplakyazar.com için gtmetrix.com sitesine girerek hemen bir analiz yapalım. Analiz sonuçlarına göre YSLOW sekmesinde bazı resim ve JS dosyaları için CDN kullanmam gerektiğini söylüyor. Şu anda sitemin CDN kullanımına çok fazla ihtiyacı olmadığını düşünüyorum. Ancak yine de birkaç resmi CSS Sprite ile birleştirip sayfa açılış hızına küçük de olsa bir katkı sağlayabilirim.
Blog sayfam için gtmetrix değeri şöyle:
Çıplak Yazar gtmetrix değeri |
Gördüğünüz gibi kendime CSS Sprite tekniğini uygulamak üzere dört adet farklı resim seçiyorum.
- Ciplak-logoalt.png
- Sadri-alisik.jpg
- Bumerang-tacli.jpg
- Ciplakyazar-stickylogo.png
CSS Sprite ile resim birleştirme
Bu işlem için farklı birçok site mevcut ama benim kullandığım site https://www.toptal.com/developers/css/sprite-generator sitesidir. Ama siz alternatif olarak şu siteyi de kullanabilirsiniz: http://www.spritecow.com/ Adrese tıklıyorum ve karşıma iki pencere çıkıyor. Açılan sayfanın solundaki pencerede bulunan Choose File butonuna tıklıyor ve birleştirmek istediğim resimlerin hepsini seçiyorum. Resimleri birleştirdikten sonra ise karşıma şöyle bir pencere çıkıyor. Burası önemli!
CSS Sprite png |
Daha sonra sol kısımda bulunan CSS kodlarını tek tek kopyalayıp yine masaüstünde açmış olduğunuz bir TXT dosyasının içine yapıştırın. Böylece CSS kodlarımızın son hali aşağıdaki gibi olmuş olacak. Ancak eğer benim gibi resmi kaydederken adını değiştirdiyseniz kucuk-resimler.png gibi. Aşağıdaki kırmızı olarak işaretlediğim alana da o ismi yazmalısınız. Ben kendi dosya adımı ciplak_bg olarak kaydettim.
CSS Sprite kod |
Yani ciplakyazar_stickylogo resmimizi kullanmak istersek onun koordinatları -10px - 275px olarak verilmiş.
CSS Sprite png |
Wordpress kullanıcıları için anlatım:
Öncelikle admin panelinden ortam ekle diyerek birleştirme yaptığınız resmi kütüphaneye yükleyin. C panelde özel bir img klasörü yaratarak oraya da yükleyebilirsiniz. Ben kendi C panelimde temaimg adındaki klasörüme yükledim.
Yüklemiş olduğunuz resmin URL adresini kopyalayın. Benim şu anda kullandığım URL adresi şu şekilde: http://ciplakyazar.com/temaimg/ciplak_bg.png
Daha sonra masaüstündeki CSS kodlarınızın olduğu TXT dosyamı tekrar açın ve yukarıdaki resimde kırmızı çerçeve içinde belirtmiş olduğum css_sprites.png adreslerini /temaimg/ciplak_bg.png olarak hepsini değiştirip kaydedin. Burası önemli!
Eğer tek bir harf hatası bile yaparsanız resimlerin hiçbiri gözükmeyecektir.
CSS kodlarım artık tamamen hazır olduğuna göre sıra bu kodları temama tanıtmak. Ben özel tema kullandığım için admin panelinden özelleştir ve CSS ekle kısmına gelerek TXT dosyamın içine yapıştırmış olduğum bütün CSS kodlarını buraya ekliyor ve yayınla diyorum.
Hepsi bu kadar! Artık istediğiniz resmi bir satırlık kod ile çağırabiliriz.
Eklediğimiz alanda (örneğin wordpress bileşenlerinde özel html alanına) hangi resmi kullanmak istiyorsak o resmin CSS içindeki adını yazıyoruz.
<div class=' bg-sadri_alisik ></div>gibi..
<div class=' bg-bumerang_tacli ></div>
Blogger kullanıcıları için anlatım:
Öncelikle birleştirdiğiniz resmin URL adresini almak için kullanmadığınız bir sayfaya yükleyin. Ardından sağ tık yaparak resmin url adresini kopyalayın. Muhtemelen uzun bir adres olacaktır. Dilerseniz bu uzun adresi Google short url kullanarak kısaltabilirsiniz.
Daha sonra tıpkı wordpresste uyguladığımız işlem gibi masaüstündeki CSS kodlarımızın olduğu TXT dosyamızı açıyoruz ve içinde background: url('css_sprites.png') koyu ile belirtmiş olduğum kısımların tümünü kısaltmış olduğunuz URL adresi ile değiştirin.
Tebrikler sona çok yaklaştınız!
Şimdi blogger admin panelinizden HTML düzenle kısmına gelerek
</head>kodunu aratın ve hemen üzerine CSS kodlarınızı yapıştırın. Kodları, kod gibi değil de düz yazı gibi gösterecektir. Çünkü style açılış ve kapanış kodları eksik. Bu yüzden kodların en üstüne
<style>en altına da
</style>ekleyin ve kaydet butonuna tıklayın.
Şimdi widget ekle bölümüne gerek HTML bir widget ekleyin. Eklemiş olduğunuz widget için mesela sadece bumerang logosunu kullanmak istiyorsunuz.
<div class=' bg-bumerang_tacli ></div>Ekleyerek kaydet demeniz yeterli olacaktır. Widget alanında sadece bumerang resmi gözükecektir.
Anlatım, kendi kaydetmiş olduğum resim isimlerine göre olduğundan, div class eklerken kendi resminizin adı neyse onu yazmalısınız.
Değerli yorumlarınızı eksik etmeyin lütfen.
Bu içerik Çıplak Yazar (Kişisel Blog ve Öyküler) adlı blogun yazarı Ayhan tarafından Blog Tecrübem için hazırlanmıştır.
Emek verilerek yazılmış bir yazı elinize sağlık Ayhan bey.
YanıtlaSilEn kısa sürede kendi blogumada uygulayacagim. Saolun.
Lakin ilk baştaki girişte vermiş olduğunuz örnekte misafir yemegi bekleme filan komik olmuş ☺ Bizde misafir umdugunu değil bulduğunu yer atasozunu akla getirdi .)
Teşekkür ederim. Yazıyı üç dört günde yazdım. Yani aslında bir günde de yazabilirdim. Ama işten güçten fırsat buldukça bitirmeye çalıştım. Misafir kısmını da biraz ilgi çekici olması açısından ekledim :)
SilArtık bir sayfa popüler oldu mu açılış hızları da etki etmez oldu, sadece ticaret siteleri kullanıyor bile diyebilirim
YanıtlaSilBence yanılıyorsunuz. Açılmayan ya da çok geç açılan sayfalarda ziyaretçiler fazla beklemeyi sevmiyor.
Silolup olmadığını nasıl kontrol edebiliriz ? gtmerix gibi yerlerden sorgu sayısına mı bakmak lazım
YanıtlaSilbirde özel alan yerine ftp den kodları atacak olsak, nereye atmamız gerekir ?
Google drive hesabınızı kullanabilirsiniz. Ben Blogger kullandığım dönemlerde öyle yapıyordum
Sil