Css veya Js dosyalarını tek bir dosyada birleştiren php sınıfı
Yönetilebilirliği kolay olsun diye Css veya JavaScript kodlarını çoğunlukla ayrı ayrı dosyalarda tutarız. Örneğin ben, formları biçimlendiren css kodları ile resetleme yapan css kodlarını aynı dosyada tutmayı tercih etmem. Bu şekilde hiyerarşik çalışmak işleri kolaylaştırıyor. Fakat bunun bir dezavantajı var ki dosyaları web sayfamıza bağladığımızda dosya sayısı kadar HTTP isteği yapılıyor. Ayrıca istemci tarafından yapılan her bir istekte, sunucu dosyaları yeniden yüklüyor (bunun için özel bir ayar yapmadıysak). Bu durumdan kurtulmak için herşeyi tek bir dosyada birleştirip, bu dosyayı da önbelleğe almak web sayfalarımızın hızını arttıracaktır.
İlk önce dosyaları tek bir dosyada birleştirelim
Yazmış olduğum CombineFiles sınıfı yardımıyla Css veya JavaScript dosyalarınız tek bir dosyada birleştirilir ve bazı sıkıştırma işlemleri uygulanır. Bu işlem hem dosya boyutunu çok aşağıya çeker hem de yalnızca 1 HTTP isteği yapılmasını sağlar. Ve ayrıca sizin belirlediğiniz yaşam süresi (lifetime) boyunca dosyaların içeriği sunucudan değil ziyaretçinin kullandığı web tarayıcısının önbelleğinden çağrılır.
Öncesi:
Sonrası:
Şimdi de sonuçlara gözatalım
Yukarıdaki örnekte, css dosyaları için eskiden 5 HTTP isteği yapılırken şimdi 2 tane yapıldığı görülmektedir. “index.css” dosyası hariç diğer css dosyaları her istekte sunucudan tekrar yüklenirken şimdi ise tarayıcı önbelleğinden çağrılmaktadır. E peki yaptığımız bu değişiklikler web sayfamız ne kazandırdı? İşte sonuç:
Öncesi:
Sonrası:
eburhan CombineFiles class
Siz de benim eburhan CombineFiles class isimli sınıfımı kullanarak çok kolay ve zahmetsiz bir şekilde css veya js dosyalarınız birleştirebilirsiniz. Sınıfı kullanmak gerçekten çok kolay. Alttaki kodları bir combine.css.php dosyasına yazıyorsunuz ve sıkıştırılacak dosyaların bulunduğu yere kaydediyorsunuz.
<?php
require_once 'eb.combinefiles.php';
$conf = array
(
'fileList' => array(
'_reset.css',
'_iskelet.css',
'_ozeller.css'
),
'cacheDir' => './cache/',
'cacheExt' => '.css',
'lifeTime' => 864000,
'compress' => array('gzip', 'css'),
'mimeType' => 'text/css',
'encoding' => 'utf-8'
);
CombineFiles::getInstance()
->setConf($conf)
->combine();
?>
Daha sonra web sayfanızın <head></head> etiketleri arasında bu dosyayı şöyle çağırmalısınız:
<link rel="stylesheet" type="text/css" href="/css/combine.css.php" />
Sonuç
Sınıfı eBurhan Araçları sayfasından indirebilirsiniz. İçerisinde bir örnek de mevcut. Bu sınıf sayesinde daha önce yazmış olduğum Css ve javaScript kodlarını sıkıştıran web araçları ve Prototype.js Dosyasını %80 Daha Hızlı Yükletmek yazılarında bahsettiğim yöntemleri otomatik yapmış olacaksınız. Faydalı olması dileğiyle 
Erhan abi gerçekten güzel bir çalışma yapmışsın gerçekten çok büyük fark oluyor. WordPress’de kullanmak isteyenler kodu header.php dosyasında kodundan hemen önce ekleyip, combine.css.php dosyasını da tema klasörüne atmaları yeterli. Ben denedim baya bi hızlandı site
Güzel bir araç olmuş. Bazı css sıkıştıran sitelerde sıkıştırdığım css kodları sorunlu çalışmışdı. Bunu da en yakın zamanda denemeyi düşünüyorum.
Peki hocam, bu yöntem uyguladığımız zaman, sitede bir hızlanma söz konusu olabilir mi?
olur tabi, yazıda bundan bahsettim ya (:
Merhabalar, tebrik ederim hocam çok güzel bir sınıf. Şunu sormak istiyorum, Js ve Css için yapılan sınıfları ayrı ayrı mı yapıcaz? Tek bir sınıfta birleşebilir mi? İki adet $conf nesnesi sayesinde kullanarabilir miyiz tek dosyadan?
evet tek dosya içerisinden de işlemleri idare edebilirsin : http://pastebin.com/hybnRVk8
Teşekkürler,benim de ne zamandır aklımdaydı.
Teşekkürler, çok işime yarayacak, eminim.
Eline sağlık Erhan, yine iyi iş çıkartmışsın. Bugün kullanma fırsatım oldu ve bir yerde küçük bir eksiklik gördüm.
fixCssUrl fonksiyonunda, fixlenecek url’in içinde tek ya da çift tırnak varsa sorun çıkartıyor. Örneklemek gerekirse url(‘img/resim.gif’) gibi bir ifade url(klasör_adı’img/resim.gif’) olarak çevriliyor. Buna ek olarak url(/img/resim.gif) ifadesi de url(klasör_adı/img/resim.gif) oluyor.
Path’in başında / varsa bu zaten en üst dizin demek olduğundan bunun başına $dirname eklemesine gerek yok. Ben bu sorunları düzeltecek pattern’ları hazırladım ve aşağıya yazıyorum. Bu haliyle en azından benim işimi gördüler ama yine de değişik kombinasyonlarla kontrol etmeni öneririm.
$pattern = array(
‘%url\((\’\”?)\./(.*?)(\\1)\)%’,
‘%url\((\’\”?)(?!\/|\.\.\/|https?://)(.*?)(\\1)\)%’,
‘%url\((\’\”?)\.\./(.*?)(\\1)\)%’
);
$replace = array(
‘url($1$2$3)’,
‘url($1′.$dirname.’/$2$3)’,
‘url($1$2$3)’
);
Yorumun ve hata bildirimin için teşekkürler Tuncay. Tek-çift tırnak gözümden kaçan bir ayrıntı olmuş. Düzeltip sınıfı güncelleyeceğim.
Birleştirdiğim dosyalardan birinde değişiklik yaptım. Ama hala eskisi geliyor. Buna nasıl çözüm bulabiliriz?
Cache dosyasını silmen yeterli.
Teşekkürler.
aslında yorumundan sonra aklıma birşey geldi. sıkıştırılmış olan dosyalarda bir değişiklik yapıldıysa, sıkıştırma işlemini kendisi otomatik olarak yenileyebilir. bunu not aldım (:
Ellerineze saglik cok basarili bir calisma.
Yalniz WordPress ‘te kullanildiginda w3 total cache kurulu oldugu icin sanirim bir cakisma oluyor ve 10sn yavaslatiyor..
eBurhan merhaba yine ben.
1.si jquery’yi diğer js dosyalarıyla birleştirince js hatası alıyorum.
2.si’de bu sınıfı kullandığımda sayfa ilk yüklendiğinde gözle görülür bir yavaşlama oluyor.
Bu durumları bi’kere localhost’ta bi’kere de gerçek sunucuda yaşadım. Bi’önerin var mı bunları düzeltmem için?
Burhan abi ben js’yi nasıl sıkıştırabilirim ayrıntılara da değinir misin bu konuda Teşekkür Ediyorum.
Css ve javaScript kodlarını sıkıştıran web araçları başlıklı yazımı okuyabilirsin.
Ellerine sağlık hocam ,sitelerimde performans arttı ,birde bunu buldum henuz test etmedim ama http://aciddrop.com/2008/01/21/boost-your-website-load-time-with-3-lines-of-code/, bu classı phpclassda inglizce yapıp yayınlamalısın bence……
Plesh panel kullandığım hostingimi Cpanel kullanan bir firmaya taşıdıktan sonra combine.css.php hata vermeye başladı.
Fatal error: Call to undefined function getallheaders() Satır : 146
Hatayı nasıl düzeltebilirim?