İçerik konusunda yapmanız gerekenler

Altın bir kural olarak şunu unutmayın: 80'e 20. Sayfanızın tamamen açılma ölçüsü %100 dür. Bu ölçünün %20'si dökümanınıza erişilecek zamanı, geriye kalan %80'i ise sayfanızdaki diğer öğeler için (css, resim, javascript, flash gibi) harcanacak zaman olmalıdır. Yani sitenin toplam açılma süresi 10 saniye ise, bu sürenin 2. saniyesinde HTML'iniz yüklenmiş, geriye kalan öğeler yüklenmeye başlanıyor olmaldır. Bu sayede ziyaretçi psikolojik olarak sayfanın daha hızlı yüklendiğini düşünecektir.

Daha az sunucu talebi göndertin

Sayfanızda ne kadar çok öğe bulunuyorsa, sunucuya gidecek istek de o kadar fazlalaşacaktır. Sunucuya giden her istek ise milisaniyelerle talep/cevap paralelini uzatacaktır. Sayfanızdaki öğelerden kastım tabiki de CSS dosyaları, JavaScript dosyaları ve imaj gibi harici dosyalar.

Bu optimizasyonda en çok başvurulan yöntemlerden birisi, daha önceden bahsettiğim resimleri birleştirerek kullanma yöntemi. Yapmanız gereken, benzer türde imajları, tek bir resim dosyasına koymak ve CSS ile bunu koordinatlarıyla çağırmak. 5 tane ikon dosyası çağıracağınıza, hepsini 1 dosyaya atıp bir kerede çekilmesini sağlamak size büyük hız kazandıracaktır.

Örneğin, hover efekti olarak adlandırılan imajın üzerine gelince değişen imajlar uygulamasında asla farklı imajlar kullanmayın. Bunun yerine yukarıdaki örnekle arkaplan pozisyonlaması yapın.

Bir diğer resim birleştirme yöntemi ise Imaj haritaları (image map). Bu yöntemle yine resimleri farklı farklı dosyalardan çekmek yerine, tek bir resim dosyasına koyup, bağlantıları da imaj haritası şeklinde verebilirsiniz.

Benzer tipte dosyaları birleştirin. Örneğin, düzenli olması açısından ayırdığınız CSS dosyalarını, tek bir dosya haline getirin. Ayırımı, satır içi yorum yazarak sağlayın. Aynı teknik JavaScript dosyaları için de geçerli. Ancak hepsini birleştireceğim diye 40-50kb lık JavaScript dosyaları çıkarmayın. Bu gruplamayı, aynı sayfada kullanılan öğeler için yapın.

Yönlendirmelerden uzak durun

Tabiki her türlü yönlendirmelerden değil. Bahsettiğim yönlendirmeler JavaScript veya meta tag aracılığıyla yapılan yönlendirmeler. Bu yönlendirmeler, ziyaretçi erişmek istediğinde bir sayfayı açacak, işlemi yapıp, sonra yönlendirecektir.

Doğru yol ise, istek gönderen kişiye 301 veya 302 kodunda cevap veren bir yönlendirme olmalıdır. Çünkü bu yöntemle ziyaretçi hiç birşeyden haberdar olmaz, zaman kaybetmez. Herşey sunucu tarafında hallolur. Böyle bir yönlendirme yapmak için bu adresteki adımları referans alabilirsiniz.

Bir diğer yapılan küçük hata ise, klasörlere bağlantı verirken sona konması unutulan " / " karakterleridir. http://www.siberkultur.com/hakkimizda ile http://www.siberkultur.com/hakkimizda/ bağlantıları arasında milisaniyelik bir fark vardır. Çünkü ilk örnekte sunucuda hakkimizda diye bir dosya aranacaktır.

AJAX kodlarınızı cachelenebilir yapın

AJAX sağladığı hızlın yanında bazı dezavantajları da var. Bunlardan birisi de AJAX ile gönderilen isteklerin cache'e atılmaması ve dolayısıyla her seferinde sunucu yüküyle beraber daha geç gelebilecek olması. Bu yüzden isteklerin belirli periyodlarla cachelenmesi iyi bir optimizasyon olacaktır.

Öğelerde öncelik sırası yapın

