Site Hızlandırma Teknikleri 2 – Stil Dosyası

Whistle

Ruhsuz :/
Kurucu
Geliştirici
Yardımsever Üye
Mesaj
11.919
Çözümler
564
Beğeni
13.411
Puan
5.915
Ticaret Puanı
2
Site yapımlarında görselliğe yüksek oranda önem verilmesi gerekir. Bu görsellik CSS dosyası ile sağlanabilir. CSS dosyaları siteler için büyük önem taşır ve görsellik ancak CSS dosyaları ile geliştirilebilir. CSS dosyalarının konumlandırılması, optimize edilmesi ve yeniden yapılandırılması ile hızlı ve görsel bir web sitesi elde edebilirsiniz. Bu makaleyi okuduktan sonra sitelerinizin CSS dosyalarında büyük oynamalar yapacaksınız.

Inline CSS
Her internet kullanıcısı, sitelere girince hızlı açılmasını ve hızlı dolaşılmasını ister. Sitede bulunan herhangi bir sayfadaki CSS kodlarını CSS dosyasından küçük bir kod yardımığıyla çekerek sitenin hızlanmasını sağlayabilirsiniz. Örneğin, span style=”font-size:9px;” kodunda style=”" de gördüğünüz style kodlarını direk yazmak yerine span class=”a” kodunu yazabilirsiniz. Bu kodu ekledikten sonra CSS dosyanıza şöyle bir kod ekleyin;
Kod:
Genişlet Daralt Kopyala
.a { font-size:9px;}
Bu kod ile sitedeki sayfanın boyutunu azaltıp, gerekli kodları CSS dosyanızdan çekebilirsiniz. Hem sayfa hızlanmış olur, hem de SEO açısından daha yararlı olur. Daha önceden Inline JS’yi anlatmıştım sitede. Bu da onun gibi sadece CSS hali.

Bu yöntemin dışında bir yöntemimiz daha mevcut. Bazı sistemlerin hazır temalarında sitenin üzerine direk şu kod eklenir;
Kod:
Genişlet Daralt Kopyala
<style type="text/css">
.wp-polls .pollbar {
 margin: 1px;
 border: 1px solid #c8c8c8;
}
</style>
Bu kodlar da diğerleri gibi Html sayfasını gereksiz yere yavaşlatır. Bunun yerine üstteki kodlardan şunları alıp CSS dosyasına ekliyoruz;
Kod:
Genişlet Daralt Kopyala
.wp-polls .pollbar {
 margin: 1px;
 border: 1px solid #c8c8c8;
}
Daha sonra <style type=”text/css”></style> kodlarını silip, yerine şu kodu ekliyoruz;
HTML:
Genişlet Daralt Kopyala
<link rel="stylesheet" type="text/css" href="style.css" />
Son olarak üstteki kodu da ekledikten sonra işlemimiz tamamlanıyor.

CSS Conbine
Birden fazla stil dosyası, sitelerde hem gereksiz sorgulama html kod boyutunun artması ve seo açısından da olumsuz bir durum oluşturacaktır. Bu sebeple bir sayfada birden fazla Css stil dosyası çağırmak gereksiz ve hız ve kalite açısından zararlı bir durumdur. Yapılması gereken bu Sss dosyalarının kodları tek bir Css de birleştirilerek tek stil dosyası çağırılmalı ve bu birleştirme işlemi yapılırken body gibi benzer olarak kullanılabilecek sınıflar özel olarak dikkatle belirlenmelidir. Sınıf kodlarının da birden fazla tekrar etmesi önlenmelidir.

CSS Optimize
Stil dosyaları, düzenleme kolaylığı olması sebebiyle okunabilirliği arttırmak için boşluklar bırakılarak ve satırlar atlatılarak yazılırlar. Bu şekilde yazılan stil dosyaları okunurluğu fazla olmasıyla birlikte dosya boyutları da büyümektedir. Siteler açılırken stil dosyalarının hızlıca yüklenerek sitenin görsel düzeninin en kısa sürede oluşturulması için stil dosyaların boyutu kodlama yapısı ile minimuma indirilmelidir.

Stil dosyalarının kodlama boyutlarını alzatmak için, belirli sınıflar tek satırda toplanabilir, boşluklar silinebilir, aynı içeriğe sahip farklı sınıflar bir başlık altında toplanabilir. Tüm bu işlemleri yapmak kodlama bilmeyen kişiler için zor olması sebebiyle, bunların tamamını ve daha fazlasını istediğiniz özelliklere uygun seçenekler ile Clean CSS sitesinden rahatlıkla yapabilirsiniz.

CSS Sıkıştırma
Html kod yapısı ile küçültülen stil dosyaları gzip gibi çeşitli sıkıştıma teknikleriyle daha küçük boyutlara getirilebilir. Bu şekilde varolan stil dosyası boyutundan %70′e kadar tasarruf yapılarak, stil dosyalarının daha hızlı yüklenmesiyle siteler hızlandırılabilir.

Css Gzip
Scripts Gzip eklentileri ile stil dosyanızı sıkıştırabilir veya WordPress olmayan siteler için aşağıdaki yöntem kullanılabilir.
HTML:
Genişlet Daralt Kopyala
<link rel=”stylesheet” type=”text/css” media=”screen” href=”stil.css”/>
sonuna .php eklenerek düzenlenir.

HTML:
Genişlet Daralt Kopyala
<link rel=”stylesheet” type=”text/css” media=”screen” href=”stil.css.php”/>
ve bu php stil dosyasının en üstüne ve en altında sırasıyla aşağıdaki kodlar eklenir.
PHP:
Genişlet Daralt Kopyala
<?php  if(extension_loaded(‘zlib’)){  ob_start(‘ob_gzhandler’);  }  header(“Content-type: text/css”);  ?>

<?php  if(extension_loaded(‘zlib’)){  ob_end_flush();  }  ?>

CSS Konumlandırma
Sitelerin hızlı yüklenmesi izlenimini en çok kazandıran öğe stil dosyalarıdır. Çünkü stil dosyalarının yüklenmesiyle birlikte görsellik hemen oturur ve sitenin hızlı açılması izlenimi oluşur. Stil dosyasının önce veya sonra yüklenmesi toplam hız olarak aynı sürede yüklenmesini sağlarken, görselliğin bir an önce ekrana gelmesi sitenin hızlandığı düşüncesini oluşturacaktır. Bu sebeple stil dosyalarını sitelerin üstlerine koymaya özen göstermek gerekir.
 
Üst