CSS Optimizasyonu ile Sitenizi Hızlandırın

Sitelerin açılma hızının etkilerini iki yönden inceleyebiliriz. Öncelikle internet kullanıcıları olarak hepimiz hızı sevdiğimiz ortada. Günlük ziyaret ettiğiniz siteleri şöyle bir düşündüğünüzde tamamına yakınının son derece hızlı bir şekilde çalıştığını göreceğinizi tahmin ediyorum. Elbetteki bu siteleri yalnızca hızlı oldukları için ziyaret etmiyoruz, aradığımız yararlı bilgileri bize hızlı bir şekilde sunmaları onları ön sıralara taşıyor. Hızın ikinci olarak etkili olduğu diğer önemli konu ise arama motorları. SEO açısından önemli bir kriter olan hız sayesinde arama motorlarında daha üst sıralarda yer almanız mümkün.

Günümüzde internet kullanıcılarının tamamına yakını yüksek bağlantı hızına sahip internet kullanmakta. Sayfalarda açılmasını engelleyecek hatalar ya da çok abartılı tasarımlara vs. sahip olmadıkça kısa bir süre geç olsa bile sayfalar çok fazla beklemeden görüntülenebiliyor. Fakat şunu unutmayın burada çak az sürelerin, saniyelerin ziyaretçi tercihleri üzerinde etkisi bulunuyor. Bir siteyi ziyaret ederken kaç saniyede açılıyor diye kronometre tutmuyoruz fakat fazladan beklenen saniyeler sitenin daha sonra tekrar ziyaret edilme ihtimalini düşürmektedir.

Peki sitelerinizi hızlandırmak için neler yapabilirsiniz? Sitenizi hızlandırmanızı sağlayacak çok sayıda etmenden bazıları şunlardır :

Hızlı bir hosting servisi kullanmak
Gereksiz ögeler barındırmayan sade bir arayüz kullanmak
Kullanılan resim formatını doğru seçmek ve dosya boyutunu düşürmek
Veritabanını optimize etmek
Gereksiz eklenti kullanımından kaçınmak
Javascript dosyalarını sıkıştırmak

Bu yazımızda biz CSS dosyasını optimize ederek sitenizi nasıl hızlandırabileceğinize değindik.

İlk kuralımız CSS kodlarını ayrı bir dosyada tutmaktır. Bu dosya çoğunlukla style.css olarak adlandırılır. Stil dosyasını <head> </head> etiketleri arasına eklenecek şu şekilde bir bağantıyla kullanabilirsiniz.

<link rel=”stylesheet” href=”http://nindir.com/style.css” type=”text/css” />

CSS kodlarını sayfanızın içine gömmek yerine harici bir dosyada tutmanız değişiklik yapmak istediğinizde size kolaylık sağlayacaktır. Tek bir dosyada düzenleme yaparak sitenizin tamamının görünümünü değiştirebilirsiniz. Ayrıca stil dosyası ziyaretçilerinizin tarayıcı önbelleğinde tutulacağından ilk yüklemenin ardından diğer sayfalar daha kolay ve hızlı bir şekilde açılacaktır.

<head> etiketinin ardından ilk satırda CSS dosyanız için bağlantı oluşturmanız öncelikle bu dosyanın yüklenmesini sağlayacaktır.
CSS kullanarak yapabileceklerinizin sınırı yok, fakat unutmayın ki dosyanızın boyutu ne kadar az olursa sayfanız o kadar hızlı açılır. Gereksiz efektlerin kullanımı ekstra yük getireceğinden aşırıya kaçmamaya özen gösterin.
Daha az kod kullanarak aynı sonuca ulaşabilirsiniz. Aşağıda yer alan her iki satırda aynı sonucu verecektir. İkinci kullanım hem kod fazlalığını önleyerek daha rahat bir çalışma ortamı sunacak hem de dosyanın boyutunu biraz olsun küçültecektir.

margin-top:25px margin-bottom:25px; margin-left:50px; margin-right:50px;
margin: 25px 50px;

Gereksiz boşluklardan ve yorum satırlarından kurtulun. Esasen bunlar düzenleme esnasında kodların içinde kaybolmamanız ve neyin ne işe yaradığını görebilmeniz için hayati önem taşır. Fakat söz konusu olan hız olduğunda eksi puan oluştururlar. CSS Compressor ve Refresh-sf benim tavsiye edebileceğim iki araç. Daha sonra CSS dosyanızda değişiklik yapmak isteyebilirsiniz, bu nedenle bu işlemi yapmadan önce dosyanızın orijinal halini yedeklemeyi unutmayın. Bu işlemden sonra oluşan dosyadaki kodları okuyup düzenlemenizin oldukça zor olacaktır.