WEB Hizmetlerini Hızlandırmanın İpuçları

Web sitenizi ziyaret eden kullanıcıların sitenize hızlı bir şekilde erişmesini istiyorsanız aşağıda vereceğim tavsiyelere uymanız yeterli olacaktır.

HTTP isteklerini düşürün
Web servislerinde son kullanıcılara verilen yanıtlar için geçen sürenin %80 lik kısmı front-end tarafında geçmektedir. Bu sürenin büyük bir kısmı sayfa içerisindeki resim, stylesheet, script ve flash objeleri gibi bileşenleri indirmek için kullanılmaktadır. Bu bileşenlerin sayısını azaltmak bir sayfanın oluşumu için gerçekleşecek http isteklerini de azaltacaktır.

Bunun için çeşitli yöntemler aşağıda bulunmaktadır;Image Maps: Birden fazla resmi tek bir resim içerisinde birleştirmektir.CSS Sprites: Yine tek resim içerisine birden fazla resmi birleştirerek html kodları içerisinde background-image background-position gibi css özellikleri kullanarak resmi konumlandırmaktır.

Inline Images: resim verisini sayfanın içerisine gömmektir. Bu html dökümanının boyutunu büyütmektedir.

Combined Files: Kullanılan bütün scriptleri tek bir script içerisinde birleştirmektir. Aynı yöntem stylesheet’ler için de kullanılabilir. Bu yöntem de http isteklerinin sayısını azaltacaktır.

Yukarıda bahsettiğimiz yöntemler http isteklerinin sayısını azaltmak için kullanılan yöntemlerdir. Gün içerisinde web sitesini ziyaret edenlerin %40 ila %60 lık kısmı o siteyi cache’lememiş kullanıcılardan oluşmaktadır. Dolayısıyla ilk defa ziyaret edenlere sitemizi hızlı bir şekilde sunmak kullanıcı üzerinde olumlu bir etki oluşturacaktır.

İçerik Dağıtım Ağı (CDN) kullanın

Site içeriğini farklı coğrafik yerlerde bulunan serverlar üzerine dağıtmak kullanıcıların sayfaları daha hızlı bir biçimde yükleyebilmesini sağlayacaktır. CDN sayesinde istekte bulunan kullanıcıya fiziki olarak en yakın yerde bulunan server daha hızlı yanıt verecektir. Ayrıca yük serverlar üzerinde dağılacağından sunucu tarafında performans darboğazı ortadan kalkacaktır.

Sayfalarınıza “Expires:”  Header’ı ekleyin
Internet tarayıcıları (ve proxy’ler) http isteklerini azaltmak ve sayfaları daha hızlı yüklemek için cache kullanırlar. Bir web sunucusu “Expires” başlığı ile kullanıcının internet tarayıcısına bir bileşenin cache içerisinde ne kadar süreyle tutulacağını söyleyebilir.

ExpiresDefault “access plus 10 years”

Yukarıdaki örnek kullanıcının internet tarayıcısına gönderilen içeriğin 10 yıl süre ile cache içerisinde tutulması gerektiğini söyler. Bunu yaparken bileşene ait dosya isminde versiyon bilgisini tutmak faydalı olacaktır (örneğin: zaman_1_0_5.js).

İçeriği Sıkıştırın

Kullanıcıya gönderilen içeriğin sıkıştırılması yanıt süresini düşürerek sayfaların dah hızlı bir biçimde açılmasını sağlayacaktır. Günümüzde kullanılan en etkili yöntem Gzip ile sıkıştırma yöntemidir.

Content-Encoding: gzip

Yukarıdaki başlık ile web sunucusu web kullanıcına içeriği gzip ile sıkıştırdığını söylemektedir.

Stylesheet’leri en üste yerleştirin

İnternet tarayıcılarının birçoğu “progressive rendering “yaparak sayfayı oluşturmaktadır. Tarayıcılar sayfa içerisinde bir stil değişikliği olduğunda sayfayı yenibaştan oluşturmamak için rendering işlemini durdurmakta dolayısıyla kullanıcıda içi boş, beyaz bir sayfa görüntülenmektedir. Bu sebeple rendering işleminin durmaması için stylesheet bilgileri html dökümanı içerisinde “HEAD” kısmına konmalıdır.

Script’leri en alta yerleştirin

Önceki kuralda belirtilen “progressive rendering” işlemi sebebiyle scriptler dökümanın en alt kısmına konmalıdır. Bir diğer sebep ise paralel içerik indirme işlemidir. Bu yöntem ile tarayıcılar resim gibi objeleri aynı anda birden fazla kanal ile indirerek sayfanın yüklenmesini hızlandırmaktadır. Scriptler bu işlemi engellediği için sayfanın en alt kısmına konulmalıdır.

CSS expression’larından sakının

Bu expressionlar CSS özelliklerini dinamik olarak değiştirmemizi sağlamaktadır. CSS özelliklerinin statik olması kullanıcı tarafında performansı artıracaktır. Aşağıdaki CSS expression sayfanın zemin rengini saat bilgisine göre değiştirmeyi sağlamaktadır.

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );

JavaScript ve CSS’yi dışarıda tutun

JavaScript ve CSS kodlarının harici dosyalar üzerinde tutulması tarayıcıların cache tutma özelliğinden dolayı sayfaların yüklenme hızını artıracaktır.

DNS çözümleme süresini düşürün

JavaScript’i küçültün

Scriptler içerisindeki tüm “comment” leri, bunun yanında gereksiz boşlukların (space, newline, tab gibi) çıkarılmasıyla daha küçük boyuttaki scriptler daha çabuk yüklenecektir. “Obfuscation” yöntemi ile gereksiz kod parçaları çıkarılabilmekte ayrıca fonksiyonlar, değişken isimleri daha küçük stringler haline getirilebilmektedir. Obfuscation işlemini yapan çeşitli yazılımlar bulunmaktadır.

Yönlendirme işleminden sakının

Yönlendirme işlemi ile sayfanın içine kullanıcının başka bir sayfaya yönlenmesini sağlayan kod girilmektedir. Aşağıdaki örnekte yönlendirme örneği bulunmaktadır;

http/1.1 301 Moved Permanently
Location:  http://mesela.com/yeniurl
Content-Type:  text/html

Kod içerisinde yönlendirme yapmak yerine DNS üzerinden CNAME tanımlamak performansı artıracaktır.

Duplicate Script’leri kaldırın

Tek sayfa içerisinde aynı scriptin birden fazla geçmesi performansı düşürmektedir. Bunun yerine html kodu içerisinde “SCRIPT” etiketi koyarak dışarıdan scriptler dahil edilmelidir.  Örnek aşağıda bulunmaktadır;

ETag kullanın

“Entity Tag” web sunucusundaki sayfa ile kullanıcı cache’inde bulunan sayfanın aynı olup olmadığını belirleyen mekanizmadır. Tarayıcılar bu işi “last-modified date” (en son değiştirme tarihi) parametresini kullanarak yaparlar. ETag kullanmak daha uygun bir yöntem olacaktır.

http/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195

Ajax’ın Cache kullanımını etkinleştirin

Ajax’ın performansını artırmanın en iyi yolu Ajax’ın kullanıcılara verdiği yanıtlarda cache kullanmasını sağlamaktır.