Turkcell Blog Ara Turkcell

Sitenizi Hızlandırın –2

Apple Beats'i neden satın alıyor?

CSS, site tasarımlarında, web projelerinde hayati önem taşıyan bir tasarım faktörüdür. Görsel şartların tamamının tanımlandığı CSS Rule yani kuralları, sitenin arama motoru optimizasyonunda da dolaylı olarak rol alır.

CSS dosyalarının etkileri temel olarak aşağıdaki şekilde açıklanabilir.

  1. Site hızına doğrudan etki eder.
  2. CSS dosyalarının sayfa içinde ya da sayfa dışı olarak tanımlanması, sitenin yüklenme hızına etki eder.
  3. CSS dosyalarının konumlandırması sitenin hızına doğrudan etki eden bir faktördür.
  4. CSS dosyalarının sıkıştırılması önemli ölçüde site hızına etki eder.

Bir siteye gönderilen Google ziyaretçisi, Google’da yaptığı aramanın sonucuna en hızlı şekilde ulaşmak ister. Google’ın da yegâne hedefi budur. Dolayısı ile size gönderilen bir ziyaretçinin Google’a geri dönmesi sizin kalitenizi, trafiğinizi düşürür.

Bu yüzden site hızının büyük bir etmen olması doğal karşılanmalıdır. Google’da aradığımız en küçük şeyleri bile girdiğimiz siteler hızlı açılmadığı takdirde farklı sitelerde aramaya devam etmekteyiz.

Sitenizin yavaş açılmasının sebeplerinden biri de CSS dosyalarıdır. Bir sayfada ya da sitenizin tüm dinamik sayfalarında doğrudan CSS kodu vermek, sitenin yüklenmesinde önemli derecede yavaşlamaya sebebiyet verebilir.

 Bu sebepten ötürü, sitenizde kullandığınız CSS kurallarını, haricen bir dosyaya belirterek bu dosyadan sayfaya dâhil etmeniz gerekmektedir.

 Örnek Uygulama;

<style type=”text/css”>

.mekjoy .header {

 margin: 37px;

 border: 0px solid #e7e7e7;

}

</style>

Yukarıdaki kodu farklı bir dosya olan include.css dosyasının içerisine ekleyelim.

 .mekjoy .header {

 margin: 37px;

 border: 0px solid #e7e7e7;

}

Dosyayı kaydedelim.

Sonrasında az önce düzenlediğimiz aşağıdaki kodları silelim;

<style type=”text/css”>

.mekjoy .header {

 margin: 37px;

 border: 0px solid #e7e7e7;

}

</style>

Bu kodların yerine sadece dosyayı dahil etmeye yarayacak olan kodları yazalım.

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

Sonrasında dosyamız site yüklenirken haricen yükleneceğinden site hızındaki yavaşlatıcı etkisi azaltılacaktır.

Dikkat etmeniz gerekenler;

  1. Gereksiz yere boş ve kaba kodlar yazmayınız.
  2. Bir sayfada birden fazla .css uzantılı dosya dahil etmeyiniz. Bu gereksizdir. Tüm CSS dosyalarını tek bir CSS dosyasında birleştirmek daha mantıklı olacaktır.
  3. Olabildiğince temiz ve açık bir kod yapısı kullanmak akıllıca olacaktır.
  4. Tüm kodların, boşluklarının temizlenmesi, hepsinin tek bir dosya altında ve sınıf sınıf olarak toplanması, siteyi hızlandıracaktır.
  5. CSS dosyaları sayfalara dahil edilirken, mümkün olduğunca üst satırlarda yerini almalıdır. Böylece site yüklenirken görsel kurallarınız bir an önce uygulanacak ve optimum ayarlarda ve minimum sürede sitenin yüklendiği düşünülecektir. 

Etiketler : css sıkıştırma, site hızlandırma, site hızlandırma teknikleri,