Önce Css Sprite Nedir onu öğrenelim…
CSS, en önemli kodlama dilidir. Neden diyecek olursanız, her ne kadar iyi bir yazılımcı ya da programcı olursanız olun, yaptığınız işi müşterilere/ziyaretçilere sunamadıktan sonra hiçbir anlamı yok. İşin tamamen görsel kısmını üstlenen CSS, kendi içerisindeki bazı özelliklerilede bizlerin işini kolaylaştırıyor. Bu yazımda anlatacağım CSS Spriteözelliği, birden çok resimi tek bir resim dosyasında birleştirerek, kullanacağınız resimleri bu tek resim dosyası içerisinden çekmenizi sağlıyor. Bunun amacı ise, 10 tane farklı resim kullanacağınızı varsayarsak, 10 farklı resim yüklemesi yapmak yerine, tek bir resim yüklemesi yaparak tüm resimlerin daha hızlı yüklenmesini ve sitenin açılış hızının azalmasını sağlamaktır.
CSS Sprite Nasıl Kullanılır?
- Öncelikle bir PNG dosyası oluşturun ve kullanmak istediğiniz resimlerin hepsini bu dosya içerisine ekleyin. Ben örnek olarak şöyle bir resim oluşturdum.
- Şimdi ise dosyamıza şöyle bir kod ekleyelim:
<a href="http://www.cdersleri.kursistem.com/" title="CSS Sprite"><div id="logo"></div></a> |
Bu kod, “logo” ID’sine atayacağımız resime link verecek şekilde ayarlandı.
- Şimdi ise CSS kısmına geçelim ve eklememiz gereken CSS kodlarını görelim:
|
1
2
|
#logo{background:url('logo.png');width:275px;height:47px;}#logo:hover{background:url('logo.png');width:275px;height:47px;} |
Hemen kodu inceleyecek olursak, ilk olarak “logo.png” adresini tanımlıyoruz. Daha sonra buna birgenişlik ve yükseklik giriyoruz. 2. satırdaki kod ise “logo” ID’sinin üstüne geleceğinde çıkacak olan resimi gösteriyor. Aslında aynı resimi seçtik, işte CSS Sprite özelliğini burada anlamış oluyoruz. Aynı resim içerisindeki bir çok kısımı, farklı farklı resimler halinde göstereceğiz.
- Şimdi Sprite Cow sitesine girerek oluşturduğumuz resimi yüklüyoruz.
- Açılan resimden almak istediğimiz kısımı fare ile çerçeve içine alıyoruz ve hemen altında o resimin “bakcground-position“unu bize veriyor.
- Aldığımız background-position’u background kodu içerisine şu şekilde ekliyoruz:
|
1
2
|
#logo{background:url('logo.png') -14px -12px;width:275px;height:47px;}#logo:hover{background:url('logo.png') -14px -66px;width:275px;height:47px;} |
Bu, seçtiğiniz alanın o resmin toplam genişlik ve yükseklik içerisinde X ve Y eksenlerini baz alarak size verilen bir değerdir.
WordPress Siteleri Hızlandırmak İçin Eklentiler
WordPress altyapısını kullanan web siteleri, çok sayıda eklenti, tema unsuru ve veritabanı şişmesiyle zamanla yavaşlamaya başlar. WordPress sitelerin kullandığı harici css, javascript ve resim gibi dosyaların optimize edilmesi ve veritabanı tablolarının temizlenmesi siteler üzerindeki gereksiz yükün kaldırılmasını sağlar. Bu gibi işlemlerin yapılması, kodlama bilgisi ile yapılabilecek yoğun uğraş gerektiren bir iştir. Ancak bu işlemleri uygulayacak eklentileri kullanarak da sitelerin gözle görülür şekilde hızlandırılması sağlanabilir.
Gzippy
Sitelerin html kodlarını %70 – %80 oranlarına kadar sıkıştırarak sayfaların hızlı açılmasını sağlayan önemli bir özelliktir. Arama motorları artık sitelerin hızlarını da kriter olarak ele aldıkları için, sitelerin gzip özeliğini kullanmasını da olumlu olarak değerlendirilmektedir.
Sitelerinizin gzip özelliğini kullanıp kullanmadığını Ücretsiz Seo Analizi bölümünden test edebilirsiniz.
Scripts Gzip
Bu eklenti ile de sitenizdeki html dışı harici dosyaların sıkıştırılmasını sağlarsınız. Bunlar css ve javascript dosyalarıdır. Dosya boyutlarında büyük tasarruf sağlayan bu eklentiyi de kullanarak sitenizin gözle görülür şekilde hızlanmasını sağlayabilirsiniz.
W3 Total Cache
WordPress gibi dinamik yapıya sahip bir web sitesi, etiketler, kategoriler, son yazılar, yorumlar vs. derken 100 lerce sorgu çalıştırmaktadır. Bu sorgular sunucuyu yorduğu kadar kullanıcıları da yormaktadır. W3 Total Cache ekletisini kullanarak wordpress sitelerin statik bir yapıya bürünmesini sağlayabilir ve sitelerinizin 1 saniyeden daha hızlı açılmasını bile sağlayabilirsiniz.
W3 Total Cache bünyesindeki gzip işlemini aktif ederseniz, gzippy ve scripts gzip eklentisini kullanmaya gerek kalmayacaktır.
W3 Total Cache eklentisi, sunucuda oldukça büyük bir hafiflik sağladığı için bu eklentiyi kullanmaya başladıktan sonra Alexa değerinizde büyük artışlar olur. Alexa değerine önem veriyorsanız bu eklentiyi kullanmayabilirsiniz.
Wp-Optimize
Veritabanının gereksiz yere şişmesini sağlayan pek çok gereksiz veriyi temizleyerek hızlandırma sağlamaktadır.Yazı sürümler, onaysız yorumlar, spam yorumların silinmesini, veritabanı tablolarının da optimize edilmesini sağlar.
Clean Options
WordPress sitelerimizde farklı ihtiyaçlarımız için farklı eklentiler kullanırız, bazen bu eklentilerin yerini yenisi alırken, bazen de direkt kodlamalar ile eklentilerin yerini doldururuz. WordPress üzerinde eklentilerin kaldırılması, o eklentiye ait veritabanı tablolarının silinmesini çoğu zaman sağlayamaz. Bu sebeple, kurulan ve sonra kaldırılan eklenti sayısı arttıkça gereksiz veritabanı tablolarının sayısı da artacaktır. Bu sebeple, zamanla siteler yavaşlamaya başlayacaktır. Artık kullanılmayan veritabanı tablolarını tespit edip silmenizi sağlayan ancak biraz da uzmanlık gerektiren bu eklentiyi kullanabilirsiniz.
CSprites For WordPress
Daha önceki konuda, siteyi hızlandırmak için, resimlerin css sprite tekniği ile optimize edilmesi gerektiğini anlatmıştık. WordPress sistemleri üzerinde kullanılan resimlerin birleştirilerek statik bir şekilde çağırılmasını sağlamak üzere oluşturulmuş bu eklentiyi kullanarak sitelerin hızlanmasını sağlayabilirsiniz.
Örnek olarak 5 resmi birleştirerek 1 büyük resim elde edilir, bu şekilde 4 sorgu tasarrufu yapılmış olur. Sorguların azaltılması ile de sunucunun daha rahat çalışması sağlanarak site hızlanır.