Wordpress temsasında ve eklentilerinde kullandığınız Css dosyalarını sıkıştırarak sitenize hızlandırmanız ve gereksiz trafiği engelemeniz münkün. Daha önceki bir makalemde CSS Kodlarınızı Sıkıştırmak İçin Araçlar adlı başlık altında bazı online hizmet veren sitelerden bahsetmiştim fakat şimdi anlatacağım plugin ile bu işi çok daha pratik yapabilirsiniz. Ayrıca Css dosyalarınız gzip ile sıkıştırılıp Cache yapılacağı için performans açısından da daha iyi sonuç elde edebilirsiniz.

Plugin ‘izin adı WP-CSS

• ilk olarak buraya tıklayarak WP-CSS pluginini bilgisayarınıza indiriyoruz ve zip dosyasından çıkartıyoruz
• ikinci olarak indirdiğimiz dosyayı ZIP ‘ten çıkartarak herhangi bir FTP proğramı ile wordpress blog ‘umuzun  wp-content/plugins/ klasörüne upload yapıyoruz.
• Sonra Wordpress Admin paneline girerek plugin ‘i aktif yapıyoruz. (Rutin işlemler burada sona eriyor)
• WP-CSS eklentisini aktif ettiğimizde wp-content/plugins/wp-css klasörünün içinde  cache isimli yeni bir klasör oluştuğunu göreceksiniz. Bu klasöre yazma izni veriyoruz (bir diğer değişle mod 777 yapıyoruz)
• Son olarak temamızda yer alan Css dosyalarının baglantılarını header.php dosyasını açarak <?php wp_css('dizin/cssdosyamiz.css'); ?> şeklinde düzenliyoruz.

Sanırım son adımda bahsettiğim işlemi biraz detaylı anlatmam daha yararlı olacak;

Normalde Wordpress temalarının Css dosyaları aşağıda ki şekilde eklenmiştir;

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/cssdosyasi.css" media="screen" />

böyle bir kodu şu şekilde değiştirmemiz gerekiyor;

<link rel="stylesheet" type="text/css" href="<?php wp_css('cssdosyasi.css'); ?>" media="screen" />

Örneğin Temamınızı içindeki dosyalar şu şekilde olsun;

/cssdosyasi.css
/sitiller/stil1.css
/sitiller/stil2.css
/sitiller/stil3.css

Yani Temamızın bulunduğu klasörün kök dizininde cssdosyasi.css ve stiller isimli klasörde de 3 tane daha farklı Css dosyası var. Bu dosyaları aşağıdaki gibi çağırmamız gerekiyor;

<link rel="stylesheet" type="text/css" href="<?php wp_css('cssdosyasi.css'); ?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php wp_css('sitiller/stil1.css'); ?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php wp_css('sitiller/stil2.css'); ?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php wp_css('sitiller/stil3.css'); ?>" media="screen" />

Bir diğer alternetif ise bu dosyaları style.css dosyasına include yapabilirsiniz. Böylece Php dosyasında hiçbir değişiklik yapmanıza gerek kalmaz. Örneğin yukarıdaki Css dosyalarını Style.css dosyasına direk include yapalım;

@import url("cssdosyasi.css");
@import url("sitiller/stil1.css");
@import url("sitiller/stil2.css");
@import url("sitiller/stil3.css");

Böylece ilk örnekte bahsettiğim işmemi yapmanıza gerek kalmaz. Her iki yöntemide hercih edebilirsini fakat benim tavsiyem style.css içine include etmeniz çünkü böylece tek bir css dosyanız olur ve daha iyi bir performans sağlarsınız.
Ayrıca Temaların ana Css dosyası olan style.css dosyasını çağırırken hiç bir değişiklik yapmıyoruz zira WP-CSS style.css dosyasını otomatik algılıyor.

Hepsi bu kadar…

Toplam 33kb büyüklüğünde 8 Css dosyanı include ile tek bir dosyaya birletirerek yapılan testte %91 performans sağlandığı görülmüş. Sizde WP-CSS eklentisini kurduktan sitenizin açılış hızını kontrol eden herhangi bir proğramveya firefox eklentisi ile test edebilirsiniz milisanilerle ‘de olsa aradaki farkı kesinlikle göreceksiniz.

Bir sonraki makalemde hemen hemen aynı şekilde çalışan ve javaScript dosyalarını optimize  edmek için kullanabileceğiniz WP-JS eklentisniden bahsederek bu konuya devam edeceğim.