Web sayfanızda veya uygulamanızda sürükle bırak, animasyon gibi JavaScript kütüphaneleri kullanıyor olabilirsiniz. Ancak bu öğeler asla sayfa yüklenirken işinize yaramayacaktır. Aksine hepsi sayfa yüklendikten sonra devreye girecektir. Bir HTML sayfasının kodlarının yukarıdan aşağıya doğru okunduğunu düşünürsek, bu öğeleri mümkün olduğunca sona atmak güzel bir adım olacaktır.

Bir diğer adım ise, JavaScript uygulamalarının sayfa yüklendiğinde devreye girmesini sağlamak olacaktır. Böylece sayfanın taranma (render) süresi hızlanacaktır.

Ön yükleme yapın

Bir önceki maddeden tamamen farklı olarak, sitenizin işleyişine göre bir sonraki adımları ön yükleme ile cache'e atabilirsiniz. Yani, bir sunum sayfasında sayfa yüklenmesi bittikten sonra arkaplanda sunumun bir sonraki adımında kullanılacak öğeleri, imajlar ve JavaScript'ler gibi, yüklemeye başlayabilirsiniz. Böylece ziyaretçi diğer sayfaya geçtiğinde sayfanın açılma hızı çok daha hızlı olacaktır.

Örnek olarak Google ve Yahoo'nun arama sayfalarına bakabilirsiniz. Bu sayfalarda arama sonuçlarını gösterirken kullanılacak bazı öğeler daha arama sonuçlarına gelmeden ön yüklemeyle hafızaya alınır.

Döküman öğelerini azaltın

DOM, yani Document Object Model, yani Döküman Obje Modeli sayfada bulunan her bir HTML öğesini kapsar. Yani, bir <div> de, bir <img> de birer öğedir. Sayfada ne kadar fazla öğe varsa, bu JavaScript işlemlerinizde o kadar yavaşlık getirecektir.

Örneğin, JavaScript ile <div> lere bir sorgu getirmek istediğinizde ne kadar çok öğe varsa çalışması o kadar yavaşlayacaktır.

Yahoo anasayfasında 700 kadar, SiberKültür'de ise 600 kadar öğe bulunuyor.

Öğeleri farklı sunuculara taşıyın

Eğer siteniz bir arkadaşlık kömünüyse veya bir fotoğraf paylaşım sitesiyse dosyalarınızı öğelerine göre farklı sunuculardan dağıtmak mutlaka yapmanız gereken bir optimizasyondur. HTML içeriğinizi www.siberkultur.com 'dan verirken, imajlarınızı resim.siberkultur.com, videolarınızı da video.siberkultur.com gibi farklı sunuculardan çağırmak bir sunucuya olan yükü azaltacağı için daha hızlı yüklenme zamanları sağlayacaktır.

Ancak 4'den fazla sunucu kullanmak, DNS'e bağlı yavaşlıklara da yol açabilir.

IFrame'ler işinize yarıyor mu?

IFrame'leri farklı dosyalara erişmek için kullanabilirsiniz. Mesela reklamları göstermek gibi. Ancak eğer böyle bir ihtiyacınız yoksa kesinlikle IFrame'lerden vazgeçin. Çünkü ekstra bir sayfa olduğu gibi, ekstra bir yavaşlık da getirecektir.

404'lere böcek ilacı sıkın

404, bir sunucudaki bir öğeye ulaşılamadığı zaman verilen hata mesajının numarasıdır. Bu ziyaretçinin yanlış yazdığı bir adreste alacağı hata da olabilir, sizin yanlış bağladığınız bir resim dosyası da olabilir.

Sizin hatanızı engellemenin en iyi yolu, belirli periyodlarla sitenizi kontrol etmektir. Eğer bu tür 404 hatası verebilecek öğeler olmaya devam ederse sunucuya gönderilecek isteklerden dolayı sayfanızdaki diğer öğelerin açılış zamanları uzayacaktır.

Artık bu adımlara göre yaptığınız optimizasyonu YSlow ve PingDom'un geliştirdiği test aracı ile test edebilir, farkı görebilirsiniz.

Yazının devamı olarak, yakında diğer optimizasyon yöntemlerini anlatacağım.