SEO HOCASI BLOG

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

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;

.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;

<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;

.wp-polls .pollbar {
 margin: 1px;
 border: 1px solid #c8c8c8;
}

Daha sonra <style type=”text/css”></style> kodlarını silip, yerine şu kodu ekliyoruz;

<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.

<link rel=”stylesheet” type=”text/css” media=”screen” href=”stil.css”/>
sonuna .php eklenerek düzenlenir.

<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  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.

Bir önceki yazımız olan Site Hızlandırma Teknikleri 1 – JavaScript başlıklı makalemizde conbine javascript, inline javascript ve inline js hakkında bilgiler verilmektedir.

SEO Kitapları


Site Hızlandırma
17 Yorum Var
23 Mart 2010

“Site Hızlandırma Teknikleri 2 – Stil Dosyası” İçin 17 Yorum Yapılmış

    Sinan Yorulmaz
    23 Mar 2010

    Bilmediğim bir kaç teknikten bahsedilmiş. Hemen uygulayayım. Güzel bir makale teşekkürler Kaan Gülten. (:

    bahadir
    23 Mar 2010

    selam hocam öncelikle sizin gibi usta lardan türkiyede imleme sitesi cok geride oldugunu belirtmek isterim burada sitenize daha agirlik verile bilri yada o tarz siteleri cogalta bilirsiniz anlyiorsunuz türkyiede söyle baakrsak yok derecede imleme siteleri umarim yazima önem verirsiniz saygilarimla.

    techno
    04 Nis 2010

    Hocam css dosyalarını nasıl birleştirebiliriz? ismimdeki sitede iki farklı css dosyası var. bunları birleştirmek istiyorum

    Kaan Gülten
    04 Nis 2010

    Merhaba, schemes_greenlife.css dosyasındaki kodları kopyalayıp, style.css içerisine yapıştırın. Daha sonra, header.php bölümünden schemes_greenlife.css kodunu tamamiyle silin.

    techno
    04 Nis 2010

    ama aynı olan kodlar nolcak? mesela ” .icerikim ” parametresi iki sitil dosyasındada varsa? ortak olanları nasıl yapcam onu çözemedim

    Kaan Gülten
    05 Nis 2010

    Benzer class ve id ler varsa, görüntüyü bozmayacak şekilde 1 tanesini alınız. veya stildeki benzer kodları farklılaştırarak, bunları tema klasörüne de uygulayınız. örneğin, “.icerikim ” ortak, birini de “.icerikim2 ” olarak değiştirir. bu koda nereye ait ise, örn. sidebar, oradaki gerekli kodu da sonuna 2 ekleyerek düzeltirsiniz.

    techno
    05 Nis 2010

    sağol hocam ilgilendiğin için.. tek çare senn anlattığın gibi olsa gerek mantıklı bişey aklıma gelmiyor zaten..

    Özgür KILIÇ
    28 Tem 2010

    Merhabalar
    Sitede en başta gzip kullanıyorum bu kodu css içinde yazmam gerekiyormu yoksa zaten sayfanın en başına koyduğum için css ide gzipliyormu.
    Teşekkürler

    Kaan Gülten
    28 Tem 2010

    Sayfanın başına koyduğunuz gzip o sayfanın sıkıştırılmasını sağlar. js ve css dosyalarının sıkıştırılması için htaccess dosyasına gerekli gzip kodunuz koymanız gerekir.

    Kaan Gülten
    29 Tem 2010

    Sitedeki css ve javascript dosyalarının sıkıştırılması için htaccess e aşağıdaki kodu eklemeniz gerekir veya site wordpress ise script gzip eklentisini kullanabilirsiniz.
    # mod_gzip compression (legacy, Apache 1.3)

    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|xml|txt|css|js)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

    Gökhan GÜLER
    07 Eki 2010

    Blog hızlandırmaktan öte seo açısından etkili bir yol. Görsellik çok önemli. Google da en çok buna önem veriyor.

    umut
    07 Nis 2011

    hocamız bizden bir index sayfasına iki adet css dosyası çağırmamızı istedi.Ancak indexte stil1 stil2 diye iki tane link olacak stil1e tıklandığında index sayfası düzenlenmiş stil1 css dosyasına göre açılacak stil2ye tıklandığında index stil2 css sayfasına göre açılacak css dosyalarını oluşturdum ancak stil1 stil2 linklerinde stil dosyalarını çağıramıyorum yardımcı olursanız çok sevinirim saygılar

    Saç bakımı
    09 Oca 2012

    Merhaba,
    Seohocası v2 temanızı kullanıyorum inline css hatası var nasıl düzeltebilirim?

    mehmet murat
    08 Ağu 2012

    merhaba bir css dosyasının 2 veya 3 kez tekrar yükleniyor olması sıkıntı yaparmı. misal modul.css dosyasını mecburen birkaç kez yüklemek zorunda kalıyorum.

    Süha Mete
    11 Ağu 2013

    Peki .htaccess dosyasını kullanamayacağım bir serverdaysa web sitem? gzip işlemini .htaccess olmadan nasıl yapabilirim yardımcı olabilir misiniz?

    Lachin Hasanov
    14 Tem 2014

    merhaba .html dosyaya gzip eklemek mumkunmu ? benim site php asp aspx desteklemiyoda :) lutfen yardim edin hocam

    indir
    08 Eyl 2014

    google pagespeed’de sizin dediklerinizin tam tersini diyor css kodları sayfa içerisinde kullan diyor. daha hızlı açılsın diyor test ettim. puanlamada fark ediyor

Yorum Yapabilirsiniz

  • yhsd
  • hdfhsdf
  • gsrgsd

SEO TEKLİFİ İSTE

UZMANA SORUN

UZMAN : Hoş geldiniz! aklınıza takılan bir soru mu var? Sorun "24 saat içerisinde cevap garanti"

SEO MAKALELERİ

SON SEO YAZILARI

SON DAKİKA SEO HABERLERİ

SEO Son Dakika

Sitenizde paylaştığınız özgün yazılar bir site için yapılması şart olan bir sistemdir. Sadece özgün yazı yayımlayarak sıralamalarda yükselme beklenilmesi doğru bir strateji değildir fakat kopya içeriğe oranla artısı çok fazladır.

  • Seo takvim09/09/2014
  • Seo saat08:55

Google algoritmalarında Panda site içi optimizasyonu, Penguin site dışı optimizasyonu ve Hummingbird ise arama sonuçlarını etkiler (büyük oranlarla).

  • Seo takvim27/08/2014
  • Seo saat20:48

Google imleme siteleriyle etkileşimini Penguin algoritmasından sonra tamamen kesti! İmleme sitelerinin artık SEO açısından etkisi değil ters tepkisi söz konusu...

  • Seo takvim10/07/2014
  • Seo saat21:04

Google arama sorgularındaki yazar resimleri kaldırıldı, haber siteleri için özel düzenleme ve görsel getirdi.

  • Seo takvim05/07/2014
  • Seo saat13:05
SİZİ ARAYALIM

444 4 915

SEO'DA TEK NUMARA!