Bir sitenin açılma süresi, siteye erişimi sağlayan en önemli etkenlerden biridir. Keza birçok iternet kullanıcısı birkaç saniyede göremedikleri siteleri girmekten vazgeçer. Bu yüzden basit, bir o kadar da faydalı birkaç konudan bahsetmek istiyorum.

Öncelikle bir site yapımcısı olarak, sitenizin açılma süresini çeşitli internet taraycılarında görmek için WebWait sitesini kullanabilirsiniz. Bu sayede bir ziyaretçinizin sitenize girmek için beklediği süreyi görebilirsiniz. Ayrıca siteniz hakkında biraz daha kapsamlı bilgi almak için Web Site Optimization‘ın Web Page Analyzer servisini kullanarak sitenizin kod yapısını, belge boyutlarını, resim sayılarını ve siteniz hakkında birçok bilgiyi öğrenebilirsiniz.

Birçok tasarımcı, site tasarımının görsel bölümünde Photoshop gibi komplike çizim programlarını kullanır. Oluşturulan resimlerin internete uygunluğu için dosyaların formatlarında çevrilme yapılmalıdır. Online bir çevrim için örneğin Dynamic Drive‘ın şuradaki bölümünden faydalanabilirsiniz. Yeri gelmişken resim dosyalarının formatlarından da biraz söz edebiliriz. Kullanacağınız resim dosyalarının formatları JPEG, GIF veya PNG olmalıdır. JPEG (Joint Photographic Experts Group) formatı birçok rengi desteklediği ve küçük boyutta olduğu için fotoğraflarınız için uygundur. GIF (Graphics Interchange Format) formatı maksimum 256 rengi desteklemektedir. Bu yüzden biraz daha basit resimler, logolar, text karakterli resimler için kullanılmalıdır. PNG (Portable Network Graphics) ise GIF’in aksine 24-bit rengi desteklemektedir. Hemen hemen her resim dosyanız için kullanabileceğiniz bir formattır.

Günümüzde birçok site css kodlamasını kullanmaktadır. Sitenin her sayfasında ayrı ayrı tablo oluşturmak, kod yazmak yerine css ile pratik bir şekilde bütün ayarlar yapılmatadır. Sitenizde kullandığınız css kodlarında olabilecek bir hata da sitenizin açılma süresini etkileyecektir. Bu yüzden Clean CSS sitesini kullanarak hem hataları denetleyebilir, hem de mümkün olduğu ölçüde kısaltmalar yapabilirsiniz. Ayrıca bazı kısaltmaları siz de yapabilirsiniz. Örneğin;

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

şeklindeki bir kodlama yerine

margin: 10px 20px 10px 20px;

şeklinde kodlama biçimi tercih edilmelidir. Bu sayede css dosyanızın boyurundan tasarruf eder, her bir kodun tarayıcı tarafından algılanma süresini kısaltırsınız.

Sitenizden sayfalarınıza verdiğiniz linklere “/” (slash) eklemek az da olsa açılma sürenizi kısaltmaya yardımcı olacaktır. Çünkü örneğin “www.siteniz.com/sayfa” şeklindeki bir adres tarayıcı tarafından kısa sürede kestirilemez. Ancak “www.siteniz.com/sayfa/” şeklindeki bir adresin sonundaki bölüm tarayıcı tarafından html olarak algılanır ve dediğim gibi sayfanın açılma süresi az da olsa kısalır.

Sitenize eklediğiniz resimlerin yükseklik (height) ve genişlik(width) değerlerini girmeyi unutmayın. Çünkü bir internet görüntüleyicisi bir sayfadaki resmin -eğer değerleri yazılmamış ise- ne boyutta olduğu hemen algılayamaz. Öncelikle resmi açmaya, daha sonra resimden sonraki bölümleri göstermeye çalışır. Hatta zaman zaman siz de bazı sitelerde resim açıldıktan sonra diğer bölümlerin resmin boyutu kadar alta kaydığını görmüşsünüzdür. Dolayısıyla img id="resim" height="200" width="450" şeklinde bir tanımlama yaptıkran sonra src="http://www.siteniz.com/resim.png" alt="resim adı" şeklindeki resim kodunuzu yazarak internet tarayıcısının resim boyutlarını önceden algılamasını ve resme gerektiği alanı bırakmasını sağlayabilirsiniz.

Son olarak sitenizin kod yapısını oluşturan dosyaların sayısını birleştirerek azaltabilirsiniz. Bir kullanıcı sitenize girdiği zaman sunucunuzdaki -o an sitenizin açılması için gereken- her dosya internet görüntüleyecisi tarafından kullanılır. Tarayıcının yükünü hafiflerek açılma süresini kısaltabilirsiniz. Pek görülmese de

<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />

şeklinde kod dosyalarınız alabilir. Görüldüğü gibi her bölüm için ayrı bir doya oluşturmak yerine, her bölümün özelliğini

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

şeklindeki bir dosyada toplayabilir ve kodu da ona göre yazabilirsiniz.

Buradaki bilgiler elbette muazzam sonuçlar doğurmayacaktır. Ancak saniyeler ile ölçülen açılma sürelerinde biranlık farklar ziyaretçilerinizin sitenizden faydalanma oranını yükseltecektir.