FireBug Net Sekmesi ve Kullanımı

Mayıs 26th, 2010 • 17372 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Ffirebug-net-sekmesi-ve-kullanimi%2FFireBug+Net+Sekmesi+ve+Kullan%C4%B1m%C4%B12010-05-26+21%3A36%3A01fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1737 CSS, Javascript, XHTML
Etiketler: Ajax, firebug, Firefox, http, net sekmesi, page speed, YSlow

FireBug hakkında elle tutulur bir bilgi olmadığı için bu makaleyi yazmaya karar verdim. Bu yazımda FireBug Net paneli hakkında olacaktır. FireBug geliştirme ile alakalı bir makale değildir. Özellikleri hakkında genel bir bilgi içerecektir.

Web sayfalarının kodlarken bir çok yönünü düşünerek kodlarız. Erişebilirliği, esneklik, farklı tarayıcılara uyumlu olması, performans bunlardan ilk aklımıza gelenler. En önemlilerinden biri performansının iyi olmasıdır. Web sitesi sahipleri sitelerinin tarayıcılar tarafından hızlı gezilmesi için en kısa zamanda açılmasını sağlamak için uğraşır. Performans değerlendirmesi için kullanabileceğimiz araçlardan birisi Firebug’ın Net panelidir. Burada Firebug’ın Net sekmesini inceleyeceğiz. Aşağıda benim anasayfamın net panelindeki görüntüsünü görüyorsunuz. Okumaya devam edin »

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

Şubat 16th, 2009 • 9574 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Foptimizasyon-icin-css-medya-dosyalarini-birlestirmek%2FCSS+%C4%B0pucu+18%3A+Optimizasyon+%C4%B0%C3%A7in+CSS+Medya+Dosyalar%C4%B1n%C4%B1+Birle%C5%9Ftirmek2009-02-16+13%3A36%3A05fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D957 CSS, XHTML
Etiketler: birleştirme, CSS, firebug, Firefox, optimize, yazıcı, YSlow

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/