Sitenizin Performansını Artırmak İçin Neler Yapabilirsiniz?

Sercan Demir 3 aydan daha once Web Hosting Makaleleri kategorisine ekledi.

Sitenizin performansını artırmak için onlarca farklı yol var. Bunların başında sitenizi barındırdığınız sunucunuzu güçlendirmek, bağlantı hızını artırmak gibi yollar gelebilir. Fakat bu yazıda daha çok kısa vadede ve daha kolay bir şekilde sitenizin hızını artırmanız için yapmanız gerekenlere odaklanacağız.

Sitenizi Analiz Edin

Sitenizi analiz etmek, ihtiyacınız olmayan bileşenleri görmenizi sağlayacaktır. Bu işlem için Mozilla için geliştirilen Firebug eklentisi işinizi görecektir. Firebug sayesinde hangi bileşenler kullanıcı tarafından istenmiş, bu bileşenlerin yüklenmesi süresi ne kadar ve bileşenler ne kadar büyük gibi sorularınıza cevap alabilirsiniz.

Bu verilerle sitenizin açılış hızını artırmak amacıyla bileşenlerin yüklenme sürelerinin mümkün olduğu kadar en aza indirmelisiniz. Site bileşenlerinin 25KB’dan küçük olması faydalı olacaktır. Çünkü iPhone ve bazı mobil tarayıcılar 25KB’dan fazla olan dosyaları saklamaz ve sitenize her girişinde aynı dosyayı tekrar indirir.

Firebug eklentisini Mozilla tarayıcınıza yükledikten sonra aşağıdaki ekran alıntısındaki gibi bir panel ile karşılaşacaksınız. Bu panel aracılığıyla ihtiyacınız olan bilgileri elde edebilirsiniz.

Resimleri Doğru Formatta Saklayın

Eğer sitenizde birçok resim barındırıyorsanız, hangi formatın sizin için en iyisi olduğunu bilmelisiniz. İnternette JPEG, PNG ve GIF olmak üzere sıkça kullanılan 3 resim formatı mevcut. Bu formatların resmin içeriğine göre avantajları mevcut. Daha fazla tona ve gerçekçi fotoğraflara ihtiyaç duyuyorsanız JPEG kullanmalısınız. Daha çok temel renkleri barındıran tablo ve grafiklerde kullanılmalı PNG veya GIF tercih edilmeli.

Dediğimiz gibi GIF ve PNG birbirine benzer formatlar fakat aralarındaki temel fark PNG’nin daha küçük boyutlu resimler sağlaması.

CSS ve JavaScript Dosyalarınızı Küçültün

Boşlukları ve kaynak kodu yorumları gibi gereksiz karakterleri silerek dosya boyutlarını azaltabilirsiniz. Örneğin şu kod:

/* Yorum alanı */

.sınıf {
  color: #ffffff;
  line-height: 16px;
  font-size: 8px;
}

Şu şekle dönüştürülebilir:

.sınıf{color:#fff;line-height:16px;font-size:8px;}

Üstelik bu dönüştürme işlemini elle yapmanıza da gerek yok. Bunu sizin için yapacak onlarca ücretsiz yazılım bulunuyor. CSS için CSS Optimizer veya Clean Css, JavaScript içinse JSMIN, JavaScript Code Improver veya YUI Compressor gibi araçlar kullanabilirsiniz.

CSS ile JavaScript Dosyalarını Birleştirin

Sitenin her bir bileşenini çağırmak için bir HTTP isteği oluşturulur. Yani bir sitenin 5 ayrı CSS dosyası varsa en az 5 defa istekte bulunmanız gerekiyor. Eğer bu dosyaları birleştirip tek bir dosya haline getirirseniz sitenin yüklenmesi için gereken istekleri azaltabilirsiniz.

Birleştirme işlemini nasıl yapacağınız konusunda Niels Leenheer’in makalesini inceleyebilirsiniz. Wordpress kullanıcıları Minify eklentisini buradan indirerek CSS ile JavaScript dosyalarını kolayca birleştirebilirler. İşlem sonucunda (siteden siteye değişmek kaydıyla) sitenizin tepki süresinde %70’lere varabilen bir azalma gözlemleyebilirsiniz.

CSS Sprite Yöntemini Kullanın

CSS Sprite birden fazla resmin birleştirilerek tek bir resim haline getirilmesi işlemidir. Birden fazla görseli birleştirmek her görsel için gereken HTTP isteklerini azaltmamızı sağlıyor. Doğru resmi göstermek içinse background-position CSS parametresi kullanacağız.

Örneğin aşağıda birbirinden ayrı iki ikon olmasına karşın gerçekte sunucu isteklerini azaltmak için birden fazla ikon tek bir büyük resimde birleştirilmiş ve CSS aracılığıyla bu büyük resmin uygun parçaları iki ayrı ikon olarak gösteriliyor.

CSS Sprite Generator ile elle bu işlemi yapmanıza gerek kalmadan görsellerinizi birleştirip CSS kodunuzu kolayca alabilirsiniz.

Üçüncü Parti Siteler Kullanın

RSS beslemeleriniz için Feedburner’ı, resimlerinizi yüklemek için Flickr’ı veya Amazon S3’ü kullanabilirsiniz. Böylece sitenizde resimlerinizi ve beslemelerinizi sitenizde barındırmazsınız. Bu yol yalnızca maliyet anlamında tasarruflu bir yol olmayıp aynı zamanda sitenizin tepki süresini büyük ölçüde artıracak bir yöntem.

Sunucunuzun Performansını Ölçün

Sunucu tüm bu HTTP istek ve cevaplarını doğru kişilere iletme görevini yüklenir. Eğer sunucunuz iyi çalışmıyorsa tüm bu anlattığımız optimizasyon çalışmalarından yeterli verimi alamazsınız. Bu nedenle devamlı olarak sunucunuzu performans sorunlarına karşı test etmelisiniz. Eğer kök yetkisine sahipseniz ve sunucuya bir şeyler yükleyebiliyorsanız, Apache web sunucusu test yazılımı olan ab’yi ya da Httperf’i sunucunuzun performansını test etmek amacıyla kullanabilirsiniz. Eğer sunucu üzerinde herhangi bir yetkiniz yoksa Fiddlerveya HTTPWatch gibi araçlar işinizi görecektir.

Ayrıca, sunucunuzda değişiklik yapmadan önce ve yaptıktan sonra yapılacak testler, yaptığınız değişikliklerin verimliliğe olan etkisi hakkında size bilgi verir.

Yazının başında da dediğimiz gibi sitelerinizin performansını artırmak için onlarca yol mevcut. Bahsettiğimiz yollar dışında bildiğiniz başka yöntemler ya da eklemek istedikleriniz varsa yorum yaparak bunları paylaşabilirsiniz.