CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek

Bir çok web kod yazarı için sayfaların yavaş açılması büyük bir sorundur. Bu sorunun çözümü için çeşitli metotlar uygulanır. Farklı araçlar ile testler yapılır çözümler üretilmeye çalışılır. Sonuçta en kararlı hale ulaşılmaya çalışılır.

Bende bir test aracı ile(Firefox – FireBug – YSlow) test ediyorum. Test ettiğim siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor. Fazla sayıda css ve javascript dosyasının eklenmesi bu soruna neden oluyor. Bunun için en kolay ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.

Genelde projelermizde css dosyalarımızı genel stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.

<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print" />

Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.

<link rel="stylesheet" href="/style/iskelet.css" type="text/css" />

gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.

/*  all media  */
@media all
{
    body    { color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }
}

@media print
{
    body    { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }
}

şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz.

Daha fazla sayıda css dosyası kullanmamız durumunda ise sunucu veya istemci taraflı kod yardımı ile css veya js dosyalarımızı tek bir dosya gibi gösterebiliriz. Bu konuya burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.

Kaynak

• http://davidwalsh.name/combine-css-media-styles-file
• http://developer.yahoo.com/performance/rules.html#num_http
• http://www.vulgarisoip.com/2007/06/21/minify-your-external-javascript-and-css-with-php/
• http://www.websiteoptimization.com/speed/tweak/http/
• http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
• http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
• http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/
• http://www.jaisenmathai.com/blog/2008/02/27/speed-up-apache-how-i-went-from-f-to-a-in-yslow/
• http://www.cloudfour.com/77/easy-steps-to-speedup-your-wordpress-blog/